diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index e51bdd8a..ed1ac27a 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -29,12 +29,20 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: 20 }, - initialColor: { - value: false + color: { + value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} }, changeDelegate: { - value: null + value: function(event) { + this.color = event._event.color; + + var evt = document.createEvent("CustomEvent"); + evt.initEvent("change", true, true); + evt.type = "change"; + + this.dispatchEvent(evt); + } }, prepareForDraw: { @@ -60,10 +68,10 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: function(evt) { if(this.chip) { // This is a single chip - Not related to the color panel -- Set the initial color if found - var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)"; + var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)"; - if(this.initialColor) { - var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor); + if(this.color) { + var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css); mode = colorObj.mode; r = colorObj.value.r; g = colorObj.value.g; diff --git a/js/components/ui/file-input.reel/file-input.html b/js/components/ui/file-input.reel/file-input.html index 5cdd8f9e..2a8546a5 100755 --- a/js/components/ui/file-input.reel/file-input.html +++ b/js/components/ui/file-input.reel/file-input.html @@ -11,7 +11,7 @@ -

- +

diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js index 2ea38162..b57f7c21 100755 --- a/js/components/ui/file-input.reel/file-input.js +++ b/js/components/ui/file-input.reel/file-input.js @@ -5,7 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, -Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component; var FileInput = exports.FileInput = Montage.create(Component, { diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html index c99e29d6..0050b8cb 100755 --- a/js/components/ui/input-group.reel/input-group.html +++ b/js/components/ui/input-group.reel/input-group.html @@ -11,7 +11,7 @@ -

diff --git a/js/components/ui/property-control.reel/property-control.html b/js/components/ui/property-control.reel/property-control.html index 2e7c7b53..43e8e67f 100755 --- a/js/components/ui/property-control.reel/property-control.html +++ b/js/components/ui/property-control.reel/property-control.html @@ -11,14 +11,14 @@ -

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js index 586d2e9a..58b1be9f 100755 --- a/js/components/ui/property-control.reel/property-control.js +++ b/js/components/ui/property-control.reel/property-control.js @@ -6,16 +6,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - HotText = require("js/components/hottext").HotText, - HotTextUnit = require("js/components/hottextunit").HotTextUnit, - Slider = require("js/components/slider").Slider, - Button = require("js/components/button").Button, - Checkbox = require("js/components/checkbox").Checkbox, - Combobox = require("js/components/combobox").Combobox, - TextField = require("js/components/TextField").TextField, - ColorChip = require("js/components/ui/color-chip").ColorChip, - FileInput = require("js/components/ui/file-input").FileInput, - InputGroup = require("js/components/ui/input-group").InputGroup; + HotText = require("js/components/hottext.reel").HotText, + HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit, + Slider = require("js/components/slider.reel").Slider, + Button = require("js/components/button.reel").Button, + Checkbox = require("js/components/checkbox.reel").Checkbox, + Combobox = require("js/components/combobox.reel").Combobox, + TextField = require("js/components/TextField.reel").TextField, + ColorChip = require("js/components/ui/color-chip.reel").ColorChip, + FileInput = require("js/components/ui/file-input.reel").FileInput, + InputGroup = require("js/components/ui/input-group.reel").InputGroup; var PropertyControl = exports.PropertyControl = Montage.create(Component, { @@ -134,7 +134,7 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { { this._control[n] = defaults[n]; } - + this._labelField.innerHTML = this._label; this._control.needsDraw = true; } }, @@ -170,8 +170,6 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { prepareForDraw: { value: function() { - this._labelField.innerHTML = this._label; - switch(this._controlType) { case "HotText": @@ -199,6 +197,9 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { break; case "ColorChip": this._control = ColorChip.create(); + this._control.chip = true; + this._control.hasIcon = false; + this._control.mode = "chip"; this._control.addEventListener("change", this, false); this._prop = "color"; break; diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index eede02bd..6ba4ac75 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html @@ -10,14 +10,18 @@ diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index f97e1a27..b16c4376 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Tree = require("js/components/tree.reel").Tree, Button = require("js/components/button.reel").Button, MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, - PopupMananger = require("js/components/popup-manager.reel").PopupMananger; + PopupMananger = require("js/components/popup-manager.reel").PopupMananger, + Popup = require("montage/ui/popup/popup.reel").Popup; exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { @@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re captureChange: { value:function(e) { var tNode = e._event.treeNode; - var left, top; - //TODO: Figure out if this is the best way to detect where user clicked - var mouseEvent = e._event.mouseEvent; - if (mouseEvent.clientX && mouseEvent.clientY) { - if (mouseEvent.clientX > (parseInt(document.width)/2)) { - left = mouseEvent.clientX - mouseEvent.offsetX-2; - top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY; - } else { - left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth); - top = mouseEvent.clientY - mouseEvent.offsetY; - } - } - - this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id); + this._showMaterialPopup(tNode.id); } }, @@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re enumerable:true, value:null }, + + _materialInfo: { + enumerable:true + }, _showMaterialPopup: { enumerable: false, - value: function (x, y, side, align, materialID) { - if (this._materialPopup && this._materialPopup.opened) { - if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { - this._hideMaterialPopup(); - } else { - this._materialPopup.popup.position = {x: x, y: y}; - this._materialPopup.popup.tooltip = {side: side, align: align}; - this._materialPopup.popup.base.loadMaterials(materialID); - //TODO: Tooltip needs to be fixed to allow aligning to change on fly - //this._materialPopup.popup.drawTooltip(); - } - } else { - //////////////////////////////////////////////////// - //Creating popup from m-js component - var popup = document.createElement('div'); - var content = document.createElement('div'); - var popupBase = MaterialsPopup.create(); - - - //TODO: Check to see if this HACK is needed - //(elements needs to be on DOM to be drawn) - document.body.appendChild(popup); - popupBase.element = popup; - popupBase.needsDraw = true; - document.body.removeChild(popup); - //Adding drawn element to container - content.appendChild(popupBase.element); - - //Creating an instance of the popup and sending in created material popup content - this._materialPopup = {}; - this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align}); - this._materialPopup.popup.element.style.opacity = 0; - this._materialPopup.popup.base = popupBase; - popupBase._material = MaterialsLibrary.getMaterial( materialID ); - popupBase._materialName = materialID; - //TODO: Fix this animation/draw HACK (Move to didDraw callback) - setTimeout(function () { - this._materialPopup.popup.element.style.opacity = 1; - this._materialPopup.popup.base.loadMaterials(materialID); - }.bind(this), 150); - - - - //Popup was added, so it's opened - this._materialPopup.opened = true; - //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup - document.getElementById('stageAndScenesContainer').addEventListener('click', this, false); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - handleClick: { - enumerable: true, - value: function (e) { - //TODO: Fix this HACK - if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) { - this._handleDocumentClick(e); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - _handleDocumentClick: { - enumerable: false, - value: function (e) { - this._hideMaterialPopup(); - //TODO: Fix this HACK - document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false); + value: function (materialID) { + + if(!this._materialPopup) + { + this._materialPopup = Popup.create(); + this._materialPopup.content = this._materialInfo; + this._materialPopup.modal = false; + this.eventManager.addEventListener("hideMaterialPopup", this, false); + this._materialPopup.addEventListener("show", this, false); + } + this._materialPopup.show(); + this._materialInfo.loadMaterials(materialID); } }, - //////////////////////////////////////////////////////////////////// - // - _hideMaterialPopup: { + + handleHideMaterialPopup: { enumerable: false, - value: function () { - if (this._materialPopup.opened) { - // - PopupMananger.removePopup(this._materialPopup.popup.element); - this._materialPopup.opened = false; - //TODO: Fix HACK of removing popup - this._materialPopup.popup.base.destroy(); - this._materialPopup.popup = null; - } + value: function (event) { + if(this._materialPopup){ + this._materialPopup.hide(); + } } } }); \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 299dc5f9..89233c64 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -6,24 +6,22 @@ */ .materials_popup { - font-size: 12px; - text-shadow: 1px 1px 1px #000; + width:400px; + font-size: 12px; overflow: hidden; -} - -.materials_popup a:hover { - color: #CCC; + background: #494949; + color: white; } .materials_popup hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); - 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, #1d1d1d), color-stop(0.75, #424242)); + border: none; + height: 2px; + margin: 4px 0px 4px 0px; } #mp_title { @@ -36,127 +34,46 @@ text-align: center; } -#mp_maps div div, -#mp_maps div div:focus, -#mp_maps div input, -#mp_maps div input:focus { - margin: 0px 0px 2px 0px; +.mp_property +{ + height:40px; } -#mp_properties_labels, -#mp_maps_labels { - display:block; +.mp_property > .prop-label +{ float: left; - width:86px; + /*width:86px;*/ margin: 0px 8px 2px 5px; - font-family: 'Droid Sans', sans-serif; - font-size: 12px; } -#mp_properties_labels div, -#mp_maps_labels div { +.mp_property > .prop-controller +{ float: right; clear: left; width: auto; margin: 0px 0px 3px 0px; } -#mp_maps_labels div { - margin: 2px 0px 3px 0px !important; -} - -#mp_properties_labels div { - margin: 6px 0px 6px 0px !important; -} - -#mp_properties_colors -{ - float:left; - width: 24px; - margin: 0px -8px 0px 10px; -} - -#mp_properties_colors button { - width: 22px; - height: 22px; - margin: 2px 0; -} - -#mp_properties_colors input.hottext { - background: none; - float: right; - margin: 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; -} - -#mp_properties_colors input.hottextInput { - background: #FFF; - color: #000; - text-shadow: none; - border: 1px solid #333; - margin: 3px -2px 5px 1px; - padding: 1px; - text-decoration: none; - outline: none; -} - -#mp_maps_inputs -{ - float: left; - width: auto; -} - -#mp_maps_inputs input { - float:left; - clear:both; - width: 100px; - background: #555; - border: 1px solid #333; - color: #FFF; - padding: 1px 0px 1px 0px; - margin: 0px 0px 0px 10px; - text-decoration: none !important; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; -} - -#mp_maps_inputs input:focus { - outline: none; - margin: -1px 0px -1px 10px; - background: #FFF; - color: #000; - text-shadow: none; -} - - -#mp_buttons { +.mp_buttons { clear:both; float: left; margin: 0px -4px 0px 4px; width: 97%; } -#mp_buttons button { +.mp_buttons button { height: 22px; overflow: hidden; display: block; cursor: pointer; } -#mp_cancel_btn { +.mp_buttons .mp_cancel_btn { float: left; width: 60px; } -#mp_ok_btn { +.mp_buttons .mp_ok_btn { float: right; width: 30px; } \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index bac69f25..de4f98c1 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -30,7 +30,7 @@ } }, "eventDelegator": { - "module": "montage/event/action-event-listener", + "module": "montage/core/event/action-event-listener", "name": "ActionEventListener", "properties": { "handler": {"@": "owner"}, @@ -38,7 +38,7 @@ } }, "propControl1": { - "module": "js/components/ui/property-control", + "module": "js/components/ui/property-control.reel", "name": "PropertyControl", "properties": { "element": {"#": "mp_property"} @@ -64,7 +64,7 @@ ] }, "materialsProperties": { - "module": "montage/ui/repetition", + "module": "montage/ui/repetition.reel", "name": "Repetition", "properties": { "element": {"#": "mp_properties_list"} @@ -95,7 +95,7 @@ -

Material Name

@@ -104,15 +104,15 @@

- - +

+ +

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 62ca5395..508b8130 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -11,36 +11,13 @@ var Button = require("js/components/button.reel").Button; //////////////////////////////////////////////////////////////////////// //Exporting as MaterialsPopup exports.MaterialsPopup = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - okButton: { - enumerable: false, - value: null - }, - - cancelButton: { - enumerable: false, - value: null - }, - //////////////////////////////////////////////////////////////////// // Material Properties - - materialsProperties: { - enumerable: true, - serializable: true, - value: null - }, - _materialName: { enumerable: true, - value: "Material" + value: "" }, - materialTitle: { - enumerable: true, - value: null - }, - captureAction: { value:function(event) { switch(event._currentTarget.label) @@ -69,6 +46,9 @@ exports.MaterialsPopup = Montage.create(Component, { } break; } + + // Notify Materials Library to close popup + NJevent("hideMaterialPopup"); } }, @@ -235,12 +215,12 @@ exports.MaterialsPopup = Montage.create(Component, { value: function(materialID) { this._materialName = materialID; - if( + if( (materialID === "UberMaterial") || (materialID === "FlatMaterial") || - (materialID === "BumpMetalMaterial") || - (materialID === "LinearGradientMaterial") || - (materialID === "RadialGradientMaterial") + (materialID === "BumpMetalMaterial") || + (materialID === "LinearGradientMaterial") || + (materialID === "RadialGradientMaterial") ) { var material = MaterialsLibrary.getMaterial( materialID ); @@ -323,6 +303,8 @@ exports.MaterialsPopup = Montage.create(Component, { { value: function( label, color ) { + var css = 'rgba(' + color[0]*255 + ',' + color[1]*255 + ',' + color[2]*255 + ',' + color[3] + ')'; + var colorObj = this.application.ninja.colorController.getColorObjFromCss(css) var obj = { "label": label, @@ -330,7 +312,7 @@ exports.MaterialsPopup = Montage.create(Component, { "controlType": "ColorChip", "defaults": { - "color": { r:color[0]*255, g:color[1]*255, b:color[2]*255, a:color[3] } + "color": colorObj } }; @@ -644,7 +626,7 @@ exports.MaterialsPopup = Montage.create(Component, { _materialsData: { enumerable: true, serializable: true, - value: this._dummyData1 + value: [] }, @@ -656,7 +638,10 @@ exports.MaterialsPopup = Montage.create(Component, { }, set: function(data) { this._materialsData = data; - this.materialsProperties.needsDraw = true; + if(this.materialsProperties) + { + this.materialsProperties.needsDraw = true; + } } } diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 53926c78..9b6416c7 100755 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -163,7 +163,7 @@ exports.Content = Montage.create(Component, { // For now hardcode the background since it is the only custom property // No need to loop through all the properties. var backgroundChip = this.customSections[0].content.controls["background"]; - backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background"); + backgroundChip.color = ElementsMediator.getProperty(stage, "background"); /* var customPI = PiData[this.customPi]; -- cgit v1.2.3