From 313354a8ff9ed21b826ab5f280bcf1095a64a7f4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 19 Mar 2012 18:11:50 -0700 Subject: fully removing our old button component from Ninja Signed-off-by: Valerio Virgillito --- js/components/button.reel/button.css | 40 ---- js/components/button.reel/button.html | 26 --- js/components/button.reel/button.js | 225 --------------------- .../text-properties.reel/text-properties.html | 2 +- js/panels/properties.reel/properties.css | 13 -- .../position-and-size.reel/position-and-size.css | 32 ++- .../position-and-size.reel/position-and-size.html | 13 +- .../position-and-size.reel/position-and-size.js | 10 +- 8 files changed, 41 insertions(+), 320 deletions(-) delete mode 100755 js/components/button.reel/button.css delete mode 100755 js/components/button.reel/button.html delete mode 100755 js/components/button.reel/button.js (limited to 'js') diff --git a/js/components/button.reel/button.css b/js/components/button.reel/button.css deleted file mode 100755 index f50a9873..00000000 --- a/js/components/button.reel/button.css +++ /dev/null @@ -1,40 +0,0 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -.button { - border:none; - cursor:default; - text-align:center; - -webkit-user-select:none; - opacity:0.8; - display:table-cell; - vertical-align:middle; - width:100%; - height:100%; - background-color:#333333; - color:white; -} - -.button:hover -{ - opacity:1; -} - -.button:active -{ - outline:solid 1px black; -} - -.button.on -{ - background-color: #333333; -} - -.button.off -{ - background-color: #cccccc; - color:black; -} \ No newline at end of file diff --git a/js/components/button.reel/button.html b/js/components/button.reel/button.html deleted file mode 100755 index d0398a6a..00000000 --- a/js/components/button.reel/button.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js deleted file mode 100755 index 2d26c8b4..00000000 --- a/js/components/button.reel/button.js +++ /dev/null @@ -1,225 +0,0 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage, -Component = require("montage/ui/component").Component; - -var Button = exports.Button = Montage.create(Component, { - // Button state - _focused: { - value: false - }, - - _pressed: { - value: false - }, - - _isToggleButton: { - value: false - }, - - isToggleButton: { - serializable: true, - enumerable: true, - get: function() { - return this._isToggleButton; - }, - set: function(value) { - if (value !== this._isToggleButton) { - this._isToggleButton = value; - this.needsDraw = true; - } - } - }, - - _value: { - value: false - }, - - value: { - serializable: true, - enumerable: true, - get: function() { - return this._value; - }, - set: function(value) { - if ( (value !== null) && (value !== this._value) ) { - this._value = value; - this.needsDraw = true; - } - } - }, - - _label: { - value: "" - }, - - label: { - serializable: true, - enumerable: true, - get: function() { - return this._label; - }, - set: function(value) { - if (value !== this._label) { - this._label = value; - this.needsDraw = true; - } - } - }, - - // TODO - Allow user to specify up, over and down states - _onState: { - value: "on" - }, - - onState: { - serializable: true, - enumerable: true, - get: function() { - return this._onState; - }, - set: function(value) { - if (value !== this._onState) { - this._onState = value; - this.needsDraw = true; - } - } - }, - - _offState: { - value: "off" - }, - - offState: { - serializable: true, - enumerable: true, - get: function() { - return this._offState; - }, - set: function(value) { - if (value !== this._offState) { - this._offState = value; - this.needsDraw = true; - } - } - }, - - // Low-level event listeners - handleTouchstart: { - value: function(event) { - // TODO preventingDefault disables the magnifying class - // sadly it also disables double tapping on the button to zoom... - event.preventDefault(); - this._acknowledgeIntent(); - } - }, - - handleMousedown: { - value: function(event) { - this._acknowledgeIntent(); - } - }, - - handleTouchend: { - value: function(event) { - this._interpretInteraction(event); - } - }, - - handleTouchcancel: { - value: function(event) { - console.log("cancel!") - // this._interpretInteraction(event); - } - }, - - handleMouseup: { - value: function(event) { - this._interpretInteraction(event); - } - }, - - // Internal state management - _acknowledgeIntent: { - value: function() { - this._pressed = true; - this.element.classList.add("pressed"); - } - }, - - _interpretInteraction: { - value: function(event) { - - if (!this._pressed) { - return; - } - - this.value = !this.value; - - this._pressed = false; - this._dispatchActionEvent(); - } - }, - - _dispatchActionEvent: { - value: function() { - var actionEvent = document.createEvent("CustomEvent"); - actionEvent.initCustomEvent("action", true, true); - actionEvent.type = "action"; - this.dispatchEvent(actionEvent); - } - }, - - draw: { - enumerable: false, - value: function() { - if(this.isToggleButton) - { - if(this._value === true) - { - this.element.classList.remove(this.offState); - this.element.classList.add(this.onState); - } - else - { - this.element.classList.remove(this.onState); - this.element.classList.add(this.offState); - } - } - - if(this.label && this.label !== "") - { - this.element.textContent = this.label; - } - } - }, - - prepareForDraw: { - value: function() { - - // TODO only install low level event listeners for high level - // events others listen to us for - - this.element.addEventListener("touchstart", this); - // TODO listen to mouseup anywhere within the app - document.addEventListener("touchend", this); - document.addEventListener("touchcancel", this); - - - this.element.addEventListener("mousedown", this); - - // TODO listen to mouseup anywhere within the app - document.addEventListener("mouseup", this); - - // TODO accept space or enter as a way to trigger action - // if element targeted; balancing demans of multitouch - // with traditional single focus model - document.addEventListener("keydown", this, true); - } - } - -}); 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 13a88ba7..2d50a79e 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -69,7 +69,7 @@ }, "fontSettings": { - "module": "js/components/button.reel", + "module": "montage/ui/button.reel", "name": "Button", "properties": { "element": {"#": "fontSettings"} diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index f8d37984..f82d3660 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -230,23 +230,10 @@ padding-right:6px; clear:none; } -.propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp { - position: absolute; - left: 105px; - border: none; - background-color: transparent; - top: 2px; - opacity: 0.7; -} - .propertiesPanel .button:active { outline: none; } -.propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover { - opacity: 1; -} - .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { position: relative; overflow: visible; diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css index 227a232b..7f8fdbc2 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css @@ -8,7 +8,33 @@ display: none; } -.fieldCol .disabled -{ +.fieldCol .disabled { color:#999999; -} \ No newline at end of file +} + + +#posBound { + position: absolute; + left: 105px; + border: none; + background-color: transparent; + top: 2px; + opacity: 0.7; + width: 17px; + height: 18px; + margin-right: 10px; +} + +#posBound:hover { + opacity: 1; +} + +.unlock{ + background: url("../../../../../images/optionsbar/unlinked.png") no-repeat; + +} + +.lockUp { + background: url("../../../../../images/optionsbar/link.png") no-repeat; +} + diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html index 6e355f31..f50724c5 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html @@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } }, "bindButton": { - "module": "js/components/button.reel", - "name": "Button", + "prototype": "montage/ui/toggle-button.reel", "properties": { - "element": {"#" :"posBound"}, - "isToggleButton": true, - "onState": "LockToolUp", - "offState": "UnLockToolUp" + "element": {"#": "posBound"}, + "pressedClass": "lockUp", + "preventFocus": true, + "identifier": "ratio" } } } @@ -119,7 +118,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot

- + Width:

diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js index 49117090..1e47916f 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js @@ -100,7 +100,7 @@ exports.PosSize = Montage.create(Component, { */ handleRatioAction: { value: function() { - if(this.bindButton.value) { + if(this.bindButton.pressed) { this.aspectRatioWidth = this.heightControl.value / this.widthControl.value; if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1; @@ -148,7 +148,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); @@ -173,7 +173,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); @@ -221,7 +221,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); @@ -246,7 +246,7 @@ exports.PosSize = Montage.create(Component, { this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; - if(this.bindButton.value) { + if(this.bindButton.pressed) { var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); if(!isFinite(newHeight)) newHeight = this.widthControl.value; -- cgit v1.2.3