icon-browser: Add scalable icons to icon detail modal window

When making mockups for GNOME apps in Inkscape, looking for symbolic
icons is a common task. Searching for icons in the file system is clumsy,
and icon-browser provides a much better interface for finding them.
However, currently there is no way to insert the symbolic icons as SVG
directly from icon-browser, so right now it is only useful for finding
the name.

This patch adds a sixth column to the modal window that appears when
clicking a symbolic icon. The icon in this column is labeled "scalable",
and dragging it onto another window results in the vector icon URI being
inserted.

This enables a much simpler workflow when designing with symbolic icons.

https://bugzilla.gnome.org/show_bug.cgi?id=778930

2 files changed, 100 insertions, 8 deletions

diff --git a/demos/icon-browser/iconbrowserwin.c b/demos/icon-browser/iconbrowserwin.c
index 7e33622b4d..f5920cd7cd 100644
--- a/demos/icon-browser/iconbrowserwin.c
+++ b/demos/icon-browser/iconbrowserwin.c
@@ -4,6 +4,11 @@
 #include "iconstore.h"
 #include <gtk/gtk.h>
 
+/* Drag 'n Drop */
+static GtkTargetEntry target_table[] = {
+  { "text/uri-list", 0, 0 },
+};
+
 typedef struct
 {
   gchar *id;
@@ -46,6 +51,8 @@ struct _IconBrowserWindow
   GtkWidget *image3;
   GtkWidget *image4;
   GtkWidget *image5;
+  GtkWidget *image6;
+  GtkWidget *label6;
   GtkWidget *description;
 };
 
@@ -127,6 +134,19 @@ item_activated (GtkIconView *icon_view, GtkTreePath *path, IconBrowserWindow *wi
   set_image (win->image3, name, 32);
   set_image (win->image4, name, 48);
   set_image (win->image5, name, 64);
+  if (win->symbolic)
+    {
+      gtk_widget_show (win->image6);
+      gtk_widget_show (win->label6);
+      gtk_widget_show (gtk_widget_get_parent (win->image6));
+      set_image (win->image6, name, 64);
+    }
+  else
+    {
+      gtk_widget_hide (win->image6);
+      gtk_widget_hide (win->label6);
+      gtk_widget_hide (gtk_widget_get_parent (win->image6));
+    }
   if (description && description[0])
     {
       gtk_label_set_text (GTK_LABEL (win->description), description);
@@ -381,6 +401,35 @@ get_image_data (GtkWidget        *widget,
 }
 
 static void
+get_scalable_image_data (GtkWidget        *widget,
+                         GdkDragContext   *context,
+                         GtkSelectionData *selection,
+                         guint             target_info,
+                         guint             time,
+                         gpointer          data)
+{
+  gchar *uris[2];
+  GtkIconInfo *info;
+  GtkWidget *image;
+  GFile *file;
+  const gchar *name;
+
+  image = gtk_bin_get_child (GTK_BIN (widget));
+  gtk_image_get_icon_name (GTK_IMAGE (image), &name, NULL);
+
+  info = gtk_icon_theme_lookup_icon (gtk_icon_theme_get_default (), name, -1, 0);
+  file = g_file_new_for_path (gtk_icon_info_get_filename (info));
+  uris[0] = g_file_get_uri (file);
+  uris[1] = NULL;
+
+  gtk_selection_data_set_uris (selection, uris);
+
+  g_free (uris[0]);
+  g_object_unref (info);
+  g_object_unref (file);
+}
+
+static void
 setup_image_dnd (GtkWidget *image)
 {
   GtkWidget *parent;
@@ -392,6 +441,19 @@ setup_image_dnd (GtkWidget *image)
 }
 
 static void
+setup_scalable_image_dnd (GtkWidget *image)
+{
+  GtkWidget *parent;
+
+  parent = gtk_widget_get_parent (image);
+  gtk_drag_source_set (parent, GDK_BUTTON1_MASK,
+                       target_table, G_N_ELEMENTS (target_table),
+                       GDK_ACTION_COPY);
+
+  g_signal_connect (parent, "drag-data-get", G_CALLBACK (get_scalable_image_data), NULL);
+}
+
+static void
 icon_browser_window_init (IconBrowserWindow *win)
 {
   GtkTargetList *list;
@@ -417,6 +479,7 @@ icon_browser_window_init (IconBrowserWindow *win)
   setup_image_dnd (win->image3);
   setup_image_dnd (win->image4);
   setup_image_dnd (win->image5);
+  setup_scalable_image_dnd (win->image6);
 
   win->contexts = g_hash_table_new_full (g_str_hash, g_str_equal, NULL, context_free);
 
@@ -456,6 +519,8 @@ icon_browser_window_class_init (IconBrowserWindowClass *class)
   gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, image3);
   gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, image4);
   gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, image5);
+  gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, image6);
+  gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, label6);
   gtk_widget_class_bind_template_child (GTK_WIDGET_CLASS (class), IconBrowserWindow, description);
 
   gtk_widget_class_bind_template_callback (GTK_WIDGET_CLASS (class), search_text_changed);
diff --git a/demos/icon-browser/window.ui b/demos/icon-browser/window.ui
index c4e4b873c9..8183a7d643 100644
--- a/demos/icon-browser/window.ui
+++ b/demos/icon-browser/window.ui
@@ -150,6 +150,7 @@
             <property name="margin">10</property>
             <property name="row-spacing">18</property>
             <property name="column-spacing">18</property>
+            <property name="halign">center</property>
             <child>
               <object class="GtkEventBox">
                 <property name="visible">True</property>
@@ -230,6 +231,22 @@
                 <property name="top-attach">1</property>
               </packing>
             </child>
+            <child>
+              <object class="GtkEventBox">
+                <property name="visible">True</property>
+                <child>
+                  <object class="GtkImage" id="image6">
+                    <property name="visible">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">end</property>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="left-attach">5</property>
+                <property name="top-attach">1</property>
+              </packing>
+            </child>
 
             <child>
               <object class="GtkLabel" id="label1">
@@ -307,17 +324,18 @@
               </packing>
             </child>
             <child>
-              <object class="GtkLabel" id="description">
+              <object class="GtkLabel" id="label6">
                 <property name="visible">True</property>
-                <property name="wrap">True</property>
-                <property name="max-width-chars">60</property>
-                <property name="xalign">0</property>
-                <property name="valign">start</property>
+                <property name="halign">center</property>
+                <property name="valign">baseline</property>
+                <property name="label">scalable</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
               </object>
               <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">3</property>
-                <property name="width">5</property>
+                <property name="left-attach">5</property>
+                <property name="top-attach">2</property>
               </packing>
             </child>
             <child>
@@ -337,6 +355,15 @@
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkLabel" id="description">
+            <property name="margin">10</property>
+            <property name="visible">True</property>
+            <property name="wrap">True</property>
+            <property name="max-width-chars">60</property>
+            <property name="valign">start</property>
+          </object>
+        </child>
       </object>
     </child>
   </object>