ibusCandidatePopup: Add pagination buttons

Makes switching candidates pages with pointer clicks possible.

https://bugzilla.gnome.org/show_bug.cgi?id=691902

data/theme/gnome-shell.css

@@ -286,6 +286,7 @@ StScrollBar StButton#vhandle:active {
 
 /* Buttons */
 
+.candidate-page-button,
 .dash-search-button,
 .notification-button,
 .notification-icon-button,
@@ -303,6 +304,7 @@ StScrollBar StButton#vhandle:active {
     font-weight: bold;
 }
 
+.candidate-page-button:hover,
 .dash-search-button:hover,
 .notification-button:hover,
 .notification-icon-button:hover,
@@ -322,6 +324,8 @@ StScrollBar StButton#vhandle:active {
     border-width: 2px;
 }
 
+.candidate-page-button:active,
+.candidate-page-button:pressed,
 .dash-search-button:active,
 .dash-search-button:pressed,
 .notification-button:active,
@@ -334,6 +338,7 @@ StScrollBar StButton#vhandle:active {
     background-gradient-end: rgba(255, 255, 255, 0.2);
 }
 
+.candidate-page-button:insensitive,
 .notification-button:insensitive,
 .notification-icon-button:insensitive,
 .modal-dialog-button:insensitive {
@@ -2121,6 +2126,31 @@ StScrollBar StButton#vhandle:active {
     background-color: rgba(255,255,255,0.2);
 }
 
+.candidate-page-button-box {
+    height: 2em;
+    width: 80px;
+}
+
+.vertical .candidate-page-button-box {
+    padding-top: 0.5em;
+}
+
+.horizontal .candidate-page-button-box {
+    padding-left: 0.5em;
+}
+
+.candidate-page-button-previous {
+    border-radius: 4px 0px 0px 4px;
+}
+
+.candidate-page-button-next {
+    border-radius: 0px 4px 4px 0px;
+}
+
+.candidate-page-button-icon {
+    icon-size: 1em;
+}
+
 /* Login Dialog */
 
 .login-dialog-banner {

js/ui/ibusCandidatePopup.js

@@ -3,6 +3,7 @@
 const Clutter = imports.gi.Clutter;
 const IBus = imports.gi.IBus;
 const Lang = imports.lang;
+const Signals = imports.signals;
 const St = imports.gi.St;
 
 const BoxPointer = imports.ui.boxpointer;
@@ -27,6 +28,25 @@ const CandidateArea = new Lang.Class({
             this.actor.add(box);
         }
 
+        this._buttonBox = new St.BoxLayout({ style_class: 'candidate-page-button-box' });
+
+        this._previousButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-previous' });
+        this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
+        this._buttonBox.add(this._previousButton, { expand: true });
+
+        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next' });
+        this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
+        this._buttonBox.add(this._nextButton, { expand: true });
+
+        this.actor.add(this._buttonBox);
+
+        this._previousButton.connect('clicked', Lang.bind(this, function() {
+            this.emit('previous-page');
+        }));
+        this._nextButton.connect('clicked', Lang.bind(this, function() {
+            this.emit('next-page');
+        }));
+
         this._orientation = -1;
         this._cursorPosition = 0;
     },
@@ -37,10 +57,19 @@ const CandidateArea = new Lang.Class({
 
         this._orientation = orientation;
 
-        if (this._orientation == IBus.Orientation.HORIZONTAL)
+        if (this._orientation == IBus.Orientation.HORIZONTAL) {
             this.actor.vertical = false;
-        else                    // VERTICAL || SYSTEM
+            this.actor.remove_style_class_name('vertical');
+            this.actor.add_style_class_name('horizontal');
+            this._previousButton.child.icon_name = 'go-previous-symbolic';
+            this._nextButton.child.icon_name = 'go-next-symbolic';
+        } else {                // VERTICAL || SYSTEM
             this.actor.vertical = true;
+            this.actor.add_style_class_name('vertical');
+            this.actor.remove_style_class_name('horizontal');
+            this._previousButton.child.icon_name = 'go-up-symbolic';
+            this._nextButton.child.icon_name = 'go-down-symbolic';
+        }
     },
 
     setCandidates: function(indexes, candidates, orientation, cursorPosition, cursorVisible) {
@@ -63,7 +92,18 @@ const CandidateArea = new Lang.Class({
         if (cursorVisible)
             this._candidateBoxes[cursorPosition].add_style_pseudo_class('selected');
     },
+
+    updateButtons: function(wrapsAround, page, nPages) {
+        if (nPages < 2) {
+            this._buttonBox.hide();
+            return;
+        }
+        this._buttonBox.show();
+        this._previousButton.reactive = wrapsAround || page > 0;
+        this._nextButton.reactive = wrapsAround || page < nPages - 1;
+    },
 });
+Signals.addSignalMethods(CandidateArea.prototype);
 
 const CandidatePopup = new Lang.Class({
     Name: 'CandidatePopup',
@@ -75,7 +115,7 @@ const CandidatePopup = new Lang.Class({
         this._boxPointer = new BoxPointer.BoxPointer(St.Side.TOP);
         this._boxPointer.actor.visible = false;
         this._boxPointer.actor.style_class = 'candidate-popup-boxpointer';
-        Main.uiGroup.add_actor(this._boxPointer.actor);
+        Main.layoutManager.addChrome(this._boxPointer.actor);
 
         let box = new St.BoxLayout({ style_class: 'candidate-popup-content',
                                      vertical: true });
@@ -92,6 +132,13 @@ const CandidatePopup = new Lang.Class({
         this._candidateArea = new CandidateArea();
         box.add(this._candidateArea.actor);
 
+        this._candidateArea.connect('previous-page', Lang.bind(this, function() {
+            this._panelService.page_up();
+        }));
+        this._candidateArea.connect('next-page', Lang.bind(this, function() {
+            this._panelService.page_down();
+        }));
+
         this._panelService = null;
     },
 
@@ -149,12 +196,14 @@ const CandidatePopup = new Lang.Class({
                                  this._candidateArea.actor.visible = visible;
                                  this._updateVisibility();
 
+                                 let nCandidates = lookupTable.get_number_of_candidates();
                                  let cursorPos = lookupTable.get_cursor_pos();
                                  let pageSize = lookupTable.get_page_size();
+                                 let nPages = Math.ceil(nCandidates / pageSize);
                                  let page = ((cursorPos == 0) ? 0 : Math.floor(cursorPos / pageSize));
                                  let startIndex = page * pageSize;
-                                 let endIndex = Math.min((page + 1) * pageSize,
+                                 let endIndex = Math.min((page + 1) * pageSize, nCandidates);
-                                                         lookupTable.get_number_of_candidates());
+
                                  let indexes = [];
                                  let indexLabel;
                                  for (let i = 0; indexLabel = lookupTable.get_label(i); ++i)
@@ -169,6 +218,7 @@ const CandidatePopup = new Lang.Class({
                                                                    lookupTable.get_orientation(),
                                                                    cursorPos % pageSize,
                                                                    lookupTable.is_cursor_visible());
+                                 this._candidateArea.updateButtons(lookupTable.is_round(), page, nPages);
                              }));
         panelService.connect('show-lookup-table',
                              Lang.bind(this, function(ps) {