From 520f2ac3491b5acaf64276b626c1a9d61623f834 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Fri, 17 Mar 2017 18:37:59 +1300
Subject: [PATCH 1/7] Add a button to the input bar to complete nicks

---
 css/glowingbear.css           | 6 ++++++
 css/themes/base16-default.css | 3 ++-
 css/themes/blue.css           | 3 ++-
 css/themes/dark.css           | 3 ++-
 css/themes/light.css          | 1 +
 directives/input.html         | 1 +
 js/inputbar.js                | 6 ++++++
 7 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/css/glowingbear.css b/css/glowingbear.css
index b556e46..60a7e0b 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -89,6 +89,12 @@ input[type=text], input[type=password], #sendMessage {
     margin-bottom: 5px !important;
 }
 
+.btn-complete-nick {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
 .btn-send-image {
     position: relative;
     overflow: hidden;
diff --git a/css/themes/base16-default.css b/css/themes/base16-default.css
index 3f91ae8..7070fc7 100644
--- a/css/themes/base16-default.css
+++ b/css/themes/base16-default.css
@@ -302,7 +302,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.2) inset;
 }
 
-input[type=text], input[type=password], #sendMessage, .btn-send, .btn-send-image {
+input[type=text], input[type=password], #sendMessage, .btn-send, .btn-send-image, .btn-complete-nick {
     color: var(--base05);
     background: var(--base01);
 }
