From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- .../color/colorpanelbase.reel/colorpanelbase.html | 112 +++---- .../color/colorpanelbase.reel/colorpanelbase.js | 78 ++--- .../colorpanelbase.reel/css/colorpanelbase.scss | 338 ++++++++++----------- 3 files changed, 264 insertions(+), 264 deletions(-) (limited to 'js/panels/color/colorpanelbase.reel') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html index 5918a3ae..762602e5 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -29,12 +29,12 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - - - - - - - - - - + } + + + -
-
- - -
-
- -
- -
-
-
-
- -
- -
-
- - - -
-
-
R
-
G
-
B
-
A
-
-
-
-
-
-
-
-
- - - - -
-
#
-
-
+ - +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + + +
+
+
R
+
G
+
B
+
A
+
+
+
+
+
+
+
+
+ + + + +
+
#
+
+
+ + diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 0223b9d8..a3525d0f 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. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - Popup = require("js/components/popup.reel").Popup, - Slider = require("js/components/slider.reel").Slider, - HotText = require("js/components/hottext.reel").HotText, - ColorBar = require("js/components/colorbar.reel").ColorBar; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Popup = require("js/components/popup.reel").Popup, + Slider = require("js/components/slider.reel").Slider, + HotText = require("js/components/hottext.reel").HotText, + ColorBar = require("js/components/colorbar.reel").ColorBar; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPanelBase exports.ColorPanelBase = Montage.create(Component, { @@ -47,7 +47,7 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode _panelMode: { - value: 'rgb' + value: 'rgb' }, //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode @@ -505,11 +505,11 @@ exports.ColorPanelBase = Montage.create(Component, { if (c && c.css) { this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); if (m === 'gradient') { - this.style.backgroundImage = c.css; - this.style.backgroundColor = 'transparent'; + this.style.backgroundImage = c.css; + this.style.backgroundColor = 'transparent'; } else { - this.style.backgroundColor = c.css; - this.style.backgroundImage = 'none'; + this.style.backgroundColor = c.css; + this.style.backgroundImage = 'none'; } } else { this.drawNoColor(this, this.cvs); @@ -839,7 +839,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // var stroke = this.colorManager.colorHistory.fill[this.colorManager.colorHistory.fill.length - 1], - fill = this.colorManager.colorHistory.stroke[this.colorManager.colorHistory.stroke.length - 1]; + fill = this.colorManager.colorHistory.stroke[this.colorManager.colorHistory.stroke.length - 1]; stroke.c.wasSetByCode = fill.c.wasSetByCode = false; stroke.c.type = fill.c.type = 'change'; //////////////////////////////////////////////////////////// @@ -924,18 +924,18 @@ exports.ColorPanelBase = Montage.create(Component, { var mode, max1, max2, max3, color, fColor, sColor; if (this.panelMode === 'hsl') { mode = 'hsl', - max1 = 360, - max2 = 100, - max3 = 100, - fColor = { h: 0, s: 0, l: 100 }, - sColor = { h: 0, s: 0, l: 0 }; + max1 = 360, + max2 = 100, + max3 = 100, + fColor = { h: 0, s: 0, l: 100 }, + sColor = { h: 0, s: 0, l: 0 }; } else { mode = 'rgb', - max1 = 255, - max2 = 255, - max3 = 255, - sColor = { r: 0, g: 0, b: 0 }, - fColor = { r: 255, g: 255, b: 255 }; + max1 = 255, + max2 = 255, + max3 = 255, + sColor = { r: 0, g: 0, b: 0 }, + fColor = { r: 255, g: 255, b: 255 }; } // sColor.wasSetByCode = false; @@ -1009,19 +1009,19 @@ exports.ColorPanelBase = Montage.create(Component, { var update, type; // if (!e._event.wasSetByCode) { - // - if (!e.target.cInputType) { - type = 'hottext'; + // + if (!e.target.cInputType) { + type = 'hottext'; } else { - type = 'slider' - } - // + type = 'slider' + } + // if (e.target.changesColor) { // if (this.panelMode === 'rgb') { // if (this.colorManager.rgb && Math.round(this._combo[0][type].value) === this.colorManager.rgb.r && Math.round(this._combo[1][type].value) === this.colorManager.rgb.g && Math.round(this._combo[2][type].value) === this.colorManager.rgb.b) { - return; + return; } // update = { r: Math.round(this._combo[0][type].value), g: Math.round(this._combo[1][type].value), b: Math.round(this._combo[2][type].value) }; @@ -1032,7 +1032,7 @@ exports.ColorPanelBase = Montage.create(Component, { } else if (this.panelMode === 'hsl') { // if (this.colorManager.hsl && Math.round(this._combo[0][type].value) === this.colorManager.hsl.h && Math.round(this._combo[1][type].value) === this.colorManager.hsl.s && Math.round(this._combo[2][type].value) === this.colorManager.hsl.l) { - return; + return; } // update = { h: Math.round(this._combo[0][type].value), s: Math.round(this._combo[1][type].value), l: Math.round(this._combo[2][type].value) }; @@ -1042,9 +1042,9 @@ exports.ColorPanelBase = Montage.create(Component, { this.colorManager.hsl = update; } } else { - // - update = { value: this._combo[3][type].value/100, wasSetByCode: false, type: 'change' }; - // + // + update = { value: this._combo[3][type].value/100, wasSetByCode: false, type: 'change' }; + // this.colorManager.alpha = update; } } @@ -1432,10 +1432,10 @@ exports.ColorPanelBase = Montage.create(Component, { // selectInputType: { value: function (type) { - if (this.colorManager.input === 'chip') { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - return; - } + if (this.colorManager.input === 'chip') { + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + return; + } //Checking for the type to be formatted as expected, otherwise we unselected all buttons try { type._event.srcElement.inputType; @@ -1479,7 +1479,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX) + 'px', (type._event.target.clientHeight / 2 + type._event.clientY - type._event.offsetY) + 'px', 'right', 'top'); //} else { // - // this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top'); + // this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top'); //} } } @@ -1580,7 +1580,7 @@ exports.ColorPanelBase = Montage.create(Component, { ctx.lineTo(2, 1); ctx.stroke(); } else { - //Adding class to buttons with no canvas + //Adding class to buttons with no canvas selected[i].className = selected[i].className + ' selected'; } } diff --git a/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss index 79461048..9317b592 100755 --- a/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss +++ b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss @@ -37,327 +37,327 @@ $sprite_stdbtn_spacing: 4; @mixin sprite_background ($x, $y) { - background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important; - background-position: $x*-1px $y*-1px !important; - border: none !important; - display: block; + background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important; + background-position: $x*-1px $y*-1px !important; + border: none !important; + display: block; } .cp_expanded { - font-size: 12px; - text-shadow: 1px 1px 1px #000; - color: #FFF; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + color: #FFF; } .cp_expanded a:hover { - color: #CCC; + color: #CCC; } .cp_expanded hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); - border: none; - height: 2px; - margin: 4px 0px 4px 0px; + float: left; + clear: both; + width: 100%; + display: block; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); + border: none; + height: 2px; + margin: 4px 0px 4px 0px; } .cp_history { - float: left; - margin: 4px 0px 0px 4px; - background: url(../../../../../images/colorpanel/transparent.png) repeat; + float: left; + margin: 4px 0px 0px 4px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; } .cp_history button { - - width: 22px; - height: 22px; - overflow: hidden; - text-indent: -9999px; - background: #333; - float: left; - border: solid 1px #000; - cursor: pointer; - margin: 0px -1px 0px 0px; - padding: 0px 0px 0px 0px; + + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + background: #333; + float: left; + border: solid 1px #000; + cursor: pointer; + margin: 0px -1px 0px 0px; + padding: 0px 0px 0px 0px; } .cp_expanded .cp_inputs { - float: left; - margin: 0px 4px 0px 4px; + float: left; + margin: 0px 4px 0px 4px; } .cp_expanded .cp_input_button { - background: url(../../../../../images/colorpanel/transparent.png) repeat; - float: left; - clear: left; - margin: 0px 0px 6px 0px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; + float: left; + clear: left; + margin: 0px 0px 6px 0px; } .cp_expanded .cp_inputs button, .cpe_fill, .cpe_stroke, .cpe_fill_icon, .cpe_stroke_icon { - - width: 22px; - height: 22px; - overflow: hidden; - text-indent: -9999px; - padding: 0px 0px 0px 0px; - display: block; - float: left; - cursor: pointer; + + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + padding: 0px 0px 0px 0px; + display: block; + float: left; + cursor: pointer; } .cpe_fill, .cpe_stroke { - clear: left; - background-color: #333; - border: solid 1px #000; + clear: left; + background-color: #333; + border: solid 1px #000; } .cpe_fill_icon, .cpe_fill_icon -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0); } .cpe_fill_icon:hover, .cpe_fill_icon.selected, .cpe_fill_icon:hover, .cpe_fill_icon.selected -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0); } .cpe_stroke_icon, .cpe_stroke_icon -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); } .cpe_stroke_icon:hover, .cpe_stroke_icon.selected, .cpe_stroke_icon:hover, .cpe_stroke_icon.selected -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); } .cp_modes { - float: right; - margin: 4px 6px 0px 0px; - min-width: 73px; + float: right; + margin: 4px 6px 0px 0px; + min-width: 73px; } .cp_modes button { - font-size: 14px; - line-height: 22px; - vertical-align: middle; - float: left; - background: none; - border: none; - margin: 0px; - padding: 0px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; + font-size: 14px; + line-height: 22px; + vertical-align: middle; + float: left; + background: none; + border: none; + margin: 0px; + padding: 0px; + color: #FFF; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; } .cp_modes button:hover { - cursor: pointer; - color: #CCC; + cursor: pointer; + color: #CCC; } .cp_rgb_mode, .cp_hsl_mode { - color: #888 !important; + color: #888 !important; } .cp_rgb_mode:hover/* , .cp_hsl_mode:hover */ { - color: #CCC !important; + color: #CCC !important; } .cp_rgb_mode.selected/* , .cp_hsl_mode.selected */ { - color: #FFF !important; + color: #FFF !important; } .cp_modes hr { - display: block; - float: left; - width: 2px; - height: 14px; - border: none; - clear: none; - background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); - margin: 4px 8px 0px 9px + display: block; + float: left; + width: 2px; + height: 14px; + border: none; + clear: none; + background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); + margin: 4px 8px 0px 9px } .cp_options { - float: left; - margin: 56px 0px 0px -48px; - + float: left; + margin: 56px 0px 0px -48px; + } .cp_options button { - width: 14px; - height: 15px; - overflow: hidden; - text-indent: -9999px; - float: left; - cursor: pointer; - margin: 0px 2px 0px 0px; - border: none; - opacity: .7; + width: 14px; + height: 15px; + overflow: hidden; + text-indent: -9999px; + float: left; + cursor: pointer; + margin: 0px 2px 0px 0px; + border: none; + opacity: .7; } .cp_options button:hover { - background-position: 0px 1px; - opacity: 1; + background-position: 0px 1px; + opacity: 1; } .cp_reset { - background: url(../img/icon_default.png) transparent no-repeat 0px 0px; + background: url(../img/icon_default.png) transparent no-repeat 0px 0px; } .cp_nocolor { - background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px; + background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px; } .cp_swap { - background: url(../img/icon_swap.png) transparent no-repeat 0px 0px; + background: url(../img/icon_swap.png) transparent no-repeat 0px 0px; } .cp_sliders { - float: left; - width: 127px; - margin: 0px 0px 0px 0px; + float: left; + width: 127px; + margin: 0px 0px 0px 0px; } .cp_labels { - float: left; - margin: 0px 8px 2px 5px; - font-family: 'Droid Sans', sans-serif; - font-size: 12px; + float: left; + margin: 0px 8px 2px 5px; + font-family: 'Droid Sans', sans-serif; + font-size: 12px; } .cp_labels div { - float: left; - clear: left; - width: 12px; - margin: 0px 0px 3px 0px; + float: left; + clear: left; + width: 12px; + margin: 0px 0px 3px 0px; } .cp_hottext { - float: left; - width: 24px; - margin: 0px -8px 0px 10px; + float: left; + width: 24px; + margin: 0px -8px 0px 10px; } .cp_hex { - float: left; - clear: both; - margin: 6px 0px 0px 58px; + float: left; + clear: both; + margin: 6px 0px 0px 58px; } .cp_hex input { - width: 127px; - background: #555; - border: 1px solid #333; - color: #FFF; - padding: 1px 0px 1px 0px; - margin: 0px 0px 0px 10px; - text-transform: uppercase; - text-decoration: none !important; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; + width: 127px; + background: #555; + border: 1px solid #333; + color: #FFF; + padding: 1px 0px 1px 0px; + margin: 0px 0px 0px 10px; + text-transform: uppercase; + text-decoration: none !important; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + letter-spacing: 1px; } .cp_hex input:focus { - outline: none; - padding: 2px 0px 2px 0px; - margin: -1px 0px -1px 11px; - background: #FFF; - color: #000; - text-shadow: none; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; + outline: none; + padding: 2px 0px 2px 0px; + margin: -1px 0px -1px 11px; + background: #FFF; + color: #000; + text-shadow: none; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + letter-spacing: 1px; } .cp_spectrum { - float: left; - width: 234px; - background: #333; - height: 20px; - clear: both; - margin: 12px 4px 0px 4px; - border: solid 1px #000; + float: left; + width: 234px; + background: #333; + height: 20px; + clear: both; + margin: 12px 4px 0px 4px; + border: solid 1px #000; } .cp_slider1, .cp_slider2, .cp_slider3, .cp_slider4 { - width: 127px; + width: 127px; height: 12px; - float: left; - clear: none; - margin: 0px 0px 5px 0px; + float: left; + clear: none; + margin: 0px 0px 5px 0px; } .cp_hottext input.hottext { - background: none; - float: right; - margin: -1px 0px 4px 0px; - padding: 0px; - width: 23px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - text-align: center; + background: none; + float: right; + margin: -1px 0px 4px 0px; + padding: 0px; + width: 23px; + color: #FFF; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + text-align: center; } .cp_hottext input.hottextInput { - background: #FFF; - color: #000; - text-shadow: none; - border: 1px solid #333; - margin: -1px -2px 1px 1px; - padding: 1px; - text-decoration: none; - outline: none; + background: #FFF; + color: #000; + text-shadow: none; + border: 1px solid #333; + margin: -1px -2px 1px 1px; + padding: 1px; + text-decoration: none; + outline: none; } .cp_sliders .slider-track { - background: none; + background: none; } .cp_sliders .knob { - background: url(../img/knob.png) no-repeat transparent center center; + background: url(../img/knob.png) no-repeat transparent center center; } -- cgit v1.2.3