[gnome-screenshot/wip/christopherdavis/screenshot-redesign: 1/3] screenshot-dialog: Redesign "Save Screenshot" dialog

[Alexander Mikhaylenko <alexm src gnome org>]

commit a3df158df1d8c951fb2a16cc245e681360052802
Author: Christopher Davis <brainblasted disroot org>
Date:   Thu Jan 3 20:30:28 2019 -0500

    screenshot-dialog: Redesign "Save Screenshot" dialog
    
    This has been changed to look like a normal dialog, with
    the preview image being above the name and folder.
    
    Make preview most robust so that it can scale properly and not be
    blurry on hidpi.

 src/screenshot-dialog.c  |  67 +++++++++++-----------
 src/screenshot-dialog.ui | 141 +++++++++++++++--------------------------------
 2 files changed, 76 insertions(+), 132 deletions(-)
---
diff --git a/src/screenshot-dialog.c b/src/screenshot-dialog.c
index 40e560b..4d6383c 100644
--- a/src/screenshot-dialog.c
+++ b/src/screenshot-dialog.c
@@ -43,30 +43,49 @@ on_preview_draw (GtkWidget      *drawing_area,
                  gpointer        data)
 {
   ScreenshotDialog *dialog = data;
-  GtkStyleContext *context;
-  int width, height;
+  gint scale, width, height, image_width, image_height, x, y;
 
-  width = gtk_widget_get_allocated_width (drawing_area);
-  height = gtk_widget_get_allocated_height (drawing_area);
+  scale = gtk_widget_get_scale_factor (drawing_area);
+  width = gtk_widget_get_allocated_width (drawing_area) * scale;
+  height = gtk_widget_get_allocated_height (drawing_area) * scale;
+
+  image_width = gdk_pixbuf_get_width (dialog->screenshot);
+  image_height = gdk_pixbuf_get_height (dialog->screenshot);
+
+  if (image_width > width)
+    {
+      image_height = (gdouble) image_height / image_width * width;
+      image_width = width;
+
+    }
+
+  if (image_height > height)
+    {
+      image_width = (gdouble) image_width / image_height * height;
+      image_height = height;
+    }
+
+  x = (width - image_width) / 2;
+  y = (height - image_height) / 2;
 
   if (!dialog->preview_image ||
-      gdk_pixbuf_get_width (dialog->preview_image) != width ||
-      gdk_pixbuf_get_height (dialog->preview_image) != height)
+      gdk_pixbuf_get_width (dialog->preview_image) != image_width ||
+      gdk_pixbuf_get_height (dialog->preview_image) != image_height)
     {
       g_clear_object (&dialog->preview_image);
       dialog->preview_image = gdk_pixbuf_scale_simple (dialog->screenshot,
-                                                       width,
-                                                       height,
+                                                       image_width,
+                                                       image_height,
                                                        GDK_INTERP_BILINEAR);
     }
 
-  context = gtk_widget_get_style_context (drawing_area);
-  gtk_style_context_save (context);
+  cairo_save (cr);
 
-  gtk_style_context_set_state (context, gtk_widget_get_state_flags (drawing_area));
-  gtk_render_icon (context, cr, dialog->preview_image, 0, 0);
+  cairo_scale (cr, 1.0 / scale, 1.0 / scale);
+  gdk_cairo_set_source_pixbuf (cr, dialog->preview_image, x, y);
+  cairo_paint (cr);
 
-  gtk_style_context_restore (context);
+  cairo_restore (cr);
 }
 
 static gboolean
