[the-board] [things] Add initial TextThing toolbar with font size control

[Lucas Rocha <lucasr src gnome org>]

commit beb9e8aa868a181c2d77213ba8a039b361da9171
Author: Lucas Rocha <lucasr gnome org>
Date:   Sun Nov 14 11:44:25 2010 +0000

    [things] Add initial TextThing toolbar with font size control
    
    Used in Label and Note.

 data/things/label/style.css |   15 +++++-
 data/things/note/style.css  |   15 +++++-
 src/js/ui/things/label.js   |    8 +++
 src/js/ui/things/note.js    |    8 +++
 src/js/ui/things/text.js    |  106 +++++++++++++++++++++++++++++++++++++++++--
 5 files changed, 144 insertions(+), 8 deletions(-)
---
diff --git a/data/things/label/style.css b/data/things/label/style.css
index 5d16e6c..e60b1f4 100644
--- a/data/things/label/style.css
+++ b/data/things/label/style.css
@@ -4,9 +4,20 @@ TbBox#text-thing-text-box {
     border-image: url('bg.png') 10;
 }
 
-MxLabel#text-thing-label {
+MxLabel {
     padding: 0px;
     color: black;
-    font-size: 16;
     font-family: "Action Man";
 }
+
+MxLabel#text-thing-label-small {
+    font-size: 12;
+}
+
+MxLabel#text-thing-label-medium {
+    font-size: 16;
+}
+
+MxLabel#text-thing-label-big {
+    font-size: 24;
+}
diff --git a/data/things/note/style.css b/data/things/note/style.css
index a36bd3d..fb06059 100644
--- a/data/things/note/style.css
+++ b/data/things/note/style.css
@@ -2,8 +2,19 @@ TbBox#text-thing-text-box {
     padding: 12 20 20 50;
 }
 
-MxLabel#text-thing-label {
+MxLabel {
     color: black;
-    font-size: 13;
     font-family: "Action Man";
 }
+
+MxLabel#text-thing-label-small {
+    font-size: 10;
+}
+
+MxLabel#text-thing-label-medium {
+    font-size: 13;
+}
+
+MxLabel#text-thing-label-big {
+    font-size: 18;
+}
diff --git a/src/js/ui/things/label.js b/src/js/ui/things/label.js
index bed0bb5..9c554db 100644
--- a/src/js/ui/things/label.js
+++ b/src/js/ui/things/label.js
@@ -29,3 +29,11 @@ function create(args) {
 
     return new Text.TextThing(args);
 }
+
+function createToolbar(args) {
+    args = args || {};
+
+    args.title = NAME;
+
+    return Text.createToolbar(args);
+}
diff --git a/src/js/ui/things/note.js b/src/js/ui/things/note.js
index 517d5c5..279fff1 100644
--- a/src/js/ui/things/note.js
+++ b/src/js/ui/things/note.js
@@ -26,3 +26,11 @@ function create(args) {
 
     return new Text.TextThing(args);
 }
+
+function createToolbar(args) {
+    args = args || {};
+
+    args.title = NAME;
+
+    return Text.createToolbar(args);
+}
diff --git a/src/js/ui/things/text.js b/src/js/ui/things/text.js
index 7b76af2..a8199ac 100644
--- a/src/js/ui/things/text.js
+++ b/src/js/ui/things/text.js
@@ -1,4 +1,5 @@
 // standard imports
+const Gettext = imports.gettext.domain("the-board");
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 
@@ -10,9 +11,15 @@ const Pango = imports.gi.Pango;
 
 // ui imports
 const Thing = imports.ui.thing;
+const ToolBox = imports.ui.toolBox;
+const Toolbar = imports.ui.toolbar;
 
 const _SAVE_TEXT_TIMEOUT = 5; // in seconds
 
+const _FONT_SIZE_SMALL  = "small";
+const _FONT_SIZE_MEDIUM = "medium";
+const _FONT_SIZE_BIG    = "big";
+
 function TextThing(args) {
     this._init(args);
 }
