[polari/wip/raresv/nick-popover: 135/149] userDetails: Refactor UserDetails class and UI

[Rares Visalom <raresvisalom src gnome org>]

commit 06fd993c748335ae3f5de197729f17505e62eebf
Author: raresv <rares visalom gmail com>
Date:   Sun Sep 4 19:48:10 2016 +0300

    userDetails: Refactor UserDetails class and UI
    
    Refactor the UserDetails UI so that it matches the mockups and add the nickname setter that is used 
primarily for setting the _fullnameLabel.

 data/resources/user-list-details.ui |  102 +++++++++++++++++++++++++++++------
 src/userList.js                     |   35 +++++++------
 2 files changed, 105 insertions(+), 32 deletions(-)
---
diff --git a/data/resources/user-list-details.ui b/data/resources/user-list-details.ui
index 01fc06a..524214e 100644
--- a/data/resources/user-list-details.ui
+++ b/data/resources/user-list-details.ui
@@ -3,11 +3,12 @@
   <template class="Gjs_UserListDetails" parent="GtkFrame">
     <property name="visible">True</property>
     <property name="hexpand">True</property>
+    <property name="shadow-type">none</property>
     <child>
       <object class="GtkBox" id="box">
         <property name="orientation">vertical</property>
-        <property name="spacing">6</property>
-        <property name="margin">6</property>
+        <property name="spacing">2</property>
+        <property name="margin">9</property>
         <property name="visible">True</property>
         <child>
           <object class="GtkBox" id="spinnerBox">
@@ -33,30 +34,42 @@
           <object class="GtkGrid" id="detailsGrid">
             <property name="row-spacing">6</property>
             <property name="column-spacing">6</property>
+            <property name="margin-end">18</property>
             <property name="hexpand">True</property>
             <property name="visible">True</property>
             <child>
-              <object class="GtkLabel" id="fullnameLabel">
-                <property name="ellipsize">end</property>
+              <object class="GtkImage">
+                <property name="icon-name">document-open-recent-symbolic</property>
+                <property name="visible" bind-source="lastLabel"
+                          bind-property="visible" bind-flags="sync-create"/>
+                <property name="no-show-all">True</property>
                 <property name="halign">start</property>
-                <property name="visible">True</property>
-                <property name="max-width-chars">25</property>
+                <property name="margin-left">0</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
               </object>
               <packing>
-                <property name="width">2</property>
+                <property name="width">1</property>
                 <property name="top-attach">0</property>
                 <property name="left-attach">0</property>
               </packing>
             </child>
             <child>
-              <object class="GtkLabel" id="lastHeader">
+              <object class="GtkLabel">
                 <property name="label" translatable="yes">Last Activity:</property>
                 <property name="valign">start</property>
-                <property name="use-markup">True</property>
-                <property name="visible">True</property>
+                <property name="halign">start</property>
+                <property name="no-show-all">True</property>
+                <property name="visible" bind-source="lastLabel"
+                          bind-property="visible" bind-flags="sync-create"/>
+                <property name="margin-start">20</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
               </object>
               <packing>
-                <property name="top-attach">1</property>
+                <property name="top-attach">0</property>
                 <property name="left-attach">0</property>
               </packing>
             </child>
@@ -66,24 +79,81 @@
                 <property name="use-markup">True</property>
                 <property name="wrap">True</property>
                 <property name="hexpand">True</property>
+                <property name="visible">False</property>
+                <property name="no-show-all">True</property>
+                <property name="hexpand">True</property>
+                <property name="halign">start</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
+              </object>
+              <packing>
+                <property name="top-attach">0</property>
+                <property name="left-attach">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkImage">
+                <property name="icon-name">avatar-default-symbolic</property>
                 <property name="visible">True</property>
+                <property name="halign">start</property>
+                <property name="margin-left">0</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
               </object>
               <packing>
+                <property name="width">1</property>
                 <property name="top-attach">1</property>
-                <property name="left-attach">1</property>
+                <property name="left-attach">0</property>
               </packing>
             </child>
+            <child>
+              <object class="GtkLabel" id="fullnameLabel">
+                <property name="ellipsize">end</property>
+                <property name="halign">start</property>
+                <property name="visible">True</property>
+                <property name="margin-start">20</property>
+                <property name="hexpand">True</property>
+                <property name="use-markup">True</property>
+                <property name="max-width-chars">25</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
+              </object>
+              <packing>
+                <property name="width">2</property>
+                <property name="top-attach">1</property>
+                <property name="left-attach">0</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible" bind-source="messageButton"
+                      bind-property="visible" bind-flags="sync-create"/>
+            <property name="margin-top">7</property>
           </object>
         </child>
         <child>
