[gnome-contacts] LinkSuggestionGrid: improve the UI a bit.

[Niels De Graef <nielsdg src gnome org>]

commit f1e515248c1e24de92b5de404869e937de5a4d98
Author: Niels De Graef <nielsdegraef gmail com>
Date:   Sat Dec 23 21:03:14 2017 +0100

    LinkSuggestionGrid: improve the UI a bit.
    
    And while doing so, start using a GtkTemplate.
    
    See [bug 696384](https://bugzilla.gnome.org/show_bug.cgi?id=696384).

 data/contacts.gresource.xml              |    1 +
 data/ui/contacts-link-suggestion-grid.ui |   89 ++++++++++++++++++++++++++++++
 data/ui/style.css                        |    3 +-
 po/POTFILES.in                           |    1 +
 src/contacts-link-suggestion-grid.vala   |   64 +++++++++------------
 5 files changed, 121 insertions(+), 37 deletions(-)
---
diff --git a/data/contacts.gresource.xml b/data/contacts.gresource.xml
index 69cacc7..34c0230 100644
--- a/data/contacts.gresource.xml
+++ b/data/contacts.gresource.xml
@@ -9,6 +9,7 @@
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-contact-editor.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-contact-pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-in-app-notification.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">ui/contacts-link-suggestion-grid.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-list-pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-window.ui</file>
   </gresource>
diff --git a/data/ui/contacts-link-suggestion-grid.ui b/data/ui/contacts-link-suggestion-grid.ui
new file mode 100644
index 0000000..30511c7
--- /dev/null
+++ b/data/ui/contacts-link-suggestion-grid.ui
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.22 -->
+  <template class="ContactsLinkSuggestionGrid" parent="GtkGrid">
+    <property name="orientation">horizontal</property>
+    <property name="visible">True</property>
+    <property name="valign">end</property>
+    <property name="column_spacing">6</property>
+    <child>
+      <object class="GtkLabel" id="description_label">
+        <property name="visible">True</property>
+        <property name="valign">end</property>
+        <property name="halign">start</property>
+        <property name="hexpand">True</property>
+        <property name="margin_top">12</property>
+        <property name="wrap">True</property>
+        <property name="wrap_mode">word-char</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">0</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="extra_info_label">
+        <property name="visible">False</property>
+        <property name="valign">start</property>
+        <property name="halign">start</property>
+        <property name="hexpand">True</property>
+        <property name="margin_bottom">12</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="valign">center</property>
+        <property name="orientation">horizontal</property>
+        <property name="spacing">6</property>
+        <property name="margin_top">12</property>
+        <property name="margin_bottom">12</property>
+        <property name="margin_start">6</property>
+        <property name="margin_end">6</property>
+        <child>
+          <object class="GtkButton" id="accept_button">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <property name="label" translatable="yes">Link Contacts</property>
+            <property name="margin_end">6</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <property name="orientation">vertical</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="reject_button">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="flat"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">window-close-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">0</property>
+        <property name="height">2</property>
+      </packing>
+    </child>
+  </template>
+</interface>
diff --git a/data/ui/style.css b/data/ui/style.css
index d7a2a05..bdba0f9 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -32,7 +32,8 @@ row.contact-data-row {
 }
 
 .contacts-suggestion {
-  background-color: darker(@theme_bg_color);
+  border-top: 1px solid @borders;
+  background-color: shade(@theme_bg_color, 0.9);
 }
 
 /* Border on the right in the left menu toolbar */
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 3d79903..358e781 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -7,6 +7,7 @@ data/ui/contacts-accounts-list.ui
 data/ui/contacts-avatar-dialog.ui
 data/ui/contacts-contact-editor.ui
 data/ui/contacts-contact-pane.ui
+data/ui/contacts-link-suggestion-grid.ui
 data/ui/contacts-list-pane.ui
 data/ui/contacts-window.ui
 src/contacts-accounts-list.vala
diff --git a/src/contacts-link-suggestion-grid.vala b/src/contacts-link-suggestion-grid.vala
index d49b0cb..b3e409e 100644
--- a/src/contacts-link-suggestion-grid.vala
+++ b/src/contacts-link-suggestion-grid.vala
@@ -24,57 +24,49 @@ using Gee;
  * It offers the user the sugugestion of linking the currently shown contact
  * and another (hopefully) similar contact.
  */
+[GtkTemplate (ui = "/org/gnome/contacts/ui/contacts-link-suggestion-grid.ui")]
 public class Contacts.LinkSuggestionGrid : Grid {
 
+  [GtkChild]
+  private Gtk.Label description_label;
+  [GtkChild]
+  private Gtk.Label extra_info_label;
+  [GtkChild]
+  private Gtk.Button accept_button;
+  [GtkChild]
+  private Gtk.Button reject_button;
+
   public signal void suggestion_accepted ();
   public signal void suggestion_rejected ();
 
   public LinkSuggestionGrid (Contact contact) {
-    this.valign = Align.END;
-
     get_style_context ().add_class ("contacts-suggestion");
-    set_redraw_on_allocate (true);
 
     var image_frame = new ContactFrame (Contact.SMALL_AVATAR_SIZE);
     image_frame.hexpand = false;
-    image_frame.margin = 24;
-    image_frame.margin_end = 12;
+    image_frame.margin = 12;
     contact.keep_widget_uptodate (image_frame,  (w) => {
         (w as ContactFrame).set_image (contact.individual, contact);
       });
+    image_frame.show ();
+    attach (image_frame, 0, 0, 1, 2);
 
-    attach (image_frame, 0, 0);
-
-    var label = new Label ("");
-    if (contact.is_main)
-      label.set_markup (Markup.printf_escaped (_("Does %s from %s belong here?"), contact.display_name, 
contact.format_persona_stores ()));
-    else
-      label.set_markup (Markup.printf_escaped (_("Do these details belong to %s?"), contact.display_name));
-    label.valign = Align.START;
-    label.halign = Align.START;
-    label.width_chars = 20;
-    label.wrap = true;
-    label.wrap_mode = Pango.WrapMode.WORD_CHAR;
-    label.hexpand = true;
-    label.margin_top = 24;
-    label.margin_bottom = 24;
-    attach (label, 1, 0);
-
-    var bbox = new ButtonBox (Orientation.HORIZONTAL);
-    var yes = new Button.with_label (_("Yes"));
-    var no = new Button.with_label (_("No"));
+    this.description_label.xalign = 0; // FIXME: hack to make it actually align left.
+    this.description_label.label = contact.is_main?
+          _("Is this the same person as %s from %s?").printf (contact.display_name, 
contact.format_persona_stores ())
+        : _("Is this the same person as %s?").printf (contact.display_name);
 
-    yes.clicked.connect ( () => suggestion_accepted ());
-    no.clicked.connect ( () => suggestion_rejected ());
+    var emails = contact.individual.email_addresses;
+    if (!emails.is_empty) {
+      // This is of course a best guess.
+      var email = Utils.get_first<EmailFieldDetails>(emails);
+      if (email.value != null) {
+        this.extra_info_label.show ();
+        this.extra_info_label.label = email.value;
+      }
+    }
 
-    bbox.add (yes);
-    bbox.add (no);
-    bbox.set_spacing (8);
-    bbox.set_halign (Align.END);
-    bbox.set_hexpand (true);
-    bbox.margin = 24;
-    bbox.margin_start = 12;
-    attach (bbox, 2, 0);
-    show_all ();
+    this.reject_button.clicked.connect ( () => suggestion_rejected ());
+    this.accept_button.clicked.connect ( () => suggestion_accepted ());
   }
 }