aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelbase.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorpanelbase.reel')
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.html118
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js140
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/css/colorpanelbase.scss338
3 files changed, 298 insertions, 298 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
index 5918a3ae..5ec6cd01 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!doctype html>
2<!-- <copyright> 2<!-- <copyright>
3Copyright (c) 2012, Motorola Mobility, Inc 3Copyright (c) 2012, Motorola Mobility, Inc
4All Rights Reserved. 4All Rights Reserved.
@@ -29,12 +29,12 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29POSSIBILITY OF SUCH DAMAGE. 29POSSIBILITY OF SUCH DAMAGE.
30</copyright> --> 30</copyright> -->
31<html lang="en"> 31<html lang="en">
32 <head> 32 <head>
33 33
34 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 34 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
35 35
36 <link rel="stylesheet" type="text/css" href="css/colorpanelbase.css"> 36 <link rel="stylesheet" type="text/css" href="css/colorpanelbase.css">
37 <script type="text/montage-serialization"> 37 <script type="text/montage-serialization">
38 { 38 {
39 "owner": { 39 "owner": {
40 "prototype": "js/panels/Color/ColorPanelBase.reel", 40 "prototype": "js/panels/Color/ColorPanelBase.reel",
@@ -68,57 +68,57 @@ POSSIBILITY OF SUCH DAMAGE.
68 } 68 }
69 } 69 }
70 70
71 } 71 }
72 </script> 72 </script>
73 73
74 </head> 74 </head>
75 75
76 <body> 76 <body>
77 77
78 <div data-montage-id="cp_expanded" class="cp_expanded"> 78 <div data-montage-id="cp_expanded" class="cp_expanded">
79 <div class="cp_history"> 79 <div class="cp_history">
80 <button data-montage-id="btn_current" class="cp_color_current">Current Color</button> 80 <button data-montage-id="btn_current" class="cp_color_current">Current Color</button>
81 <button data-montage-id="btn_previous" class="cp_color_previous">Previous Color</button> 81 <button data-montage-id="btn_previous" class="cp_color_previous">Previous Color</button>
82 </div> 82 </div>
83 <div class="cp_modes"> 83 <div class="cp_modes">
84 <button data-montage-id="btn_rgb" class="cp_rgb_mode">RGB</button> 84 <button data-montage-id="btn_rgb" class="cp_rgb_mode">RGB</button>
85 <hr /> 85 <hr />
86 <button data-montage-id="btn_hsl" class="cp_hsl_mode">HSL</button> 86 <button data-montage-id="btn_hsl" class="cp_hsl_mode">HSL</button>
87 </div> 87 </div>
88 <hr /> 88 <hr />
89 <div class="cp_inputs"> 89 <div class="cp_inputs">
90 <div class="cp_input_button"><button data-montage-id="btn_stroke" class="cpe_stroke">Stroke</button></div> 90 <div class="cp_input_button"><button data-montage-id="btn_stroke" class="cpe_stroke">Stroke</button></div>
91 <button data-montage-id="btn_istoke" class="cpe_stroke_icon"></button> 91 <button data-montage-id="btn_istoke" class="cpe_stroke_icon"></button>
92 <div class="cp_input_button"><button data-montage-id="btn_fill" class="cpe_fill">Fill</button></div> 92 <div class="cp_input_button"><button data-montage-id="btn_fill" class="cpe_fill">Fill</button></div>
93 <button data-montage-id="btn_ifill" class="cpe_fill_icon"></button> 93 <button data-montage-id="btn_ifill" class="cpe_fill_icon"></button>
94 </div> 94 </div>
95 <div class="cp_options"> 95 <div class="cp_options">
96 <button data-montage-id="btn_default" class="cp_reset">Default Colors</button> 96 <button data-montage-id="btn_default" class="cp_reset">Default Colors</button>
97 <button data-montage-id="btn_nocolor" class="cp_nocolor">No Color</button> 97 <button data-montage-id="btn_nocolor" class="cp_nocolor">No Color</button>
98 <button data-montage-id="btn_swap" class="cp_swap">Swap Colors</button> 98 <button data-montage-id="btn_swap" class="cp_swap">Swap Colors</button>
99 </div> 99 </div>
100 <div class="cp_labels"> 100 <div class="cp_labels">
101 <div data-montage-id="label1" class="sh_label1">R</div> 101 <div data-montage-id="label1" class="sh_label1">R</div>
102 <div data-montage-id="label2" class="sh_label2">G</div> 102 <div data-montage-id="label2" class="sh_label2">G</div>
103 <div data-montage-id="label3" class="sh_label3">B</div> 103 <div data-montage-id="label3" class="sh_label3">B</div>
104 <div data-montage-id="label4" class="sh_label4">A</div> 104 <div data-montage-id="label4" class="sh_label4">A</div>
105 </div> 105 </div>
106 <div class="cp_sliders"> 106 <div class="cp_sliders">
107 <div data-montage-id="slider1" class="cp_slider1"></div> 107 <div data-montage-id="slider1" class="cp_slider1"></div>
108 <div data-montage-id="slider2" class="cp_slider2"></div> 108 <div data-montage-id="slider2" class="cp_slider2"></div>
109 <div data-montage-id="slider3" class="cp_slider3"></div> 109 <div data-montage-id="slider3" class="cp_slider3"></div>
110 <div data-montage-id="slider4" class="cp_slider4"></div> 110 <div data-montage-id="slider4" class="cp_slider4"></div>
111 </div> 111 </div>
112 <div class="cp_hottext"> 112 <div class="cp_hottext">
113 <input data-montage-id="hottext1" class="cp_hottext1"/> 113 <input data-montage-id="hottext1" class="cp_hottext1"/>
114 <input data-montage-id="hottext2" class="cp_hottext2"/> 114 <input data-montage-id="hottext2" class="cp_hottext2"/>
115 <input data-montage-id="hottext3" class="cp_hottext3"/> 115 <input data-montage-id="hottext3" class="cp_hottext3"/>
116 <input data-montage-id="hottext4" class="cp_hottext4"/> 116 <input data-montage-id="hottext4" class="cp_hottext4"/>
117 </div> 117 </div>
118 <div class="cp_hex">#<input data-montage-id="hextext" class="cp_hottext5" maxlength="6" /></div> 118 <div class="cp_hex">#<input data-montage-id="hextext" class="cp_hottext5" maxlength="6" /></div>
119 <div class="cp_spectrum" data-montage-id="spectrum"></div> 119 <div class="cp_spectrum" data-montage-id="spectrum"></div>
120 </div> 120 </div>
121 121
122 </body> 122 </body>
123 123
124</html> 124</html>
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index 0223b9d8..b7fbb859 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -30,12 +30,12 @@ POSSIBILITY OF SUCH DAMAGE.
30 30
31//////////////////////////////////////////////////////////////////////// 31////////////////////////////////////////////////////////////////////////
32// 32//
33var Montage = require("montage/core/core").Montage, 33var Montage = require("montage/core/core").Montage,
34 Component = require("montage/ui/component").Component, 34 Component = require("montage/ui/component").Component,
35 Popup = require("js/components/popup.reel").Popup, 35 Popup = require("js/components/popup.reel").Popup,
36 Slider = require("js/components/slider.reel").Slider, 36 Slider = require("js/components/slider.reel").Slider,
37 HotText = require("js/components/hottext.reel").HotText, 37 HotText = require("js/components/hottext.reel").HotText,
38 ColorBar = require("js/components/colorbar.reel").ColorBar; 38 ColorBar = require("js/components/colorbar.reel").ColorBar;
39//////////////////////////////////////////////////////////////////////// 39////////////////////////////////////////////////////////////////////////
40//Exporting as ColorPanelBase 40//Exporting as ColorPanelBase
41exports.ColorPanelBase = Montage.create(Component, { 41exports.ColorPanelBase = Montage.create(Component, {
@@ -47,7 +47,7 @@ exports.ColorPanelBase = Montage.create(Component, {
47 //////////////////////////////////////////////////////////////////// 47 ////////////////////////////////////////////////////////////////////
48 //Storing ColorPanel sliders mode 48 //Storing ColorPanel sliders mode
49 _panelMode: { 49 _panelMode: {
50 value: 'rgb' 50 value: 'rgb'
51 }, 51 },
52 //////////////////////////////////////////////////////////////////// 52 ////////////////////////////////////////////////////////////////////
53 //Storing ColorPanel sliders mode 53 //Storing ColorPanel sliders mode
@@ -505,11 +505,11 @@ exports.ColorPanelBase = Montage.create(Component, {
505 if (c && c.css) { 505 if (c && c.css) {
506 this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); 506 this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
507 if (m === 'gradient') { 507 if (m === 'gradient') {
508 this.style.backgroundImage = c.css; 508 this.style.backgroundImage = c.css;
509 this.style.backgroundColor = 'transparent'; 509 this.style.backgroundColor = 'transparent';
510 } else { 510 } else {
511 this.style.backgroundColor = c.css; 511 this.style.backgroundColor = c.css;
512 this.style.backgroundImage = 'none'; 512 this.style.backgroundImage = 'none';
513 } 513 }
514 } else { 514 } else {
515 this.drawNoColor(this, this.cvs); 515 this.drawNoColor(this, this.cvs);
@@ -559,7 +559,7 @@ exports.ColorPanelBase = Montage.create(Component, {
559 this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); 559 this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]);
560 } 560 }
561 break; 561 break;
562 //////////////////////////////////////////////////////// 562 ////////////////////////////////////////////////////////
563 case 'fillicon': 563 case 'fillicon':
564 button.innerHTML = ''; 564 button.innerHTML = '';
565 this._buttons.fill.push(button); 565 this._buttons.fill.push(button);
@@ -572,7 +572,7 @@ exports.ColorPanelBase = Montage.create(Component, {
572 button.className = button.className + ' selected'; 572 button.className = button.className + ' selected';
573 } 573 }
574 break; 574 break;
575 //////////////////////////////////////////////////////// 575 ////////////////////////////////////////////////////////
576 case 'stroke': 576 case 'stroke':
577 this._buttons.stroke.push(button); 577 this._buttons.stroke.push(button);
578 button.style.cursor = 'pointer'; 578 button.style.cursor = 'pointer';