-          <object class="GtkButton" id="messageButton">
-            <property name="label" translatable="yes">Message</property>
-            <property name="margin-top">12</property>
-            <property name="halign">end</property>
+          <object class="GtkModelButton" id="messageButton">
+            <property name="text" translatable="yes">Message</property>
+            <property name="halign">fill</property>
             <property name="hexpand">True</property>
             <property name="visible">True</property>
+            <property name="no-show-all">True</property>
           </object>
         </child>
+        <!-- <child>
+          <object class="GtkModelButton" id="pastActivityButton">
+            <property name="text" translatable="yes">View Past Activity</property>
+            <property name="halign">fill</property>
+            <property name="hexpand">True</property>
+            <property name="visible">True</property>
+            <property name="no-show-all">True</property>
+          </object>
+        </child> -->
       </object>
     </child>
   </template>
diff --git a/src/userList.js b/src/userList.js
index 4850fdb..dde044c 100644
--- a/src/userList.js
+++ b/src/userList.js
@@ -110,7 +110,6 @@ const UserListDetails = new Lang.Class({
                        'spinner',
                        'detailsGrid',
                        'fullnameLabel',
-                       'lastHeader',
                        'lastLabel',
                        'messageButton'],
     Properties: { 'expanded': GObject.ParamSpec.boolean('expanded',
@@ -124,13 +123,13 @@ const UserListDetails = new Lang.Class({
         delete params.user;
 
         this._expanded = false;
+        this._initialDetailsLoaded = false;
 
         this.parent(params);
 
         this._messageButton.connect('clicked',
-                                    Lang.bind(this, this._onButtonClicked));
-        this._user.connection.connect('notify::self-contact',
-                                      Lang.bind(this, this._updateButtonVisibility));
+                                    Lang.bind(this, this._onMessageButtonClicked));
+
         this._updateButtonVisibility();
         this._detailsGrid.hide();
     },
@@ -154,13 +153,14 @@ const UserListDetails = new Lang.Class({
     },
 
     _expand: function() {
-        let prevDetails = this._fullnameLabel.label != '';
-        this._detailsGrid.visible = prevDetails;
-        this._spinnerBox.visible = !prevDetails;
+        this._detailsGrid.visible = this._initialDetailsLoaded;
+        this._spinnerBox.visible = !this._initialDetailsLoaded;
         this._spinner.start();
 
         this._cancellable = new Gio.Cancellable();
-        this._user.request_contact_info_async(this._cancellable,
+
+        if (this._user)
+            this._user.request_contact_info_async(this._cancellable,
                                               Lang.bind(this, this._onContactInfoReady));
     },
 
@@ -203,6 +203,8 @@ const UserListDetails = new Lang.Class({
     },
 
     _onContactInfoReady: function(c, res) {
+        this._initialDetailsLoaded = true;
+
         let fn, last;
         let info = this._user.get_contact_info();
         for (let i = 0; i < info.length; i++) {
@@ -218,13 +220,9 @@ const UserListDetails = new Lang.Class({
         this._fullnameLabel.label = fn;
 
         if (last) {
-            this._lastHeader.label = '<small>' + _("Last Activity:") + '</small>';
-            this._lastHeader.show();
-
-            this._lastLabel.label = '<small>' + this._formatLast(last) + '</small>';
+            this._lastLabel.label = this._formatLast(last);
             this._lastLabel.show();
         } else {
-            this._lastHeader.hide();
             this._lastLabel.hide();
         }
 
@@ -233,7 +231,7 @@ const UserListDetails = new Lang.Class({
         this._detailsGrid.show();
     },
 
-    _onButtonClicked: function() {
+    _onMessageButtonClicked: function() {
         let account = this._user.connection.get_account();
 
         let app = Gio.Application.get_default();
@@ -247,8 +245,13 @@ const UserListDetails = new Lang.Class({
     },
 
     _updateButtonVisibility: function() {
-        let visible = this._user != this._user.connection.self_contact;
-        this._messageButton.visible = visible;
+        if (!this._user || this._user == this._user.connection.self_contact) {
+            this._messageButton.visible = false;
+            this._messageButton.sensitive = true;
+        } else {
+            this._messageButton.visible = true;
+            this._messageButton.sensitive = true;
+        }
     }
 });