From 18f687974273b5ed7374ca5ae440c797064c5d0f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 7 Feb 2012 13:35:27 -0800 Subject: Presets Panel - Initial commit with panel content --- js/panels/presets/content.reel/content.css | 55 +++++++++++++++ js/panels/presets/content.reel/content.html | 66 +++++++++++++++++ js/panels/presets/content.reel/content.js | 106 ++++++++++++++++++++++++++++ 3 files changed, 227 insertions(+) create mode 100644 js/panels/presets/content.reel/content.css create mode 100644 js/panels/presets/content.reel/content.html create mode 100644 js/panels/presets/content.reel/content.js (limited to 'js/panels/presets/content.reel') diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css new file mode 100644 index 00000000..a6a1545f --- /dev/null +++ b/js/panels/presets/content.reel/content.css @@ -0,0 +1,55 @@ +.presetsPanel { + display: -webkit-box; + text-shadow: 1px 1px 0 #000; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.presetsPanel .treeRoot { + margin: 0 8px; +} +.tab-bar { + -webkit-box-flex: 0; + background-color: #282828; + color: #FFF; + display: -webkit-box; + font-size: 12px; + -webkit-box-orient: horizontal; +} + +.tab-bar div { + -webkit-box-flex: 0; + border-top-right-radius: 2px; + border-top-left-radius: 2px; + background-color: #474747; + background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px); + border-top: 1px solid rgb(100, 100, 100); + border-left: 1px solid rgba(100, 100, 100, 0.3); + border-right: 1px solid rgba(100, 100, 100, 0.3); + padding: 4px 9px; + cursor: pointer; + opacity: 0.6; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + z-index: 999; +} +.tab-bar div.active-tab { + background-image: none; + box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2); + position: relative; + opacity: 1; + text-overflow: clip; + z-index: 1001; +} + +.librarySlot { + -webkit-box-flex: 1; + overflow: auto; + background-color: #474747; + + color: #FFF; + + position: relative; + z-index: 1000; +} \ No newline at end of file diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html new file mode 100644 index 00000000..38de2a6d --- /dev/null +++ b/js/panels/presets/content.reel/content.html @@ -0,0 +1,66 @@ + + + + + + + + + +

+ +

+ + \ No newline at end of file diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js new file mode 100644 index 00000000..8ddb3757 --- /dev/null +++ b/js/panels/presets/content.reel/content.js @@ -0,0 +1,106 @@ +/* +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.content = Montage.create(Component, { + hasTemplate: { + value: true + }, + contentPanel : { + value: "presets" // get from local storage + }, + templateDidLoad : { + value: function() { + console.log('deserialized'); + } + }, + prepareForDraw : { + value: function() { + this.activeTab = this.tabs[this.activeTabIndex]; + + this.tabBar.addEventListener('click', this, false); + } + }, + handleClick : { + value: function(e) { + var tabObject = this.tabs.filter(function(item) { + return item.tab === e._event.target; + }); + + if(tabObject[0]) { + this.activeTab = tabObject[0]; + } + + } + }, + _activeTab : { + value: null, + enumerable: false + }, + activeTab : { + get: function() { + return this._activeTab; + }, + set: function(tabObject) { + this.contentPanel = tabObject.key; + + if(this.activeTab) { + this._activeTab.tab.classList.remove('active-tab'); + } + + tabObject.tab.classList.add('active-tab'); + this._activeTab = tabObject; + } + }, + treeList : { + value : null + }, + data2: { + value: { + "meta": "Blah", + "status": "OK", + "text" : "Root", + "data" : { + "date": "1.1.01", + "text": "Root", + "children": [{ + "date": "3.3.01", + "text": "Child 1" + }, + { + "date": "3.3.01", + "text": "Child 2", + "children": [{ + "date": "3.4.01", + "text": "Grand Child 1", + "children": [{ + "date": "4.4.01", + "text": "Great Grand Child 1" + }] + }] + + },{ + "date": "5.5.01", + "text": "Child 3" + }] + } + } + }, + + didDraw: { + value : function() { + console.log('Presets Panel prepare for draw.'); +// this.treeList.items.push({ +// label : "Box Style", +// type : 'leaf' +// }); + } + } + + +}); -- cgit v1.2.3 From 600dc32b7fbf406443e067eb661758e478049170 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 8 Feb 2012 16:53:46 -0800 Subject: Presets - fixed some object naming and css for presets tree --- js/panels/presets/content.reel/content.css | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/panels/presets/content.reel') diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css index a6a1545f..d0c8a08a 100644 --- a/js/panels/presets/content.reel/content.css +++ b/js/panels/presets/content.reel/content.css @@ -47,9 +47,6 @@ -webkit-box-flex: 1; overflow: auto; background-color: #474747; - - color: #FFF; - position: relative; z-index: 1000; } \ No newline at end of file -- cgit v1.2.3 From af20ca9b11133dd5cefb9275dbe8fb101c3380d0 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 15 Feb 2012 21:44:53 -0800 Subject: Presets - Get/set active tab from local storage + other improvements --- js/panels/presets/content.reel/content.js | 73 ++++++++++--------------------- 1 file changed, 23 insertions(+), 50 deletions(-) (limited to 'js/panels/presets/content.reel') diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js index 8ddb3757..c43c593c 100644 --- a/js/panels/presets/content.reel/content.js +++ b/js/panels/presets/content.reel/content.js @@ -12,17 +12,19 @@ exports.content = Montage.create(Component, { value: true }, contentPanel : { - value: "presets" // get from local storage + value: null }, templateDidLoad : { value: function() { - console.log('deserialized'); + var storedTabIndex = window.localStorage.presetsTabIndex; + if(storedTabIndex) { + this.activeTabIndex = storedTabIndex; + } } }, prepareForDraw : { value: function() { this.activeTab = this.tabs[this.activeTabIndex]; - this.tabBar.addEventListener('click', this, false); } }, @@ -48,59 +50,30 @@ exports.content = Montage.create(Component, { }, set: function(tabObject) { this.contentPanel = tabObject.key; - - if(this.activeTab) { - this._activeTab.tab.classList.remove('active-tab'); - } - - tabObject.tab.classList.add('active-tab'); + window.localStorage.presetsTabIndex = this.tabs.indexOf(tabObject); + this._tabToDeactivate = this._activeTab; this._activeTab = tabObject; + + this.needsDraw = this._needsTabSwitch = true; } }, - treeList : { - value : null + _tabToDeactivate : { + value: null, + enumarable: false }, - data2: { - value: { - "meta": "Blah", - "status": "OK", - "text" : "Root", - "data" : { - "date": "1.1.01", - "text": "Root", - "children": [{ - "date": "3.3.01", - "text": "Child 1" - }, - { - "date": "3.3.01", - "text": "Child 2", - "children": [{ - "date": "3.4.01", - "text": "Grand Child 1", - "children": [{ - "date": "4.4.01", - "text": "Great Grand Child 1" - }] - }] - - },{ - "date": "5.5.01", - "text": "Child 3" - }] - } - } + _needsTabSwitch : { + value: null, + enumerable: false }, + draw : { + value: function() { + if(this._needsTabSwitch) { + if(this._tabToDeactivate) { + this._tabToDeactivate.tab.classList.remove('active-tab'); + } - didDraw: { - value : function() { - console.log('Presets Panel prepare for draw.'); -// this.treeList.items.push({ -// label : "Box Style", -// type : 'leaf' -// }); + this._activeTab.tab.classList.add('active-tab'); + } } } - - }); -- cgit v1.2.3 From dcbacf63faa9caaea26883855e3adde37db9bd4f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 16 Feb 2012 14:31:05 -0800 Subject: Presets - Minor CSS text-shadow work-around for Windows Chrome --- js/panels/presets/content.reel/content.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/presets/content.reel') diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css index d0c8a08a..08e1d53b 100644 --- a/js/panels/presets/content.reel/content.css +++ b/js/panels/presets/content.reel/content.css @@ -1,6 +1,6 @@ .presetsPanel { display: -webkit-box; - text-shadow: 1px 1px 0 #000; + text-shadow: 1px 1px 1px #000; -webkit-box-orient: vertical; -webkit-box-flex: 1; } -- cgit v1.2.3