[the-board] [ui] Use entry to set page title instead of editable label

[Lucas Rocha <lucasr src gnome org>]

commit 84e9ce0cd914ea7144fddd2beb3ff0b1fb0815bd
Author: Lucas Rocha <lucasr gnome org>
Date:   Tue Dec 7 23:36:46 2010 +0000

    [ui] Use entry to set page title instead of editable label

 data/style/style.css      |   17 +++++++++++++----
 src/js/ui/toolBoxPages.js |   36 +++++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 21 deletions(-)
---
diff --git a/data/style/style.css b/data/style/style.css
index 6a8a981..0d0b868 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -198,9 +198,9 @@ TbBox#tool-box-pages-button-box:hover {
 
 TbBox#tool-box-pages-button-box,
 TbBox#tool-box-pages-button-box-editing {
-    padding: 0 0 0 0;
+    padding: 0 0 0 4;
     background-color: white;
-    spacing: 10px;
+    spacing: 4px;
 }
 
 TbBox#tool-box-pages-list-container-box {
@@ -216,10 +216,19 @@ TbBox#tool-box-pages-cover-box {
     background-color: white;
 }
 
-MxLabel#tool-box-pages-label {
+MxEntry#tool-box-pages-entry {
+    border-image: none;
+    background-color: white;
     font-size: 18px;
     color: black;
-    padding: 4px 2px 2px 10px;
+    padding: 8px 2px 3px 7px;
+    caret-color: black;
+    selection-background-color: #AAAAAA;
+}
+
+MxEntry#tool-box-pages-entry:focus {
+    border-image: url("simple-border.png") 3 3 3 3;
+    background-color: #EEEEEE;
 }
 
 MxButton#tool-box-pages-ok-button {
diff --git a/src/js/ui/toolBoxPages.js b/src/js/ui/toolBoxPages.js
index f3a1bea..40f4c0f 100644
--- a/src/js/ui/toolBoxPages.js
+++ b/src/js/ui/toolBoxPages.js
@@ -89,19 +89,18 @@ ToolBoxPages.prototype = {
     },
 
     _createPageEntry : function() {
-        this._pageLabel =
-            new Mx.Label({ text: "Work Related",
-                           anchorY: -2,
-                           name: "tool-box-pages-label" });
+        this._pageEntry =
+            new Mx.Entry({ reactive: false,
+                           name: "tool-box-pages-entry" });
 
-        this._pageLabel.clutterText.connect("key-press-event",
+        this._pageEntry.clutterText.connect("key-press-event",
                                             Lang.bind(this,
                                                       this._onPageLabelKeyPressEvent));
 
-        this._buttonBox.append(this._pageLabel,
+        this._buttonBox.append(this._pageEntry,
                                Tb.BoxPackFlags.EXPAND);
 
-        this._buttonBox.set_child_align(this._pageLabel,
+        this._buttonBox.set_child_align(this._pageEntry,
                                         Tb.BoxAlignment.FILL,
                                         Tb.BoxAlignment.CENTER);
     },
@@ -258,7 +257,7 @@ ToolBoxPages.prototype = {
     _updateActionButton : function() {
         let name;
 
-        if (this._pageLabel.clutterText.editable) {
+        if (this._pageEntry.reactive) {
             name = _ACTION_BUTTON_OK_NAME;
         } else if (this._listContainerBox.visible) {
             name = _ACTION_BUTTON_LESS_NAME;
@@ -270,9 +269,9 @@ ToolBoxPages.prototype = {
     },
 
     _startEditingTitle : function() {
-        this._pageLabel.clutterText.editable = true;
-        this._pageLabel.clutterText.grab_key_focus();
-        this._pageLabel.clutterText.set_cursor_position(-1);
+        this._pageEntry.reactive = true;
+        this._pageEntry.grab_key_focus();
+        this._pageEntry.clutterText.set_cursor_position(-1);
 
         this._buttonBox.set_name(_BUTTON_BOX_NAME_EDITING);
 
@@ -283,19 +282,19 @@ ToolBoxPages.prototype = {
     },
 
     _stopEditingTitle : function(commitChanges) {
-        if (!this._pageLabel.clutterText.editable) {
+        if (!this._pageEntry.reactive) {
             return;
         }
 
-        this._pageLabel.clutterText.editable = false;
+        this._pageEntry.reactive = false;
 
         this._updateActionButton();
         this._buttonBox.set_name(_BUTTON_BOX_NAME_NORMAL);
 
         if (commitChanges) {
-            this._pageModel.title = this._pageLabel.text;
+            this._pageModel.title = this._pageEntry.text;
         } else {
-            this._pageLabel.text = this._pageModel.title ||
+            this._pageEntry.text = this._pageModel.title ||
                                    Gettext.gettext("Untitled");
         }
 
@@ -320,6 +319,9 @@ ToolBoxPages.prototype = {
         this.setActive(true);
         this._stopEditingTitle(false /* cancel changes */);
 
+        let padding = Tb.mx_stylable_get_padding(this._buttonBox);
+
+        this._listContainerBox.anchorX = Math.round(padding.left / 2);
         this._listContainerBox.anchorY = this._listBox.height + 1;
         this._listContainerBox.show();
 
@@ -409,7 +411,7 @@ ToolBoxPages.prototype = {
     },
 
     _onActionButtonClicked : function() {
-        if (this._pageLabel.clutterText.editable) {
+        if (this._pageEntry.reactive) {
             this._stopEditingTitle(true /* commit changes */);
         } else if (this._listContainerBox.visible) {
             this._hidePagesList();
@@ -439,7 +441,7 @@ ToolBoxPages.prototype = {
         }
 
         this._pageModel = pageModel;
-        this._pageLabel.text = pageModel.title ||
+        this._pageEntry.text = pageModel.title ||
                                Gettext.gettext("Untitled");
 
         for (let i = 0; i < this._pageButtons.length; ++i) {