diff options
author | Eric Guzman | 2012-02-13 13:38:16 -0800 |
---|---|---|
committer | Eric Guzman | 2012-02-13 13:38:16 -0800 |
commit | 6dc5d31b201d3578bf17b4f1fa7b1b9865d46153 (patch) | |
tree | 153d33bad1c012cbde019641705371141b96465a /js/panels | |
parent | e46ab1a8e19f66de6eca68225d9e8b4cba8f90e8 (diff) | |
download | ninja-6dc5d31b201d3578bf17b4f1fa7b1b9865d46153.tar.gz |
Style Presets - Separate out the style preset data to new file
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/presets/default-style-presets.js | 52 | ||||
-rw-r--r-- | js/panels/presets/style-presets.reel/style-presets.html | 2 | ||||
-rw-r--r-- | js/panels/presets/style-presets.reel/style-presets.js | 61 |
3 files changed, 59 insertions, 56 deletions
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js new file mode 100644 index 00000000..7455ac9f --- /dev/null +++ b/js/panels/presets/default-style-presets.js | |||
@@ -0,0 +1,52 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | exports.stylePresets = { | ||
8 | "text": "Style Presets Library", | ||
9 | "children": [{ | ||
10 | "text": "Box Styles", | ||
11 | "children": [ | ||
12 | { | ||
13 | "text": "Border-Radius", | ||
14 | "classNameBase" : "border-radius", | ||
15 | "styles" : { | ||
16 | "border-radius": "100px", | ||
17 | "border" : "1px solid #333" | ||
18 | } | ||
19 | }, | ||
20 | { | ||
21 | "text": "Drop Shadow", | ||
22 | "classNameBase" : "drop-shadow", | ||
23 | "styles" : { | ||
24 | "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", | ||
25 | "border" : "1px solid #CCC" | ||
26 | } | ||
27 | }, | ||
28 | { | ||
29 | "text": "Fancy Box", | ||
30 | "classNameBase" : "fancy-box", | ||
31 | "styles" : { | ||
32 | "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", | ||
33 | "border" : "1px solid #FFF", | ||
34 | "border-radius": "30px", | ||
35 | "background-color": "#7db9e8", | ||
36 | "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)" | ||
37 | } | ||
38 | }] | ||
39 | }, { | ||
40 | "text": "Text Styles", | ||
41 | "children": [ | ||
42 | { "text": "Italic" }, | ||
43 | { "text": "Text Shadow" }, | ||
44 | { "text": "Text Color" } ] | ||
45 | }, { | ||
46 | "text": "Color Styles", | ||
47 | "children": [ | ||
48 | { "text": "Background Gradient" }, | ||
49 | { "text": "Background Color" }, | ||
50 | { "text": "Text Highlight" } ] | ||
51 | }] | ||
52 | }; \ No newline at end of file | ||
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html index b5c40d9c..0db4d3c0 100644 --- a/js/panels/presets/style-presets.reel/style-presets.html +++ b/js/panels/presets/style-presets.reel/style-presets.html | |||
@@ -29,7 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
29 | "bindings": { | 29 | "bindings": { |
30 | "content": { | 30 | "content": { |
31 | "boundObject": {"@": "owner"}, | 31 | "boundObject": {"@": "owner"}, |
32 | "boundObjectPropertyPath": "data2" | 32 | "boundObjectPropertyPath": "presetData" |
33 | } | 33 | } |
34 | } | 34 | } |
35 | }, | 35 | }, |
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index f25c8067..0c44e20c 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js | |||
@@ -5,78 +5,29 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component, |
9 | DefaultPresets = require("js/panels/presets/default-style-presets").stylePresets; | ||
9 | 10 | ||
10 | exports.StylesLibrary = Montage.create(Component, { | 11 | exports.StylesLibrary = Montage.create(Component, { |
11 | hasTemplate: { | 12 | hasTemplate: { |
12 | value: true | 13 | value: true |
13 | }, | 14 | }, |
15 | presetData : { | ||
16 | value : null | ||
17 | }, | ||
14 | contentPanel : { | 18 | contentPanel : { |
15 | value: "presets" // get from local storage | 19 | value: "presets" // get from local storage |
16 | }, | 20 | }, |
17 | templateDidLoad : { | 21 | templateDidLoad : { |
18 | value: function() { | 22 | value: function() { |
19 | console.log('deserialized'); | 23 | this.presetData = DefaultPresets; |
20 | } | 24 | } |
21 | }, | 25 | }, |
22 | treeList : { | 26 | treeList : { |
23 | value : null | 27 | value : null |
24 | }, | 28 | }, |
25 | data2: { | ||
26 | value: { | ||
27 | "text": "styles", | ||
28 | "children": [{ | ||
29 | "text": "Box Styles", | ||
30 | "children": [ | ||
31 | { | ||
32 | "text": "Border-Radius", | ||
33 | "classNameBase" : "border-radius", | ||
34 | "styles" : { | ||
35 | "border-radius": "100px", | ||
36 | "border" : "1px solid #333" | ||
37 | } | ||
38 | }, | ||
39 | { | ||
40 | "text": "Drop Shadow", | ||
41 | "classNameBase" : "drop-shadow", | ||
42 | "styles" : { | ||
43 | "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", | ||
44 | "border" : "1px solid #CCC" | ||
45 | } | ||
46 | }, | ||
47 | { | ||
48 | "text": "Fancy Box", | ||
49 | "classNameBase" : "fancy-box", | ||
50 | "styles" : { | ||
51 | "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", | ||
52 | "border" : "1px solid #FFF", | ||
53 | "border-radius": "30px", | ||
54 | "background-color": "#7db9e8", | ||
55 | "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)" | ||
56 | } | ||
57 | }] | ||
58 | }, { | ||
59 | "text": "Text Styles", | ||
60 | "children": [ | ||
61 | { "text": "Italic" }, | ||
62 | { "text": "Text Shadow" }, | ||
63 | { "text": "Text Color" } ] | ||
64 | }, { | ||
65 | "text": "Color Styles", | ||
66 | "children": [ | ||
67 | { "text": "Background Gradient" }, | ||
68 | { "text": "Background Color" }, | ||
69 | { "text": "Text Highlight" } ] | ||
70 | }] | ||
71 | } | ||
72 | }, | ||
73 | didDraw: { | 29 | didDraw: { |
74 | value : function() { | 30 | value : function() { |
75 | console.log('Presets Panel prepare for draw.'); | ||
76 | // this.treeList.items.push({ | ||
77 | // label : "Box Style", | ||
78 | // type : 'leaf' | ||
79 | // }); | ||
80 | } | 31 | } |
81 | }, | 32 | }, |
82 | handleNodeActivation: { | 33 | handleNodeActivation: { |