From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 13:30:49 -0800
Subject: merge new timeline

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/components/editable.reel/editable.js | 250 ++++++++++++++++++++++
 js/components/hintable.reel/hintable.js | 360 ++++++++++++++++++++++++++++++++
 2 files changed, 610 insertions(+)
 create mode 100644 js/components/editable.reel/editable.js
 create mode 100644 js/components/hintable.reel/hintable.js

(limited to 'js/components')

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
new file mode 100644
index 00000000..1d0ad776
--- /dev/null
+++ b/js/components/editable.reel/editable.js
@@ -0,0 +1,250 @@
+/* ComputedStyleSubPanel.js */
+var Montage   = require("montage").Montage,
+    Component = require("montage/ui/component").Component;
+
+
+/*
+
+EDITABLE - Methods
+- startEdit
+- stopEdit
+- value
+- 
+- _suggest
+- _suggestNext
+- _suggestPrev
+- _clearSuggest
+- _accept
+- _revert
+- _setCaret
+
+*/
+
+
+exports.Editable = Montage.create(Component, {
+    hasTemplate: { value: false },
+
+    _element : { value : null },
+    element : {
+        get : function() {
+            return this._element;
+        },
+        set : function(el) {
+            this._element = el;
+            this._element.addEventListener('keydown', this, false);
+            this._element.addEventListener('input', this, false);
+            
+            if(this.startOnEvent) {
+                this._element.addEventListener(this.startOnEvent, this, false);
+            }
+            
+        }
+    },
+    _readOnly : {
+        value: false
+    },
+    readOnly : {
+        get : function() { return this._readOnly; },
+        set : function(makeReadOnly) {
+            var action = makeReadOnly ? 'add' : 'remove';
+            
+            this._element.classList[action](this.readOnlyClass);
+            
+            if(this.isEditable) {
+                this.stop();
+            }
+            this._readOnly = makeReadOnly;
+        }
+    },
+    _isEditable : {
+        value : false
+    },
+    isEditable : {
+        get : function() {
+            return this._isEditable;
+        },
+        set: function(makeEditable) {
+            if(this._readOnly && makeEditable) { return false; }
+            this._isEditable = makeEditable;
+        }
+    },
+    _isDirty : {
+        value: false
+    },
+    isDirty : {
+        get : function() {
+            return this._isDirty;
+        },
+        set : function(setDirty) {
+            if(setDirty) {
+                this._isDirty = true;
+                this._sendEvent('dirty');
+            } else {
+                this._isDirty = false;
+            }
+        }
+    },
+    value : {
+        get: function() {
+            return this._element.textContent;
+        },
+        set: function(str) {
+            this._element.textContent = str;
+        }
+    },
+
+    ///// Pre Edit Value
+    ///// Value stored when editing starts
+    ///// Useful for reverting to previous value
+    
+    _preEditValue : {
+        value : null
+    },
+    start : {
+        value: function() {
+            if(!this._readOnly) {
+                this._isEditable = this._element.contentEditable = true;
+                this._element.classList.add(this.editingClass);
+                
+                ///// Save the preEditValue
+                this._preEditValue = this.value;
+                
+                if(this.selectOnStart) {
+                    this.selectAll();
+                }
+                
+                if(this.stopOnBlur) {
+                    console.log('adding mousedown event listener');
+                    ///// Simulate blur on editable node by listening to the doc
+                    document.addEventListener('mouseup', this, false);
+                }
+                
+                this._sendEvent('start');
+            }
+            
+        }
+    },
+    stop : {
+        value: function() {
+            this._isEditable = this._element.contentEditable = false;
+            this._element.classList.remove(this.editingClass);
+            
+            this._sendEvent('stop');
+            
+            ///// if value is different than pre-edit val, call onchange method
+            if(this._preEditValue !== this.value) {
+                this._sendEvent('change');
+            }
+        }
+    },
+    selectAll : {
+        value : function() {
+            var range = document.createRange(),
+                sel   = window.getSelection();
+                
+            sel.removeAllRanges();
+            range.selectNodeContents(this._element);
+            sel.addRange(range);
+        }
+    },
+    setCursor : {
+        value : function(position) {
+            var index = position,
+                range, node, sel;
+
+            ///// argument can be "end" or an index
+            if(typeof position === 'string' && position === 'end') {
+                index = this.value.length;
+            }
+
+            sel = window.getSelection();
+            sel.removeAllRanges();
+            //debugger;
+            node = this._getFirstTextNode();
+            range = document.createRange();
+            range.setStart(node, index);
+            range.setEnd(node, index);
+            sel.addRange(range);
+        }
+    },
+    blur : {
+        value : function() {
+            if(this._hint) {
+                this.accept();
+            }
+            this.stop();
+            document.removeEventListener('mouseup', this, false);
+            this._sendEvent('blur');
+        }
+    },
+    
+    /* -------------------- User Event Handling -------------------- */
+    
+    handleKeydown : {
+        value : function(e) {
+            var k = e.keyCode;
+            console.log('keyCode:  ' + k);
+        }
+    },
+    ///// Text input has changed values
+    handleInput : {
+        value : function(e) {
+            if(!this.isDirty) {
+                 this.isDirty = true;
+             }
+            
+            this._sendEvent('input');
+        }
+    },
+    handleMouseup : {
+        value : function(e) {
+            console.log('handle mouse down');
+            ///// Listen for simulated blur event
+            if(this.stopOnBlur && e._event.target !== this._element) {
+                this.blur();
+            }
+        }
+    },
+    handleEvent : {
+        value : function(e) {
+            console.log("event type : " + e._event.type);
+            ///// If configured, start on specified event
+            if(e._event.type === this.startOnEvent) {
+                this.start();
+            }
+        }
+    },
+    _sendEvent : {
+        value : function(type) {
+            var evt = document.createEvent("CustomEvent");
+            evt.initCustomEvent(type, true, true);
+            this.dispatchEvent(evt);
+        }
+    },
+
+    /* -------------------- CONFIG -------------------- */
+    
+    editingClass : {
+        value : 'editable'
+    },
+    readOnlyClass : {
+        value : 'readOnly'
+    },
+    selectOnStart : {
+        value : true
+    },
+    startOnEvent : {
+        value : 'dblclick'
+    },
+    stopOnBlur : {
+        value : true
+    },
+    keyActions : { 
+        value : {
+            stop   : [27,9,13,186],
+            revert : [27],
+            backsp : [8]
+        }
+    }
+    
+});
\ No newline at end of file
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
new file mode 100644
index 00000000..79813c92
--- /dev/null
+++ b/js/components/hintable.reel/hintable.js
@@ -0,0 +1,360 @@
+/* ComputedStyleSubPanel.js */
+var Montage   = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    Editable  = require("js/components/editable.reel").Editable;
+
+
+/*
+
+EDITABLE - Methods
+- startEdit
+- stopEdit
+- value
+- 
+- _suggest
+- _suggestNext
+- _suggestPrev
+- _clearSuggest
+- _accept
+- _revert
+- _setCaret
+
+*/
+
+
+exports.Hintable = Montage.create(Editable, {
+    inheritsFrom : { value : Editable },
+    _matchIndex  : { value : 0 },
+    matches      : { value : [] },
+    
+    _hint : { value : null },
+    hint : {
+        get : function() {
+            return this._hint;
+        },
+        set : function(hint) {
+            hint = hint || '';
+            
+            ///// Set the hint element's text
+            this._getFirstTextNode(this.hintElement).textContent = hint;
+            ///// if hintElement was removed from the DOM, the object still
+            ///// exists, so it needs to be re-appended
+            if(this.hintElement.parentNode === null) {
+                this._element.appendChild(this.hintElement);
+            }
+
+            this._hint = hint;
+        }
+    },
+    
+    _hintElement : { value : null },
+    hintElement : {
+        get : function() {
+            if(!this._hintElement) {
+                /// Remove the phantom "<BR>" element that is generated when 
+                /// content editable element is empty
+                this._children(this._element, function(item) { 
+                    return item.nodeName === 'BR';
+                }).forEach(function(item) {
+                    this._element.removeChild(item);
+                }, this);
+
+                this._hintElement = document.createElement('span');
+                this._hintElement.classList.add(this.hintClass);
+                
+                this._element.appendChild(this._hintElement);
+            }
+            
+            return this._hintElement;
+        },
+        set : function(el) {
+            this._hintElement = el;
+        }
+    },
+    
+    _getHintDifference : {
+        value : function() {
+            if(!this.matches[this._matchIndex]) {
+                debugger;
+            }
+            return this.matches[this._matchIndex].substr(this.value.length);
+        }
+    },
+    
+    hintNext : {
+        value : function(e) {
+            if(e) { e.preventDefault(); }
+                console.log('next1');
+            
+            if(this._matchIndex < this.matches.length - 1) {
+                console.log('next');
+                ++this._matchIndex;
+                this.hint = this._getHintDifference();
+            }
+        }
+    },
+    hintPrev : {
+        value : function(e) {
+            if(e) { e.preventDefault(); }
+                console.log('prev1');
+            if(this._matchIndex !== 0) {
+                console.log('prev');
+                --this._matchIndex;
+                this.hint = this._getHintDifference();
+            }
+        }
+    },
+
+    accept : {
+        value: function(e, preserveCaretPosition) {
+            if(e) {
+                e.preventDefault();
+            }
+            var fullText = this._hint;
+            this.hint = null;
+            this.value += fullText;
+            
+            if(!preserveCaretPosition) {
+                this.setCursor('end');
+            }
+
+            this._sendEvent('accept');
+        }
+    },
+    revert : {
+        value : function(e, forceRevert) {
+            this.hint = null;
+            
+            if(this.isEditable || forceRevert) {
+                /// revert to old value
+                this.value = (this._preEditValue);
+                this._sendEvent('revert');
+                console.log('reverting');
+                
+            }
+        }
+    },
+    value : {
+        get: function() {
+            return this._getFirstTextNode().textContent;
+        },
+        set: function(str) {
+            var node = this._getFirstTextNode();
+            node.textContent = str;
+        }
+    },
+
+    handleKeydown : {
+        value : function handleKeydown(e) {
+            var k = e.keyCode,
+                isCaretAtEnd, selection, text;
+                
+            this._super(arguments);
+            
+            if(k === 39) {
+                selection = window.getSelection();
+                text = selection.baseNode.textContent;
+                isCaretAtEnd = (selection.anchorOffset === text.length);
+            }
+            
+            if(this.hint && isCaretAtEnd) {
+                ///// Advance the cursor
+                this.hint = this.hint.substr(0, 1);
+                this.accept(e);
+                this.handleInput();
+            }
+            
+            this._execKeyAction(e);
+        }
+    },
+    ///// Text input has changed values
+    handleInput : {
+        value : function handleInput(e) {
+            this._super(arguments);
+            
+            var val = this.value,
+                 matches, hint;
+            console.log('val = "' + val + '"');
+            //// Handle auto-suggest if configured
+            if(this.hints instanceof Array) {
+
+                if(val.length > 0) { // content is not empty
+                    
+                    this._matchIndex = 0;                    
+                    this.matches = this.hints.filter(function(h) {
+                        return h.indexOf(val) === 0;
+                    }).sort();
+                    
+                    ///// If there are no matches, or the new value doesn't match all the
+                    ///// previous matches, then get new list of matches
+                    if(!this.matches.length || !this._matchesAll(val)) {
+                    }
+                    
+                    if(this.matches.length) { // match(es) found
+                        if(this.matches[this._matchIndex] !== val) {
+                            // Suggest the matched hint, subtracting the typed-in string
+                            // Only if the hint is not was the user has typed already
+                            this.hint = this._getHintDifference();
+                        } else {
+                            this.hint = null;                            
+                        }
+                    } else { // no matches found
+                        this.hint = null;
+                    }
+                } else { // no suggestion for empty string
+                    this.hint = null;
+                }
+
+            }
+        }
+    },
+    handleBackspace : {
+        value : function(e) {
+            this.matches.length = 0;
+        }
+    },
+    _matchesAll : {
+        value : function(value) {
+            return this.matches.every(function(match) {
+                return match.indexOf(value) === 0;
+            }, this);
+        }
+    },
+    _execKeyAction : {
+        value : function(e) {
+            var key = e.keyCode,
+                keys = this.keyActions;
+            
+            if(this.hint) {
+                if( keys.hint.revert.indexOf(key) !== -1 ) { this.revert(e); }
+                if( keys.hint.accept.indexOf(key) !== -1 ) { this.accept(e); }
+                if( keys.hint.stop.indexOf(key) !== -1 )   { this.stop(e); }
+                if( keys.hint.next.indexOf(key) !== -1 )   { this.hintNext(e); }
+                if( keys.hint.prev.indexOf(key) !== -1 )   { this.hintPrev(e); }
+                if( keys.hint.backsp.indexOf(key) !== -1 )   { this.handleBackspace(e); }
+            } else {
+                if(keys.noHint.revert.indexOf(key) !== -1) { this.revert(e); }
+                if(keys.noHint.stop.indexOf(key) !== -1)   { this.stop(e); }
+                //if( keys.hint.next.indexOf(key) !== -1 )   { this.handleDown(e); }
+                //if( keys.hint.prev.indexOf(key) !== -1 )   { this.handleUp(e); }
+                //if( keys.hint.backsp.indexOf(key) !== -1 )   { this.backspace(e); }
+            }
+        }
+    },
+    
+    /* --------------- Utils --------------- */
+    
+    _children : {
+        value : function(el, filter) {
+            var f = filter || function(item) {
+                return item.nodeType === 1;
+            };
+            return this._toArray(el.childNodes).filter(f);
+        }
+    },
+    _toArray : {
+        value : function(arrayLikeObj) {
+            return Array.prototype.slice.call(arrayLikeObj);
+        }
+    },
+    _getFirstTextNode : {
+        value : function(el) {
+            ///// optional el argument specified container element
+            var e = el || this._element,
+                nodes = e.childNodes, node;
+            
+            if(nodes.length) {
+                for(var i=0; i<nodes.length; i++) {
+                    if(nodes[i].nodeType === 3) {
+                        ///// found the first text node
+                        node = nodes[i];
+                        break;
+                    }
+                }
+            }
+            
+            ///// Text node not found
+            if(!node) {
+                node = document.createTextNode('');
+                e.appendChild(node);
+            }
+        
+        
+            return node;
+        }
+    },
+    _super : {
+        value : function(args) {
+            this.inheritsFrom[arguments.callee.caller.name].apply(this, args);
+        }
+    },
+
+    /* --------- CONFIG ---------- */
+    hints : {
+        value : ['Testing a hint.', 'Testing another hint.', 'Testing the last hint.']
+    },
+    hintClass : {
+        value : "hintable-hint"
+    },
+    keyActions : { 
+        value : {
+            hint : {
+                accept : [9,13,186], // accept hint
+                stop   : [27,186],   // stop editing
+                next   : [40],       // cycle to next hint
+                prev   : [38],       // cycle to prev hint
+                revert : [27],       // revert value
+                backsp : [8]         // backspace hit
+            },
+            noHint : {
+                stop   : [27,9,13,186],
+                next   : [40],
+                prev   : [38],
+                revert : [27],
+                backsp : [8]
+            }
+        }
+    }
+    
+});
+
+// suggest : {
+//     value : function(hint) {
+//         ///// if no hint argument passed, clear suggestions
+//         if(!hint) {
+//             this.clearHint();
+//             return false;            
+//         }
+//         
+//         this._hint = hint;            
+// 
+//         ///// append span with suggested hint
+//         if(this.hintElement) {
+//             this.clearHint();
+//             
+//             ///// Set the hint element's text
+//             this._getFirstTextNode(this.hintElement).textContent = hint;
+// 
+//             ///// if hintElement was removed from the DOM, the object still
+//             ///// exists, so it needs to be re-appended
+//             if(this.hintElement.parentNode === null) {
+//                 this._element.appendChild(this.hintElement);
+//             }
+//         } else {
+//             /// Remove the phantom "<BR>" element that is generated when 
+//             /// content editable element is empty
+//             this._children(this._element, function(item) { 
+//                 return item.nodeName === 'BR';
+//             }).forEach(function(item) {
+//                 this._element.removeChild(item);
+//             }, this);
+// 
+//             this.hintElement = document.createElement('span');
+//             this.hintElement.classList.add(this.suggestClass);
+//             this.hintElement.appendChild(document.createTextNode(hint));
+//             this._element.appendChild(this.hintElement);
+//         }
+// 
+//         this._hint = hint;
+//     }
+// },
\ No newline at end of file
-- 
cgit v1.2.3