@@ -114,7 +133,7 @@ drag_begin (GtkWidget        *widget,
             GdkDragContext   *context,
             ScreenshotDialog *dialog)
 {
-  gtk_drag_set_icon_pixbuf (context, dialog->preview_image,
+  gtk_drag_set_icon_pixbuf (context, dialog->screenshot,
                             dialog->drag_x, dialog->drag_y);
 }
 
@@ -157,29 +176,9 @@ static void
 setup_drawing_area (ScreenshotDialog *dialog, GtkBuilder *ui)
 {
   GtkWidget *preview_darea;
-  GtkWidget *aspect_frame;
-  gint width, height, scale_factor;
 
-  aspect_frame = GTK_WIDGET (gtk_builder_get_object (ui, "aspect_frame"));
   preview_darea = GTK_WIDGET (gtk_builder_get_object (ui, "preview_darea"));
 
-  width = gdk_pixbuf_get_width (dialog->screenshot);
-  height = gdk_pixbuf_get_height (dialog->screenshot);
-  scale_factor = gtk_widget_get_scale_factor (dialog->dialog);
-
-  width /= 5 * scale_factor;
-  height /= 5 * scale_factor;
-
-  gtk_widget_set_size_request (preview_darea, width, height);
-  gtk_aspect_frame_set (GTK_ASPECT_FRAME (aspect_frame), 0.0, 0.5,
-                        (gfloat) width / (gfloat) height,
-                        FALSE);
-
-  if (screenshot_config->take_window_shot)
-    gtk_frame_set_shadow_type (GTK_FRAME (aspect_frame), GTK_SHADOW_NONE);
-  else
-    gtk_frame_set_shadow_type (GTK_FRAME (aspect_frame), GTK_SHADOW_IN);
-
   g_signal_connect (preview_darea, "draw", G_CALLBACK (on_preview_draw), dialog);
   g_signal_connect (preview_darea, "button_press_event", G_CALLBACK (on_preview_button_press_event), dialog);
   g_signal_connect (preview_darea, "button_release_event", G_CALLBACK (on_preview_button_release_event), 
dialog);
diff --git a/src/screenshot-dialog.ui b/src/screenshot-dialog.ui
index 3d1d5f5..455ca30 100644
--- a/src/screenshot-dialog.ui
+++ b/src/screenshot-dialog.ui
@@ -1,201 +1,146 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
 <interface>
-  <!-- interface-requires gtk+ 3.8 -->
+  <requires lib="gtk+" version="3.22"/>
   <object class="GtkApplicationWindow" id="toplevel">
     <property name="can_focus">False</property>
-    <property name="border_width">5</property>
-    <property name="title" translatable="yes">Save Screenshot</property>
-    <property name="resizable">False</property>
     <property name="window_position">center</property>
-    <property name="modal">True</property>
     <child type="titlebar">
-      <object class="GtkHeaderBar" id="headerbar1">
+      <object class="GtkHeaderBar">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="show_close_button">True</property>
         <child>
           <object class="GtkButton" id="back_button">
-            <property name="tooltip_text" translatable="yes">Back</property>
+            <property name="label" translatable="yes">_Cancel</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
             <property name="use_underline">True</property>
-            <style>
-              <class name="image-button"/>
-            </style>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon_name">go-previous-symbolic</property>
-              </object>
-            </child>
           </object>
-          <packing>
-            <property name="pack-type">start</property>
-          </packing>
         </child>
         <child>
-          <object class="GtkButton" id="copy_button">
-            <property name="label" translatable="yes">C_opy to Clipboard</property>
+          <object class="GtkButton" id="save_button">
+            <property name="label" translatable="yes">_Save</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="can_default">True</property>
+            <property name="has_default">True</property>
             <property name="receives_default">True</property>
             <property name="use_underline">True</property>
+            <style>
+              <class name="suggested-action"/>
+            </style>
           </object>
           <packing>
-            <property name="pack-type">start</property>
+            <property name="pack_type">end</property>
+            <property name="position">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkButton" id="save_button">
-            <property name="label" translatable="yes">_Save</property>
+          <object class="GtkButton" id="copy_button">
+            <property name="label" translatable="yes">C_opy to Clipboard</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
-            <property name="can_default">True</property>
-            <property name="has_default">True</property>
             <property name="receives_default">True</property>
             <property name="use_underline">True</property>
-            <style>
-              <class name="suggested-action"/>
-            </style>
           </object>
           <packing>
-            <property name="pack-type">end</property>
+            <property name="pack_type">end</property>
+            <property name="position">2</property>
           </packing>
         </child>
       </object>
     </child>
     <child>
-      <object class="GtkGrid" id="grid1">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin_left">5</property>
-        <property name="margin_right">5</property>
-        <property name="margin_top">5</property>
-        <property name="margin_bottom">5</property>
-        <property name="row_spacing">8</property>
-        <property name="column_spacing">8</property>
+        <property name="halign">fill</property>
+        <property name="valign">fill</property>
+        <property name="expand">True</property>
+        <property name="margin">24</property>
+        <property name="orientation">vertical</property>
+        <property name="spacing">24</property>
         <child>
-          <object class="GtkAlignment" id="alignment1">
+           <object class="GtkDrawingArea" id="preview_darea">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="vexpand">True</property>
-            <child>
-              <object class="GtkAspectFrame" id="aspect_frame">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="label_xalign">0</property>
-                <property name="shadow_type">none</property>
-                <child>
-                  <object class="GtkDrawingArea" id="preview_darea">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                  </object>
-                </child>
-              </object>
-            </child>
+            <property name="width-request">256</property>
+            <property name="height-request">256</property>
+            <property name="expand">True</property>
           </object>
           <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
-            <property name="width">1</property>
-            <property name="height">2</property>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
           </packing>
         </child>
         <child>
-          <object class="GtkGrid" id="grid2">
+          <object class="GtkGrid">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="row_spacing">8</property>
-            <property name="column_spacing">8</property>
-            <property name="valign">start</property>
+            <property name="halign">center</property>
+            <property name="row_spacing">6</property>
+            <property name="column_spacing">12</property>
             <child>
-              <object class="GtkLabel" id="label1">
+              <object class="GtkLabel">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="halign">end</property>
-                <property name="valign">center</property>
-                <property name="label" translatable="yes">_Name</property>
+                <property name="label" translatable="yes">_Name:</property>
                 <property name="use_underline">True</property>
                 <property name="mnemonic_widget">filename_entry</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
               </object>
               <packing>
                 <property name="left_attach">0</property>
                 <property name="top_attach">0</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
               </packing>
             </child>
             <child>
-              <object class="GtkLabel" id="label2">
+              <object class="GtkLabel">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="halign">end</property>
-                <property name="valign">center</property>
-                <property name="label" translatable="yes">Save in _folder</property>
+                <property name="label" translatable="yes">_Folder:</property>
                 <property name="use_underline">True</property>
                 <property name="mnemonic_widget">save_widget</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
               </object>
               <packing>
                 <property name="left_attach">0</property>
                 <property name="top_attach">1</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
               </packing>
             </child>
             <child>
               <object class="GtkEntry" id="filename_entry">
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
-                <property name="valign">center</property>
-                <property name="activates_default">True</property>
-                <property name="width_chars">32</property>
+                <property name="width_chars">35</property>
               </object>
               <packing>
                 <property name="left_attach">1</property>
                 <property name="top_attach">0</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
               </packing>
             </child>
             <child>
               <object class="GtkFileChooserButton" id="save_widget">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="valign">center</property>
-                <property name="vexpand">True</property>
                 <property name="action">select-folder</property>
                 <property name="local_only">False</property>
               </object>
               <packing>
                 <property name="left_attach">1</property>
                 <property name="top_attach">1</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
               </packing>
             </child>
           </object>
           <packing>
-            <property name="left_attach">1</property>
-            <property name="top_attach">0</property>
-            <property name="width">2</property>
-            <property name="height">1</property>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>
     </child>
   </object>
-  <object class="GtkSizeGroup" id="header_bar_size_group">
-    <property name="mode">horizontal</property>
-    <widgets>
-      <widget name="copy_button"/>
-      <widget name="save_button"/>
-    </widgets>
-  </object>
 </interface>