From e71b54bafcbfffcb352600ebff4be8776de171f9 Mon Sep 17 00:00:00 2001
From: Ondrej Holy <oholy@redhat.com>
Date: Fri, 30 Jul 2021 11:01:42 +0200
Subject: [PATCH] compress-dialog: Update dialog design

Let's update the Compress dialog design as per the mockup for the
encrypted archives support. The most visible change is `GtkPopover`
with `HdyActionRow` rows for the format selection instead of the
`GtkRadioButton` buttons.

https://gitlab.gnome.org/GNOME/nautilus/-/issues/822
---
 src/nautilus-compress-dialog-controller.c    | 132 ++++++-----
 src/resources/ui/nautilus-compress-dialog.ui | 229 ++++++++++---------
 2 files changed, 199 insertions(+), 162 deletions(-)

diff --git a/src/nautilus-compress-dialog-controller.c b/src/nautilus-compress-dialog-controller.c
index d8aa792ee..154573c0f 100644
--- a/src/nautilus-compress-dialog-controller.c
+++ b/src/nautilus-compress-dialog-controller.c
@@ -19,6 +19,7 @@
 
 #include <glib/gi18n.h>
 #include <gnome-autoar/gnome-autoar.h>
+#include <libhandy-1/handy.h>
 
 #include <eel/eel-vfs-extensions.h>
 
@@ -31,11 +32,15 @@ struct _NautilusCompressDialogController
     NautilusFileNameWidgetController parent_instance;
 
     GtkWidget *compress_dialog;
-    GtkWidget *description_stack;
     GtkWidget *name_entry;
-    GtkWidget *zip_radio_button;
-    GtkWidget *tar_xz_radio_button;
-    GtkWidget *seven_zip_radio_button;
+    GtkWidget *extension_stack;
+    GtkWidget *zip_label;
+    GtkWidget *tar_xz_label;
+    GtkWidget *seven_zip_label;
+    GtkWidget *extension_popover;
+    GtkWidget *zip_checkmark;
+    GtkWidget *tar_xz_checkmark;
+    GtkWidget *seven_zip_checkmark;
 
     const char *extension;
 
