[the-board] [ui] Dim the page when a thing is activated

[Lucas Almeida Rocha <lucasr src gnome org>]

commit f410cf1aab24961943959b52d3b577802bd3a67b
Author: Lucas Rocha <lucasr gnome org>
Date:   Mon Oct 18 21:32:44 2010 +0100

    [ui] Dim the page when a thing is activated

 data/style/style.css |    4 +++
 src/js/ui/page.js    |   58 +++++++++++++++++++++++++++++++++++++++++++++----
 src/js/ui/thing.js   |    3 +-
 3 files changed, 59 insertions(+), 6 deletions(-)
---
diff --git a/data/style/style.css b/data/style/style.css
index 980df55..e9e35d9 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -45,6 +45,10 @@ TbBox#page-main-box {
     background-color: red;
 }
 
+TbBox#page-dim-box {
+    background-color: #000000AA;
+}
+
 /* Button */
 
 TbBox#button-main-box {
diff --git a/src/js/ui/page.js b/src/js/ui/page.js
index 3ccff25..157f51b 100644
--- a/src/js/ui/page.js
+++ b/src/js/ui/page.js
@@ -16,6 +16,7 @@ const PageModel = imports.model.pageModel;
 
 const _LAYER_BACKGROUND   = 0.1;
 const _LAYER_THING        = 0.2;
+const _LAYER_DIMMING      = 0.3;
 
 const _ADD_THING_TIME = 0.5;
 const _ADD_THING_TRANSITION = 'easeOutCubic';
@@ -59,6 +60,7 @@ Page.prototype = {
         this._activeThing = null;
 
         this._createMainBox();
+        this._createDimBox();
         this._connectModelSignals();
 
         this._updateFromModel();
@@ -80,6 +82,23 @@ Page.prototype = {
                               Lang.bind(this, this._onMainBoxButtonPressEvent));
     },
 
+    _createDimBox : function() {
+        this._dimBox =
+            new Tb.Box({ orientation: Tb.BoxOrientation.VERTICAL,
+                         xAlign: Tb.BoxAlignment.FILL,
+                         yAlign: Tb.BoxAlignment.FILL,
+                         depth: _LAYER_DIMMING,
+                         opacity: 0,
+                         name: "page-dim-box" });
+
+        this._mainBox.append(this._dimBox,
+                             Tb.BoxPackFlags.FIXED);
+
+        this._mainBox.set_fixed_child_align(this._dimBox,
+                                            Tb.BoxAlignment.FILL,
+                                            Tb.BoxAlignment.FILL);
+    },
+
     _connectModelSignals : function() {
         this._modelStateChangedId =
             this._model.connect("state-changed",
@@ -217,9 +236,13 @@ Page.prototype = {
             thing.connect("deactivate",
                           Lang.bind(this, this._onThingDeactivate));
 
-        thing._Page_draggingId =
-            thing.connect("dragging",
-                          Lang.bind(this, this._onThingDragging));
+        thing._Page_draggingStartId =
+            thing.connect("dragging-start",
+                          Lang.bind(this, this._onThingDraggingStart));
+
+        thing._Page_draggingStopId =
+            thing.connect("dragging-stop",
+                          Lang.bind(this, this._onThingDraggingStop));
 
         thing._Page_removeId =
             thing.connect("remove",
@@ -292,6 +315,20 @@ Page.prototype = {
                            transition: _ADD_THING_TRANSITION });
     },
 
+    _showDimBox : function() {
+        Tweener.addTween(this._dimBox,
+                         { opacity: 255,
+                           time: _ADD_THING_TIME,
+                           transition: _ADD_THING_TRANSITION });
+    },
+
+    _hideDimBox : function() {
+        Tweener.addTween(this._dimBox,
+                         { opacity: 0,
+                           time: _ADD_THING_TIME,
+                           transition: _ADD_THING_TRANSITION });
+    },
+
     _onMainBoxButtonPressEvent : function(o, event) {
         this.setActiveThing(null);
 
@@ -310,7 +347,7 @@ Page.prototype = {
         this.setActiveThing(null);
     },
 
-    _onThingDragging : function(thing) {
+    _onThingDraggingStart : function(thing) {
         thing.actor.raise(null);
 
         if (this._activeThing && this._activeThing != thing) {
@@ -318,6 +355,12 @@ Page.prototype = {
         }
     },
 
+    _onThingDraggingStop : function(thing) {
+        if (this._activeThing !== thing) {
+            thing.actor.lower(this._dimBox);
+        }
+    },
+
     _onThingRemove : function(thing) {
         this.removeThing(thing);
     },
@@ -336,6 +379,7 @@ Page.prototype = {
             this._activeThing.deactivate();
             this._activeThing.hideControls();
             this._activeThing.actor.depth = _LAYER_THING;
+            this._activeThing.actor.lower(this._dimBox);
         }
 
         this._activeThing = activeThing;
@@ -344,6 +388,9 @@ Page.prototype = {
             this._activeThing.activate();
             this._activeThing.showControls();
             this._activeThing.actor.raise(null);
+            this._showDimBox();
+        } else {
+            this._hideDimBox();
         }
 
         this.emit("active-thing-changed");
@@ -377,7 +424,8 @@ Page.prototype = {
 
         thing.disconnect(thing._Page_activateId);
         thing.disconnect(thing._Page_deactivateId);
-        thing.disconnect(thing._Page_draggingId);
+        thing.disconnect(thing._Page_draggingStartId);
+        thing.disconnect(thing._Page_draggingStopId);
         thing.disconnect(thing._Page_removeId);
         thing.disconnect(thing._Page_saveId);
 
diff --git a/src/js/ui/thing.js b/src/js/ui/thing.js
index 818a551..1000313 100644
--- a/src/js/ui/thing.js
+++ b/src/js/ui/thing.js
@@ -159,7 +159,7 @@ Thing.prototype = {
                                       Lang.bind(this,
                                                 this._onParentActorMotionEvent));
 
-        this.emit("dragging");
+        this.emit("dragging-start");
     },
 
     _stopDragging : function() {
@@ -173,6 +173,7 @@ Thing.prototype = {
             delete this._parentActorMotionEventId;
         }
 
+        this.emit("dragging-stop");
         this.emit('save');
     },