[the-board] [ui] Show Thing's resize/link/remove controls on hover

[Lucas Rocha <lucasr src gnome org>]

commit 46e76004a81ced9f1d71969904f0a643ac0d0390
Author: Lucas Rocha <lucasr gnome org>
Date:   Thu Dec 16 22:10:07 2010 +0000

    [ui] Show Thing's resize/link/remove controls on hover
    
    It's a bit incovenient to have to activate elements to remove it, resize
    it or access its link.

 src/js/ui/page.js  |    6 +--
 src/js/ui/thing.js |  101 ++++++++++++++++++++++++++++++++--------------------
 2 files changed, 64 insertions(+), 43 deletions(-)
---
diff --git a/src/js/ui/page.js b/src/js/ui/page.js
index 14ece9c..df0acd0 100644
--- a/src/js/ui/page.js
+++ b/src/js/ui/page.js
@@ -368,16 +368,14 @@ Page.prototype = {
         }
 
         if (this._activeThing) {
-            this._activeThing.deactivate();
-            this._activeThing.hideControls();
+            this._activeThing.onDeactivate();
             this._activeThing.actor.depth = _LAYER_THING;
         }
 
         this._activeThing = activeThing;
 
         if (this._activeThing) {
-            this._activeThing.activate();
-            this._activeThing.showControls();
+            this._activeThing.onActivate();
 
             this._dimBox.raise(null);
             this._activeThing.actor.raise(this._dimBox);
diff --git a/src/js/ui/thing.js b/src/js/ui/thing.js
index c4f4b4f..a0cbe74 100644
--- a/src/js/ui/thing.js
+++ b/src/js/ui/thing.js
@@ -67,6 +67,9 @@ Thing.prototype = {
 
         this._link = null;
 
+        this._active = false;
+        this._hover = false;
+
         this._activateOnClick = true;
         this._content = null;
 
@@ -249,6 +252,51 @@ Thing.prototype = {
         }
     },
 
+    _updateControls : function() {
+        if (this._hover || this._active) {
+            this._showControls();
+        } else {
+            this._hideControls();
+        }
+    },
+
+    _showControls : function() {
+        let actorsToShow = [this._removeButton];
+
+        if (this._link) {
+            actorsToShow.push(this._linkButton);
+        }
+
+        if (this._canResize) {
+            actorsToShow.push(this._resizeButton);
+        }
+
+        Tweener.addTween(actorsToShow,
+                         { opacity: 255,
+                           time: _SHOW_CONTROLS_TIME,
+                           transition: _SHOW_CONTROLS_TRANSITION,
+                           onStart: function() {
+                               this.show();
+                           }});
+    },
+
+    _hideControls : function() {
+        let actorsToHide = [this._linkButton,
+                            this._removeButton];
+
+        if (this._canResize) {
+            actorsToHide.push(this._resizeButton);
+        }
+
+        Tweener.addTween(actorsToHide,
+                         { opacity: 0,
+                           time: _SHOW_CONTROLS_TIME,
+                           transition: _SHOW_CONTROLS_TRANSITION,
+                           onComplete: function() {
+                               this.hide();
+                           }});
+    },
+
     _onMainBoxClicked : function(action) {
         if (this._activateOnClick) {
             this.emit("activate");
@@ -280,10 +328,16 @@ Thing.prototype = {
     },
 
     _onMainBoxEnterEvent : function() {
+        this._hover = true;
+        this._updateControls();
+
         this.enter();
     },
 
     _onMainBoxLeaveEvent : function() {
+        this._hover = false;
+        this._updateControls();
+
         this.leave();
     },
 
@@ -333,49 +387,18 @@ Thing.prototype = {
         // do nothing by default
     },
 
-    activate : function() {
-        throw new Error('Things should implement activate method');
-    },
+    onActivate : function() {
+        this._active = true;
+        this._updateControls();
 
-    deactivate : function() {
-        throw new Error('Things should implement deactivate method');
+        this.activate();
     },
 
-    showControls : function() {
-        let actorsToShow = [this._removeButton];
-
-        if (this._link) {
-            actorsToShow.push(this._linkButton);
-        }
+    onDeactivate : function() {
+        this._active = false;
+        this._updateControls();
 
-        if (this._canResize) {
-            actorsToShow.push(this._resizeButton);
-        }
-
-        Tweener.addTween(actorsToShow,
-                         { opacity: 255,
-                           time: _SHOW_CONTROLS_TIME,
-                           transition: _SHOW_CONTROLS_TRANSITION,
-                           onStart: function() {
-                               this.show();
-                           }});
-    },
-
-    hideControls : function() {
-        let actorsToHide = [this._linkButton,
-                            this._removeButton];
-
-        if (this._canResize) {
-            actorsToHide.push(this._resizeButton);
-        }
-
-        Tweener.addTween(actorsToHide,
-                         { opacity: 0,
-                           time: _SHOW_CONTROLS_TIME,
-                           transition: _SHOW_CONTROLS_TRANSITION,
-                           onComplete: function() {
-                               this.hide();
-                           }});
+        this.deactivate();
     },
 
     onLoadState : function(state) {