EogMetadataSidebar: Try to unclutter and improve the sidebar's look

Based on a design by Allan Day.

Plus adding previous tooltip for the folder label

origin commits:
https://gitlab.gnome.org/GNOME/eog/commit/2e5b065
https://gitlab.gnome.org/GNOME/eog/commit/83bf6c4
https://gitlab.gnome.org/GNOME/eog/commit/c0a51e5

5 files changed, 481 insertions, 305 deletions

diff --git a/data/Makefile.am b/data/Makefile.am
index 2d81162..1de120d 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -34,6 +34,7 @@ EXTRA_DIST = \
 	$(ui_DATA) \
 	eom.css			\
 	eom-ui.xml		\
+	metadata-sidebar.ui	\
 	$(DESKTOP_IN_FILES) \
 	$(appdata_in_files)
 
diff --git a/data/metadata-sidebar.ui b/data/metadata-sidebar.ui
new file mode 100644
index 0000000..2cb7d89
--- /dev/null
+++ b/data/metadata-sidebar.ui
@@ -0,0 +1,410 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.18.1 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <template class="EomMetadataSidebar" parent="GtkScrolledWindow">
+    <property name="visible">True</property>
+    <property name="can_focus">True</property>
+    <property name="hscrollbar_policy">never</property>
+    <child>
+      <object class="GtkViewport" id="viewport1">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="shadow_type">none</property>
+        <child>
+          <object class="GtkGrid" id="metadata_grid">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <property name="row_spacing">3</property>
+            <property name="column_spacing">6</property>
+            <child>
+              <object class="GtkLabel" id="label1">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="label" translatable="yes">Size</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label2">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="label" translatable="yes">Type</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label3">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">File Size</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">2</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label4">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="margin_bottom">12</property>
+                <property name="label" translatable="yes">Folder</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">3</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label5">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Aperture</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">4</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label6">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Exposure</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">5</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label7">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">ISO</property>
+                <property name="justify">right</property>
+                <property name="lines">0</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">7</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label8">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Metering</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">8</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label9">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_bottom">12</property>
+                <property name="label" translatable="yes">Camera</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">9</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label10">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="label" translatable="yes">Date</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">10</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label11">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Time</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">11</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="iso_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">7</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="size_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="type_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="filesize_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">2</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="aperture_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">4</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="exposure_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">5</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="metering_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">8</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="date_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">10</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="model_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="margin_bottom">12</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">9</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="time_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">11</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="folder_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">baseline</property>
+                <property name="margin_bottom">12</property>
+                <property name="label">label</property>
+                <property name="use_markup">True</property>
+                <property name="wrap">True</property>
+                <property name="wrap_mode">word-char</property>
+                <property name="track_visited_links">False</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">3</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="label12">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Focal Length</property>
+                <property name="justify">right</property>
+                <property name="xalign">1</property>
+                <property name="yalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">6</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="focallen_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label">label</property>
+                <property name="wrap">True</property>
+                <property name="selectable">True</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">6</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
+
diff --git a/po/POTFILES.in b/po/POTFILES.in
index efd637e..00ae351 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -8,6 +8,7 @@ data/eom.desktop.in.in
 [type: gettext/glade]data/eom-image-properties-dialog.ui
 [type: gettext/glade]data/eom-multiple-save-as-dialog.ui
 [type: gettext/glade]data/eom-preferences-dialog.ui
+[type: gettext/glade]data/metadata-sidebar.ui
 [type: gettext/gsettings]data/org.mate.eom.gschema.xml.in
 plugins/fullscreen/eom-fullscreen-plugin.c
 plugins/fullscreen/fullscreen.plugin.desktop.in
