[the-board] [things] Change TextThing to use vertical scroll bars

[Lucas Rocha <lucasr src gnome org>]

commit a8877ae66c70bb268ebb5b1268ffd4f231eac5a5
Author: Lucas Rocha <lucasr gnome org>
Date:   Sun Dec 5 11:29:13 2010 +0000

    [things] Change TextThing to use vertical scroll bars
    
    https://bugzilla.gnome.org/show_bug.cgi?id=636635

 data/things/label/style.css |    2 +-
 data/things/note/pixel.png  |  Bin 0 -> 159 bytes
 data/things/note/style.css  |   21 ++++++++++-
 src/js/ui/things/text.js    |   78 ++++++++++++++++++++++++++++++++++--------
 4 files changed, 83 insertions(+), 18 deletions(-)
---
diff --git a/data/things/label/style.css b/data/things/label/style.css
index d4818ca..62c4b62 100644
--- a/data/things/label/style.css
+++ b/data/things/label/style.css
@@ -1,4 +1,4 @@
-TbBox#text-thing-text-box {
+MxBoxLayout#text-thing-text-box {
     background-color: none;
     padding: 10px 10px 4px 10px;
     border-image: url('bg.png') 10;
diff --git a/data/things/note/pixel.png b/data/things/note/pixel.png
new file mode 100644
index 0000000..fd6848a
Binary files /dev/null and b/data/things/note/pixel.png differ
diff --git a/data/things/note/style.css b/data/things/note/style.css
index fb06059..4d51eb2 100644
--- a/data/things/note/style.css
+++ b/data/things/note/style.css
@@ -1,5 +1,22 @@
-TbBox#text-thing-text-box {
-    padding: 12 20 20 50;
+MxBoxLayout#text-thing-text-box {
+    padding: 0 20 0 20;
+}
+
+MxScrollView#text-thing-scroll-view {
+    padding: 5 0 0 0;
+    -mx-scrollbar-width: 15;
+}
+
+MxScrollBar *.vtrough,
+MxScrollBar *.htrough {
+  border-image: none;
+}
+
+MxButton.up-stepper,
+MxButton.down-stepper {
+  /* Remove this when support for hiding steppers
+   * is implemented in Mx */
+  -mx-content-image: url('pixel.png');
 }
 
 MxLabel {
diff --git a/src/js/ui/things/text.js b/src/js/ui/things/text.js
index 6e1a82b..6d3db5e 100644
--- a/src/js/ui/things/text.js
+++ b/src/js/ui/things/text.js
@@ -90,6 +90,8 @@ TextThing.prototype = {
             this._createTiledBackground();
         }
 
+        this._createScrollView();
+
         let initialText = "";
         if ('text' in args) {
             initialText = args.text;
@@ -129,10 +131,36 @@ TextThing.prototype = {
                                           Tb.BoxAlignment.FILL);
     },
 
+    _createScrollView : function() {
+        this._scrollView =
+            new Mx.ScrollView({ reactive: false,
+                                name: "text-thing-scroll-view" });
+
+        if (this._singleLine) {
+            this._scrollView.scrollPolicy = Mx.ScrollPolicy.NONE;
+        } else {
+            this._scrollView.scrollPolicy = Mx.ScrollPolicy.VERTICAL;
+        }
+
+        let clickAction = new Clutter.ClickAction();
+
+        clickAction.connect("clicked",
+                            Lang.bind(this, this._onScrollViewClicked));
+
+        this._scrollView.add_action(clickAction);
+
+        if (this._style) {
+            this._scrollView.set_style(this._style);
+        }
+
+        this._bgBox.append(this._scrollView,
+                           Tb.BoxPackFlags.EXPAND);
+    },
+
     _createTextBox : function() {
         this._textBox =
-            new Tb.Box({ orientation: Tb.BoxOrientation.VERTICAL,
-                         name: "text-thing-text-box" });
+            new Mx.BoxLayout({ orientation: Mx.Orientation.VERTICAL,
+                               name: "text-thing-text-box" });
 
         if (this._singleLine) {
             this._textBox.xAlign = Tb.BoxAlignment.START;
@@ -146,8 +174,7 @@ TextThing.prototype = {
             this._textBox.set_style(this._style);
         }
 
-        this._bgBox.append(this._textBox,
-                             Tb.BoxPackFlags.EXPAND);
+        this._scrollView.add_actor(this._textBox);
     },
 
     _createText : function(initialText) {
@@ -168,21 +195,17 @@ TextThing.prototype = {
                                                Pango.WrapMode.WORD :
                                                Pango.WrapMode.WORD_CHAR;
 
-        let clickAction = new Clutter.ClickAction();
-
-        clickAction.connect("clicked",
-                            Lang.bind(this, this._onTextClicked));
-
-        this._label.add_action(clickAction);
-
         this._label.connect("key-press-event",
                             Lang.bind(this, this._onTextKeyPressEvent));
 
+        this._label.clutterText.connect("notify::position",
+                                        Lang.bind(this, this._onCursorPositionChanged));
+
         this._label.clutterText.connect("text-changed",
                                         Lang.bind(this, this._onTextChanged));
 
-        this._textBox.append(this._label,
-                             Tb.BoxPackFlags.EXPAND);
+        this._textBox.add_actor(this._label, 0);
+        this._textBox.get_child_meta(this._label).expand = true;
     },
 
     _maybeUpdateSizeFromText : function() {
@@ -208,8 +231,27 @@ TextThing.prototype = {
         }
     },
 
+    _ensureCursorIsVisible : function() {
+        let position = this._label.clutterText.position;
+
+        let [success, x, y, lineHeight] =
+            this._label.clutterText.position_to_coords(position);
+
+        let visibleArea = new Clutter.Geometry();
+
+        visibleArea.x = x;
+        visibleArea.y = y;
+        visibleArea.width = 0;
+        visibleArea.height = lineHeight;
+
+        // FIXME: This doesn't seem to be working realibly
+        // with MxBoxLayout.
+        this._scrollView.ensure_visible(visibleArea);
+    },
+
     _updateFont : function() {
         this._label.set_name("text-thing-label-" + this._fontSize);
+        Mainloop.idle_add(Lang.bind(this, this._ensureCursorIsVisible));
     },
 
     _setFontSize : function(fontSize) {
@@ -243,20 +285,26 @@ TextThing.prototype = {
         return false;
    },
 
-    _onTextClicked : function() {
+    _onScrollViewClicked : function() {
         this.emit("activate");
         return true;
     },
 
     _onTextChanged : function() {
+        Mainloop.idle_add(Lang.bind(this, this._ensureCursorIsVisible));
         this._maybeUpdateSizeFromText();
-        this.emit('save');
+    },
+
+    _onCursorPositionChanged : function() {
+        Mainloop.idle_add(Lang.bind(this, this._ensureCursorIsVisible));
     },
 
     activate : function() {
         if (this._editable) {
             this._label.clutterText.editable = true;
             this._label.clutterText.grab_key_focus();
+
+            this._ensureCursorIsVisible();
         }
     },