From 1c528b42f9b1c9be9197921586388c3a3bdc5c17 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:16:23 -0800 Subject: CSS Panel Update - Adding montage objects for css panel --- .../css-panel/style-sheet.reel/style-sheet.css | 0 .../css-panel/style-sheet.reel/style-sheet.html | 42 +++++++++++++++++ .../css-panel/style-sheet.reel/style-sheet.js | 52 ++++++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.css create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.html create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.js (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html new file mode 100644 index 00000000..4fb94335 --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -0,0 +1,42 @@ + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js new file mode 100644 index 00000000..daa614c2 --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -0,0 +1,52 @@ +/* + 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; + +exports.StyleSheet = Montage.create(Component, { + deserializedFromTemplate : { + value: function() { + console.log("style sheet view - deserialized"); + } + }, + prepareForDraw : { + value: function() { + console.log("style sheet view - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("styles sheet view - draw"); + } + }, + _name: { + value: null + }, + name : { + get: function() { + return this._name; + }, + set: function(text) { + this._name = text; + } + }, + _styleSheet : { + value: null + }, + styleSheet : { + get: function() { + return this._styleSheet; + }, + set: function(sheet) { + if(sheet.href) { + this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); + } else { + this.name = 'Style Tag'; + } + } + } +}); \ No newline at end of file -- cgit v1.2.3 From a5ee11857f923d3e49b44c0a8c480e9d0b026d5b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:18:12 -0800 Subject: CSS Panel Update --- js/panels/css-panel/style-sheet.reel/style-sheet.html | 3 ++- js/panels/css-panel/style-sheet.reel/style-sheet.js | 8 +++++--- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 4fb94335..43ffec6f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -20,7 +20,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module": "montage/ui/dynamic-text.reel", "name": "DynamicText", "properties": { - "element": {"#": "sheet-name"} + "element": {"#": "sheet-name"}, + "defaultText": "Style sheet" }, "bindings": { "value": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index daa614c2..a4fe5960 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -34,19 +34,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, - _styleSheet : { + _source : { value: null }, - styleSheet : { + source : { get: function() { - return this._styleSheet; + return this._source; }, set: function(sheet) { + console.log('sheet being set'); if(sheet.href) { this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); } else { this.name = 'Style Tag'; } + this._source = sheet; } } }); \ No newline at end of file -- cgit v1.2.3 From 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 10:55:51 -0800 Subject: CSS Panel - Updating components, created toolbar components, and small changes to styles controller --- .../css-panel/style-sheet.reel/style-sheet.css | 49 ++++++++++++++++++++++ .../css-panel/style-sheet.reel/style-sheet.html | 36 +++++++++++++++- .../css-panel/style-sheet.reel/style-sheet.js | 9 +++- 3 files changed, 91 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index e69de29b..41c5ab12 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -0,0 +1,49 @@ +/* + 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. + */ +.style-sheet-container { + border-bottom: 1px solid #505050; + display: -webkit-box; + -webkit-box-orient: horizontal; + padding: 4px 0 3px; + white-space: nowrap; +} +.style-sheet-container > * { + -webkit-box-flex: 1; + display:-webkit-box; +} +.style-sheet-container input[type="checkbox"] { + margin-right: 8px; + position: relative; + -webkit-box-flex: 0; +} +.style-sheet-container span { + min-width: 50px; + overflow: hidden; + padding: 2px 0; + text-overflow: ellipsis; + white-space: nowrap; +} +.style-sheet-container label { + -webkit-box-flex: 0; + margin: 0 5px; + padding: 2px 0; +} +.style-sheet-container input[type="text"] { + min-width: 30px; +} +.style-sheet-container button { + background: none; + color: #FFF; + cursor: pointer; +} +.style-sheet-container button:after { + content: "\2716"; + opacity: 0.7; +} + +.style-sheet-container button:hover:after { + opacity: 1; +} \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 43ffec6f..64b8e8ae 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -7,16 +7,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot +
-
+
+
@@ -79,9 +124,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
- - - + + +
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 4f9ad21f..9ad48a62 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -14,8 +14,6 @@ exports.StyleSheet = Montage.create(Component, { willDraw : { value: function() { - console.log("style sheet view - will draw"); - if(this.editing) { document.body.addEventListener('mousedown', this, false); this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth; @@ -28,7 +26,6 @@ exports.StyleSheet = Montage.create(Component, { draw : { value: function() { var transStr = '-webkit-transform'; - console.log("styles sheet view - draw"); this.mediaInput.value = this._source.media.mediaText; @@ -39,17 +36,64 @@ exports.StyleSheet = Montage.create(Component, { this.editView.classList.remove('expanded'); this.editView.style.removeProperty(transStr); } + + if(this._readOnly) { + this._element.classList.add('ss-locked'); + this.importButton.element.classList.remove('ss-invisible'); + } else { + this._element.classList.remove('ss-locked'); + this.importButton.element.classList.add('ss-invisible'); + } + } }, + /* ------ Events------ */ + handleMousedown : { + value: function(e) { + var nonBlurringElements = [ + this.editView, + this.deleteButton.element, + this.disableButton.element, + this.importButton.element]; + + console.log("handle mousedown"); + + if(nonBlurringElements.indexOf(e.target) === -1) { + this.editing = false; + } + } + }, handleEditButtonAction: { value: function(e) { - console.log('handle edit button action'); this.editing = true; } }, + + handleImportButtonAction: { + value: function(e) { + e.stopPropagation(); + } + }, + + handleDisableButtonAction: { + value: function(e) { + e.stopPropagation(); + this.disabled = !this.disabled; + } + }, + + handleDeleteButtonAction : { + value: function(e) { + e.stopPropagation(); + debugger; + } + }, + + /* ------ State properties ------ */ + _editing : { value: null }, @@ -63,21 +107,9 @@ exports.StyleSheet = Montage.create(Component, { } }, - handleMousedown : { - value: function(e) { - console.log("handle mousedown"); - if(e.target !== this.editView && e.target !== this.editButton) { - this.editing = false; - } - } - }, - - mediaInput: { - value: null - }, - _name: { - value: null + value: "Style Tag", + distinct: true }, name : { get: function() { @@ -87,6 +119,37 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, + _readOnly : { value: null }, + readOnly : { + get: function() { + return this._readOnly; + }, + set: function(isReadOnly) { + this._readOnly = isReadOnly; + this.needsDraw = true; + } + }, + + _disabled : { + value: null + }, + disabled: { + get: function() { + return this._disabled; + }, + set: function(disable) { + var label = (disable) ? "Enable" : "Disable"; + this._source.ownerNode.disabled = disable; + this.disableButton.label = label; + + this._disabled = disable; + } + }, + + external : { + value: null + }, + _source : { value: null }, @@ -95,13 +158,64 @@ exports.StyleSheet = Montage.create(Component, { return this._source; }, set: function(sheet) { - console.log('sheet being set: ', sheet.ownerNode); - if(sheet.href) { - this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); - } else { - this.name = 'Style Tag'; - } + console.log('sheet being set: ', this); + + this._extractData(sheet.ownerNode); this._source = sheet; } + }, + + _extractData : { + value: function(sheetNode) { + var data = sheetNode.dataset, key; + + for(key in data) { + this[key] = data[key]; + } + } + }, + + /* ------ Data Attribute Properties ------ */ + + _ninjaExternalUrl: { value: null }, + ninjaExternalUrl : { + get: function() { return this._ninjaExternalUrl; }, + set: function(url) { + this.external = true; + this._ninjaExternalUrl = url; + } + }, + + _ninjaFileName: { value: null }, + ninjaFileName : { + get: function() { return this._ninjaFileName; }, + set: function(fileName) { + this.name = fileName; + this._ninjaFileName = fileName; + } + }, + + _ninjaFileUrl: { value: null }, + ninjaFileUrl : { + get: function() { return this._ninjaFileUrl; }, + set: function(fileUrl) { + this._ninjaFileUrl = fileUrl; + } + }, + + _ninjaFileReadOnly: { value: null }, + ninjaFileReadOnly : { + get: function() { return this._ninjaFileReadOnly; }, + set: function(isReadOnly) { + this._ninjaFileReadOnly = this.readOnly = isReadOnly === "true"; + } + }, + + _ninjaUri: { value: null }, + ninjaUri : { + get: function() { return this._ninjaUri; }, + set: function(uri) { + this._ninjaUri = uri; + } } }); \ No newline at end of file -- cgit v1.2.3 From a62f57cf6beee332ff60a48f5e26d0084b4a5432 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 7 May 2012 10:38:29 -0700 Subject: Style sheets - Add sheet action --- js/panels/css-panel/style-sheet.reel/style-sheet.html | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 1820f780..6a9dee65 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -24,14 +24,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "deleteButton": {"@": "deleteButton"} } }, - "disableCheckbox": { - "module": "js/components/checkbox.reel", - "name": "Checkbox", - "properties": { - "element": { "#": "disable-checkbox" }, - "checked": true - } - }, "name": { "module": "montage/ui/dynamic-text.reel", "name": "DynamicText", @@ -114,12 +106,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
+
- + -
+
-- cgit v1.2.3 From af4dac82d2e76fe90191d6c085740d855bf961f3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 09:43:57 -0700 Subject: Style sheets - Added default stylesheet selection --- .../css-panel/style-sheet.reel/style-sheet.css | 4 +++ .../css-panel/style-sheet.reel/style-sheet.html | 1 + .../css-panel/style-sheet.reel/style-sheet.js | 29 ++++++++++++++++++++++ 3 files changed, 34 insertions(+) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index 9ea03be8..1d26b041 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -127,6 +127,10 @@ margin-right: 25px; } +.default-style-sheet > span { + font-weight: bold; +} + .ss-invisible { display: none; } \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 6a9dee65..ca24487d 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -29,6 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name": "DynamicText", "properties": { "element": {"#": "sheet-name"}, + "identifier": "nameText", "defaultText": "Style sheet" }, "bindings": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 9ad48a62..3ddd8454 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -12,6 +12,12 @@ exports.StyleSheet = Montage.create(Component, { value: null }, + prepareForDraw : { + value: function() { + this.nameText.element.addEventListener('click', this, false); + } + }, + willDraw : { value: function() { if(this.editing) { @@ -45,6 +51,12 @@ exports.StyleSheet = Montage.create(Component, { this.importButton.element.classList.add('ss-invisible'); } + if(this.default) { + this._element.classList.add('default-style-sheet'); + } else { + this._element.classList.remove('default-style-sheet'); + } + } }, @@ -66,6 +78,12 @@ exports.StyleSheet = Montage.create(Component, { } }, + handleClick : { + value: function(e) { + this.parentComponent.parentComponent.defaultStyleSheet = this.source; + } + }, + handleEditButtonAction: { value: function(e) { this.editing = true; @@ -130,6 +148,17 @@ exports.StyleSheet = Montage.create(Component, { } }, + _default : { value: null }, + default : { + get: function() { + return this._default; + }, + set: function(value) { + this._default = value; + this.needsDraw = true; + } + }, + _disabled : { value: null }, -- cgit v1.2.3 From b5439f436cac405c4bbf7e01ead9cee5dbc71a73 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 16:04:00 -0700 Subject: CSS Panel - Style sheets dirty flag added --- .../css-panel/style-sheet.reel/style-sheet.css | 5 +++++ js/panels/css-panel/style-sheet.reel/style-sheet.js | 21 +++++++++++++++++++++ 2 files changed, 26 insertions(+) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index 1d26b041..2e72cd9c 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -131,6 +131,11 @@ font-weight: bold; } +.ss-dirty:after { + content: "*"; + color: #A33939; +} + .ss-invisible { display: none; } \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 3ddd8454..0ff195d5 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -57,6 +57,12 @@ exports.StyleSheet = Montage.create(Component, { this._element.classList.remove('default-style-sheet'); } + if(this.dirty) { + this.nameText.element.classList.add('ss-dirty'); + } else { + this.nameText.element.classList.remove('ss-dirty'); + } + } }, @@ -137,6 +143,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, + _dirty : { + value: null + }, + dirty : { + get: function() { + return this._dirty; + }, + set: function(value) { + if(value === this._dirty) { return false; } + + this._dirty = value; + this.needsDraw = true; + } + }, + _readOnly : { value: null }, readOnly : { get: function() { -- cgit v1.2.3 From 197a7646e472fcea616764685c8d03c6063e66f5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 18 May 2012 14:05:06 -0700 Subject: CSS Panel - Add support for deleting style sheets --- .../css-panel/style-sheet.reel/style-sheet.html | 16 ---------------- js/panels/css-panel/style-sheet.reel/style-sheet.js | 21 ++++++++------------- 2 files changed, 8 insertions(+), 29 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index ca24487d..788cafcc 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -20,7 +20,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "editButton": {"@": "editButton"}, "editView": {"#": "style-sheet-edit"}, "disableButton": {"@": "disableButton"}, - "importButton": {"@": "importButton"}, "deleteButton": {"@": "deleteButton"} } }, @@ -74,20 +73,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "listener": {"@": "owner"} }] - }, - "importButton": { - "module": "montage/ui/button.reel", - "name": "Button", - "properties": { - "element": {"#": "import-button"}, - "identifier": "importButton", - "label": "Import" - }, - "listeners": [{ - "type": "action", - "listener": {"@": "owner"} - }] - }, "deleteButton": { "module": "montage/ui/button.reel", @@ -118,7 +103,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -