From e065244ac75d1d0f25fd5c75cb58e714a13fe16b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 14 Mar 2012 08:59:17 -0700 Subject: Squashed commit of the following: merge master into timeline Signed-off-by: Jonathan Duran --- js/panels/color/colorbutton-manager.js | 44 + .../color/colorchippopup.reel/colorchippopup.html | 63 + .../color/colorchippopup.reel/colorchippopup.js | 590 +++++++ js/panels/color/colorchippopup.reel/config.rb | 9 + .../colorchippopup.reel/css/colorchippopup.css | 239 +++ .../colorchippopup.reel/css/colorchippopup.scss | 240 +++ .../color/colorchippopup.reel/img/icon_bitmap.png | Bin 0 -> 3072 bytes .../colorchippopup.reel/img/icon_colorwheel.png | Bin 0 -> 3420 bytes .../colorchippopup.reel/img/icon_gradient.png | Bin 0 -> 2815 bytes .../color/colorchippopup.reel/img/icon_nofill.png | Bin 0 -> 2951 bytes js/panels/color/colorchippopup.reel/img/knob.png | Bin 0 -> 1036 bytes js/panels/color/colorpanel.js | 53 + .../color/colorpanelbase.reel/colorpanelbase.html | 76 + .../color/colorpanelbase.reel/colorpanelbase.js | 1654 ++++++++++++++++++++ js/panels/color/colorpanelbase.reel/config.rb | 9 + .../colorpanelbase.reel/css/colorpanelbase.css | 332 ++++ .../colorpanelbase.reel/css/colorpanelbase.scss | 339 ++++ .../color/colorpanelbase.reel/img/icon_default.png | Bin 0 -> 3011 bytes .../color/colorpanelbase.reel/img/icon_nocolor.png | Bin 0 -> 3036 bytes .../color/colorpanelbase.reel/img/icon_swap.png | Bin 0 -> 2961 bytes js/panels/color/colorpanelbase.reel/img/knob.png | Bin 0 -> 1036 bytes .../colorpanelpopup.reel/colorpanelpopup.html | 68 + .../color/colorpanelpopup.reel/colorpanelpopup.js | 466 ++++++ js/panels/color/colorpanelpopup.reel/config.rb | 9 + .../colorpanelpopup.reel/css/colorpanelpopup.css | 239 +++ .../colorpanelpopup.reel/css/colorpanelpopup.scss | 240 +++ .../color/colorpanelpopup.reel/img/icon_bitmap.png | Bin 0 -> 3072 bytes .../colorpanelpopup.reel/img/icon_colorwheel.png | Bin 0 -> 3420 bytes .../colorpanelpopup.reel/img/icon_gradient.png | Bin 0 -> 2815 bytes .../color/colorpanelpopup.reel/img/icon_nofill.png | Bin 0 -> 2951 bytes js/panels/color/colorpanelpopup.reel/img/knob.png | Bin 0 -> 1036 bytes js/panels/color/colorpopup-manager.js | 529 +++++++ .../color/colortoolbar.reel/colortoolbar.html | 54 + js/panels/color/colortoolbar.reel/colortoolbar.js | 138 ++ js/panels/color/colortoolbar.reel/config.rb | 9 + .../color/colortoolbar.reel/css/colortoolbar.css | 45 + .../color/colortoolbar.reel/css/colortoolbar.scss | 52 + 37 files changed, 5497 insertions(+) create mode 100755 js/panels/color/colorbutton-manager.js create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.html create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.js create mode 100755 js/panels/color/colorchippopup.reel/config.rb create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.css create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.scss create mode 100755 js/panels/color/colorchippopup.reel/img/icon_bitmap.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_colorwheel.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_gradient.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_nofill.png create mode 100755 js/panels/color/colorchippopup.reel/img/knob.png create mode 100755 js/panels/color/colorpanel.js create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.html create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.js create mode 100755 js/panels/color/colorpanelbase.reel/config.rb create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.css create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_default.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_nocolor.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_swap.png create mode 100755 js/panels/color/colorpanelbase.reel/img/knob.png create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.html create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.js create mode 100755 js/panels/color/colorpanelpopup.reel/config.rb create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_bitmap.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_colorwheel.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_gradient.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_nofill.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/knob.png create mode 100755 js/panels/color/colorpopup-manager.js create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.html create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.js create mode 100755 js/panels/color/colortoolbar.reel/config.rb create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.css create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.scss (limited to 'js/panels/color') diff --git a/js/panels/color/colorbutton-manager.js b/js/panels/color/colorbutton-manager.js new file mode 100755 index 00000000..a189d040 --- /dev/null +++ b/js/panels/color/colorbutton-manager.js @@ -0,0 +1,44 @@ +/* +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; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPopupManager +exports.ColorButtonManager = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: false + }, + //////////////////////////////////////////////////////////////////// + //Storing color manager + _colorManager: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + colorManager: { + enumerable: true, + get: function() { + return this._colorManager; + }, + set: function(value) { + this._colorManager = value; + } + }, + //////////////////////////////////////////////////////////////////// + // + _buttons: { + enumerable: false, + value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); \ No newline at end of file diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.html b/js/panels/color/colorchippopup.reel/colorchippopup.html new file mode 100755 index 00000000..1ae40cc1 --- /dev/null +++ b/js/panels/color/colorchippopup.reel/colorchippopup.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + +
+
+ +
#
+ + + + + + + +
+ +
+
+
+
+
+
+ +
+
Alpha
+
+ +
%
+
+ +
+ + + + \ No newline at end of file diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js new file mode 100755 index 00000000..05bcb447 --- /dev/null +++ b/js/panels/color/colorchippopup.reel/colorchippopup.js @@ -0,0 +1,590 @@ +/* +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, + Slider = require("js/components/slider.reel").Slider, + Button = require("js/components/button.reel").Button, + HotText = require("js/components/hottext.reel").HotText, + ColorWheel = require("js/components/colorwheel.reel").ColorWheel, + GradientPicker = require("js/components/gradientpicker.reel").GradientPicker; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanelPopup +exports.ColorChipPopup = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + //Storing color manager + _colorManager: { + enumerable: false, + value: false + }, + //////////////////////////////////////////////////////////////////// + //Color manager + colorManager: { + enumerable: true, + get: function() { + return this._colorManager; + }, + set: function(value) { + if (value !== this._colorManager) { + this._colorManager = value; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + setNoColor: { + enumerable: true, + value: function (e) { + this.colorManager.applyNoColor(); + } + }, + //////////////////////////////////////////////////////////////////// + // + _colorChipWheel: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + popupContainers: { + enumerable: true, + value: {wheel: null, palette: null, gradient: null, image: null} + }, + //////////////////////////////////////////////////////////////////// + // + popupModes: { + enumerable: true, + value: {wheel: true, palette: true, gradient: true, image: true, nocolor: true} + }, + //////////////////////////////////////////////////////////////////// + // + hexInput: { + enumerable: true, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function () { + //Storing containers for reference + this.popupContainers.wheel = document.getElementById('cc_pu_wheel_container'); + this.popupContainers.palette = document.getElementById("cc_pu_palette_container"); + this.popupContainers.gradient = document.getElementById("cc_pu_gradient_container"); + this.popupContainers.image = document.getElementById("cc_pu_image_container"); + this.popupContainers.alpha = document.getElementById("cc_pu_alpha"); + // + + this.colorManager.addEventListener('change', function (e) { + // + }.bind(this)); + } + }, + //////////////////////////////////////////////////////////////////// + // + willDraw: { + enumerable: false, + value: function() { + // + this.element.style.opacity = 0; + // + this.combo = {}; + this.combo.slider = Slider.create(); + this.combo.hottext = HotText.create(); + this.combo.slider.element = document.getElementById('cc_pu_a_slider'); + this.combo.hottext.element = document.getElementById('cc_pu_a_hottext'); + // + this.cc_hexinput = HotText.create(); + this.cc_hexinput.element = document.getElementById('cc_pu_hottext_hex'); + this.cc_hexinput.labelFunction = this._hexLabel.bind(this); + this.cc_hexinput.inputFunction = this._hexInput.bind(this); + // + if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.a) { + this.combo.slider.value = Math.round(this.application.ninja.colorController.colorView.currentChip.colorValue.a*100); + } else { + this.combo.slider.value = 100; + } + this.application.ninja.colorController.colorModel._alpha = {value: this.combo.slider.value/100, wasSetByCode: true, type: 'change'}; + // + Object.defineBinding(this.combo.hottext, "value", { + boundObject: this.combo.slider, + boundObjectPropertyPath: "value", + oneway: false, + boundValueMutator: function(value) { + return Math.round(value); + } + }); + // + this.combo.slider.maxValue = this.combo.hottext.maxValue = 100; + this.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); + // + this.combo.slider.addEventListener('change', this.alphaChange.bind(this)); + this.combo.hottext.addEventListener('change', this.alphaChange.bind(this)); + // + this._colorChipWheel = ColorWheel.create(); + this._colorChipWheel.element = this.popupContainers.wheel; + this._colorChipWheel.element.style.display = 'block'; + this._colorChipWheel.rimWidth = 14; + this._colorChipWheel.strokeWidth = 2; + // + this._colorChipWheel.addEventListener('firstDraw', this, false); + this._colorChipWheel.addEventListener('change', this, false); + this._colorChipWheel.addEventListener('changing', this, false); + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + enumerable: false, + value: function() { + // + this.drawPalette(this.defaultPalette); + // + //this.cc_hexinput = this.application.ninja.colorController.colorView.addButton('hexinput', document.getElementById('cc_pu_hottext_hex')); + // + this.combo.slider.needsDraw = true; + this.combo.hottext.needsDraw = true; + this.cc_hexinput.needsDraw = true; + // + var ncButton = document.getElementById('cc_pu_nocolor'), + plButton = document.getElementById('cc_pu_palettes'), + wlButton = document.getElementById('cc_pu_wheel'), + gdButton = document.getElementById('cc_pu_gradients'), + imButton = document.getElementById('cc_pu_images'); + // + if (this.popupModes.nocolor) { + ncButton.addEventListener('click', function () { + this.setNoColor(); + }.bind(this)); + } else { + ncButton.style.display = 'none'; + } + // + if (this.popupModes.palette) { + plButton.addEventListener('click', function () { + this.popupSwitchInputTo(this.popupContainers.palette); + }.bind(this)); + } else { + plButton.style.display = 'none'; + } + // + if (this.popupModes.wheel) { + wlButton.addEventListener('click', function () { + this.popupSwitchInputTo(this.popupContainers.wheel); + }.bind(this)); + } else { + wlButton.style.display = 'none'; + } + // + if (this.popupModes.gradient) { + gdButton.addEventListener('click', function () { + this.popupSwitchInputTo(this.popupContainers.gradient); + }.bind(this)); + } else { + gdButton.style.display = 'none'; + } + // + if (this.popupModes.image) { + imButton.style.opacity = .2;//TODO: Remove, visual feedback for disable button + imButton.addEventListener('click', function () { + //this.popupSwitchInputTo(this.popupContainers.image); + }.bind(this)); + } else { + imButton.style.display = 'none'; + } + // + this.element.style.opacity = 1; + // + this._colorChipWheel.needsDraw = true; + } + }, + //////////////////////////////////////////////////////////////////// + // + didDraw: { + enumerable: false, + value: function() { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + popupSwitchInputTo: { + enumerable: true, + value: function (tab) { + // + if (tab !== this.popupContainers.palette) { + this.popupContainers.palette.style.display = 'none'; + } else { + this.popupContainers.palette.style.display = 'block'; + this.popupContainers.alpha.style.display = 'block'; + // + this.application.ninja.colorController.popupTab = 'palette'; + } + // + if (tab !== this.popupContainers.wheel && this._colorChipWheel.element) { + this._colorChipWheel.element.style.display = 'none'; + } else if (this._colorChipWheel.element && this._colorChipWheel.element.style.display !== 'block'){ + this._colorChipWheel.element.style.display = 'block'; + this.popupContainers.alpha.style.display = 'block'; + // + this.application.ninja.colorController.popupTab = 'wheel'; + } + // + if (tab !== this.popupContainers.image) { + this.popupContainers.image.style.display = 'none'; + } else { + this.popupContainers.image.style.display = 'block'; + this.popupContainers.alpha.style.display = 'block'; + // + this.application.ninja.colorController.popupTab = 'image'; + } + // + if (tab !== this.popupContainers.gradient) { + this.popupContainers.gradient.style.display = 'none'; + } else { + this.popupContainers.gradient.style.display = 'block'; + //TODO: Add fixed size to avoid jump + //this.popupContainers.alpha.style.display = 'none'; + // + this.application.ninja.colorController.popupTab = 'gradient'; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + drawPalette: { + enumerable: true, + value: function (c) { + var i, button; + // + this.popupContainers.palette.style.display = 'block'; + // + for (i in c) { + button = document.createElement('button'); + button.style.background = c[i].css; + button.title = c[i].css.toUpperCase(); + button.colorMode = c[i].mode; + button.colorValue = c[i].value; + this.popupContainers.palette.appendChild(button); + button.addEventListener('click', function (b) { + var rgb, color, hex; + // + if (b._event.srcElement.colorMode !== 'hex') { + //TODO: Add logic to update hex input field for non-hex values + color = b._event.srcElement.colorValue; + color.wasSetByCode = false; + color.type = 'change'; + this.colorManager[b._event.srcElement.colorMode] = color; + } else { + if (this.colorManager.mode === 'hsl') { + rgb = this.colorManager.hexToRgb(b._event.srcElement.colorValue); + if (rgb) { + color = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b); + color.wasSetByCode = false; + color.type = 'change'; + // + hex = b._event.srcElement.colorValue; + if (this.popupModes.wheel) { + this._colorChipWheel.value = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } else { + this.colorManager.hsl = color; + } + } else { + this.setNoColor(); + hex = '------'; + } + } else { + color = this.colorManager.hexToRgb(b._event.srcElement.colorValue); + if (color) { + color.wasSetByCode = false; + color.type = 'change'; + // + hex = b._event.srcElement.colorValue; + if (this.popupModes.wheel) { + this._colorChipWheel.value = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } else { + this.colorManager.rgb = color; + } + } else { + this.setNoColor(); + hex = '------'; + } + } + } + if (hex) { + this._hexString = hex; + this.updateHex(); + } + }.bind(this)); + } + this.popupContainers.palette.style.display = 'none'; + } + }, + //////////////////////////////////////////////////////////////////// + // + _hexLabel: { + enumerable: false, + value: function (v) { + return this._hexString; + } + }, + //////////////////////////////////////////////////////////////////// + // + _hexString: { + enumerable: false, + value: '000000' + }, + //////////////////////////////////////////////////////////////////// + // + updateHex: { + value: function (e) { + // + this.cc_hexinput._valueSyncedWithInputField = false; + this.cc_hexinput.needsDraw = true; + } + }, + //////////////////////////////////////////////////////////////////// + // + _hexInput: { + enumerable: false, + value: function (color) { + //If invalid input, no color will be applied + var update, rgb, hex; + //Allowing multiple hex mode inputs (3 and 6 characters) + switch (color.length) { + case 3: + color = color[0]+color[0]+color[1]+color[1]+color[2]+color[2]; + break; + case 6: + //Nothing + break; + default: + //this._colorManager.applyNoColor(); + return; + break; + } + //Checking for panel mode and converting the color to the panel mode + if (this.colorManager.mode === 'hsl') { + rgb = this.colorManager.hexToRgb(color); + if (rgb) { + update = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b); + update.wasSetByCode = false; + update.type = 'change'; + // + hex = color; + // + if (this.popupModes.wheel) { + this._colorChipWheel.value = this.colorManager.rgbToHsv(update.r, update.g, update.b); + } else { + this.colorManager.hsl = update; + } + } else { + //this.colorManager.applyNoColor(); + hex = '------'; + } + } else { + update = this.colorManager.hexToRgb(color); + if (update) { + update.wasSetByCode = false; + update.type = 'change'; + // + hex = color; + // + if (this.popupModes.wheel) { + this._colorChipWheel.value = this.colorManager.rgbToHsv(update.r, update.g, update.b); + } else { + this.colorManager.rgb = update; + } + } else { + //this.colorManager.applyNoColor(); + hex = '------'; + } + } + // + if (hex) { + this._hexString = hex; + this.updateHex(); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + defaultPalette: { + enumerable: true, + value: [{mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '003300', css: '#003300'}, {mode: 'hex', value: '006600', css: '#006600'}, {mode: 'hex', value: '009900', css: '#009900'}, {mode: 'hex', value: '00cc00', css: '#00cc00'}, {mode: 'hex', value: '00ff00', css: '#00ff00'}, {mode: 'hex', value: '330000', css: '#330000'}, {mode: 'hex', value: '333300', css: '#333300'}, {mode: 'hex', value: '336600', css: '#336600'}, {mode: 'hex', value: '339900', css: '#339900'}, {mode: 'hex', value: '33cc00', css: '#33cc00'}, {mode: 'hex', value: '33ff00', css: '#33ff00'}, {mode: 'hex', value: '660000', css: '#660000'}, {mode: 'hex', value: '663300', css: '#663300'}, {mode: 'hex', value: '666600', css: '#666600'}, {mode: 'hex', value: '669900', css: '#669900'}, {mode: 'hex', value: '66cc00', css: '#66cc00'}, {mode: 'hex', value: '66ff00', css: '#66ff00'}, + {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000033', css: '#000033'}, {mode: 'hex', value: '003333', css: '#003333'}, {mode: 'hex', value: '006633', css: '#006633'}, {mode: 'hex', value: '009933', css: '#009933'}, {mode: 'hex', value: '00cc33', css: '#00cc33'}, {mode: 'hex', value: '00ff33', css: '#00ff33'}, {mode: 'hex', value: '330033', css: '#330033'}, {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '336633', css: '#336633'}, {mode: 'hex', value: '339933', css: '#339933'}, {mode: 'hex', value: '33cc33', css: '#33cc33'}, {mode: 'hex', value: '33ff33', css: '#33ff33'}, {mode: 'hex', value: '660033', css: '#660033'}, {mode: 'hex', value: '663333', css: '#663333'}, {mode: 'hex', value: '666633', css: '#666633'}, {mode: 'hex', value: '669933', css: '#669933'}, {mode: 'hex', value: '66cc33', css: '#66cc33'}, {mode: 'hex', value: '66ff33', css: '#66ff33'}, + {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000066', css: '#000066'}, {mode: 'hex', value: '003366', css: '#003366'}, {mode: 'hex', value: '006666', css: '#006666'}, {mode: 'hex', value: '009966', css: '#009966'}, {mode: 'hex', value: '00cc66', css: '#00cc66'}, {mode: 'hex', value: '00ff66', css: '#00ff66'}, {mode: 'hex', value: '330066', css: '#330066'}, {mode: 'hex', value: '333366', css: '#333366'}, {mode: 'hex', value: '336666', css: '#336666'}, {mode: 'hex', value: '339966', css: '#339966'}, {mode: 'hex', value: '33cc66', css: '#33cc66'}, {mode: 'hex', value: '33ff66', css: '#33ff66'}, {mode: 'hex', value: '660066', css: '#660066'}, {mode: 'hex', value: '663366', css: '#663366'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '669966', css: '#669966'}, {mode: 'hex', value: '66cc66', css: '#66cc66'}, {mode: 'hex', value: '66ff66', css: '#66ff66'}, + {mode: 'hex', value: '999999', css: '#999999'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000099', css: '#000099'}, {mode: 'hex', value: '003399', css: '#003399'}, {mode: 'hex', value: '006699', css: '#006699'}, {mode: 'hex', value: '009999', css: '#009999'}, {mode: 'hex', value: '00cc99', css: '#00cc99'}, {mode: 'hex', value: '00ff99', css: '#00ff99'}, {mode: 'hex', value: '330099', css: '#330099'}, {mode: 'hex', value: '333399', css: '#333399'}, {mode: 'hex', value: '336699', css: '#336699'}, {mode: 'hex', value: '339999', css: '#339999'}, {mode: 'hex', value: '33cc99', css: '#33cc99'}, {mode: 'hex', value: '33ff99', css: '#33ff99'}, {mode: 'hex', value: '660099', css: '#660099'}, {mode: 'hex', value: '663399', css: '#663399'}, {mode: 'hex', value: '666699', css: '#666699'}, {mode: 'hex', value: '669999', css: '#669999'}, {mode: 'hex', value: '66cc99', css: '#66cc99'}, {mode: 'hex', value: '66ff99', css: '#66ff99'}, + {mode: 'hex', value: 'cccccc', css: '#cccccc'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '0000cc', css: '#0000cc'}, {mode: 'hex', value: '0033cc', css: '#0033cc'}, {mode: 'hex', value: '0066cc', css: '#0066cc'}, {mode: 'hex', value: '0099cc', css: '#0099cc'}, {mode: 'hex', value: '00cccc', css: '#00cccc'}, {mode: 'hex', value: '00ffcc', css: '#00ffcc'}, {mode: 'hex', value: '3300cc', css: '#3300cc'}, {mode: 'hex', value: '3333cc', css: '#3333cc'}, {mode: 'hex', value: '3366cc', css: '#3366cc'}, {mode: 'hex', value: '3399cc', css: '#3399cc'}, {mode: 'hex', value: '33cccc', css: '#33cccc'}, {mode: 'hex', value: '33ffcc', css: '#33ffcc'}, {mode: 'hex', value: '6600cc', css: '#6600cc'}, {mode: 'hex', value: '6633cc', css: '#6633cc'}, {mode: 'hex', value: '6666cc', css: '#6666cc'}, {mode: 'hex', value: '6699cc', css: '#6699cc'}, {mode: 'hex', value: '66cccc', css: '#66cccc'}, {mode: 'hex', value: '66ffcc', css: '#66ffcc'}, + {mode: 'hex', value: 'ffffff', css: '#ffffff'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '0000ff', css: '#0000ff'}, {mode: 'hex', value: '0033ff', css: '#0033ff'}, {mode: 'hex', value: '0066ff', css: '#0066ff'}, {mode: 'hex', value: '0099ff', css: '#0099ff'}, {mode: 'hex', value: '00ccff', css: '#00ccff'}, {mode: 'hex', value: '00ffff', css: '#00ffff'}, {mode: 'hex', value: '3300ff', css: '#3300ff'}, {mode: 'hex', value: '3333ff', css: '#3333ff'}, {mode: 'hex', value: '3366ff', css: '#3366ff'}, {mode: 'hex', value: '3399ff', css: '#3399ff'}, {mode: 'hex', value: '33ccff', css: '#33ccff'}, {mode: 'hex', value: '33ffff', css: '#33ffff'}, {mode: 'hex', value: '6600ff', css: '#6600ff'}, {mode: 'hex', value: '6633ff', css: '#6633ff'}, {mode: 'hex', value: '6666ff', css: '#6666ff'}, {mode: 'hex', value: '6699ff', css: '#6699ff'}, {mode: 'hex', value: '66ccff', css: '#66ccff'}, {mode: 'hex', value: '66ffff', css: '#66ffff'}, + {mode: 'hex', value: 'ff0000', css: '#ff0000'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '990000', css: '#990000'}, {mode: 'hex', value: '993300', css: '#993300'}, {mode: 'hex', value: '996600', css: '#996600'}, {mode: 'hex', value: '999900', css: '#999900'}, {mode: 'hex', value: '99cc00', css: '#99cc00'}, {mode: 'hex', value: '99ff00', css: '#99ff00'}, {mode: 'hex', value: 'cc0000', css: '#cc0000'}, {mode: 'hex', value: 'cc3300', css: '#cc3300'}, {mode: 'hex', value: 'cc6600', css: '#cc6600'}, {mode: 'hex', value: 'cc9900', css: '#cc9900'}, {mode: 'hex', value: 'cccc00', css: '#cccc00'}, {mode: 'hex', value: 'ccff00', css: '#ccff00'}, {mode: 'hex', value: 'ff0000', css: '#ff0000'}, {mode: 'hex', value: 'ff3300', css: '#ff3300'}, {mode: 'hex', value: 'ff6600', css: '#ff6600'}, {mode: 'hex', value: 'ff9900', css: '#ff9900'}, {mode: 'hex', value: 'ffcc00', css: '#ffcc00'}, {mode: 'hex', value: 'ffff00', css: '#ffff00'}, + {mode: 'hex', value: '00ff00', css: '#00ff00'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '990033', css: '#990033'}, {mode: 'hex', value: '993333', css: '#993333'}, {mode: 'hex', value: '996633', css: '#996633'}, {mode: 'hex', value: '999933', css: '#999933'}, {mode: 'hex', value: '99cc33', css: '#99cc33'}, {mode: 'hex', value: '99ff33', css: '#99ff33'}, {mode: 'hex', value: 'cc0033', css: '#cc0033'}, {mode: 'hex', value: 'cc3333', css: '#cc3333'}, {mode: 'hex', value: 'cc6633', css: '#cc6633'}, {mode: 'hex', value: 'cc9933', css: '#cc9933'}, {mode: 'hex', value: 'cccc33', css: '#cccc33'}, {mode: 'hex', value: 'ccff33', css: '#ccff33'}, {mode: 'hex', value: 'ff0033', css: '#ff0033'}, {mode: 'hex', value: 'ff3333', css: '#ff3333'}, {mode: 'hex', value: 'ff6633', css: '#ff6633'}, {mode: 'hex', value: 'ff9933', css: '#ff9933'}, {mode: 'hex', value: 'ffcc33', css: '#ffcc33'}, {mode: 'hex', value: 'ffff33', css: '#ffff33'}, + {mode: 'hex', value: '0000ff', css: '#0000ff'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '990066', css: '#990066'}, {mode: 'hex', value: '993366', css: '#993366'}, {mode: 'hex', value: '996666', css: '#996666'}, {mode: 'hex', value: '999966', css: '#999966'}, {mode: 'hex', value: '99cc66', css: '#99cc66'}, {mode: 'hex', value: '99ff66', css: '#99ff66'}, {mode: 'hex', value: 'cc0066', css: '#cc0066'}, {mode: 'hex', value: 'cc3366', css: '#cc3366'}, {mode: 'hex', value: 'cc6666', css: '#cc6666'}, {mode: 'hex', value: 'cc9966', css: '#cc9966'}, {mode: 'hex', value: 'cccc66', css: '#cccc66'}, {mode: 'hex', value: 'ccff66', css: '#ccff66'}, {mode: 'hex', value: 'ff0066', css: '#ff0066'}, {mode: 'hex', value: 'ff3366', css: '#ff3366'}, {mode: 'hex', value: 'ff6666', css: '#ff6666'}, {mode: 'hex', value: 'ff9966', css: '#ff9966'}, {mode: 'hex', value: 'ffcc66', css: '#ffcc66'}, {mode: 'hex', value: 'ffff66', css: '#ffff66'}, + {mode: 'hex', value: 'ffff00', css: '#ffff00'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '990099', css: '#990099'}, {mode: 'hex', value: '993399', css: '#993399'}, {mode: 'hex', value: '996699', css: '#996699'}, {mode: 'hex', value: '999999', css: '#999999'}, {mode: 'hex', value: '99cc99', css: '#99cc99'}, {mode: 'hex', value: '99ff99', css: '#99ff99'}, {mode: 'hex', value: 'cc0099', css: '#cc0099'}, {mode: 'hex', value: 'cc3399', css: '#cc3399'}, {mode: 'hex', value: 'cc6699', css: '#cc6699'}, {mode: 'hex', value: 'cc9999', css: '#cc9999'}, {mode: 'hex', value: 'cccc99', css: '#cccc99'}, {mode: 'hex', value: 'ccff99', css: '#ccff99'}, {mode: 'hex', value: 'ff0099', css: '#ff0099'}, {mode: 'hex', value: 'ff3399', css: '#ff3399'}, {mode: 'hex', value: 'ff6699', css: '#ff6699'}, {mode: 'hex', value: 'ff9999', css: '#ff9999'}, {mode: 'hex', value: 'ffcc99', css: '#ffcc99'}, {mode: 'hex', value: 'ffff99', css: '#ffff99'}, + {mode: 'hex', value: '00ffff', css: '#00ffff'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '9900cc', css: '#9900cc'}, {mode: 'hex', value: '9933cc', css: '#9933cc'}, {mode: 'hex', value: '9966cc', css: '#9966cc'}, {mode: 'hex', value: '9999cc', css: '#9999cc'}, {mode: 'hex', value: '99cccc', css: '#99cccc'}, {mode: 'hex', value: '99ffcc', css: '#99ffcc'}, {mode: 'hex', value: 'cc00cc', css: '#cc00cc'}, {mode: 'hex', value: 'cc33cc', css: '#cc33cc'}, {mode: 'hex', value: 'cc66cc', css: '#cc66cc'}, {mode: 'hex', value: 'cc99cc', css: '#cc99cc'}, {mode: 'hex', value: 'cccccc', css: '#cccccc'}, {mode: 'hex', value: 'ccffcc', css: '#ccffcc'}, {mode: 'hex', value: 'ff00cc', css: '#ff00cc'}, {mode: 'hex', value: 'ff33cc', css: '#ff33cc'}, {mode: 'hex', value: 'ff66cc', css: '#ff66cc'}, {mode: 'hex', value: 'ff99cc', css: '#ff99cc'}, {mode: 'hex', value: 'ffcccc', css: '#ffcccc'}, {mode: 'hex', value: 'ffffcc', css: '#ffffcc'}, + {mode: 'hex', value: 'ff00ff', css: '#ff00ff'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '9900ff', css: '#9900ff'}, {mode: 'hex', value: '9933ff', css: '#9933ff'}, {mode: 'hex', value: '9966ff', css: '#9966ff'}, {mode: 'hex', value: '9999ff', css: '#9999ff'}, {mode: 'hex', value: '99ccff', css: '#99ccff'}, {mode: 'hex', value: '99ffff', css: '#99ffff'}, {mode: 'hex', value: 'cc00ff', css: '#cc00ff'}, {mode: 'hex', value: 'cc33ff', css: '#cc33ff'}, {mode: 'hex', value: 'cc66ff', css: '#cc66ff'}, {mode: 'hex', value: 'cc99ff', css: '#cc99ff'}, {mode: 'hex', value: 'ccccff', css: '#ccccff'}, {mode: 'hex', value: 'ccffff', css: '#ccffff'}, {mode: 'hex', value: 'ff00ff', css: '#ff00ff'}, {mode: 'hex', value: 'ff33ff', css: '#ff33ff'}, {mode: 'hex', value: 'ff66ff', css: '#ff66ff'}, {mode: 'hex', value: 'ff99ff', css: '#ff99ff'}, {mode: 'hex', value: 'ffccff', css: '#ffccff'}, {mode: 'hex', value: 'ffffff', css: '#ffffff'}] + }, + //////////////////////////////////////////////////////////////////// + // + drawGradient: { + enumerable: true, + value: function (g) { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + defaultGradient: { + enumerable: true, + value: [] + }, + //////////////////////////////////////////////////////////////////// + // + alphaChange: { + enumerable: false, + value: function (e) { + if (!e._event.wasSetByCode) { + var update = {value: this.combo.slider.value/100, wasSetByCode: false, type: 'change'}; + this.colorManager.alpha = update; + //TODO: Remove, temp fix + if (this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.r) { + this.application.ninja.colorController.colorView.currentChip.colorValue.a = this.combo.slider.value/100; + this.application.ninja.colorController.colorView.currentChip.colorValue.wasSetByCode = false; + this.application.ninja.colorController.colorView.currentChip.colorValue.type = 'change'; + this.colorManager.rgb = this.application.ninja.colorController.colorView.currentChip.colorValue; + } + } + } + }, + //////////////////////////////////////////////////////////////////// + //Reworking logic, firstDraw bubbles up, so target must be checked + handleFirstDraw: { + enumerable: false, + value: function (e) { + // + var modeSet = false; + // + if (this._colorChipWheel) { + //Only using it for one instance, no need to check target + this._colorChipWheel.removeEventListener('firstDraw', this, false); + } + // + switch (this.application.ninja.colorController.popupTab) { + case 'wheel': + if (this.popupModes.wheel) { + this.popupSwitchInputTo(this.popupContainers.wheel); + modeSet = true; + } + break; + case 'palette': + if (this.popupModes.palette) { + this.popupSwitchInputTo(this.popupContainers.palette); + modeSet = true; + } + break; + case 'image': + if (this.popupModes.image) { + this.popupSwitchInputTo(this.popupContainers.image); + modeSet = true; + } + break; + default: + if (this.popupModes.wheel) { + this.popupSwitchInputTo(this.popupContainers.wheel); + modeSet = true; + } + break; + } + // + if (!modeSet) { + if (this.popupModes.wheel) { + this.popupSwitchInputTo(this.popupContainers.wheel); + } else if (this.popupModes.palette) { + this.popupSwitchInputTo(this.popupContainers.palette); + } else if (this.popupModes.gradient) { + this.popupSwitchInputTo(this.popupContainers.gradient); + } else if (this.popupModes.gradient) { + this.popupSwitchInputTo(this.popupContainers.image); + } else { + console.log("Error: No mode is available in the color popup!"); + } + } + //Checking for a gradient to be current color + if (this.colorManager.gradient && this.popupModes.gradient) { + if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { + //If no gradient set, using default + this.drawGradient(this.defaultGradient); + } else { + //Gradient has been set, so opening gradient tab with gradient + this.drawGradient(this.colorManager.gradient); + //this.popupSwitchInputTo(this.popupContainers.gradient); + } + } else { + + } + //Displaying element once it's been drawn + this.element.style.opacity = 1; + } + }, + //////////////////////////////////////////////////////////////////// + // + handleChange: { + enumerable: false, + value: function (e) { + // + if (e._event.hsv) { + var temp; + this.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, wasSetByCode: true, type: 'change'}; + temp = this.colorManager.hsvToRgb(e._event.hsv.h, e._event.hsv.s, e._event.hsv.v); + this._hexString = this.colorManager.rgbToHex(temp.r, temp.g, temp.b); + this.updateHex(); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + handleChanging: { + enumerable: false, + value: function (e) { + // + this.dispatchEvent(e._event); + } + }, + //////////////////////////////////////////////////////////////////// + // + _handleWheelEvent: { + enumerable: false, + value: function (e) { + if (!e._event.wasSetByCode) { + // + this.dispatchEvent(e); + } + } + }, + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //Garbage collection (Manual method) + destroy: { + enumerable: false, + value: function() { + // + /* this.application.ninja.colorController.colorView.removeButton('hexinput', document.getElementById('cc_pu_hottext_hex')); */ + Object.deleteBinding(this.combo.hottext, "value"); + this._colorChipWheel = null; + } + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/panels/color/colorchippopup.reel/config.rb b/js/panels/color/colorchippopup.reel/config.rb new file mode 100755 index 00000000..9b55af19 --- /dev/null +++ b/js/panels/color/colorchippopup.reel/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "css" +images_dir = "img" +javascripts_dir = "../" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/js/panels/color/colorchippopup.reel/css/colorchippopup.css b/js/panels/color/colorchippopup.reel/css/colorchippopup.css new file mode 100755 index 00000000..514c8e9f --- /dev/null +++ b/js/panels/color/colorchippopup.reel/css/colorchippopup.css @@ -0,0 +1,239 @@ +@charset "UTF-8"; +/* + 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. + */ +/* line 12, colorchippopup.scss */ +.cc_popup { + overflow: hidden; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; +} + +/* line 20, colorchippopup.scss */ +#cc_pu_options { + float: left; + clear: both; + width: 100%; +} + +/* line 27, colorchippopup.scss */ +#cc_pu_options button { + display: block; + width: 16px; + height: 16px; + margin: 4px 0px 2px 2px; + text-indent: -9999px; + overflow: hidden; + float: right; + padding: 0px; + cursor: pointer; + border: 1px solid transparent; +} + +/* line 41, colorchippopup.scss */ +#cc_pu_options button:hover { + border: 1px solid #FFF; + box-shadow: 0px 0px 4px #000; +} + +/* line 47, colorchippopup.scss */ +#cc_pu_wheel { + background: url(../img/icon_colorwheel.png) no-repeat transparent top left; +} + +/* line 52, colorchippopup.scss */ +#cc_pu_images { + background: url(../img/icon_bitmap.png) no-repeat black top left; +} + +/* line 57, colorchippopup.scss */ +#cc_pu_gradients { + background: url(../img/icon_gradient.png) no-repeat black top left; +} + +/* line 62, colorchippopup.scss */ +#cc_pu_palettes { + background: #000; +} + +/* line 67, colorchippopup.scss */ +#cc_pu_nocolor { + background: url(../img/icon_nofill.png) no-repeat black top left; +} + +/* line 71, colorchippopup.scss */ +#cc_pu_history { + float: left; + margin: 0px 0px 0px 0px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; +} + +/* line 77, colorchippopup.scss */ +#cc_pu_history button { + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + background: #333; + float: right; + border: solid 1px #000; + cursor: pointer; + margin: 0px -1px 0px 0px; + padding: 0px; +} + +/* line 91, colorchippopup.scss */ +#cc_pu_history button:hover { + border: solid 1px #000 !important; + box-shadow: none !important; +} + +/* line 97, colorchippopup.scss */ +#cc_pu_hex { + float: left; + margin: 3px 2px 0px 6px; +} + +/* line 102, colorchippopup.scss */ +#cc_pu_hex input { + width: 50px; + background: #555; + border: 1px solid #333; + color: #FFF; + padding: 1px 0px 1px 0px; + margin: 0px 0px 0px 2px; + 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; + text-align: center; +} + +/* line 118, colorchippopup.scss */ +#cc_pu_hex input:focus { + outline: none; + padding: 2px 0px 2px 0px; + margin: -1px 0px -1px 2px; + background: #FFF; + color: #000; + text-shadow: none; +} + +/* line 128, colorchippopup.scss */ +#cc_pu_content { + float: left; + clear: both; + width: 100%; + margin: 6px 0px; +} + +/* line 136, colorchippopup.scss */ +#cc_pu_content div { + display: none; +} + +/* line 141, colorchippopup.scss */ +#cc_pu_alpha { + float: left; + clear: both; + width: 100%; + margin: 0px; +} + +/* line 149, colorchippopup.scss */ +#cc_pu_alpha .slider-track { + background: none; +} + +/* line 154, colorchippopup.scss */ +#cc_pu_alpha .knob { + background: url(../img/knob.png) no-repeat transparent center center; +} + +/* line 159, colorchippopup.scss */ +#cc_pu_a_label, #cc_pu_a_label2 { + float: left; + width: auto; + font-size: 11px; +} + +/* line 166, colorchippopup.scss */ +#cc_pu_a_slider, .cc_pu_a_slider { + width: 120px; + height: 12px; + float: left; + clear: none; + margin: 0px 10px 5px 10px; +} + +/* line 175, colorchippopup.scss */ +#cc_pu_a_hottext.hottext, .cc_pu_a_hottext.hottext { + background: none; + float: left; + margin: -1px 2px 0px 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; +} + +/* line 189, colorchippopup.scss */ +#cc_pu_a_hottext.hottextInput, .cc_pu_a_hottext.hottextInput { + background: #FFF; + color: #000; + text-shadow: none; + border: 1px solid #333; + margin: -3px 1px 0px 0px; + padding: 1px; + text-decoration: none; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + outline: none; + float: left; +} + +/* line 204, colorchippopup.scss */ +#cc_pu_wheel_container, .cc_pu_wheel_container { + width: 202px; + height: 202px; +} + +/* line 211, colorchippopup.scss */ +#cc_pu_palette_container, .cc_pu_palette_container { + overflow: hidden; + clear: both; + width: 200px; + padding: 0px 1px 1px 0px; + margin: 0px 0px 0px 1px; +} + +/* line 220, colorchippopup.scss */ +#cc_pu_palette_container button, .cc_pu_palette_container button { + display: block; + float: left; + border: 1px solid #333; + margin: 0px -1px -1px 0px; + padding: 0px; + width: 11px; + height: 11px; + cursor: pointer; +} + +/* line 232, colorchippopup.scss */ +#cc_pu_gradient_container button.chip, .cc_pu_gradient_container button.chip { + display: block; + width: 16px; + height: 16px; + margin: 0px; + padding: 0px; + cursor: pointer; + border: 1px solid black; +} diff --git a/js/panels/color/colorchippopup.reel/css/colorchippopup.scss b/js/panels/color/colorchippopup.reel/css/colorchippopup.scss new file mode 100755 index 00000000..d108c1a8 --- /dev/null +++ b/js/panels/color/colorchippopup.reel/css/colorchippopup.scss @@ -0,0 +1,240 @@ +@charset "UTF-8"; +/* + 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. + */ + +$grey_dark: #292929; +$grey_light: #494949; + +.cc_popup +{ + overflow: hidden; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; +} + +#cc_pu_options +{ + float: left; + clear: both; + width: 100%; +} + +#cc_pu_options button +{ + display: block; + width: 16px; + height: 16px; + margin: 4px 0px 2px 2px; + text-indent: -9999px; + overflow: hidden; + float: right; + padding: 0px; + cursor: pointer; + border: 1px solid transparent; +} + +#cc_pu_options button:hover +{ + border: 1px solid #FFF; + box-shadow: 0px 0px 4px #000; +} + +#cc_pu_wheel +{ + background: url(../img/icon_colorwheel.png) no-repeat transparent top left; +} + +#cc_pu_images +{ + background: url(../img/icon_bitmap.png) no-repeat #000 top left; +} + +#cc_pu_gradients +{ + background: url(../img/icon_gradient.png) no-repeat #000 top left; +} + +#cc_pu_palettes +{ + background: #000; +} + +#cc_pu_nocolor +{ + background: url(../img/icon_nofill.png) no-repeat #000 top left; +} + +#cc_pu_history { + float: left; + margin: 0px 0px 0px 0px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; +} + +#cc_pu_history button { + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + background: #333; + float: right; + border: solid 1px #000; + cursor: pointer; + margin: 0px -1px 0px 0px; + padding: 0px; +} + +#cc_pu_history button:hover +{ + border: solid 1px #000 !important; + box-shadow: none !important; +} + +#cc_pu_hex +{ + float: left; + margin: 3px 2px 0px 6px; +} + +#cc_pu_hex input { + width: 50px; + background: #555; + border: 1px solid #333; + color: #FFF; + padding: 1px 0px 1px 0px; + margin: 0px 0px 0px 2px; + 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; + text-align: center; +} + +#cc_pu_hex input:focus { + outline: none; + padding: 2px 0px 2px 0px; + margin: -1px 0px -1px 2px; + background: #FFF; + color: #000; + text-shadow: none; +} + +#cc_pu_content +{ + float: left; + clear: both; + width: 100%; + margin: 6px 0px; +} + +#cc_pu_content div +{ + display: none; +} + +#cc_pu_alpha +{ + float: left; + clear: both; + width: 100%; + margin: 0px; +} + +#cc_pu_alpha .slider-track +{ + background: none; +} + +#cc_pu_alpha .knob +{ + background: url(../img/knob.png) no-repeat transparent center center; +} + +#cc_pu_a_label, #cc_pu_a_label2 +{ + float: left; + width: auto; + font-size: 11px; +} + +#cc_pu_a_slider, .cc_pu_a_slider +{ + width: 120px; + height: 12px; + float: left; + clear: none; + margin: 0px 10px 5px 10px; +} + +#cc_pu_a_hottext.hottext, .cc_pu_a_hottext.hottext +{ + background: none; + float: left; + margin: -1px 2px 0px 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; +} + +#cc_pu_a_hottext.hottextInput, .cc_pu_a_hottext.hottextInput +{ + background: #FFF; + color: #000; + text-shadow: none; + border: 1px solid #333; + margin: -3px 1px 0px 0px; + padding: 1px; + text-decoration: none; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + outline: none; + float: left; +} + +#cc_pu_wheel_container, .cc_pu_wheel_container +{ + width: 202px; + height: 202px; + +} + +#cc_pu_palette_container, .cc_pu_palette_container +{ + overflow: hidden; + clear: both; + width: 200px; + padding: 0px 1px 1px 0px; + margin: 0px 0px 0px 1px; +} + +#cc_pu_palette_container button, .cc_pu_palette_container button +{ + display: block; + float: left; + border: 1px solid #333; + margin: 0px -1px -1px 0px; + padding: 0px; + width: 11px; + height: 11px; + cursor: pointer; +} + +#cc_pu_gradient_container button.chip, .cc_pu_gradient_container button.chip +{ + display: block; + width: 16px; + height: 16px; + margin: 0px; + padding: 0px; + cursor: pointer; + border: 1px solid black; +} \ No newline at end of file diff --git a/js/panels/color/colorchippopup.reel/img/icon_bitmap.png b/js/panels/color/colorchippopup.reel/img/icon_bitmap.png new file mode 100755 index 00000000..3d6bf1fb Binary files /dev/null and b/js/panels/color/colorchippopup.reel/img/icon_bitmap.png differ diff --git a/js/panels/color/colorchippopup.reel/img/icon_colorwheel.png b/js/panels/color/colorchippopup.reel/img/icon_colorwheel.png new file mode 100755 index 00000000..a2850f4f Binary files /dev/null and b/js/panels/color/colorchippopup.reel/img/icon_colorwheel.png differ diff --git a/js/panels/color/colorchippopup.reel/img/icon_gradient.png b/js/panels/color/colorchippopup.reel/img/icon_gradient.png new file mode 100755 index 00000000..887eee13 Binary files /dev/null and b/js/panels/color/colorchippopup.reel/img/icon_gradient.png differ diff --git a/js/panels/color/colorchippopup.reel/img/icon_nofill.png b/js/panels/color/colorchippopup.reel/img/icon_nofill.png new file mode 100755 index 00000000..0c6311a0 Binary files /dev/null and b/js/panels/color/colorchippopup.reel/img/icon_nofill.png differ diff --git a/js/panels/color/colorchippopup.reel/img/knob.png b/js/panels/color/colorchippopup.reel/img/knob.png new file mode 100755 index 00000000..ecfbfcec Binary files /dev/null and b/js/panels/color/colorchippopup.reel/img/knob.png differ diff --git a/js/panels/color/colorpanel.js b/js/panels/color/colorpanel.js new file mode 100755 index 00000000..3a603e98 --- /dev/null +++ b/js/panels/color/colorpanel.js @@ -0,0 +1,53 @@ +/* +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, + PanelBase = require("js/panels/panelbase").PanelBase; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanel +exports.ColorPanel = Montage.create(PanelBase, { + //////////////////////////////////////////////////////////////////// + //Panel Configuration + panelName: {value: "Color", writable: true, enumerable: true, configurable: true}, + panelHeaderID: {value: "colorPanelHeader", writable: true, enumerable: true, configurable: true}, + disclosureIconID: {value: "colorPanelDisclosureIcon", writable: true, enumerable: true, configurable: true}, + closeButtonID: {value: "colorPanelCloseButton", writable: true, enumerable: true, configurable: true}, + panelContentID: {value: "colorPanelContent", writable: true, enumerable: true, configurable: true}, + //////////////////////////////////////////////////////////////////// + //Creating panel from base view class + init: { + enumerable: true, + value: function() { + //Initializing Wrapper + this.minHeight = 200; + this.maxHeight = 200; + this.contentHeight = 200; + this.isStatic = true; + this.scrollable = false; + //Getting view from base in controller + this.content = this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + //Checking for first draw to apply default colors + this.content.addEventListener('firstDraw', this, false); + + + //////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////// + //TODO: Remove and add via toolbar draw loop + + //////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////// + + + } + }, + //////////////////////////////////////////////////////////////////// + //Applying default colors only on first draw + + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); \ No newline at end of file diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html new file mode 100755 index 00000000..d4330596 --- /dev/null +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + + +
+
+
R
+
G
+
B
+
A
+
+
+
+
+
+
+
+
+ + + + +
+
#
+
+
+ + + + \ No newline at end of file diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js new file mode 100755 index 00000000..af62dd07 --- /dev/null +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -0,0 +1,1654 @@ +/* +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, + 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, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + //Storing ColorPanel sliders mode + _panelMode: { + enumerable: false, + value: 'rgb' + }, + //////////////////////////////////////////////////////////////////// + //Storing ColorPanel sliders mode + panelMode: { + enumerable: true, + get: function() { + return this._panelMode; + }, + set: function(value) { + if (value !== this._panelMode) { + this._panelMode = value; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _colorBar: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Storing color manager + _colorManager: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + colorManager: { + enumerable: true, + get: function() { + return this._colorManager; + }, + set: function(value) { + if (value !== this._colorManager) { + this._colorManager = value; + //Updating input buttons + this._colorManager.addEventListener('change', this._update.bind(this)); + this._colorManager.addEventListener('changing', this._update.bind(this)); + //Updating history buttons once color is set + this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this)); + } + } + }, + //////////////////////////////////////////////////////////////////// + //Color Panel Container + _container: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + _combo: { + enumerable: false, + value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}] + }, + //////////////////////////////////////////////////////////////////// + // + _buttons: { + enumerable: false, + value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} + }, + //////////////////////////////////////////////////////////////////// + // + historyCache: { + enumerable: false, + value: {current: null, previous: null} + }, + //////////////////////////////////////////////////////////////////// + // + colorChipProps: { + enumerable: true, + value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false} + }, + //////////////////////////////////////////////////////////////////// + // + currentChip: { + enumerable: true, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + previousInput: { + enumerable: true, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Setting up elements/components + prepareForDraw: { + enumerable: false, + value: fu