diff --git a/src/eom-metadata-sidebar.c b/src/eom-metadata-sidebar.c
index e6d2cce..b5bfed3 100644
--- a/src/eom-metadata-sidebar.c
+++ b/src/eom-metadata-sidebar.c
@@ -68,145 +68,25 @@ struct _EomMetadataSidebarPrivate {
 	gulong image_changed_id;
 	gulong thumb_changed_id;
 
-	GtkWidget *grid;
-
-	GtkWidget *name_label;
-	GtkWidget *height_label;
-	GtkWidget *width_label;
-	GtkWidget *type_label;
 	GtkWidget *size_label;
-	GtkWidget *folder_button;
+	GtkWidget *type_label;
+	GtkWidget *filesize_label;
+	GtkWidget *folder_label;
 
 #if HAVE_EXIF
 	GtkWidget *aperture_label;
 	GtkWidget *exposure_label;
 	GtkWidget *focallen_label;
-	GtkWidget *flash_label;
 	GtkWidget *iso_label;
 	GtkWidget *metering_label;
 	GtkWidget *model_label;
 	GtkWidget *date_label;
-#endif
-
-#if HAVE_EXEMPI
-	GtkWidget *location_label;
-	GtkWidget *desc_label;
-	GtkWidget *keyword_label;
-	GtkWidget *creator_label;
-	GtkWidget *rights_label;
-#endif
- 
-#if HAVE_METADATA
-	GtkWidget *details_button;
+	GtkWidget *time_label;
 #endif
 };
 
 G_DEFINE_TYPE_WITH_PRIVATE(EomMetadataSidebar, eom_metadata_sidebar, GTK_TYPE_SCROLLED_WINDOW)
 
