[gnome-shell] AppFolderPopup: fix the position of close buttons

[Giovanni Campagna <gcampagna src gnome org>]

commit 255cb8edb1cea6a47aa68dc8d9c711509100b3b1
Author: Giovanni Campagna <gcampagn redhat com>
Date:   Tue Sep 10 11:48:55 2013 +0200

    AppFolderPopup: fix the position of close buttons
    
    We need to adjust the offset of close buttons, in case the box
    pointer has the arrow at the top. To do so, extend close buttons
    to hook into a boxpointer (since that's the common use for them)
    and automatically adjust their position.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=707842

 js/misc/util.js     |   66 +++++++++++++++++++++++++++++++++++++--------------
 js/ui/appDisplay.js |    2 +-
 js/ui/boxpointer.js |   12 ++++++++-
 3 files changed, 60 insertions(+), 20 deletions(-)
---
diff --git a/js/misc/util.js b/js/misc/util.js
index 072dbce..9e8dfa4 100644
--- a/js/misc/util.js
+++ b/js/misc/util.js
@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
+const Lang = imports.lang;
 const St = imports.gi.St;
 
 const Main = imports.ui.main;
@@ -189,28 +190,57 @@ function insertSorted(array, val, cmp) {
     return pos;
 }
 
-function makeCloseButton() {
-    let closeButton = new St.Button({ style_class: 'notification-close'});
+const CloseButton = new Lang.Class({
+    Name: 'CloseButton',
+    Extends: St.Button,
+
+    _init: function(boxpointer) {
+        this.parent({ style_class: 'notification-close'});
+
+        // This is a bit tricky. St.Bin has its own x-align/y-align properties
+        // that compete with Clutter's properties. This should be fixed for
+        // Clutter 2.0. Since St.Bin doesn't define its own setters, the
+        // setters are a workaround to get Clutter's version.
+        this.set_x_align(Clutter.ActorAlign.END);
+        this.set_y_align(Clutter.ActorAlign.START);
+
+        // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
+        // to respect the alignments.
+        this.set_x_expand(true);
+        this.set_y_expand(true);
+
+        this._boxPointer = boxpointer;
+        if (boxpointer)
+            this._boxPointer.connect('arrow-side-changed', Lang.bind(this, this._sync));
+    },
+
+    _computeBoxPointerOffset: function() {
+        if (!this._boxPointer || !this._boxPointer.actor.get_stage())
+            return 0;
+
+        let side = this._boxPointer.arrowSide;
+        if (side == St.Side.TOP)
+            return this._boxPointer.getArrowHeight();
+        else
+            return 0;
+    },
 
-    // This is a bit tricky. St.Bin has its own x-align/y-align properties
-    // that compete with Clutter's properties. This should be fixed for
-    // Clutter 2.0. Since St.Bin doesn't define its own setters, the
-    // setters are a workaround to get Clutter's version.
-    closeButton.set_x_align(Clutter.ActorAlign.END);
-    closeButton.set_y_align(Clutter.ActorAlign.START);
+    _sync: function() {
+        let themeNode = this.get_theme_node();
 
-    // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
-    // to respect the alignments.
-    closeButton.set_x_expand(true);
-    closeButton.set_y_expand(true);
+        let offY = this._computeBoxPointerOffset();
+        this.translation_x = themeNode.get_length('-shell-close-overlap-x')
+        this.translation_y = themeNode.get_length('-shell-close-overlap-y') + offY;
+    },
 
-    closeButton.connect('style-changed', function() {
-        let themeNode = closeButton.get_theme_node();
-        closeButton.translation_x = themeNode.get_length('-shell-close-overlap-x');
-        closeButton.translation_y = themeNode.get_length('-shell-close-overlap-y');
-    });
+    vfunc_style_changed: function() {
+        this._sync();
+        this.parent();
+    },
+});
 
-    return closeButton;
+function makeCloseButton(boxpointer) {
+    return new CloseButton(boxpointer);
 }
 
 function ensureActorVisibleInScrollView(scrollView, actor) {
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 6d4586e..0d9c595 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1157,7 +1157,7 @@ const AppFolderPopup = new Lang.Class({
         this.actor.add_actor(this._boxPointer.actor);
         this._boxPointer.bin.set_child(this._view.actor);
 
-        this.closeButton = Util.makeCloseButton();
+        this.closeButton = Util.makeCloseButton(this._boxPointer);
         this.closeButton.connect('clicked', Lang.bind(this, this.popdown));
         this.actor.add_actor(this.closeButton);
 
diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js
index 272444f..80dd11d 100644
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -3,8 +3,9 @@
 const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const Meta = imports.gi.Meta;
-const St = imports.gi.St;
 const Shell = imports.gi.Shell;
+const Signals = imports.signals;
+const St = imports.gi.St;
 
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
@@ -61,6 +62,10 @@ const BoxPointer = new Lang.Class({
         this._muteInput();
     },
 
+    get arrowSide() {
+        return this._arrowSide;
+    },
+
     _muteInput: function() {
         if (this._capturedEventId == 0)
             this._capturedEventId = this.actor.connect('captured-event',
@@ -612,6 +617,8 @@ const BoxPointer = new Lang.Class({
                 this._container.queue_relayout();
                 return false;
             }));
+
+            this.emit('arrow-side-changed');
         }
     },
 
@@ -644,6 +651,8 @@ const BoxPointer = new Lang.Class({
     updateArrowSide: function(side) {
         this._arrowSide = side;
         this._border.queue_repaint();
+
+        this.emit('arrow-side-changed');
     },
 
     getPadding: function(side) {
@@ -654,3 +663,4 @@ const BoxPointer = new Lang.Class({
         return this.actor.get_theme_node().get_length('-arrow-rise');
     }
 });
+Signals.addSignalMethods(BoxPointer.prototype);