@@ -73,6 +80,8 @@ TextThing.prototype = {
 
         this._loadingState = false;
 
+        this._fontSize = _FONT_SIZE_MEDIUM;
+
         args.content = this;
 
         this._createBgBox();
@@ -150,13 +159,14 @@ TextThing.prototype = {
 
     _createText : function(initialText) {
         this._label =
-            new Mx.Label({ text: initialText,
-                           name: "text-thing-label" });
+            new Mx.Label({ text: initialText });
 
         if (this._style) {
             this._label.set_style(this._style);
         }
 
+        this._updateFont();
+
         this._label.clutterText.lineWrap = !this._singleLine;
         this._label.clutterText.singleLineMode = this._singleLine;
         //this._label.clutterText.lineWrapMode = Pango.WrapMode.WORD_CHAR;
@@ -184,10 +194,29 @@ TextThing.prototype = {
             let [minWidth, naturalWidth] =
                 this._label.get_preferred_width(this._label.height);
 
-            this.setSize(naturalWidth + 38, this._textBox.height);
+            this.setSize(naturalWidth + 38, this._textBox.height + 20);
         }
     },
 
+    _updateFont : function() {
+        this._label.set_name("text-thing-label-" + this._fontSize);
+    },
+
+    _setFontSize : function(fontSize) {
+        if (this._fontSize == fontSize) {
+            return;
+        }
+
+        this._fontSize = fontSize;
+        this._updateFont();
+
+        if (this._singleLine) {
+            this._maybeUpdateSizeFromText();
+        }
+
+        this.emit('save');
+    },
+
     _onTextKeyPressEvent : function(o, event) {
         let key = event.get_key_symbol();
 
@@ -251,11 +280,22 @@ TextThing.prototype = {
             this._label.text = state.text;
         }
 
+        if ('fontSize' in state) {
+            this._setFontSize(state.fontSize);
+        }
+
         this._loadingState = false;
     },
 
     getState : function() {
-        return { text: this._label.text };
+        return { text: this._label.text,
+                 fontSize: this._fontSize };
+    },
+
+    doAction : function(actionName, actionArgs) {
+        if (actionName == "setFontSize") {
+            this._setFontSize(actionArgs.fontSize);
+        }
     },
 
     validateSize : function(width, height) {
@@ -298,3 +338,61 @@ TextThing.prototype = {
         return this._bgBox;
     }
 }
+
+function TextToolbar(args) {
+    this._init(args);
+}
+
+TextToolbar.prototype = {
+    __proto__: Toolbar.Toolbar.prototype,
+
+    _init : function(args) {
+        Toolbar.Toolbar.prototype._init.apply(this, [args]);
+
+        this._createFontSizeToolBox();
+    },
+
+    _createFontSizeToolBox : function() {
+        this._fontSizeToolBox =
+            new ToolBox.ToolBox({ title: Gettext.gettext("Font Size"),
+                                  isButtonGroup: true,
+                                  isThingToolBox: true });
+
+        this._fontSizeButtons = {};
+
+        this._fontSizeButtons[_FONT_SIZE_SMALL] =
+            this._fontSizeToolBox.addButton({
+                label: Gettext.gettext("Small"),
+                actionName: "setFontSize",
+                actionArgs: { fontSize: _FONT_SIZE_SMALL }
+            });
+
+        this._fontSizeButtons[_FONT_SIZE_MEDIUM] =
+            this._fontSizeToolBox.addButton({
+                label: Gettext.gettext("Medium"),
+                actionName: "setFontSize",
+                actionArgs: { fontSize: _FONT_SIZE_MEDIUM }
+            });
+
+        this._fontSizeButtons[_FONT_SIZE_BIG] =
+            this._fontSizeToolBox.addButton({
+                label: Gettext.gettext("Big"),
+                actionName: "setFontSize",
+                actionArgs: { fontSize: _FONT_SIZE_BIG }
+            });
+
+        this.addToolBox(this._fontSizeToolBox);
+    },
+
+    loadState : function(state) {
+        if ('fontSize' in state) {
+            let activeButton = this._fontSizeButtons[state.fontSize];
+            this._fontSizeToolBox.setActiveButton(activeButton);
+        }
+    }
+}
+
+function createToolbar(args) {
+    return new TextToolbar({ title: args.title,
+                             visible: false });
+}