-static GtkWidget*
-_gtk_grid_append_title_line (GtkGrid *grid, GtkWidget *sibling,
-			     const gchar *text)
-{
-	GtkWidget *label;
-	gchar *markup;
-
-	label = gtk_label_new (NULL);
-
-	markup = g_markup_printf_escaped ("<b>%s</b>", text);
-	gtk_label_set_markup (GTK_LABEL (label), markup);
-
-	gtk_grid_attach_next_to (grid, label, sibling, GTK_POS_BOTTOM,  2, 1);
-	return label;
-}
-
-static GtkWidget*
-_gtk_grid_append_prop_line (GtkGrid *grid, GtkWidget *sibling,
-			    GtkWidget **data_label, const gchar *text)
-{
-	GtkWidget *label;
-	gchar *markup;
-	GtkWidget *box;
-
-	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
-	label = gtk_label_new (NULL);
-	markup = g_markup_printf_escaped("<b>%s</b>", text);
-	gtk_label_set_markup (GTK_LABEL(label), markup);
-	g_free (markup);
-
-	gtk_label_set_xalign (GTK_LABEL (label), 0);
-	gtk_label_set_yalign (GTK_LABEL (label), 1);
-	gtk_box_pack_start (GTK_BOX (box), label, FALSE, FALSE, 0);
-
-	if (G_LIKELY (data_label != NULL)) {
-		*data_label = gtk_label_new (NULL);
-		gtk_label_set_selectable (GTK_LABEL (*data_label), TRUE);
-		gtk_label_set_line_wrap (GTK_LABEL(*data_label), TRUE);
-		gtk_label_set_xalign (GTK_LABEL (*data_label), 0);
-		gtk_label_set_yalign (GTK_LABEL (*data_label), 0);
-		// Add a small margin to make it a sublabel to the first label
-		gtk_widget_set_margin_start (*data_label, 12);
-		gtk_box_pack_end (GTK_BOX(box), *data_label, FALSE, FALSE, 0);
-	}
-	gtk_grid_attach_next_to (grid, box, sibling, GTK_POS_BOTTOM,  2, 1);
-
-	return box;
-}
-
-#if HAVE_EXEMPI
-static void
-eom_xmp_set_label (XmpPtr xmp,
-		   const char *ns,
-		   const char *propname,
-		   GtkWidget *w)
-{
-	uint32_t options;
-
-	XmpStringPtr value = xmp_string_new ();
-
-	if (xmp && xmp_get_property (xmp, ns, propname, value, &options)) {
-		if (XMP_IS_PROP_SIMPLE (options)) {
-			gtk_label_set_text (GTK_LABEL (w), xmp_string_cstr (value));
-		} else if (XMP_IS_PROP_ARRAY (options)) {
-			XmpIteratorPtr iter = xmp_iterator_new (xmp,
-							        ns,
-								propname,
-								XMP_ITER_JUSTLEAFNODES);
-
-			GString *string = g_string_new ("");
-
-			if (iter) {
-				gboolean first = TRUE;
-
-				while (xmp_iterator_next (iter, NULL, NULL, value, &options)
-				       && !XMP_IS_PROP_QUALIFIER (options)) {
-
-					if (!first) {
-						g_string_append_printf(string, ", ");
-					} else {
-						first = FALSE;
-					}
-
-					g_string_append_printf (string,
-								"%s",
-								xmp_string_cstr (value));
-				}
-
-				xmp_iterator_free (iter);
-			}
-
-			gtk_label_set_text (GTK_LABEL (w), string->str);
-			g_string_free (string, TRUE);
-		}
-	} else {
-		/* Property was not found */
-		/* Clear label so it won't show bogus data */
-		gtk_label_set_text (GTK_LABEL (w), NULL);
-	}
-
-	xmp_string_free (value);
-}
-#endif
-
 static void
 eom_metadata_sidebar_update_general_section (EomMetadataSidebar *sidebar)
 {
@@ -219,24 +99,17 @@ eom_metadata_sidebar_update_general_section (EomMetadataSidebar *sidebar)
 	gint width, height;
 
 	if (G_UNLIKELY (img == NULL)) {
-		gtk_label_set_text (GTK_LABEL (priv->name_label), NULL);
-		gtk_label_set_text (GTK_LABEL (priv->height_label), NULL);
-		gtk_label_set_text (GTK_LABEL (priv->width_label), NULL);
-		gtk_label_set_text (GTK_LABEL (priv->type_label), NULL);
 		gtk_label_set_text (GTK_LABEL (priv->size_label), NULL);
+		gtk_label_set_text (GTK_LABEL (priv->type_label), NULL);
+		gtk_label_set_text (GTK_LABEL (priv->filesize_label), NULL);
 		return;		
 	}
 
-	gtk_label_set_text (GTK_LABEL (priv->name_label),
-			    eom_image_get_caption (img));
 	eom_image_get_size (img, &width, &height);
-	str = g_strdup_printf ("%d %s", height,
-			       ngettext ("pixel", "pixels", height));
-	gtk_label_set_text (GTK_LABEL (priv->height_label), str);
-	g_free (str);
-	str = g_strdup_printf ("%d %s", width,
-			       ngettext ("pixel", "pixels", width));
-	gtk_label_set_text (GTK_LABEL (priv->width_label), str);
+	str = g_strdup_printf (ngettext("%i × %i pixel",
+					"%i × %i pixels", height),
+			       width, height);
+	gtk_label_set_text (GTK_LABEL (priv->size_label), str);
 	g_free (str);
 
 	file = eom_image_get_file (img);
@@ -257,7 +130,7 @@ eom_metadata_sidebar_update_general_section (EomMetadataSidebar *sidebar)
 
 	bytes = eom_image_get_bytes (img);
 	str = g_format_size (bytes);
-	gtk_label_set_text (GTK_LABEL (priv->size_label), str);
+	gtk_label_set_text (GTK_LABEL (priv->filesize_label), str);
 	g_free (str);
 
 	parent_file = g_file_get_parent (file);
@@ -266,11 +139,12 @@ eom_metadata_sidebar_update_general_section (EomMetadataSidebar *sidebar)
 		parent_file = g_object_ref (file);
 	}
 	str = g_file_get_basename (parent_file);
-	gtk_button_set_label (GTK_BUTTON (priv->folder_button), str);
+	str = g_markup_printf_escaped ("<a href=\"%s\">%s</a>", g_file_get_uri (parent_file), str);
+	gtk_label_set_markup (GTK_LABEL (priv->folder_label), str);
 	g_free (str);
 
 	str = g_file_get_path (parent_file);