From cf2f83be020d7d14f22177e0841472927d2fbcd7 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 14:07:11 -0800
Subject: Integrate breadcrumb component and layer handling code

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 .../layout/bread-crumb.reel/bread-crumb.js         | 108 +++++++++++++++------
 1 file changed, 77 insertions(+), 31 deletions(-)

(limited to 'js/components')

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index 9782d9d1..ead7c764 100644
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -1,13 +1,8 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage
+var Component = require("montage/ui/component").Component
 
-exports.Breadcrumb = Montage.create(Component, {
+var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
 
     _container:{
         value:null
@@ -16,10 +11,12 @@ exports.Breadcrumb = Montage.create(Component, {
 
     container: {
         set: function(value) {
-            if(this._container !== value) {
-                this._container = value;
-                this.createContainerElements();
-            }
+          if(this._container !== value) {
+              this._container = value;
+              this.createContainerElements();
+          }
+
+
         },
         get: function() {
             return this._container;
@@ -28,83 +25,132 @@ exports.Breadcrumb = Montage.create(Component, {
 
     containerElements: {
         value: []
+
     },
 
+
     deserializedFromTemplate : {
         value: function() {
             this.eventManager.addEventListener( "appLoaded", this, false);
-            this.eventManager.addEventListener( "openDocument", this, false);
             this.eventManager.addEventListener( "breadCrumbTrail", this, false);
-        }
+        },
+        enumerable : false
     },
 
     handleAppLoaded : {
         value: function() {
 
+
             Object.defineBinding(this, "container", {
                     boundObject: this.application.ninja,
                     boundObjectPropertyPath: "currentSelectedContainer",
                     oneway: false
             });
+
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+
+        }
+    },
+
+    draw: {
+        value: function() {
+
+        }
+    },
+
+    didDraw:{
+        value:function(){
         }
     },
 
     createContainerElements: {
         value: function() {
+
             var parentNode;
 
             while(this.containerElements.pop()){
               // To empty the array to get the new parentNode of the new currentLevel
             }
 
-            if(this.container.id === "UserContent") {
+            if(this.container.id === "UserContent"){
+
                 this.containerElements.push({selected:false,element:this.container});
-            } else {
 
-                parentNode = this.container;
 
-                while(parentNode.id !== "UserContent") {
+            }
+            else{
+
+               parentNode= this.container;
+
+                  while(parentNode.id!=="UserContent"){
+
                       this.containerElements.unshift ({selected:false,element:parentNode});
-                      parentNode = parentNode.parentNode;
+                      parentNode=parentNode.parentNode;
+
                   }
 
-                this.containerElements.unshift({selected:false,element:parentNode});
+               this.containerElements.unshift({selected:false,element:parentNode});
 
             }
 
-            NJevent('layerBinding',this.container);
+            NJevent('layerBinding',{selected:false ,element:this.container})
+
+
         }
     },
 
 
-    handleBreadCrumbTrail: {
+     handleBreadCrumbTrail: {
         value: function(event) {
-            var newLength, revaluatedLength, tmpvalue, i=0;
+
+           var newLength,revaluatedLength,tmpvalue
+           var i=0;
+            if(event.detail.setFlag){
+                 this.application.ninja.currentSelectedContainer = event.detail.element;
+                  return;
+            }
 
             newLength = this.containerElements.length;
 
-            while(i < newLength ) {
-                if(this.containerElements[i].selected){
-                    tmpvalue = i ;
-                    break;
-                }
+            while(i < newLength ){
+
+                  if(this.containerElements[i].selected){
+
+                           tmpvalue = i ;
+                           break;
+
+                 }
 
                 i++;
             }
 
-            for(i = newLength -1 ; i >= 1 ; i--) {
-                if(tmpvalue!==i) {
+
+
+            for(i = newLength -1 ; i >= 1 ; i--){
+
+                if(tmpvalue!==i){
+
                     this.containerElements.pop();
-                } else {
+                }
+
+                else{
+
                     break;
                 }
+
             }
 
             revaluatedLength = this.containerElements.length;
             this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element;
 
+
         }
     }
 
 
 });
+
-- 
cgit v1.2.3


From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 7 Feb 2012 16:30:47 -0800
Subject: Initial Text tool completion.

---
 .../text-properties.reel/text-properties.css       |   4 +-
 .../text-properties.reel/text-properties.html      | 202 +++++++++++++++------
 .../text-properties.reel/text-properties.js        | 149 ++++++++++++++-
 3 files changed, 294 insertions(+), 61 deletions(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index d581c6c3..2eb608d3 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -30,4 +30,6 @@
     font-size:11px;
 }
 
-
+.optionsTextTool .fontSelection {
+    width:100px;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index fb57c06d..14123b12 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -33,8 +33,8 @@
                     "alignCenter": {"@": "alignCenter"},
                     "alignRight": {"@": "alignRight"},
                     "alignJustify": {"@": "alignJustify"},
-                    "indentRight": {"@": "indentRight"},
-                    "indentLeft": {"@": "indentLeft"},
+                    "indent": {"@": "indent"},
+                    "outdent": {"@": "outdent"},
                     "numberedList": {"@": "numberedList"},
                     "bulletedList": {"@": "bulletedList"}
                 }
@@ -57,8 +57,16 @@
                 "module": "js/components/combobox.reel",
                 "name": "Combobox",
                 "properties": {
-                    "element": {"#": "fontSelection"}
-                }
+                    "element": {"#": "fontSelection"},
+                    "identifier": "fontSelection"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+
             },
             "fontSettings": {
                 "module": "js/components/button.reel",
@@ -72,48 +80,90 @@
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
                 "properties": {
-                    "element": {"#": "fontSize"}
-                }
-            },
+                    "element": {"#": "fontSize"},
+                    "value": 12,
+                    "identifier": "fontSize"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "changing",
+                        "listener": {"@": "owner"}
+                    }
+                ]
 
-            "fontColor": {
-                "module": "js/components/button.reel",
-                "name": "Button",
-                "properties": {
-                    "element": {"#": "fontColor"}
-                }
             },
+
+          "fontColor": {
+               "module" : "js/components/ui/color-chip.reel",
+               "name" : "ColorChip",
+               "properties" : {
+                   "element" : {"#": "fontColor"},
+                   "mode": "chip"
+               }
+           },
             "btnBold": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnBold"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnBold"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnItalic": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnItalic"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnItalic"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnUnderline": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnUnderline"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnStrikethrough": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "btnStrikethrough"},
-                    "_isToggleButton": true
-                }
+                    "_isToggleButton": true,
+                    "identifier": "btnStrikethrough"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "txtLink": {
                 "module": "js/components/textfield.reel",
@@ -134,66 +184,106 @@
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignLeft"}
-                }
+                    "element": {"#": "alignLeft"},
+                    "_isToggleButton": true,
+                    "identifier": "alignLeft"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignCenter": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignCenter"}
-                }
+                    "element": {"#": "alignCenter"},
+                    "_isToggleButton": true,
+                    "identifier": "alignCenter"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignRight": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignRight"}
-                }
+                    "element": {"#": "alignRight"},
+                    "_isToggleButton": true,
+                    "identifier": "alignRight"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "alignJustify": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "alignJustify"}
-                }
+                    "element": {"#": "alignJustify"},
+                    "_isToggleButton": true,
+                    "identifier": "alignJustify"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
-            "indentRight": {
+            "indent": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "indentRight"}
+                    "element": {"#": "indent"}
                 }
             },
