Format popover

src/application.vala

@@ -274,7 +274,9 @@ namespace Peek {
 
     private void load_stylesheets () {
       load_stylesheet_from_uri ("resource:///com/uploadedlobster/peek/css/peek.css");
-
+      if (DesktopIntegration.get_theme_name () == "Ambiance") {
+        load_stylesheet_from_uri ("resource:///com/uploadedlobster/peek/css/ambiance.css");
+      }
       if (DesktopIntegration.is_unity ()) {
         load_stylesheet_from_uri ("resource:///com/uploadedlobster/peek/css/unity.css");
       }

src/desktop-integration.vala

@@ -172,6 +172,12 @@ namespace Peek {
       return desktop.contains (text);
     }
 
+    public static string get_theme_name () {
+      var theme = new GLib.Settings ("org.gnome.desktop.interface"); //grab the users' settings
+      var theme_name = theme.get_string ("gtk-theme"); //find the users' theme
+      return theme_name;
+    }
+
 #if ! DISABLE_OPEN_FILE_MANAGER
     private static bool file_manager_highlights_file (AppInfo app_info) {
       var exe = app_info.get_executable ();

src/ui/application-window.vala

@@ -42,6 +42,12 @@ namespace Peek.Ui {
     [GtkChild]
     private Button stop_button;
 
+    [GtkChild]
+    private Popover pop_format;
+
+    [GtkChild]
+    private MenuButton pop_format_menu;
+
     [GtkChild]
     private Label size_indicator;
 
@@ -156,8 +162,13 @@ namespace Peek.Ui {
       // Make sure the close button is on the left if desktop environment
       // is configured that way.
       this.set_close_button_position ();
+
+      // Set record button label
+      // Grab the current format and set the record label with the selected format
+      select_format ("%s".printf(this.recorder.config.output_format)); 
     }
 
+
     public void hide_headerbar () {
       this.get_style_context ().add_class ("headerbar-hidden");
       this.headerbar.hide ();
@@ -213,6 +224,24 @@ namespace Peek.Ui {
       return false;
     }
 
+    //set format
+    private string get_format_name (string format) {
+      switch (format) {
+        case OUTPUT_FORMAT_APNG: return _("APNG");
+        case OUTPUT_FORMAT_GIF: return _("GIF");
+        case OUTPUT_FORMAT_MP4: return _("MP4");
+        case OUTPUT_FORMAT_WEBM: return _("WebM");
+        default: return "";
+      }
+    }
+
+    private void select_format (string format) {
+      recorder.config.output_format = format;
+      var format_name = get_format_name (format);
+      record_button.set_label (_("Record as %s").printf (format_name));
+      pop_format.hide ();
+    }
+
     [GtkCallback]
     public void on_window_screen_changed (Gdk.Screen? previous_screen) {
       var screen = this.get_screen ();
@@ -284,6 +313,23 @@ namespace Peek.Ui {
       }
     }
 
+    [GtkCallback]
+    private void on_gif_button_clicked (Button source) {
+      select_format("gif");
+    }
+    [GtkCallback]
+    private void on_apng_button_clicked (Button source) {
+      select_format("apng");
+    }
+    [GtkCallback]
+    private void on_webm_button_clicked (Button source) {
+      select_format("webm");
+    }
+    [GtkCallback]
+    private void on_mp4_button_clicked (Button source) {
+      select_format("mp4");
+    }
+
     [GtkCallback]
     private void on_record_button_clicked (Button source) {
       prepare_start_recording ();
@@ -368,6 +414,7 @@ namespace Peek.Ui {
       if (!is_recording) {
         is_recording = true;
         size_indicator.opacity = 0.0;
+        pop_format_menu.hide();
         record_button.hide ();
         if (get_window_width () >= SMALL_WINDOW_SIZE) {
           stop_button.set_label (stop_button_label);
@@ -386,6 +433,7 @@ namespace Peek.Ui {
       is_recording = false;
       is_postprocessing = false;
       stop_button.hide ();
+      pop_format_menu.show();
       record_button.show ();
       unfreeze_window_size ();
 
@@ -410,10 +458,22 @@ namespace Peek.Ui {
 
     private void update_input_shape () {
       // Set an input shape so that the recording view is not clickable
+
+
       var window_region = create_region_from_widget (recording_view.get_toplevel ());
       var recording_view_region = create_region_from_widget (recording_view);
       window_region.subtract (recording_view_region);
 
+      //popover menu
+      if (pop_format.visible) {
+        var pop_style = pop_format.get_style_context();
+        if (DesktopIntegration.get_theme_name () == "Ambiance") {
+          pop_style.add_class(Gtk.STYLE_CLASS_TITLEBAR);
+        }
+        var pop_format_region = create_region_from_widget (pop_format);
+        window_region.union (pop_format_region);
+      }
+
       // The fallback app menu overlaps the recording area
       var fallback_app_menu = get_fallback_app_menu ();
       if (fallback_app_menu != null && fallback_app_menu.visible) {

ui/application-window.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.20.0
+<!-- Generated with glade 3.20.1 
 
 Copyright (C) Philipp Wolfer <ph.wolfer@gmail.com>
 
@@ -31,7 +31,7 @@ Author: Philipp Wolfer <ph.wolfer@gmail.com>
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="tooltip_text" translatable="yes">Start recording</property>
-    <property name="icon_name">media-playback-start-symbolic</property>
+    <property name="icon_name">media-record-symbolic</property>
   </object>
   <object class="GtkImage" id="icon_stop_button">
     <property name="visible">True</property>
@@ -48,8 +48,8 @@ Author: Philipp Wolfer <ph.wolfer@gmail.com>
     <property name="default_height">250</property>
     <property name="icon_name">com.uploadedlobster.peek</property>
     <property name="show_menubar">False</property>
-    <signal name="screen-changed" handler="on_window_screen_changed" swapped="no"/>
     <signal name="draw" handler="on_window_draw" swapped="no"/>
+    <signal name="screen-changed" handler="on_window_screen_changed" swapped="no"/>
     <child>
       <object class="GtkBox" id="content_area">
         <property name="visible">True</property>
@@ -124,13 +124,15 @@ Author: Philipp Wolfer <ph.wolfer@gmail.com>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="homogeneous">True</property>
+            <property name="baseline_position">bottom</property>
             <property name="layout_style">start</property>
             <child>
               <object class="GtkButton" id="record_button">
                 <property name="label" translatable="yes">_Record</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
+                <property name="margin_left">45</property>
                 <property name="image">icon_record_button</property>
                 <property name="relief">half</property>
                 <property name="use_underline">True</property>
@@ -179,9 +181,106 @@ Author: Philipp Wolfer <ph.wolfer@gmail.com>
                 <property name="non_homogeneous">True</property>
               </packing>
             </child>
+            <child>
+              <object class="GtkMenuButton" id="pop_format_menu">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="margin_right">45</property>
+                <property name="popover">pop_format</property>
+                <child>
+                  <placeholder/>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
           </object>
         </child>
       </object>
     </child>
   </template>
+  <object class="GtkPopover" id="pop_format">
+    <property name="can_focus">False</property>
+    <property name="relative_to">record_button</property>
+    <child>
+      <object class="GtkButtonBox">
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="orientation">vertical</property>
+        <property name="layout_style">start</property>
+        <child>
+          <object class="GtkButton" id="gif_button">
+            <property name="label" translatable="yes">GIF</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <signal name="clicked" handler="on_gif_button_clicked" swapped="no"/>
+            <style>
+              <class name="format_button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="apng_button">
+            <property name="label" translatable="yes">APNG</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <signal name="clicked" handler="on_apng_button_clicked" swapped="no"/>
+            <style>
+              <class name="format_button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="webm_button">
+            <property name="label" translatable="yes">WebM</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <signal name="clicked" handler="on_webm_button_clicked" swapped="no"/>
+            <style>
+              <class name="format_button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="mp4_button">
+            <property name="label" translatable="yes">MP4</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <signal name="clicked" handler="on_mp4_button_clicked" swapped="no"/>
+            <style>
+              <class name="format_button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </object>
 </interface>

ui/css/ambiance.css

@@ -0,0 +1,9 @@
+.peek-recording-view-overlay {
+  opacity: 0.8;
+  background-color: rgb(40, 44, 52);
+  color: white;
+}
+
+.format_button:hover{
+  background-color:#e55d2f;
+}

ui/peek.gresource.xml

@@ -10,5 +10,6 @@
     <!-- Stylesheets -->
     <file>css/peek.css</file>
     <file>css/unity.css</file>
+    <file>css/ambiance.css</file>
   </gresource>
 </gresources>