[gnome-shell/wip/carlosg/osk-emoji-and-keypad: 20/22] keyboard: Separate aspect ratio control to a container actor

[Carlos Garnacho <carlosg src gnome org>]

commit b20271df93e97d9bc2fd2e2804837828d7268ace
Author: Carlos Garnacho <carlosg gnome org>
Date:   Mon Jan 21 21:39:27 2019 +0100

    keyboard: Separate aspect ratio control to a container actor
    
    This will be useful as we want other panels (eg. emoji) to preserve aspect
    ratio with the rest of the OSK. Separate the aspect ratio management logic
    into this container that will be the parent of them all.

 js/ui/keyboard.js | 77 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 48 insertions(+), 29 deletions(-)
---
diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index fc882b8f1..5ae2237fe 100644
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -55,6 +55,45 @@ const defaultKeysPost = [
       [{ width: 1.5, action: 'languageMenu', extraClassName: 'layout-key' }, { width: 1.5, action: 'hide', 
extraClassName: 'hide-key' }] ],
 ];
 
+var AspectContainer = new Lang.Class({
+    Name: 'AspectContainer',
+    Extends: St.Widget,
+
+    _init(params) {
+        this.parent(params);
+        this._ratio = 1;
+    },
+
+    setRatio(relWidth, relHeight) {
+        this._ratio = relWidth / relHeight;
+        this.queue_relayout();
+    },
+
+    vfunc_allocate(box, flags) {
+        if (box.get_width() > 0 && box.get_height() > 0) {
+            let sizeRatio = box.get_width() / box.get_height();
+
+            if (sizeRatio >= this._ratio) {
+                /* Restrict horizontally */
+                let width = box.get_height() * this._ratio;
+                let diff = box.get_width() - width;
+
+                box.x1 += Math.floor(diff / 2);
+                box.x2 -= Math.ceil(diff / 2);
+            } else {
+                /* Restrict vertically */
+                let height = box.get_width() / this._ratio;
+                let diff = box.get_height() - height;
+
+                box.y1 += Math.floor(diff / 2);
+                box.y2 -= Math.floor(diff / 2);
+            }
+        }
+
+        this.parent (box, flags);
+    },
+});
+
 var KeyContainer = new Lang.Class({
     Name: 'KeyContainer',
     Extends: St.Widget,
@@ -100,32 +139,7 @@ var KeyContainer = new Lang.Class({
         this._maxCols = Math.max(this._currentCol, this._maxCols);
     },
 
-    vfunc_allocate(box, flags) {
-        if (box.get_width() > 0 && box.get_height() > 0 && this._maxCols > 0) {
-            let keyboardRatio = this._maxCols / this._rows.length;
-            let sizeRatio = box.get_width() / box.get_height();
-
-            if (sizeRatio >= keyboardRatio) {
-                /* Restrict horizontally */
-                let width = box.get_height() * keyboardRatio;
-                let diff = box.get_width() - width;
-
-                box.x1 += Math.floor(diff / 2);
-                box.x2 -= Math.ceil(diff / 2);
-            } else {
-                /* Restrict vertically */
-                let height = box.get_width() / keyboardRatio;
-                let diff = box.get_height() - height;
-
-                box.y1 += Math.floor(diff / 2);
-                box.y2 -= Math.floor(diff / 2);
-            }
-        }
-
-        this.parent (box, flags);
-    },
-
-    layoutButtons() {
+    layoutButtons(container) {
         let nCol = 0, nRow = 0;
 
         for (let i = 0; i < this._rows.length; i++) {
@@ -152,7 +166,9 @@ var KeyContainer = new Lang.Class({
             nRow += KEY_SIZE;
             nCol = 0;
         }
-    }
+
+        container.setRatio(this._maxCols, this._rows.length);
+    },
 });
 
 var Suggestions = new Lang.Class({
@@ -695,6 +711,9 @@ var Keyboard = new Lang.Class({
                        { x_align: St.Align.MIDDLE,
                          x_fill: false });
 
+        this._aspectContainer = new AspectContainer({ layout_manager: new Clutter.BinLayout() });
+        this.actor.add(this._aspectContainer, { expand: true, x_fill: true, y_fill: true });
+
         this._ensureKeysForGroup(this._keyboardController.getCurrentGroup());
         this._setActiveLayer(0);
 
@@ -752,8 +771,8 @@ var Keyboard = new Lang.Class({
 
             this._loadRows(currentLevel, level, levels.length, layout);
             layers[level] = layout;
-            this.actor.add(layout, { expand: true });
-            layout.layoutButtons();
+            this._aspectContainer.add_child(layout);
+            layout.layoutButtons(this._aspectContainer);
 
             layout.hide();
         }