-            "indentLeft": {
+            "outdent": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "indentLeft"}
+                    "element": {"#": "outdent"}
                 }
             },
             "bulletedList": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "bulletedList"}
-                }
+                    "element": {"#": "bulletedList"},
+                    "_isToggleButton": true,
+                    "identifier": "bulletedList"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "numberedList": {
                 "module": "js/components/button.reel",
                 "name": "Button",
                 "properties": {
-                    "element": {"#": "numberedList"}
-                }
-            },
-            "fontColor": {
-               "module" : "js/components/ui/color-chip.reel",
-               "name" : "ColorChip",
-               "properties" : {
-                   "element" : {"#": "fontColor"},
-                   "mode": "chip"
-               }
-           }
+                    "element": {"#": "numberedList"},
+                    "_isToggleButton": true,
+                    "identifier": "numberedList"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            }
 
     	}
 	    </script>
@@ -202,16 +292,16 @@
 
     <body>
         <div id="textProperties" class="subToolHolderPanel optionsTextTool">
-            <label class="label">Class:</label>
-            <input id="className" />
-            <label class="label">Tag:</label>
-            <select id="tagType"></select>
+            <label class="label" style="display: none">Class:</label>
+            <input id="className" style="display: none" />
+            <label class="label" style="display: none">Tag:</label>
+            <select id="tagType" style="display: none"></select>
             <label class="label">Font:</label>