-	gtk_widget_set_tooltip_text (GTK_WIDGET (priv->folder_button), str);
+	gtk_widget_set_tooltip_text (GTK_WIDGET (priv->folder_label), str);
 	g_free (str);
 
 	g_object_unref (parent_file);
@@ -285,17 +159,11 @@ eom_metadata_sidebar_update_metadata_section (EomMetadataSidebar *sidebar)
 #if HAVE_EXIF
 	ExifData *exif_data = NULL;
 #endif
-#if HAVE_EXEMPI
-	XmpPtr xmp_data = NULL;
-#endif
 
 	if (img) {
 #if HAVE_EXIF
 		exif_data = eom_image_get_exif_info (img);
 #endif
-#if HAVE_EXEMPI
-		xmp_data =  eom_image_get_xmp_info (img);
-#endif
 	}
 
 #if HAVE_EXIF
@@ -307,8 +175,6 @@ eom_metadata_sidebar_update_metadata_section (EomMetadataSidebar *sidebar)
 	eom_exif_util_set_focal_length_label_text (
 				       GTK_LABEL (priv->focallen_label),
 				       exif_data);
-	eom_exif_util_set_label_text (GTK_LABEL (priv->flash_label),
-				      exif_data, EXIF_TAG_FLASH);
 	eom_exif_util_set_label_text (GTK_LABEL (priv->iso_label),
 				      exif_data,
 				      EXIF_TAG_ISO_SPEED_RATINGS);
@@ -317,44 +183,18 @@ eom_metadata_sidebar_update_metadata_section (EomMetadataSidebar *sidebar)
 				      EXIF_TAG_METERING_MODE);
 	eom_exif_util_set_label_text (GTK_LABEL (priv->model_label),
 				      exif_data, EXIF_TAG_MODEL);
-	eom_exif_util_set_label_text (GTK_LABEL (priv->date_label),
+	eom_exif_util_format_datetime_label (GTK_LABEL (priv->date_label),
+				      exif_data,
+				      EXIF_TAG_DATE_TIME_ORIGINAL,
+				      _("%a, %d %B %Y"));
+	eom_exif_util_format_datetime_label (GTK_LABEL (priv->time_label),
 				      exif_data,
-				      EXIF_TAG_DATE_TIME_ORIGINAL);
+				      EXIF_TAG_DATE_TIME_ORIGINAL,
+				      _("%X"));
 
 	/* exif_data_unref can handle NULL-values */
 	exif_data_unref(exif_data);
 #endif /* HAVE_EXIF */
-
-#if HAVE_EXEMPI
- 	eom_xmp_set_label (xmp_data,
-			   NS_IPTC4XMP,
-			   "Location",
-			   priv->location_label);
-
-	eom_xmp_set_label (xmp_data,
-			   NS_DC,
-			   "description",
-			   priv->desc_label);
-
-	eom_xmp_set_label (xmp_data,
-			   NS_DC,
-			   "subject",
-			   priv->keyword_label);
-
-	eom_xmp_set_label (xmp_data,
-			   NS_DC,
-       	                   "creator",
-			   priv->creator_label);
-
-	eom_xmp_set_label (xmp_data,
-			   NS_DC,
-			   "rights",
-			   priv->rights_label);
-
-
-	if (xmp_data != NULL)
-		xmp_free (xmp_data);
-#endif /* HAVE_EXEMPI */
 }
 #endif /* HAVE_METADATA */
 
@@ -425,7 +265,7 @@ _notify_image_cb (GObject *gobject, GParamSpec *pspec, gpointer user_data)
 }
 
 static void
