[polari] entryArea: Use popover to change nick ...

[Florian Müllner <fmuellner src gnome org>]

commit 2357406df427b5636be10c5ab6f69c67602da360
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Nov 19 21:06:48 2015 +0100

    entryArea: Use popover to change nick ...
    
    ... and restyle the entry area to blend in with the chat log. This results
    in an overall less heavy layout, removes the focus-rect weirdness of linked
    entries, and last but not least makes Lapo happy.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=760872

 data/resources/application.css |   14 ++--
 data/resources/entry-area.ui   |  147 ++++++++++++++++++++++++++++++----------
 src/chatView.js                |   13 +++-
 src/entryArea.js               |   38 +++++------
 src/roomStack.js               |   11 +--
 5 files changed, 148 insertions(+), 75 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index 74902b0..c2ec848 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -28,12 +28,14 @@
     border-width: 0;
 }
 
-.polari-input-area {
-    background-image: none;
-    background-color: @polari_dark_bg_color;
-    border-color: @borders;
-    border-style: solid;
-    border-width: 1px 0 0 0;
+.polari-paste-confirmation {
+    border: 0 solid @borders;
+    border-top-width: 1px;
+}
+
+.polari-nick-button {
+    padding-left: 8px;
+    padding-right: 8px;
 }
 
 .polari-nick-entry {
diff --git a/data/resources/entry-area.ui b/data/resources/entry-area.ui
index 2e3f649..75bece4 100644
--- a/data/resources/entry-area.ui
+++ b/data/resources/entry-area.ui
@@ -2,75 +2,150 @@
 <!-- Generated with glade 3.19.0 -->
 <interface>
   <requires lib="gtk+" version="3.16"/>
-  <template class="Gjs_EntryArea" parent="GtkStack">
-    <property name="visible">True</property>
+  <object class="GtkPopover" id="nickPopover">
     <property name="can_focus">False</property>
-    <property name="valign">end</property>
-    <property name="margin">6</property>
-    <property name="transition_type">crossfade</property>
+    <property name="position">top</property>
     <child>
-      <object class="GtkBox" id="box1">
+      <object class="GtkBox" id="box6">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="margin">6</property>
+        <property name="orientation">vertical</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="GtkLabel" id="label1">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">start</property>
+            <property name="hexpand">True</property>
+            <property name="label" translatable="yes">Change nickname:</property>
+          </object>
+        </child>
         <child>
           <object class="GtkEntry" id="nickEntry">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
-            <style>
-              <class name="polari-nick-entry"/>
-            </style>
+            <property name="activates_default">True</property>
           </object>
         </child>
         <child>
-          <object class="Gjs_ChatEntry" id="chatEntry">
+          <object class="GtkButton" id="changeButton">
+            <property name="label" translatable="yes">_Change</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="can_default">True</property>
+            <property name="halign">end</property>
             <property name="hexpand">True</property>
+            <property name="use_underline">True</property>
+            <style>
+              <class name="suggested-action"/>
+            </style>
           </object>
         </child>
-        <style>
-          <class name="linked"/>
-        </style>
       </object>
-      <packing>
-        <property name="name">default</property>
-      </packing>
     </child>
+  </object>
+  <template class="Gjs_EntryArea" parent="GtkStack">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="valign">end</property>
+    <property name="transition_type">crossfade</property>
+    <style>
+      <class name="view"/>
+    </style>
     <child>
-      <object class="GtkBox" id="multiLineBox">
+      <object class="GtkBox" id="box1">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="spacing">6</property>
+        <property name="margin">6</property>
+        <property name="margin-end">14</property>
         <child>
-          <object class="GtkLabel" id="multiLineLabel">
+          <object class="GtkMenuButton" id="nickButton">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">start</property>
-            <property name="hexpand">True</property>
-            <property name="ellipsize">end</property>
-            <property name="xalign">0</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="focus_on_click">False</property>
+            <property name="popover">nickPopover</property>
+            <child>
+              <object class="GtkLabel" id="nickLabel">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="xalign">0</property>
+              </object>
+            </child>
+            <child internal-child="accessible">
+              <object class="AtkObject" id="menubutton1-atkobject">
+                <property name="AtkObject::accessible-name"
+                          translatable="yes">Change nickname</property>
+              </object>
+            </child>
+            <style>
+              <class name="flat"/>
+              <class name="polari-nick-button"/>
+            </style>
           </object>
         </child>
         <child>
-          <object class="GtkButton" id="cancelButton">
-            <property name="label" translatable="yes">_Cancel</property>
+          <object class="Gjs_ChatEntry" id="chatEntry">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="use_underline">True</property>
+            <property name="hexpand">True</property>
           </object>
         </child>
+      </object>
+      <packing>
+        <property name="name">default</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkFrame" id="frame1">
+        <property name="visible">True</property>
+        <property name="shadow_type">none</property>
+        <style>
+          <class name="background"/>
+          <class name="polari-paste-confirmation"/>
+        </style>
         <child>
-          <object class="GtkButton" id="pasteButton">
-            <property name="label" translatable="yes">_Paste</property>
+          <object class="GtkBox" id="multiLineBox">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="action_name">app.paste-text</property>
-            <property name="use_underline">True</property>
-            <style>
-              <class name="suggested-action"/>
-            </style>
+            <property name="can_focus">False</property>
+            <property name="spacing">6</property>
+            <property name="margin">6</property>
+            <property name="margin-end">14</property>
+            <child>
+              <object class="GtkLabel" id="multiLineLabel">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">start</property>
+                <property name="hexpand">True</property>
+                <property name="ellipsize">end</property>
+                <property name="xalign">0</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="cancelButton">
+                <property name="label" translatable="yes">_Cancel</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="use_underline">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="pasteButton">
+                <property name="label" translatable="yes">_Paste</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.paste-text</property>
+                <property name="use_underline">True</property>
+                <style>
+                  <class name="suggested-action"/>
+                </style>
+              </object>
+            </child>
           </object>
         </child>
       </object>
diff --git a/src/chatView.js b/src/chatView.js
index 714eab6..8387b61 100644
--- a/src/chatView.js
+++ b/src/chatView.js
@@ -28,7 +28,10 @@ const STATUS_NOISE_MAXIMUM = 4;
 const NUM_INITIAL_LOG_EVENTS = 50; // number of log events to fetch on start
 const NUM_LOG_EVENTS = 10; // number of log events to fetch when requesting more
 
-const MARGIN = 6;
+const MARGIN = 14;
+const NICK_SPACING = 14; // space after nicks, matching the following elements
+                         // of the nick button in the entry area:
+                         // 8px padding + 6px spacing
 
 const NICKTAG_PREFIX = 'nick';
 
@@ -497,11 +500,13 @@ const ChatView = new Lang.Class({
                                  metrics.get_approximate_digit_width());
         let pixelWidth = Pango.units_to_double(charWidth);
 
+        let totalWidth = this._maxNickChars * pixelWidth + NICK_SPACING;
+
         let tabs = Pango.TabArray.new(1, true);
-        tabs.set_tab(0, Pango.TabAlign.LEFT, this._maxNickChars * pixelWidth);
+        tabs.set_tab(0, Pango.TabAlign.LEFT, totalWidth);
         this._view.tabs = tabs;
-        this._view.indent = -this._maxNickChars * pixelWidth;
-        this._view.left_margin = MARGIN + this._maxNickChars * pixelWidth;
+        this._view.indent = -totalWidth;
+        this._view.left_margin = MARGIN + totalWidth;
     },
 
     _updateActive: function() {
diff --git a/src/entryArea.js b/src/entryArea.js
index 302729a..cc4a869 100644
--- a/src/entryArea.js
+++ b/src/entryArea.js
@@ -53,7 +53,11 @@ const EntryArea = new Lang.Class({
     Extends: Gtk.Stack,
     Template: 'resource:///org/gnome/Polari/entry-area.ui',
     InternalChildren: ['chatEntry',
+                       'nickButton',
+                       'nickLabel',
+                       'nickPopover',
                        'nickEntry',
+                       'changeButton',
                        'multiLineBox',
                        'multiLineLabel',
                        'cancelButton',
@@ -76,27 +80,16 @@ const EntryArea = new Lang.Class({
                                                           Lang.bind(this, this._onKeyPressEvent));
             }));
 
-        this._nickEntry.width_chars = ChatView.MAX_NICK_CHARS
-        this._nickEntry.connect('activate', Lang.bind(this,
+        this._nickLabel.set_state_flags(Gtk.StateFlags.LINK, false);
+        this._nickLabel.width_chars = ChatView.MAX_NICK_CHARS
+
+        this._changeButton.connect('clicked', Lang.bind(this,
             function() {
                if (this._nickEntry.text)
                    this._setNick(this._nickEntry.text);
-               this._chatEntry.grab_focus();
-            }));
-        this._nickEntry.connect('focus-out-event', Lang.bind(this,
-            function() {
-                this._nickEntry.text = '';
-                return Gdk.EVENT_PROPAGATE;
-            }));
-        this._nickEntry.connect_after('key-press-event', Lang.bind(this,
-            function(w, event) {
-                let [, keyval] = event.get_keyval();
-                if (keyval == Gdk.KEY_Escape) {
-                    this._chatEntry.grab_focus();
-                    return Gdk.EVENT_STOP;
-                }
-                return Gdk.EVENT_PROPAGATE;
+               this._nickButton.active = false;
             }));
+        this._nickPopover.set_default_widget(this._changeButton);
 
         this._chatEntry.connect('text-pasted', Lang.bind(this, this._onTextPasted));
         this._chatEntry.connect('changed', Lang.bind(this, this._onEntryChanged));
@@ -235,8 +228,8 @@ const EntryArea = new Lang.Class({
 
 
     _setNick: function(nick) {
-        this._nickEntry.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS)
-        this._nickEntry.placeholder_text = nick;
+        this._nickLabel.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS);
+        this._nickLabel.label = nick;
 
         let account = this._room.account;
         account.set_nickname_async(nick, Lang.bind(this,
@@ -271,8 +264,11 @@ const EntryArea = new Lang.Class({
         let nick = channel ? channel.connection.self_contact.alias
                            : this._room ? this._room.account.nickname : '';
 
-        this._nickEntry.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS)
-        this._nickEntry.placeholder_text = nick;
+        this._nickLabel.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS);
+        this._nickLabel.label = nick;
+
+        if (!this._nickEntry.is_focus)
+            this._nickEntry.text = nick;
     },
 
     _onDestroy: function() {
diff --git a/src/roomStack.js b/src/roomStack.js
index b4ffa93..446b76a 100644
--- a/src/roomStack.js
+++ b/src/roomStack.js
@@ -133,22 +133,17 @@ const RoomView = new Lang.Class({
         this._view = room ? new ChatView.ChatView(room)
                           : new ChatPlaceholder();
 
-        this._entryArea = new EntryArea.EntryArea({ room: room,
-                                                    sensitive: false });
-
         this.widget = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
         this.widget.add(this._view.widget);
 
-        this.inputWidget = new Gtk.Frame({ shadow_type: Gtk.ShadowType.NONE });
-        this.inputWidget.get_style_context().add_class('polari-input-area');
+        this.inputWidget = new EntryArea.EntryArea({ room: room,
+                                                     sensitive: false });
         this.widget.add(this.inputWidget);
 
-        this.inputWidget.add(this._entryArea);
-
         this.widget.show_all();
     },
 
     set inputSensitive(sensitive) {
-        this._entryArea.sensitive = sensitive;
+        this.inputWidget.sensitive = sensitive;
     }
 });