-            <select id="fontSelection"></select>
-            <button id="fontSettings"></button>
+            <select id="fontSelection" class="fontSelection"></select>
+            <button id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <input id="fontSize"/>
-            <div id="fontColor" style="display:none"></div>
+            <button id="fontColor"></button>
             <button id="btnBold" class="btnBold"></button>
             <button id="btnItalic" class="btnItalic"></button>
             <button id="btnUnderline" class="btnItalic"></button>
@@ -223,10 +313,10 @@
                 <button id="alignLeft"></button>
                 <button id="alignCenter"></button>
                 <button id="alignRight"></button>
+                <button id="alignJustify" style="display: none;"></button>
             </div>
-            <button id="alignJustify"></button>
-            <button id="indentRight"></button>
-            <button id="indentLeft"></button>
+            <button id="indent"></button>
+            <button id="outdent"></button>
             <button id="bulletedList"></button>
             <button id="numberedList"></button>
         </div>
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 313693b1..de0b5fa3 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -25,8 +25,8 @@ exports.TextProperties = Montage.create(ToolProperties, {
     alignCenter: {value: null},
     alignRight: {value: null},
     alignJustify: {value: null},
-    indentRight: {value: null},
-    indentLeft: {value: null},
+    indent: {value: null},
+    outdent: {value: null},
     numberedList: {value: null},
     bulletedList: {value: null},
 
@@ -42,9 +42,34 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.alignCenter.label = "Center";
             this.alignRight.label = "Right";
             this.alignJustify.label = "Justify";
+            this.indent.label = "-->"
+            this.outdent.label = "<--";
+            this.numberedList.label = "1 2 3";
+            this.bulletedList.label = "• • •";
+            this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
+            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
+
+
+            this.application.ninja.stage.textTool.addEventListener("editorSelect", this, false);
+            Object.defineBinding(this.application.ninja.stage.textTool.states, "bold", {
+              boundObject: this.btnBold,
+              boundObjectPropertyPath: "value"
+            });
+
         }
     },