@@ -335,6 +335,7 @@ input[type=text]:-moz-placeholder, input[type=password]:-moz-placeholder { /* Fi
     background: var(--base08);
 }
 
+.btn-complete-nick:hover, .btn-complete-nick:focus,
 .btn-send:hover, .btn-send:focus,
 .btn-send-image:hover, .btn-send-image:focus {
     background-color: var(--base07);
diff --git a/css/themes/blue.css b/css/themes/blue.css
index 28e4189..7946bea 100644
--- a/css/themes/blue.css
+++ b/css/themes/blue.css
@@ -88,11 +88,12 @@ input[type=text], input[type=password], #sendMessage, .badge {
    border: 1px solid #4a5b6c;
 }
 
-input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-send-image {
+input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-send-image, .btn-complete-nick {
     color: #ccc;
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
 
+.btn-complete-nick:hover, .btn-complete-nick:focus,
 .btn-send:hover, .btn-send:focus,
 .btn-send-image:hover, .btn-send-image:focus {
     background-color: #555;
diff --git a/css/themes/dark.css b/css/themes/dark.css
index 40368ee..0601900 100644
--- a/css/themes/dark.css
+++ b/css/themes/dark.css
@@ -82,11 +82,12 @@ input[type=text], input[type=password], #sendMessage, .badge {
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
 }
 
-input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-send-image {
+input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-send-image, .btn-complete-nick {
     color: #ccc;
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
 
+.btn-complete-nick:hover, .btn-complete-nick:focus,
 .btn-send:hover, .btn-send:focus,
 .btn-send-image:hover, .btn-send-image:focus {
     background-color: #555;
diff --git a/css/themes/light.css b/css/themes/light.css
index 0ed9c14..a9a98fd 100644
--- a/css/themes/light.css
+++ b/css/themes/light.css
@@ -27,6 +27,7 @@ html {
     background: #428BCA;
 }
 
+.btn-complete-nick,
 .btn-send,
 .btn-send-image, {
     background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.3);
diff --git a/directives/input.html b/directives/input.html
index 030708f..adc5e7f 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -3,6 +3,7 @@
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>
     <span class="input-group-btn">
+      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
       <label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
         <i class="glyphicon glyphicon-picture"></i>
         <input type="file" accept="image/*" multiple title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)">
diff --git a/js/inputbar.js b/js/inputbar.js
index 4777988..e60ded1 100644
--- a/js/inputbar.js
+++ b/js/inputbar.js
@@ -497,6 +497,12 @@ weechat.directive('inputBar', function() {
                     return true;
                 }
             };
+
+            $scope.handleCompleteNickButton = function($event) {
+                $event.preventDefault();
+                $scope.completeNick();
+                return true;
+            };
         }]
     };
 });

From c6a8b69fe095aff9a23d68b9a4bc95901b1c1dc3 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sat, 18 Mar 2017 01:51:49 +1300
Subject: [PATCH 2/7] Only show nick completion button on mobile UI

---
 directives/input.html | 2 +-
 js/inputbar.js        | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/directives/input.html b/directives/input.html
index adc5e7f..d275638 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -3,7 +3,7 @@
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>
     <span class="input-group-btn">
-      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
+      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-hide="hideCompleteNickButton()" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
       <label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
         <i class="glyphicon glyphicon-picture"></i>
         <input type="file" accept="image/*" multiple title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)">
diff --git a/js/inputbar.js b/js/inputbar.js
index e60ded1..6ebbccf 100644
--- a/js/inputbar.js
+++ b/js/inputbar.js
@@ -14,7 +14,7 @@ weechat.directive('inputBar', function() {
             command: '=command'
         },
 
-        controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', function($rootScope,
+        controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', 'utils', function($rootScope,
                              $scope,
                              $element, //XXX do we need this? don't seem to be using it
                              $log,
@@ -22,7 +22,8 @@ weechat.directive('inputBar', function() {
                              imgur,
                              models,
                              IrcUtils,
-                             settings) {
+                             settings,
+                             utils) {
 
             // E.g. Turn :smile: into the unicode equivalent
             $scope.inputChanged = function() {
@@ -503,6 +504,10 @@ weechat.directive('inputBar', function() {
                 $scope.completeNick();
                 return true;
             };
+
+            $scope.hideCompleteNickButton = function() {
+                return !utils.isMobileUi();
+            };
         }]
     };
 });

From 64e801ef65091d1ffabc7f6c3fa2ff164dfad886 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sat, 18 Mar 2017 03:29:59 +1300
Subject: [PATCH 3/7] Expose utils to the scope and use isMobileUi in
 input.html

---
 directives/input.html | 2 +-
 js/inputbar.js        | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/directives/input.html b/directives/input.html
index d275638..ed88735 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -3,7 +3,7 @@
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>
     <span class="input-group-btn">
-      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-hide="hideCompleteNickButton()" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
+      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-hide="!utils.isMobileUi()" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
       <label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
         <i class="glyphicon glyphicon-picture"></i>
         <input type="file" accept="image/*" multiple title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)">
diff --git a/js/inputbar.js b/js/inputbar.js
index 6ebbccf..ef8e0c3 100644
--- a/js/inputbar.js
+++ b/js/inputbar.js
@@ -25,6 +25,9 @@ weechat.directive('inputBar', function() {
                              settings,
                              utils) {
 
+            // Expose utils to be able to check if we're on a mobile UI
+            $scope.utils = utils;
+
             // E.g. Turn :smile: into the unicode equivalent
             $scope.inputChanged = function() {
                 $scope.command = emojione.shortnameToUnicode($scope.command);
@@ -504,10 +507,6 @@ weechat.directive('inputBar', function() {
                 $scope.completeNick();
                 return true;
             };
-
-            $scope.hideCompleteNickButton = function() {
-                return !utils.isMobileUi();
-            };
         }]
     };
 });

From 8989695af63a56c33aab1448f59a7344544dcb42 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sat, 18 Mar 2017 03:31:18 +1300
Subject: [PATCH 4/7] Re-focus the input bar after nick completion button is
 pressed

---
 js/inputbar.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/inputbar.js b/js/inputbar.js
index ef8e0c3..17ef481 100644
--- a/js/inputbar.js
+++ b/js/inputbar.js
@@ -505,6 +505,11 @@ weechat.directive('inputBar', function() {
             $scope.handleCompleteNickButton = function($event) {
                 $event.preventDefault();
                 $scope.completeNick();
+
+                setTimeout(function() {
+                    $scope.getInputNode().focus();
+                }, 0);
+
                 return true;
             };
         }]

From 56fbdb425018c74a198992bb09394432fded40c1 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sat, 18 Mar 2017 17:31:01 +1300
Subject: [PATCH 5/7] Work around hover state being applied to buttons in
 inputbar on mobile

---
 css/themes/base16-default.css | 12 +++++++++---
 css/themes/blue.css           | 12 +++++++++---
 css/themes/dark.css           | 12 +++++++++---
 css/themes/light.css          |  6 ++++++
 directives/input.html         |  2 +-
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/css/themes/base16-default.css b/css/themes/base16-default.css
index 7070fc7..e01bfcf 100644
--- a/css/themes/base16-default.css
+++ b/css/themes/base16-default.css
@@ -335,13 +335,19 @@ input[type=text]:-moz-placeholder, input[type=password]:-moz-placeholder { /* Fi
     background: var(--base08);
 }
 
-.btn-complete-nick:hover, .btn-complete-nick:focus,
-.btn-send:hover, .btn-send:focus,
-.btn-send-image:hover, .btn-send-image:focus {
+.is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
+.is-desktop-ui .btn-send:hover, .btn-send:focus,
+.is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
     background-color: var(--base07);
     color: var(--base01);
 }
 
+.is-mobile-ui .btn-complete-nick:hover,
+.is-mobile-ui .btn-send:hover,
+.is-mobile-ui .btn-send-image:hover {
+    color: var(--base05);
+}
+
 #connection-infos {
     color: var(--base04);
 }
diff --git a/css/themes/blue.css b/css/themes/blue.css
index 7946bea..39bb4d5 100644
--- a/css/themes/blue.css
+++ b/css/themes/blue.css
@@ -93,13 +93,19 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
 
-.btn-complete-nick:hover, .btn-complete-nick:focus,
-.btn-send:hover, .btn-send:focus,
-.btn-send-image:hover, .btn-send-image:focus {
+.is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
+.is-desktop-ui .btn-send:hover, .btn-send:focus,
+.is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
     background-color: #555;
     color: white;
 }
 
+.is-mobile-ui .btn-complete-nick:hover,
+.is-mobile-ui .btn-send:hover,
+.is-mobile-ui .btn-send-image:hover {
+    color: #ccc;
+}
+
 .nav-pills li:nth-child(2n) {
     background: #283244;
 }
diff --git a/css/themes/dark.css b/css/themes/dark.css
index 0601900..6812edf 100644
--- a/css/themes/dark.css
+++ b/css/themes/dark.css
@@ -87,13 +87,19 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
 
-.btn-complete-nick:hover, .btn-complete-nick:focus,
-.btn-send:hover, .btn-send:focus,
-.btn-send-image:hover, .btn-send-image:focus {
+.is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
+.is-desktop-ui .btn-send:hover, .btn-send:focus,
+.is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
     background-color: #555;
     color: white;
 }
 
+.is-mobile-ui .btn-complete-nick:hover,
+.is-mobile-ui .btn-send:hover,
+.is-mobile-ui .btn-send-image:hover {
+    color: #ccc;
+}
+
 #connection-infos {
     color: #aaa;
 }
diff --git a/css/themes/light.css b/css/themes/light.css
index a9a98fd..ab0c2b2 100644
--- a/css/themes/light.css
+++ b/css/themes/light.css
@@ -34,6 +34,12 @@ html {
     color: #428BCA;
 }
 
+.is-mobile-ui .btn-complete-nick:hover,
+.is-mobile-ui .btn-send:hover,
+.is-mobile-ui .btn-send-image:hover {
+    color: #428BCA;
+}
+
 tr.bufferline:hover {
     background-color: #efefef;
 }
diff --git a/directives/input.html b/directives/input.html
index ed88735..ccdf774 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -1,4 +1,4 @@
-<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()" imgur-drop>
+<form class="form form-horizontal {{ utils.isMobileUi() ? 'is-mobile-ui' : 'is-desktop-ui' }}" id="inputform" ng-submit="sendMessage()" imgur-drop>
   <div class="input-group">
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>

From 0eb01bad514f4f6ab57237e964aa3450009d5198 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sun, 19 Mar 2017 01:51:15 +1300
Subject: [PATCH 6/7] Use ng-class instead of string interpolation in
 input.html

---
 directives/input.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/directives/input.html b/directives/input.html
index ccdf774..3031559 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -1,4 +1,4 @@
-<form class="form form-horizontal {{ utils.isMobileUi() ? 'is-mobile-ui' : 'is-desktop-ui' }}" id="inputform" ng-submit="sendMessage()" imgur-drop>
+<form class="form form-horizontal" ng-class="utils.isMobileUi() ? 'is-mobile-ui' : 'is-desktop-ui'" id="inputform" ng-submit="sendMessage()" imgur-drop>
   <div class="input-group">
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>

From 1b7f7354aad2cce0511b8bc7ebd7c6dfefe333d6 Mon Sep 17 00:00:00 2001
From: Alice Jenkinson <h@nea.nz>
Date: Sun, 19 Mar 2017 02:24:58 +1300
Subject: [PATCH 7/7] Change nick complete button glyph to bullhorn

---
 directives/input.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/directives/input.html b/directives/input.html
index 3031559..48c0877 100644
--- a/directives/input.html
+++ b/directives/input.html
@@ -3,7 +3,7 @@
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>
     <span class="input-group-btn">
-      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-hide="!utils.isMobileUi()" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-chevron-right"></i></button>
+      <button class="btn btn-complete-nick unselectable" title="Complete nick" ng-hide="!utils.isMobileUi()" ng-click="handleCompleteNickButton($event)"><i class="glyphicon glyphicon-bullhorn"></i></button>
       <label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
         <i class="glyphicon glyphicon-picture"></i>
         <input type="file" accept="image/*" multiple title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)">