-_folder_button_clicked_cb (GtkButton *button, gpointer user_data)
+_folder_label_clicked_cb (GtkLabel *label, const gchar *uri, gpointer user_data)
 {
 	EomMetadataSidebarPrivate *priv = EOM_METADATA_SIDEBAR(user_data)->priv;
 	EomImage *img;
@@ -438,7 +278,7 @@ _folder_button_clicked_cb (GtkButton *button, gpointer user_data)
 	img = eom_window_get_image (priv->parent_window);
 	file = eom_image_get_file (img);
 
-	toplevel = gtk_widget_get_toplevel (GTK_WIDGET (button));
+	toplevel = gtk_widget_get_toplevel (GTK_WIDGET (label));
 	if (GTK_IS_WINDOW (toplevel))
 		window = GTK_WINDOW (toplevel);
 	else
@@ -449,24 +289,6 @@ _folder_button_clicked_cb (GtkButton *button, gpointer user_data)
 	g_object_unref (file);
 }
 
-#ifdef HAVE_METADATA
-static void
-_details_button_clicked_cb (GtkButton *button, gpointer user_data)
-{
-	EomMetadataSidebarPrivate *priv = EOM_METADATA_SIDEBAR(user_data)->priv;
-	EomDialog *dlg;
-
-	g_return_if_fail (priv->parent_window != NULL);
-
-	dlg = eom_window_get_properties_dialog (
-					EOM_WINDOW (priv->parent_window));
-	g_return_if_fail (dlg != NULL);
-	eom_properties_dialog_set_page (EOM_PROPERTIES_DIALOG (dlg),
-					EOM_PROPERTIES_DIALOG_PAGE_DETAILS);
-	eom_dialog_show (dlg);
-}
-#endif
-
 static void
 eom_metadata_sidebar_set_parent_window (EomMetadataSidebar *sidebar,
 					EomWindow *window)