-    
+
+    handleEditorSelect: {
+        value: function(e) {
+            console.log("hello");
+            this.application.ninja.stage.textTool.updateStates();
+        }
+    },
+
+    defaultFontSize: {
+        value: "12px"
+    },
+
     _subPrepare: {
         value: function() {
             //this.divElement.addEventListener("click", this, false);
@@ -54,6 +79,122 @@ exports.TextProperties = Montage.create(ToolProperties, {
     handleClick: {
         value: function(event) {
            // this.selectedElement = event._event.target.id;
+
+        }
+    },
+
+    handleFontSizeChange: {
+        
+    },
+
+    handleBtnBoldAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("bold", true);
+        }
+    },
+
+    handleBtnItalicAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("italic", true);
+        }
+    },
+
+    handleBtnUnderlineAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("underline", true);
+        }
+    },
+
+    handleBtnStrikethroughAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("strikethrough", true);
+        }
+    },
+    
+    handleAlignLeftAction: {
+        value: function(e) {
+            //this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyLeft", true);
+        }
+    },
+
+    handleAlignCenterAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            //this.alignCenter.value = false;
+            this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyCenter", true);
         }
-    }
+    },
+
+    handleAlignRightAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            //this.alignRight.value = false;
+            this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("justifyRight", true);
+        }
+    },
+
+    handleAlignJustifyAction: {
+        value: function(e) {
+            this.alignLeft.value = false;
+            this.alignCenter.value = false;
+            this.alignRight.value = false;
+            //this.alignJustify.value = false;
+            this.application.ninja.stage.textTool.doAction("strikethrough", null);
+        }
+    },
+
+    handleIndentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("indent", null);
+        }
+    },
+
+    handleOutdentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("outdent", null);
+        }
+    },
+
+    handleFontSizeChange: {
+        value: function(e) {
+           
+        }
+    },
+
+    handleFontSizeChanging: {
+        value: function(e) {
+
+        }
+    },
+
+    handleFontSelectionChange: {
+        value: function() {
+            this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
+        }
+    },
+
+    handleNumberedListAction: {
+        value: function(e) {
+            //this.numberedList.value = false;
+            this.bulletedList.value = false;
+            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+        }
+    },
+
+    handleOrderedListAction: {
+        value: function(e) {
+            this.numberedList.value = false;
+            //this.bulletedList.value = false;
+            this.application.ninja.stage.textTool.doAction("insertnumberedlist", true);
+        }
+    },
+
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 7 Feb 2012 16:43:22 -0800
Subject: Refactored rich text editor location

