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 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <link rel="stylesheet" href="content.css" type="text/css">
+ <script type="text/montage-serialization">
+ {
+ "owner": {
+ "module" : "js/panels/presets/content.reel",
+ "name" : "Content",
+ "properties" : {
+ "element" : {"#" : "presetsPanel"},
+ "activeTabIndex": 0,
+ "tabBar" : {"#": "tab-bar" },
+ "tabs" : [
+ {"key":"styles", "tab": {"#": "styles" }},
+ {"key":"transitions", "tab": {"#": "transitions" }}
+ ]
+ }
+ },
+ "substitution": {
+ "module": "montage/ui/substitution.reel",
+ "name": "Substitution",
+ "properties": {
+ "element": {"#": "librarySlot"},
+ "switchComponents": {
+ "styles": {"@": "stylesLibrary"},
+ "transitions": {"@": "transitionsLibrary"}
+
+ }
+ },
+ "bindings": {
+ "switchValue": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "contentPanel",
+ "oneway": true
+ }
+ }
+ },
+ "stylesLibrary": {
+ "module": "js/panels/presets/style-presets.reel",
+ "name": "StylesLibrary"
+ },
+ "transitionsLibrary": {
+ "module": "js/panels/presets/transitions-presets.reel",
+ "name": "TransitionsLibrary"
+ }
+
+ }
+ </script>
+</head>
+<body>
+ <section id="presetsPanel" class="presetsPanel">
+ <nav id="tab-bar" class="tab-bar">
+ <div id="styles">Style Library</div>
+ <div id="transitions">Transitions Library</div>
+ </nav>
+ <div id="librarySlot" class="librarySlot"></div>
+ </section>
+</body>
+</html>
\ 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 @@
+/* <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;
+
+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