@@ -493,112 +315,13 @@ static void
 eom_metadata_sidebar_init (EomMetadataSidebar *sidebar)
 {
 	EomMetadataSidebarPrivate *priv;
-	GtkWidget *label;
 
 	priv = sidebar->priv = eom_metadata_sidebar_get_instance_private (sidebar);
-	priv->grid = gtk_grid_new ();
-	g_object_set (G_OBJECT (priv->grid),
-	              "row-spacing", 6,
-		      "column-spacing", 6,
-		      NULL);
-
-	label = _gtk_grid_append_title_line (GTK_GRID (priv->grid),
-					     NULL, _("General"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->name_label, _("Name:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->width_label, _("Width:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->height_label, _("Height:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->type_label, _("Type:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->size_label, _("File size:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    NULL, _("Folder:"));
-	/* Enable wrapping at char boundaries as fallback for the filename
-	 * as it is possible for it to not contain any "words" to wrap on. */
-	gtk_label_set_line_wrap_mode (GTK_LABEL (priv->name_label),
-	                              PANGO_WRAP_WORD_CHAR);
-
-{
-	priv->folder_button = gtk_button_new_with_label ("");
-	g_signal_connect (priv->folder_button, "clicked",
-			  G_CALLBACK (_folder_button_clicked_cb), sidebar);
-	gtk_widget_set_margin_start (priv->folder_button, 12);
-	gtk_widget_set_margin_end (priv->folder_button, 12);
-	gtk_widget_set_margin_top (priv->folder_button, 3);
-	gtk_box_pack_end (GTK_BOX (label), priv->folder_button, FALSE, FALSE, 0);
-}
-
-#if HAVE_METADATA	
-	label = _gtk_grid_append_title_line (GTK_GRID (priv->grid),
-					     label, _("Metadata"));
-#if HAVE_EXIF
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->aperture_label,
-					    _("Aperture Value:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->exposure_label,
-					    _("Exposure Time:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->focallen_label,
-					    _("Focal Length:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->flash_label, _("Flash:"));
-	gtk_label_set_line_wrap (GTK_LABEL (priv->flash_label), TRUE);
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->iso_label,
-					    _("ISO Speed Rating:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->metering_label,
-					    _("Metering Mode:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->model_label,
-					    _("Camera Model:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->date_label, _("Date/Time:"));
-#endif /* HAVE_EXIF */
-#if HAVE_EXEMPI
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->desc_label,
-					    _("Description:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->location_label,
-					    _("Location:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->keyword_label,
-					    _("Keywords:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->creator_label, _("Author:"));
-	label = _gtk_grid_append_prop_line (GTK_GRID (priv->grid), label,
-					    &priv->rights_label,
-					    _("Copyright:"));
-#endif /* HAVE_EXEMPI */
-
-	priv->details_button = gtk_button_new_with_label (_("Details"));
-	g_signal_connect (priv->details_button, "clicked",
-			  G_CALLBACK (_details_button_clicked_cb), sidebar);
-	gtk_grid_attach_next_to (GTK_GRID (priv->grid), priv->details_button,
-				 label, GTK_POS_BOTTOM, 1, 1);
-#endif /* HAVE_METADATA */
 
-	gtk_widget_show_all (priv->grid);
-}
+	gtk_widget_init_template (GTK_WIDGET (sidebar));
 
-static void
-eom_metadata_sidebar_constructed (GObject *object)
-{
-	EomMetadataSidebarPrivate *priv;
-
-	priv = EOM_METADATA_SIDEBAR (object)->priv;
-
-	/* This can only happen after all construct properties for
-	 * GtkScrolledWindow are set/handled. */
-	gtk_container_add (GTK_CONTAINER (object), priv->grid);
-	gtk_widget_show (GTK_WIDGET (object));
-
-	G_OBJECT_CLASS (eom_metadata_sidebar_parent_class)->constructed (object);
+	g_signal_connect (priv->folder_label, "activate-link",
+	                  G_CALLBACK (_folder_label_clicked_cb), sidebar);
 }
 
 static void
@@ -657,8 +380,8 @@ static void
 eom_metadata_sidebar_class_init (EomMetadataSidebarClass *klass)
 {
 	GObjectClass *g_obj_class = G_OBJECT_CLASS (klass);
+	GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
-	g_obj_class->constructed = eom_metadata_sidebar_constructed;
 	g_obj_class->get_property = eom_metadata_sidebar_get_property;
 	g_obj_class->set_property = eom_metadata_sidebar_set_property;
 /*	g_obj_class->dispose = eom_metadata_sidebar_dispose;*/
@@ -674,6 +397,46 @@ eom_metadata_sidebar_class_init (EomMetadataSidebarClass *klass)
 		g_param_spec_object ("image", NULL, NULL, EOM_TYPE_IMAGE,
 				     G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS)
 				    );
+
+	gtk_widget_class_set_template_from_resource (widget_class,
+						     "/org/mate/eom/ui/metadata-sidebar.ui");
+
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      size_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      type_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      filesize_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      folder_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      aperture_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      exposure_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      focallen_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      iso_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      metering_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      model_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      date_label);
+	gtk_widget_class_bind_template_child_private (widget_class,
+						      EomMetadataSidebar,
+						      time_label);
 }
 
 
@@ -683,7 +446,7 @@ eom_metadata_sidebar_new (EomWindow *window)
 	return gtk_widget_new (EOM_TYPE_METADATA_SIDEBAR,
 			       "hadjustment", NULL,
 			       "vadjustment", NULL,
-	                       "hscrollbar-policy", GTK_POLICY_NEVER,
+			       "hscrollbar-policy", GTK_POLICY_NEVER,
 			       "vscrollbar-policy", GTK_POLICY_AUTOMATIC,
 			       "border-width", 6,
 			       "parent-window", window,
diff --git a/src/eom.gresource.xml b/src/eom.gresource.xml
index 3c92450..a4a9fe3 100644
--- a/src/eom.gresource.xml
+++ b/src/eom.gresource.xml
@@ -3,6 +3,7 @@
   <gresource prefix="/org/mate/eom/ui">
     <file>eom.css</file>
     <file compressed="true" preprocess="xml-stripblanks">eom-ui.xml</file>
+    <file compressed="true" preprocess="xml-stripblanks">metadata-sidebar.ui</file>
   </gresource>
 </gresources>