---
 js/components/tools-properties/text-properties.reel/text-properties.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index de0b5fa3..dac30da0 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -61,7 +61,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
 
     handleEditorSelect: {
         value: function(e) {
-            console.log("hello");
             this.application.ninja.stage.textTool.updateStates();
         }
     },
-- 
cgit v1.2.3


From 8a2ef825490358f992d6d687174b0a16fd8302c1 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Wed, 8 Feb 2012 10:48:52 -0800
Subject: Squashed commit of the following:

commit 763910b9d074137eb7dee80447b89407ce5750c9
Merge: e557937 329a859
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 10:18:36 2012 -0800

    Merge pull request #20 from mqg734/ToolFixes

    Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs:

commit e5579374ff39b80b8c0c69faba37f6f581758fe0
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 13:28:17 2012 -0800

    updated montage v.0.6 to the latest changes.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 15:25:11 2012 -0800

    Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 668510892537eaaeb2e11520831d87b44b2489b7
Merge: 8950b34 c066fb4
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 14:19:22 2012 -0800

    Merge pull request #19 from ericguzman/TreeComponents

    Tree Components - Added copyright comments

commit aec849d91e4b697d496b9ede28b5d89cf2283781
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 14:18:13 2012 -0800

    id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:52:54 2012 -0800

    Fixing some typos and undeclared variables in GLRectangle and ShapesController.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit c066fb41ebee85bacf9b2155366b16831af41d76