@@ -135,32 +140,32 @@ update_selected_format (NautilusCompressDialogController *self,
                         NautilusCompressionFormat         format)
 {
     const char *extension;
-    const char *description_label_name;
-    GtkWidget *active_button;
+    GtkWidget *active_label;
+    GtkWidget *active_checkmark;
 
     switch (format)
     {
         case NAUTILUS_COMPRESSION_ZIP:
         {
             extension = ".zip";
-            description_label_name = "zip-description-label";
-            active_button = self->zip_radio_button;
+            active_label = self->zip_label;
+            active_checkmark = self->zip_checkmark;
         }
         break;
 
         case NAUTILUS_COMPRESSION_TAR_XZ:
         {
             extension = ".tar.xz";
-            description_label_name = "tar-xz-description-label";
-            active_button = self->tar_xz_radio_button;
+            active_label = self->tar_xz_label;
+            active_checkmark = self->tar_xz_checkmark;
         }
         break;
 
         case NAUTILUS_COMPRESSION_7ZIP:
         {
             extension = ".7z";
-            description_label_name = "seven-zip-description-label";
-            active_button = self->seven_zip_radio_button;
+            active_label = self->seven_zip_label;
+            active_checkmark = self->seven_zip_checkmark;
         }
         break;
 
@@ -173,11 +178,21 @@ update_selected_format (NautilusCompressDialogController *self,
 
     self->extension = extension;
 
-    gtk_stack_set_visible_child_name (GTK_STACK (self->description_stack),
-                                      description_label_name);
-
-    gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (active_button),
-                                  TRUE);
+    gtk_stack_set_visible_child (GTK_STACK (self->extension_stack),
+                                 active_label);
+
+    gtk_image_set_from_icon_name (GTK_IMAGE (self->zip_checkmark),
+                                  NULL,
+                                  GTK_ICON_SIZE_BUTTON);
+    gtk_image_set_from_icon_name (GTK_IMAGE (self->tar_xz_checkmark),
+                                  NULL,
+                                  GTK_ICON_SIZE_BUTTON);
+    gtk_image_set_from_icon_name (GTK_IMAGE (self->seven_zip_checkmark),
+                                  NULL,
+                                  GTK_ICON_SIZE_BUTTON);
+    gtk_image_set_from_icon_name (GTK_IMAGE (active_checkmark),
+                                  "object-select-symbolic",
+                                  GTK_ICON_SIZE_BUTTON);
 
     g_settings_set_enum (nautilus_compression_preferences,
                          NAUTILUS_PREFERENCES_DEFAULT_COMPRESSION_FORMAT,
@@ -189,52 +204,40 @@ update_selected_format (NautilusCompressDialogController *self,
 }
 
 static void
-zip_radio_button_on_toggled (GtkToggleButton *toggle_button,
-                             gpointer         user_data)
+zip_row_on_activated (HdyActionRow *row,
+                      gpointer      user_data)
 {
     NautilusCompressDialogController *controller;
 
     controller = NAUTILUS_COMPRESS_DIALOG_CONTROLLER (user_data);
 
-    if (!gtk_toggle_button_get_active (toggle_button))
-    {
-        return;
-    }
-
+    gtk_popover_popdown (GTK_POPOVER (controller->extension_popover));
     update_selected_format (controller,
                             NAUTILUS_COMPRESSION_ZIP);
 }
 
 static void
-tar_xz_radio_button_on_toggled (GtkToggleButton *toggle_button,
-                                gpointer         user_data)
+tar_xz_row_on_activated (HdyActionRow *row,
+                         gpointer      user_data)
 {
     NautilusCompressDialogController *controller;
 
     controller = NAUTILUS_COMPRESS_DIALOG_CONTROLLER (user_data);
 
-    if (!gtk_toggle_button_get_active (toggle_button))
-    {
-        return;
-    }
-
+    gtk_popover_popdown (GTK_POPOVER (controller->extension_popover));
     update_selected_format (controller,
                             NAUTILUS_COMPRESSION_TAR_XZ);
 }
 
 static void
-seven_zip_radio_button_on_toggled (GtkToggleButton *toggle_button,
-                                   gpointer         user_data)
+seven_zip_row_on_activated (HdyActionRow *row,
+                            gpointer      user_data)
 {
     NautilusCompressDialogController *controller;
 
     controller = NAUTILUS_COMPRESS_DIALOG_CONTROLLER (user_data);
 
-    if (!gtk_toggle_button_get_active (toggle_button))
-    {
-        return;
-    }
-
+    gtk_popover_popdown (GTK_POPOVER (controller->extension_popover));
     update_selected_format (controller,
                             NAUTILUS_COMPRESSION_7ZIP);
 }
@@ -251,10 +254,14 @@ nautilus_compress_dialog_controller_new (GtkWindow         *parent_window,
     GtkWidget *error_label;
     GtkWidget *name_entry;
     GtkWidget *activate_button;
-    GtkWidget *description_stack;
-    GtkWidget *zip_radio_button;
-    GtkWidget *tar_xz_radio_button;
-    GtkWidget *seven_zip_radio_button;
+    GtkWidget *extension_stack;
+    GtkWidget *zip_label;
+    GtkWidget *tar_xz_label;
+    GtkWidget *seven_zip_label;
+    GtkWidget *extension_popover;
+    GtkWidget *zip_checkmark;
+    GtkWidget *tar_xz_checkmark;
+    GtkWidget *seven_zip_checkmark;
     NautilusCompressionFormat format;
 
     builder = gtk_builder_new_from_resource ("/org/gnome/nautilus/ui/nautilus-compress-dialog.ui");
@@ -263,10 +270,14 @@ nautilus_compress_dialog_controller_new (GtkWindow         *parent_window,
     error_label = GTK_WIDGET (gtk_builder_get_object (builder, "error_label"));
     name_entry = GTK_WIDGET (gtk_builder_get_object (builder, "name_entry"));
     activate_button = GTK_WIDGET (gtk_builder_get_object (builder, "activate_button"));
-    zip_radio_button = GTK_WIDGET (gtk_builder_get_object (builder, "zip_radio_button"));
-    tar_xz_radio_button = GTK_WIDGET (gtk_builder_get_object (builder, "tar_xz_radio_button"));
-    seven_zip_radio_button = GTK_WIDGET (gtk_builder_get_object (builder, "seven_zip_radio_button"));
-    description_stack = GTK_WIDGET (gtk_builder_get_object (builder, "description_stack"));
+    extension_stack = GTK_WIDGET (gtk_builder_get_object (builder, "extension_stack"));
+    zip_label = GTK_WIDGET (gtk_builder_get_object (builder, "zip_label"));
+    tar_xz_label = GTK_WIDGET (gtk_builder_get_object (builder, "tar_xz_label"));
+    seven_zip_label = GTK_WIDGET (gtk_builder_get_object (builder, "seven_zip_label"));
+    extension_popover = GTK_WIDGET (gtk_builder_get_object (builder, "extension_popover"));
+    zip_checkmark = GTK_WIDGET (gtk_builder_get_object (builder, "zip_checkmark"));
+    tar_xz_checkmark = GTK_WIDGET (gtk_builder_get_object (builder, "tar_xz_checkmark"));
+    seven_zip_checkmark = GTK_WIDGET (gtk_builder_get_object (builder, "seven_zip_checkmark"));
 
     gtk_window_set_transient_for (GTK_WINDOW (compress_dialog),
                                   parent_window);
@@ -279,10 +290,15 @@ nautilus_compress_dialog_controller_new (GtkWindow         *parent_window,
                          "containing-directory", destination_directory, NULL);
 
     self->compress_dialog = compress_dialog;
-    self->zip_radio_button = zip_radio_button;
-    self->tar_xz_radio_button = tar_xz_radio_button;
-    self->seven_zip_radio_button = seven_zip_radio_button;
-    self->description_stack = description_stack;
+    self->extension_stack = extension_stack;
+    self->zip_label = zip_label;
+    self->tar_xz_label = tar_xz_label;
+    self->seven_zip_label = seven_zip_label;
+    self->name_entry = name_entry;
+    self->extension_popover = extension_popover;
+    self->zip_checkmark = zip_checkmark;
+    self->tar_xz_checkmark = tar_xz_checkmark;
+    self->seven_zip_checkmark = seven_zip_checkmark;
     self->name_entry = name_entry;
 
     self->response_handler_id = g_signal_connect (compress_dialog,
@@ -291,20 +307,18 @@ nautilus_compress_dialog_controller_new (GtkWindow         *parent_window,
                                                   self);
 
     gtk_builder_add_callback_symbols (builder,
-                                      "zip_radio_button_on_toggled",
-                                      G_CALLBACK (zip_radio_button_on_toggled),
-                                      "tar_xz_radio_button_on_toggled",
-                                      G_CALLBACK (tar_xz_radio_button_on_toggled),
-                                      "seven_zip_radio_button_on_toggled",
-                                      G_CALLBACK (seven_zip_radio_button_on_toggled),
+                                      "zip_row_on_activated",
+                                      G_CALLBACK (zip_row_on_activated),
+                                      "tar_xz_row_on_activated",
+                                      G_CALLBACK (tar_xz_row_on_activated),
+                                      "seven_zip_row_on_activated",
+                                      G_CALLBACK (seven_zip_row_on_activated),
                                       NULL);
     gtk_builder_connect_signals (builder, self);
 
     format = g_settings_get_enum (nautilus_compression_preferences,
                                   NAUTILUS_PREFERENCES_DEFAULT_COMPRESSION_FORMAT);
 
-    update_selected_format (self, format);
-
     if (initial_name != NULL)
     {
         gtk_entry_set_text (GTK_ENTRY (name_entry), initial_name);
@@ -312,6 +326,8 @@ nautilus_compress_dialog_controller_new (GtkWindow         *parent_window,
 
     gtk_widget_show_all (compress_dialog);
 
+    update_selected_format (self, format);
+
     return self;
 }
 
diff --git a/src/resources/ui/nautilus-compress-dialog.ui b/src/resources/ui/nautilus-compress-dialog.ui
index 526e9eed2..b36539294 100644
--- a/src/resources/ui/nautilus-compress-dialog.ui
+++ b/src/resources/ui/nautilus-compress-dialog.ui
@@ -1,6 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.14"/>
+  <object class="GtkPopover" id="extension_popover">
+    <property name="position">bottom</property>
+    <property name="constrain-to">none</property>
+    <child>
+      <object class="HdyPreferencesGroup">
+        <property name="visible">True</property>
+        <property name="margin-top">12</property>
+        <property name="margin-bottom">12</property>
+        <property name="margin-start">12</property>
+        <property name="margin-end">12</property>
+        <child>
+          <object class="HdyActionRow">
+            <property name="visible">True</property>
+            <property name="activatable">True</property>
+            <property name="title" translatable="no">.zip</property>
+            <property name="subtitle" translatable="yes">Compatible with all operating systems.</property>
+            <signal name="activated" handler="zip_row_on_activated"/>
+            <child>
+              <object class="GtkImage" id="zip_checkmark">
+                <property name="visible">True</property>
+                <property name="width-request">16</property>
+                <property name="margin-start">12</property>
+                <property name="margin-end">12</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="HdyActionRow">
+            <property name="visible">True</property>
+            <property name="activatable">True</property>
+            <property name="title" translatable="no">.tar.xz</property>
+            <property name="subtitle" translatable="yes">Smaller archives but Linux and Mac only.</property>
+            <signal name="activated" handler="tar_xz_row_on_activated"/>
+            <child>
+              <object class="GtkImage" id="tar_xz_checkmark">
+                <property name="visible">True</property>
+                <property name="width-request">16</property>
+                <property name="margin-start">12</property>
+                <property name="margin-end">12</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="HdyActionRow">
+            <property name="visible">True</property>
+            <property name="activatable">True</property>
+            <property name="title" translatable="no">.7z</property>
+            <property name="subtitle" translatable="yes">Smaller archives but must be installed on Windows and Mac.</property>
+            <signal name="activated" handler="seven_zip_row_on_activated"/>
+            <child>
+              <object class="GtkImage" id="seven_zip_checkmark">
+                <property name="visible">True</property>
+                <property name="width-request">16</property>
+                <property name="margin-start">12</property>
+                <property name="margin-end">12</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
   <object class="GtkDialog" id="compress_dialog">
     <property name="title" translatable="yes">Create Archive</property>
     <property name="resizable">False</property>
@@ -9,19 +73,26 @@
     <property name="destroy_with_parent">True</property>
     <property name="type_hint">dialog</property>
     <property name="use-header-bar">1</property>
+    <property name="default-width">500</property>
+    <property name="default-height">210</property>
     <child internal-child="vbox">
       <object class="GtkBox" id="vbox">
         <property name="orientation">vertical</property>
-        <property name="margin_top">18</property>
-        <property name="margin_bottom">12</property>
-        <property name="margin_start">18</property>
-        <property name="margin_end">18</property>
+        <property name="margin-top">30</property>
+        <property name="margin-bottom">30</property>
+        <property name="margin-start">30</property>
+        <property name="margin-end">30</property>
+        <property name="width-request">390</property>
+        <property name="halign">center</property>
         <property name="spacing">6</property>
         <child>
           <object class="GtkLabel" id="name_label">
             <property name="label" translatable="yes">Archive name</property>
             <property name="visible">True</property>
             <property name="xalign">0</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
           </object>
           <packing>
             <property name="expand">False</property>
@@ -30,132 +101,82 @@
           </packing>
         </child>
         <child>
-          <object class="GtkEntry" id="name_entry">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkRevealer" id="error_revealer">
-            <child>
-              <object class="GtkLabel" id="error_label">
-                <property name="margin_top">4</property>
-                <property name="margin_bottom">4</property>
-                <property name="visible">True</property>
-                <property name="xalign">0</property>
-              </object>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">3</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkBox" id="hbox">
+          <object class="GtkBox">
             <property name="orientation">horizontal</property>
-            <property name="homogeneous">True</property>
-            <property name="spacing">0</property>
-            <child>
-              <object class="GtkRadioButton" id="zip_radio_button">
-                <property name="label" translatable="no">.zip</property>
-                <property name="draw_indicator">True</property>
-                <signal name="toggled" handler="zip_radio_button_on_toggled"/>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
+            <property name="spacing">12</property>
             <child>
-              <object class="GtkRadioButton" id="tar_xz_radio_button">
-                <property name="label" translatable="no">.tar.xz</property>
-                <property name="group">zip_radio_button</property>
-                <property name="draw_indicator">True</property>
-                <signal name="toggled" handler="tar_xz_radio_button_on_toggled"/>
+              <object class="GtkEntry" id="name_entry">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="width-chars">30</property>
               </object>
               <packing>
                 <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">1</property>
               </packing>
             </child>
             <child>
-              <object class="GtkRadioButton" id="seven_zip_radio_button">
-                <property name="label" translatable="no">.7z</property>
-                <property name="group">zip_radio_button</property>
-                <property name="draw_indicator">True</property>
-                <signal name="toggled" handler="seven_zip_radio_button_on_toggled"/>
+              <object class="GtkMenuButton" id="extension_button">
+                <property name="popover">extension_popover</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">6</property>
+                    <child>
+                      <object class="GtkStack" id="extension_stack">
+                        <child>
+                          <object class="GtkLabel" id="zip_label">
+                            <property name="label" translatable="no">.zip</property>
+                            <property name="xalign">0</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="tar_xz_label">
+                            <property name="label" translatable="no">.tar.xz</property>
+                            <property name="xalign">0</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="seven_zip_label">
+                            <property name="label" translatable="no">.7z</property>
+                            <property name="xalign">0</property>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="expand">True</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="icon-name">pan-down-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">2</property>
-              </packing>
             </child>
           </object>
           <packing>
             <property name="expand">False</property>
             <property name="fill">True</property>
-            <property name="position">4</property>
+            <property name="position">2</property>
           </packing>
         </child>
         <child>
-          <object class="GtkStack" id="description_stack">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="homogeneous">True</property>
-            <child>
-              <object class="GtkLabel" id="zip_description_label">
-                <property name="visible">True</property>
-                <property name="label" translatable="yes">Compatible with all operating systems.</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="name">zip-description-label</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="tar_xz_description_label">
-                <property name="visible">True</property>
-                <property name="label" translatable="yes">Smaller archives but Linux and Mac only.</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="name">tar-xz-description-label</property>
-              </packing>
-            </child>
+          <object class="GtkRevealer" id="error_revealer">
             <child>
-              <object class="GtkLabel" id="seven_zip_description_label">
+              <object class="GtkLabel" id="error_label">
+                <property name="margin_top">4</property>
+                <property name="margin_bottom">4</property>
                 <property name="visible">True</property>
-                <property name="label" translatable="yes">Smaller archives but must be installed on Windows and Mac.</property>
                 <property name="xalign">0</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
               </object>
-              <packing>
-                <property name="name">seven-zip-description-label</property>
-              </packing>
             </child>
           </object>
           <packing>
             <property name="expand">False</property>
             <property name="fill">True</property>
-            <property name="position">5</property>
+            <property name="position">3</property>
           </packing>
         </child>
       </object>
-- 
2.31.1