[the-board] [ui] Add ability to select/unselect a Thing

[Lucas Rocha <lucasr src gnome org>]

commit aa36cf1c56e1751de66ce0c28556df833616db96
Author: Lucas Rocha <lucasr gnome org>
Date:   Thu Jan 13 01:24:45 2011 +0000

    [ui] Add ability to select/unselect a Thing

 data/style/Makefile.am         |    1 +
 data/style/shadow-selected.png |  Bin 0 -> 674 bytes
 data/style/style.css           |   10 +++++++++-
 src/js/ui/thing.js             |   34 +++++++++++++++++++++++++++++++---
 4 files changed, 41 insertions(+), 4 deletions(-)
---
diff --git a/data/style/Makefile.am b/data/style/Makefile.am
index 8013f8c..dac1e98 100644
--- a/data/style/Makefile.am
+++ b/data/style/Makefile.am
@@ -4,6 +4,7 @@ dist_style_DATA = \
     page-button-border.png \
     page-list-shadow.png \
     shadow.png \
+    shadow-selected.png \
     simple-border.png \
     startup.png \
     style.css \
diff --git a/data/style/shadow-selected.png b/data/style/shadow-selected.png
new file mode 100644
index 0000000..d14e36f
Binary files /dev/null and b/data/style/shadow-selected.png differ
diff --git a/data/style/style.css b/data/style/style.css
index 6b5a571..bbc6001 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -247,9 +247,17 @@ MxButton#tool-box-pages-more-button:hover {
 /* Thing */ 
 
 TbBox#thing-main-box {
+    border-image: url("shadow.png") 10 10 10 10;
+}
+
+TbBox#thing-main-box-selected {
+    border-image: url("shadow-selected.png") 10 10 10 10;
+}
+
+TbBox#thing-main-box,
+TbBox#thing-main-box-selected {
     background-color: none;
     padding: 8;
-    border-image: url("shadow.png") 10 10 10 10;
 }
 
 /* Background */ 
diff --git a/src/js/ui/thing.js b/src/js/ui/thing.js
index 3c383af..54bf7c8 100644
--- a/src/js/ui/thing.js
+++ b/src/js/ui/thing.js
@@ -25,6 +25,9 @@ const _SHOW_CONTROLS_LENGTH = 12;
 const _SHOW_CONTROLS_TIME = 0.3;
 const _SHOW_CONTROLS_TRANSITION = "easeOutCubic";
 
+const _MAIN_BOX_STYLE_NORMAL = "thing-main-box";
+const _MAIN_BOX_STYLE_SELECTED = "thing-main-box-selected";
+
 function Thing(args) {
     this._init(args);
 }
@@ -69,6 +72,7 @@ Thing.prototype = {
 
         this._active = false;
         this._hover = false;
+        this._selected = false;
 
         this._activateOnClick = true;
         this._content = null;
@@ -86,8 +90,9 @@ Thing.prototype = {
                          yAlign: Tb.BoxAlignment.FILL,
                          width: this.initialWidth,
                          height: this.initialHeight,
-                         reactive: true,
-                         name: "thing-main-box" });
+                         reactive: true });
+
+        this._updateSelection();
 
         let clickAction = new Clutter.ClickAction();
 
@@ -253,7 +258,7 @@ Thing.prototype = {
     },
 
     _updateControls : function() {
-        if (this._hover || this._active) {
+        if (!this._selected && (this._hover || this._active)) {
             this._showControls();
         } else {
             this._hideControls();
@@ -297,6 +302,14 @@ Thing.prototype = {
                            }});
     },
 
+    _updateSelection : function() {
+        if (this._selected) {
+            this._mainBox.name = _MAIN_BOX_STYLE_SELECTED;
+        } else {
+            this._mainBox.name = _MAIN_BOX_STYLE_NORMAL;
+        }
+    },
+
     _onMainBoxClicked : function(action) {
         if (this._activateOnClick) {
             this.emit("activate");
@@ -478,6 +491,21 @@ Thing.prototype = {
         return this._hover;
     },
 
+    get selected() {
+        return this._selected;
+    },
+
+    set selected(selected) {
+        if (this._selected == selected) {
+            return;
+        }
+
+        this._selected = selected;
+
+        this._updateSelection();
+        this._updateControls();
+    },
+
     get actor() {
         return this._mainBox;
     }