Author: Eric Guzman <ericg@motorola.com>
Date:   Tue Feb 7 13:46:05 2012 -0800

    Tree Components - Added copyright comments

commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:30:08 2012 -0800

    Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 8ad767b61460984a4031ba630f76ac8247a61857
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 11:42:10 2012 -0800

    Fixed PI to support WebGL materials.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 486842239c71e7964f38a09aacda4970f2a82e1a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 10:58:14 2012 -0800

    Updated tools and PI to get/set materials by binding to appModel's materials property.  This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 789eaf5a92c903f27462c69a8890fbec695ab14e
Merge: 92ae17b 8950b34
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 09:36:29 2012 -0800

    Merge branch 'refs/heads/ninja-internal' into ToolFixes

commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 16:35:12 2012 -0800

    Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa).

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 75486be2839494c9b54833aff8f5eef3f9542151
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 15:41:48 2012 -0800

    Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 14:03:40 2012 -0800

    Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 13:35:30 2012 -0800

    Allow users to switch between 2d and webGL mode. Note that this doesn't currently work.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 486d9a31a85dd833a1c798049a00403756703034
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 11:35:49 2012 -0800

    Support use WebGL checkbox in the PI.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/components/combobox.reel/combobox.js            | 91 +++++++++++++++++++++-
 .../fill-properties.reel/fill-properties.html      | 11 ++-
 .../fill-properties.reel/fill-properties.js        |  6 +-
 .../ink-bottle-properties.html                     | 12 ++-
 .../ink-bottle-properties.js                       |  6 +-
 .../line-properties.reel/line-properties.js        | 14 +++-
 .../oval-properties.reel/oval-properties.js        | 14 +++-
 .../rect-properties.reel/rect-properties.js        | 14 +++-
 .../shape-properties.reel/shape-properties.css     |  6 +-
 .../shape-properties.reel/shape-properties.html    | 35 ++++++---
 .../shape-properties.reel/shape-properties.js      | 36 ++++++---
 js/components/treeview/branch.reel/branch.css      |  6 ++
 js/components/treeview/branch.reel/branch.html     |  5 ++
 js/components/treeview/leaf.reel/leaf.css          |  6 ++
 js/components/treeview/leaf.reel/leaf.html         |  5 ++
 .../treeview/ninja-branch.reel/ninja-branch.css    |  6 ++
 .../treeview/ninja-branch.reel/ninja-branch.html   |  5 ++
 .../treeview/ninja-leaf.reel/ninja-leaf.css        |  6 ++
 .../treeview/ninja-leaf.reel/ninja-leaf.html       |  5 ++
 js/components/treeview/treeview.reel/treeview.css  |  8 +-
 js/components/treeview/treeview.reel/treeview.html |  5 ++
 21 files changed, 251 insertions(+), 51 deletions(-)

(limited to 'js/components')

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index a68a7d6b..bc433f52 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -15,7 +15,7 @@ exports.Combobox = Montage.create(Component, {
     },
 
     _wasSetByCode: {
-        enumerable: false,
+        enumerable: true,
         value: true
     },
 
@@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, {
         value: null
     },
 
+    dataField: {
+        value: null
+    },
+
+    dataFunction: {
+        value: null
+    },
+
     _items: {
         value: []
     },
@@ -71,7 +79,47 @@ exports.Combobox = Montage.create(Component, {
                 e.value = this._value;
                 this.dispatchEvent(e);
 
-                this._wasSetByCode = false;
+                this._wasSetByCode = true;
+            }
+        }
+    },
+
+    _enabled: {
+        enumerable: false,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            if(value !== this._enabled)
+            {
+                this._enabled = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _visible: {
+        enumerable: false,
+        value: true
+    },
+
+    visible: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._visible;
+        },
+        set: function(value) {
+            if(value !== this._visible)
+            {
+                this._visible = value;
+                this.needsDraw = true;
             }
         }
     },
@@ -102,7 +150,19 @@ exports.Combobox = Montage.create(Component, {
                 {
                     var current = items[i];
                     optionItem = document.createElement("option");
-                    optionItem.value = current;
+                    if(this.dataFunction)
+                    {
+                        optionItem.value = this.dataFunction(current);
+                    }
+                    else if(this.dataField)
+                    {
+                        optionItem.value = current[this.dataField];
+                    }
+                    else
+                    {
+                        optionItem.value = current;
+                    }
+
                     if(this.labelFunction)
                     {
                         optionItem.innerText = this.labelFunction(current);
@@ -117,6 +177,15 @@ exports.Combobox = Montage.create(Component, {
                     }
                     this.element.appendChild(optionItem);
                 }
+                this.element.disabled = !this._enabled;
+                if(this._visible)
+                {
+                    this.element.style.visibility = "visible";
+                }
+                else
+                {
+                    this.element.style.visibility = "hidden";
+                }
             }
         }
     },
@@ -133,6 +202,22 @@ exports.Combobox = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
+            if( (this._value === null) && this._items.length )
+            {
+                var current = this._items[0];
+                if(this.dataFunction)
+                {
+                    this.value = this.dataFunction(current);
+                }
+                else if(this.dataField)
+                {
+                    this.value = current[this.dataField];
+                }
+                else
+                {
+                    this.value = current;
+                }
+            }
             this.element.addEventListener("change", this, false);
         }
     }
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index d09b7f44..a35f9b15 100644
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -11,6 +11,15 @@
 
         <script type="text/montage-serialization">
         {
+            "_fillMaterialCB": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "fillMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
             "owner": {
                 "module": "js/components/tools-properties/fill-properties.reel",
                 "name": "FillProperties",
@@ -18,7 +27,7 @@
                     "element": {"#": "fillProperties"},
                     "_useWebGL": {"#": "useWebGLCH"},
                     "_materialsContainer": {"#": "materialsContainer"},
-                    "_fillMaterial": {"#": "fillMaterialCB"}
+                    "_fillMaterial": {"@": "_fillMaterialCB"}
                 }
             }
     	}
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index 3b77d72e..61b667d7 100644
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -14,7 +14,11 @@ exports.FillProperties = Montage.create(ToolProperties, {
     
     _subPrepare: {
         value: function() {
-            ShapesController.DisplayMaterials(this._fillMaterial);
+            Object.defineBinding(this._fillMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index b98a7b4c..1602e793 100644
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -36,6 +36,16 @@
                 }
             },
 
+            "_strokeMaterialCB": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "strokeMaterialIBCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
             "owner": {
                 "module": "js/components/tools-properties/ink-bottle-properties.reel",
                 "name": "InkBottleProperties",
@@ -49,7 +59,7 @@
 
                     "_useWebGL": {"#": "useWebGLCHIB"},
                     "_materialsContainer": {"#": "materialsContainerIB"},
-                    "_strokeMaterial": {"#": "strokeMaterialIBCB"}
+                    "_strokeMaterial": {"@": "_strokeMaterialCB"}
                 }
             }
         }
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 61ea808a..e3ffc359 100644
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -14,7 +14,11 @@ exports.InkBottleProperties = Montage.create(ToolProperties, {
 
     _subPrepare: {
         value: function() {
-            ShapesController.DisplayMaterials(this._strokeMaterial);
+            Object.defineBinding(this._strokeMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
diff --git a/js/components/tools-properties/line-properties.reel/line-properties.js b/js/components/tools-properties/line-properties.reel/line-properties.js
index 694e4326..e1ecf790 100644
--- a/js/components/tools-properties/line-properties.reel/line-properties.js
+++ b/js/components/tools-properties/line-properties.reel/line-properties.js
@@ -33,18 +33,24 @@ exports.LineProperties = Montage.create(ToolProperties, {
     },
 
     strokeStyle : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].text; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].text;
+            return "Solid";
+        }
     },
 
     strokeStyleIndex : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].value; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].value;
+            return 1;
+        }
     },
 
     strokeMaterial: {
-        get: function() { return this.base._strokeMaterial.options[this.base._strokeMaterial.value].value; }
+        get: function() { return this.base._strokeMaterial.value; }
     },
 
     fillMaterial: {
-        get: function() { return this.base._fillMaterial.options[this.base._fillMaterial.value].value; }
+        get: function() { return this.base._fillMaterial.value; }
     }
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/oval-properties.reel/oval-properties.js b/js/components/tools-properties/oval-properties.reel/oval-properties.js
index c88f7799..ddeb64ee 100644
--- a/js/components/tools-properties/oval-properties.reel/oval-properties.js
+++ b/js/components/tools-properties/oval-properties.reel/oval-properties.js
@@ -33,19 +33,25 @@ exports.OvalProperties = Montage.create(ToolProperties, {
     },
     
     strokeStyle : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].text; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].text;
+            return "Solid";
+        }
     },
 
     strokeStyleIndex : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].value; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].value;
+            return 1;
+        }
     },
 
     strokeMaterial: {
-        get: function() { return this.base._strokeMaterial.options[this.base._strokeMaterial.value].value; }
+        get: function() { return this.base._strokeMaterial.value; }
     },
 
     fillMaterial: {
-        get: function() { return this.base._fillMaterial.options[this.base._fillMaterial.value].value; }
+        get: function() { return this.base._fillMaterial.value; }
     }
 
 
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index 1e717f88..b2de6ff7 100644
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -55,19 +55,25 @@ exports.RectProperties = Montage.create(ToolProperties, {
     },
 
     strokeStyle : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].text; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].text;
+            return "Solid";
+        }
     },
 
     strokeStyleIndex : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].value; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].value;
+            return 1;
+        }
     },
 
     strokeMaterial: {
-        get: function() { return this.base._strokeMaterial.options[this.base._strokeMaterial.value].value; }
+        get: function() { return this.base._strokeMaterial.value; }
     },
 
     fillMaterial: {
-        get: function() { return this.base._fillMaterial.options[this.base._fillMaterial.value].value; }
+        get: function() { return this.base._fillMaterial.value; }
     },
 
     _setBindings: {
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 1e36b0bd..0441c1cf 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -2,8 +2,4 @@
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
-#strokeIcon {
-    float: left;
-}
\ No newline at end of file
+ </copyright> */
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 52502d47..64840b17 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -53,6 +53,26 @@
                 }
             },
 
+            "_strokeMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "strokeMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
+            "_fillMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+