From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.html | 158 +++++++ js/panels/Timeline/Layer.reel/Layer.js | 511 +++++++++++++++++++++ js/panels/Timeline/Layer.reel/css/Layer.css | 322 +++++++++++++ js/panels/Timeline/Layer.reel/images/eye.png | Bin 0 -> 1331 bytes .../Timeline/Layer.reel/images/icon-collapsed.png | Bin 0 -> 325 bytes js/panels/Timeline/Layer.reel/images/icon-eye.png | Bin 0 -> 550 bytes js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 0 -> 475 bytes .../Timeline/Layer.reel/images/icon-minus.png | Bin 0 -> 161 bytes js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 0 -> 323 bytes js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 0 -> 230 bytes .../Timeline/Layer.reel/images/lock_closed.png | Bin 0 -> 1208 bytes js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 0 -> 1186 bytes .../Layer.reel/images/panelDisclosureIcon.png | Bin 0 -> 3028 bytes js/panels/Timeline/Layer.reel/scss/Layer.scss | 220 +++++++++ js/panels/Timeline/Layer.reel/scss/config.rb | 9 + 15 files changed, 1220 insertions(+) create mode 100644 js/panels/Timeline/Layer.reel/Layer.html create mode 100644 js/panels/Timeline/Layer.reel/Layer.js create mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css create mode 100644 js/panels/Timeline/Layer.reel/images/eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png create mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png create mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png create mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png create mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss create mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html new file mode 100644 index 00000000..add6cb38 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -0,0 +1,158 @@ + + + + + + + + + +

+ Label + +

+ Position + +

100px

+ Transform + +

Scale X

100px

Scale Y

100px

Skew X

100px

Skew Y

100px

Rotation

100px

+ +

+ Style + +

+ + \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js new file mode 100644 index 00000000..29171272 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -0,0 +1,511 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; +var Collapser = require("js/panels/Timeline/Collapser").Collapser; +var Hintable = require("js/components/hintable.reel").Hintable; +var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; +var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; +var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; + +var Layer = exports.Layer = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + /* Begin: Models */ + + /* Main collapser model: the main collapser for the layer */ + _mainCollapser : { + value: false + }, + mainCollapser: { + get: function() { + return this._mainCollapser; + }, + set: function(newVal) { + this._mainCollapser = newVal; + } + }, + + /* Style models: the array of styles, and the repetition that uses them */ + _arrLayerStyles : { + serializable: true, + enumerable: true, + serializable: true, + value: [] + }, + arrLayerStyles : { + serializable: true, + enumerable: true, + serializable: true, + get: function() { + return this._arrLayerStyles; + }, + set: function(newVal) { + this._arrLayerStyles = newVal; + } + }, + _styleRepetition : { + value: false + }, + styleRepetition : { + get: function() { + return this._styleRepetition; + }, + set: function(newVal) { + this._styleRepetition = newVal; + } + }, + _styleCounter : { + value: 0 + }, + + /* Layer models: the name, ID, and selected and animation booleans for the layer */ + _layerName:{ + serializable: true, + value:null, + writable:true, + enumerable:true + }, + + layerName:{ + serializable: true, + get:function(){ + return this._layerName; + }, + set:function(newVal){ + if (newVal !== this._layerName) { + this._layerEditable.value = newVal; + this._layerName = newVal; + this._layerEditable.needsDraw = true; + this.needsDraw = true; + + } + + } + }, + _layerID:{ + value:null, + writable:true, + serializable: true, + enumerable:true + }, + + layerID:{ + serializable: true, + get:function(){ + return this._layerID; + }, + set:function(value){ + this._layerID = value; + } + }, + _isSelected:{ + value: false, + writable: true, + enumerable: false + }, + + isSelected:{ + get:function(){ + return this._isSelected; + }, + set:function(value){ + this._isSelected = value; + } + }, + _isAnimated:{ + value: false, + writable: true, + enumerable: false + }, + + isAnimated:{ + get:function(){ + return this._isAnimated; + }, + set:function(value){ + this._isAnimated = value; + } + }, + _justAdded: { + value: false + }, + _layerEditable : { + value: false + }, + + // Are the various collapsers collapsed or not + _isMainCollapsed : { + value: "" + }, + isMainCollapsed : { + get: function() { + return this._isMainCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isMainCollapsed) { + this._isMainCollapsed = newVal; + this.needsDraw = true; + } + } + }, + + _isTransformCollapsed : { + value: true + }, + isTransformCollapsed : { + get: function() { + return this._isTransformCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isTransformCollapsed) { + this._isTransformCollapsed = newVal; + this.needsDraw = true; + } + } + }, + + _isPositionCollapsed : { + value: true + }, + isPositionCollapsed : { + get: function() { + return this._isPositionCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isPositionCollapsed) { + this._isPositionCollapsed = newVal; + this.needsDraw = true; + } + } + }, + + _isStyleCollapsed : { + value: true + }, + isStyleCollapsed : { + get: function() { + return this._isStyleCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isStyleCollapsed) { + this._isStyleCollapsed = newVal; + this.needsDraw = true; + } + } + }, + + + /* END: Models */ + + /* Begin: Draw cycle */ + prepareForDraw: { + value: function() { + + // Initialize myself + this.init(); + + var that = this; + + this.positionCollapser = Collapser.create(); + this.transformCollapser = Collapser.create(); + this.styleCollapser = Collapser.create(); + + // Make it editable! + this._layerEditable = Hintable.create(); + this._layerEditable.element = this.titleSelector; + this.titleSelector.identifier = "selectorEditable"; + this.titleSelector.addEventListener("click", this, false); + this._layerEditable.addEventListener("blur", function(event) { + that.handleSelectorEditableBlur(event); + }, false); + this._layerEditable.addEventListener("change", function(event) { + that.dynamicLayerName.value = that._layerEditable.value; + that.needsDraw = true; + }, false); + this._layerEditable.editingClass = "editable2"; + this._layerEditable.value = this.layerName; + this._layerEditable.needsDraw = true; + + // Change the markup into collapsible sections using the nifty Collapser component! + this.mainCollapser = Collapser.create(); + this.mainCollapser.clicker = this.clicker; + this.mainCollapser.myContent = this.myContent; + this.mainCollapser.contentHeight = 60; + this.myContent.style.height = "0px"; + this.mainCollapser.element = this.element; + //this.mainCollapser.isCollapsedAtStart = true; + this.mainCollapser.isCollapsed = this.isMainCollapsed; + this.mainCollapser.isAnimated = true; + this.element.setAttribute("data-layerid", this.layerID); + this.mainCollapser.labelClickEvent = function(boolBypass) { + var newEvent = document.createEvent("CustomEvent"); + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "content-main"; + newEvent.layerEventType = "labelClick"; + newEvent.layerID = that.layerID; + newEvent.bypassAnimation = boolBypass; + defaultEventManager.dispatchEvent(newEvent); + that.isMainCollapsed = that.mainCollapser.isCollapsed; + } + this.mainCollapser.needsDraw = true; + + this.positionCollapser.clicker = this.clickerPosition; + this.positionCollapser.myContent = this.contentPosition; + this.positionCollapser.element = this.element; + this.positionCollapser.contentHeight = 60; + // this.positionCollapser.isCollapsedAtStart = true; + this.positionCollapser.isCollapsed = this.isPositionCollapsed; + this.positionCollapser.isAnimated = true; + this.positionCollapser.labelClickEvent = function(boolBypass) { + var newEvent = document.createEvent("CustomEvent"); + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "content-position"; + newEvent.layerEventType = "labelClick"; + newEvent.layerID = that.layerID; + newEvent.bypassAnimation = boolBypass; + defaultEventManager.dispatchEvent(newEvent); + that.isPositionCollapsed = that.positionCollapser.isCollapsed; + } + this.positionCollapser.needsDraw = true; + + this.transformCollapser.clicker = this.clickerTransform; + this.transformCollapser.myContent = this.contentTransform; + this.transformCollapser.element = this.element; + this.transformCollapser.contentHeight = 100; + // this.transformCollapser.isCollapsedAtStart = true; + this.transformCollapser.isCollapsed = this.isTransformCollapsed; + this.transformCollapser.isAnimated = true; + this.transformCollapser.labelClickEvent = function(boolBypass) { + var newEvent = document.createEvent("CustomEvent"); + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "content-transform"; + newEvent.layerEventType = "labelClick"; + newEvent.layerID = that.layerID; + newEvent.bypassAnimation = boolBypass; + defaultEventManager.dispatchEvent(newEvent); + that.isTransformCollapsed = that.transformCollapser.isCollapsed; + } + this.transformCollapser.needsDraw = true; + + this.styleCollapser.clicker = this.clickerStyle; + this.styleCollapser.myContent = this.contentStyle; + this.styleCollapser.element = this.element; + this.styleCollapser.isCollapsed = this.isStyleCollapsed; + this.styleCollapser.isAnimated = true; + this.styleCollapser.labelClickEvent = function(boolBypass) { + var newEvent = document.createEvent("CustomEvent"); + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "content-style"; + newEvent.layerEventType = "labelClick"; + newEvent.layerID = that.layerID; + newEvent.bypassAnimation = boolBypass; + defaultEventManager.dispatchEvent(newEvent); + that.isStyleCollapsed = that.styleCollapser.isCollapsed; + } + this.styleCollapser.needsDraw = true; + + // Add event listeners to add and delete style buttons + this.buttonAddStyle.identifier = "addStyle"; + this.buttonAddStyle.addEventListener("click", this, false); + + this.buttonDeleteStyle.identifier = "deleteStyle"; + this.buttonDeleteStyle.addEventListener("click", this, false); + + } + }, + draw: { + value: function() { + + // Coordinate the collapsers + if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { + this.mainCollapser.bypassAnimation = true; + this.mainCollapser.toggle(); + } + if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) { + this.positionCollapser.bypassAnimation = true; + this.positionCollapser.toggle(); + } + if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) { + this.transformCollapser.bypassAnimation = true; + this.transformCollapser.toggle(); + } + if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) { + this.styleCollapser.bypassAnimation = true; + this.styleCollapser.toggle(); + } + } + }, + /* End: Draw cycle */ + + /* Begin: Controllers */ + + // Initialize a just-created layer with some basic defaults and needed selectors. + init: { + value: function() { + // Default some vars + //this.arrLayerStyles = []; + + // Get some selectors. + this.label = this.element.querySelector(".label-layer"); + this.titleSelector = this.label.querySelector(".collapsible-label"); + this.clicker = this.element.querySelector(".collapsible-clicker"); + this.myContent = this.element.querySelector(".content-layer"); + this.clickerPosition = this.element.querySelector(".clicker-position"); + this.contentPosition = this.element.querySelector(".content-position"); + this.clickerTransform = this.element.querySelector(".clicker-transform"); + this.contentTransform = this.element.querySelector(".content-transform"); + this.clickerStyle = this.element.querySelector(".clicker-style"); + this.contentStyle = this.element.querySelector(".content-style"); + this.buttonAddStyle = this.element.querySelector(".button-add"); + this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + } + }, + selectLayer:{ + value:function(){ + // this.mainCollapser.header.classList.add("layerSelected"); + this.element.classList.add("layerSelected"); + this.isSelected = true; + } + }, + deselectLayer:{ + value:function(){ + // this.mainCollapser.header.classList.remove("layerSelected"); + this.element.classList.remove("layerSelected"); + this.isSelected = false; + } + }, + addStyle : { + value: function() { + // Add a new style rule. It should be added above the currently selected rule, + // Or at the end, if no rule is selected. + + var newLength = 0, + mySelection = 0, + // newStyle = LayerStyle.create(), + newStyle = {}, + newEvent = document.createEvent("CustomEvent"); + + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "styles"; + newEvent.layerEventType = "newStyle"; + newEvent.layerID = this.layerID; + newEvent.styleID = this.layerID + "@" + this._styleCounter; + + newStyle.styleID = newEvent.styleID; + newStyle.whichView = "hintable"; + newStyle.editorProperty = ""; + newStyle.editorValue = ""; + newStyle.ruleTweener = false; + + if (!!this.styleRepetition.selectedIndexes) { + mySelection = this.styleRepetition.selectedIndexes[0]; + this.arrLayerStyles.splice(mySelection, 0, newStyle); + this.styleRepetition.selectedIndexes = [mySelection]; + } else { + newLength = this.arrLayerStyles.length; + this.arrLayerStyles.push(newStyle); + mySelection = this.arrLayerStyles.length; + this.styleRepetition.selectedIndexes = [mySelection-1]; + } + + // Set up the event info and dispatch the event + + newEvent.styleSelection = mySelection; + defaultEventManager.dispatchEvent(newEvent); + + } + }, + deleteStyle : { + value: function() { + var newEvent = document.createEvent("CustomEvent"), + selectedIndex = 0; + if (this.arrLayerStyles.length > 0) { + if (!!this.styleRepetition.selectedIndexes) { + + selectedIndex = this.styleRepetition.selectedIndexes[0]; + + // Set up the event info and dispatch the event + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "styles"; + newEvent.layerEventType = "deleteStyle"; + newEvent.layerID = this.layerID; + newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; + newEvent.styleSelection = selectedIndex; + defaultEventManager.dispatchEvent(newEvent); + + // Delete the style from the view + this.arrLayerStyles.splice(selectedIndex, 1); + + } else { + alert('TODO: what should happen when no rule is selected and the user clicks the delete button?') + } + } + } + }, + /* End: Controllers */ + + /* Begin: Event handlers */ + handleAddStyleClick: { + value: function(event) { + // Stop the event propagation + event.stopPropagation(); + this.addStyle(); + } + }, + handleDeleteStyleClick: { + value: function(event) { + event.stopPropagation(); + this.deleteStyle(); + } + }, + handleSelectorEditableClick: { + value: function(event) { + } + }, + handleSelectorEditableBlur : { + value: function(event) { + this.titleSelector.scrollLeft = 0; + } + }, + handleSelectorEditableChange: { + value: function(event) { + this.layerName = this.dynamicLayerName.value; + this.needsDraw = true; + } + }, + /* End: Event handlers */ + + /* Begin: Logging routines */ + _boolDebug: { + enumerable: false, + value: false // set to true to enable debugging to console; false for turning off all debugging. + }, + boolDebug: { + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } + }, + log: { + value: function(strMessage) { + if (this.boolDebug) { + console.log(this.getLineNumber() + ": " + strMessage); + } + } + }, + getLineNumber: { + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } + } + /* End: Logging routines */ + +}); \ No newline at end of file diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css new file mode 100644 index 00000000..39869c92 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -0,0 +1,322 @@ +@charset "UTF-8"; +/* Layer.scss + * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. + */ +/* + 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. + */ +/* + * _colors.scss + * Defines the colors for the UI of the application. + * To create a new theme, copy this file and change the values as desired. + * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. + */ +/* Colors for radio buttons and other form elements */ +/* Base colors for dividers + * + * Dividers consist of a div with a background color and either + * a top & bottom border (in the case of horizontal dividers) + * or a left & right border (in the case of vertical dividers), + * for a total of three different colors. + * + */ +/* top and left */ +/* Middle */ +/* Bottom and right */ +/* Main background color of entire app */ +/* Main app background color. */ +/* rgba version */ +/* Main app border color */ +/* color of drop shadows */ +/* Stage color */ +/* body border color */ +/* Body background color */ +/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ +/* Colors for tools: background, text, how they interact with the UI */ +/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ +/* used for editable items in their non-edit state, etc. */ +/* Border for panel and for block elements */ +/* Shadow for text and block elements */ +/* Colors for scroll bars */ +/* + 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. + */ +/* + * themes/themename/mixins.scss + * Mixins that are theme-dependent (e.g. sprite mixins, etc) + */ +/* + 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. + */ +/* + * mixins.scss + * Generic mixins. Theme-specific mixins (e.g. for sprites) + * should go in the theme/themename/mixins.scss file. + */ +/* line 16, ../scss/Layer.scss */ +.layerLabel { + width: 100%; + color: white; + height: 21px; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px #3a3a3a; + display: -webkit-box; + -webkit-box-orient: horizontal; +} + +/* line 26, ../scss/Layer.scss */ +.layerLabel.layerSelected { + background-color: #b2b2b2; + color: #242424; +} + +/* line 30, ../scss/Layer.scss */ +.layerLabel { + width: 100%; + height: 18px; + padding-left: 25px; + padding-top: 2px; + -webkit-box-flex: 1; +} + +/* line 37, ../scss/Layer.scss */ +.layerDisclosure { + background-image: url("../images/panelDisclosureIcon.png"); + background-repeat: no-repeat; + width: 16px; + height: 16px; + /*float: left;*/ + -webkit-transition-property: rotate; + -webkit-transition-duration: 0.2s; + -webkit-transition-timing-function: linear; + padding-right: 2px; + -webkit-box-flex: 0; +} + +/* line 50, ../scss/Layer.scss */ +.layerHide { + background-image: url("../images/eye.png"); + background-repeat: no-repeat; + /*float: right;*/ + width: 16px; + height: 16px; + padding-right: 4px; + -webkit-box-flex: 0; +} + +/* line 59, ../scss/Layer.scss */ +.layerLock { + background-image: url("../images/lock_open.png"); + background-repeat: no-repeat; + /*float: right;*/ + width: 16px; + height: 16px; + padding-right: 4px; + -webkit-box-flex: 0; +} + +/******************************************/ +/* line 71, ../scss/Layer.scss */ +.container-layer { + background-color: #474747; + color: white; + font-size: 12px; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); +} + +/* line 77, ../scss/Layer.scss */ +.selected .container-layer { + background-color: #474747; +} + +/* line 80, ../scss/Layer.scss */ +.selected .container-layer .label-layer { + background-color: #b2b2b2; + color: #242424; +} + +/* line 85, ../scss/Layer.scss */ +.userlayers .collapsible-label { + display: block; + width: 100px; + height: 21px; + line-height: 20px; + color: white; + margin-left: 30px; + margin-right: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* line 97, ../scss/Layer.scss */ +.layerSelected .label-layer { + background-color: #b2b2b2; + color: #242424; +} + +/* line 101, ../scss/Layer.scss */ +.content-layer { + background-color: #474747; + color: white; +} + +/* line 105, ../scss/Layer.scss */ +.content-layer .collapsible-label { + background-position: 14px 5px; + border-width: 0px; +} + +/* line 112, ../scss/Layer.scss */ +.label-layer, +.label-position, +.label-transform, +.label-style { + position: relative; + border-bottom: 1px solid #505050; + cursor: pointer; +} + +/* line 119, ../scss/Layer.scss */ +.content-layer .collapsible-label, +.content-layer .collapsible-content { + font-size: 11px; +} + +/* line 123, ../scss/Layer.scss */ +.collapsible-clicker { + position: absolute; + width: 10px; + height: 10px; + top: 5px; + left: 5px; + margin: 0px; + padding: 0px; + background-image: url(../images/icon-open.png); + background-repeat: no-repeat; +} + +/* line 134, ../scss/Layer.scss */ +.collapsible-clicker.collapsible-collapsed { + background-image: url(../images/icon-collapsed.png); +} + +/* line 137, ../scss/Layer.scss */ +.collapsible-content .collapsible-clicker { + left: 12px; +} + +/* line 140, ../scss/Layer.scss */ +.content-layer.collapsible-collapsed { + height: 0px; + overflow: hidden; +} + +/* line 146, ../scss/Layer.scss */ +.label-layer .cssbutton, +.label-style .cssbutton { + width: 14px; + height: 14px; + overflow: hidden; + position: absolute; + background-repeat: no-repeat; +} + +/* line 153, ../scss/Layer.scss */ +.label-layer .button-lock { + background-image: url(../images/icon-lock.png); + top: 3px; + right: 27px; +} + +/* line 158, ../scss/Layer.scss */ +.label-layer .button-visible { + background-image: url(../images/icon-eye.png); + top: 3px; + right: 7px; +} + +/* line 163, ../scss/Layer.scss */ +.label-style .button-add { + background-image: url(../images/icon-plus.png); + width: 15px; + height: 15px; + top: 3px; + right: 11px; +} + +/* line 170, ../scss/Layer.scss */ +.label-style .button-delete { + background-image: url(../images/icon-minus.png); + width: 15px; + height: 15px; + top: 3px; + right: 31px; +} + +/* line 177, ../scss/Layer.scss */ +.collapsible-content .layout-table { + width: 99.9%; +} + +/* line 180, ../scss/Layer.scss */ +.content-layer .collapsible-content { + padding-left: 30px; +} + +/* line 183, ../scss/Layer.scss */ +.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { + width: 40%; + height: 20px; + border-bottom: 1px solid #505050; + line-height: 20px; + text-align: left; +} + +/* line 190, ../scss/Layer.scss */ +.collapsible-content .layout-table:first-child { + border-top: 1px solid #505050; +} + +/* line 193, ../scss/Layer.scss */ +.collapsible-transition { + -webkit-transition-property: height; + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease-in; +} + +/* line 199, ../scss/Layer.scss */ +.editable2 { + height: 20px; + background-color: #242424 !important; + color: #b2b2b2 !important; + border-width: 0px; + font-size: 11px; + overflow: hidden; + -webkit-user-select: text; + text-overflow: clip; +} + +/* styles elements */ +/* line 211, ../scss/Layer.scss */ +.content-style .item-template { + display: none; +} + +/* line 214, ../scss/Layer.scss */ +.content-style .layout-row.selected .layout-cell { + background-color: #b2b2b2; + color: #242424; +} + +/* line 218, ../scss/Layer.scss */ +.style-row { + height: 20px; +} diff --git a/js/panels/Timeline/Layer.reel/images/eye.png b/js/panels/Timeline/Layer.reel/images/eye.png new file mode 100644 index 00000000..8ec1759e Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/eye.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-collapsed.png b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png new file mode 100644 index 00000000..d2823a89 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-eye.png b/js/panels/Timeline/Layer.reel/images/icon-eye.png new file mode 100644 index 00000000..6178654e Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-eye.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-lock.png b/js/panels/Timeline/Layer.reel/images/icon-lock.png new file mode 100644 index 00000000..e06b4f22 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-lock.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-minus.png b/js/panels/Timeline/Layer.reel/images/icon-minus.png new file mode 100644 index 00000000..20a047f5 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-minus.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-open.png b/js/panels/Timeline/Layer.reel/images/icon-open.png new file mode 100644 index 00000000..8dc14271 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-open.png differ diff --git a/js/panels/Timeline/Layer.reel/images/icon-plus.png b/js/panels/Timeline/Layer.reel/images/icon-plus.png new file mode 100644 index 00000000..ad1381b9 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-plus.png differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_closed.png b/js/panels/Timeline/Layer.reel/images/lock_closed.png new file mode 100644 index 00000000..8ff213b7 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_closed.png differ diff --git a/js/panels/Timeline/Layer.reel/images/lock_open.png b/js/panels/Timeline/Layer.reel/images/lock_open.png new file mode 100644 index 00000000..9db30f8d Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_open.png differ diff --git a/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png new file mode 100644 index 00000000..4db78f13 Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png differ diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss new file mode 100644 index 00000000..7473a275 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -0,0 +1,220 @@ +@charset "UTF-8"; + +/* Layer.scss + * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. + */ + +// Import theme settings +@import "../../../../../_scss/imports/themes/default/colors"; +// @import "../../../../../_scss/imports/themes/default/fonts"; +@import "../../../../../_scss/imports/themes/default/mixins"; + +// Import generic mixins and styles +@import "../../../../../_scss/imports/scss/mixins"; +// @import "../../../../../_scss/imports/scss/Base"; + +.layerLabel{ + width: 100%; + color: $color-panel-text; + height: 21px; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px $color-panel-shadow; + display: -webkit-box; + -webkit-box-orient: horizontal; +} +.layerLabel.layerSelected { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.layerLabel{ + width:100%; + height:18px; + padding-left: 25px; + padding-top: 2px; + -webkit-box-flex: 1; +} +.layerDisclosure{ + background-image: url('../images/panelDisclosureIcon.png'); + background-repeat: no-repeat; + width: 16px; + height: 16px; + /*float: left;*/ + + -webkit-transition-property: rotate; + -webkit-transition-duration: 0.2s; + -webkit-transition-timing-function: linear; + padding-right: 2px; + -webkit-box-flex: 0; +} +.layerHide{ + background-image: url('../images/eye.png'); + background-repeat: no-repeat; + /*float: right;*/ + width: 16px; + height: 16px; + padding-right: 4px; + -webkit-box-flex: 0; +} +.layerLock{ + background-image: url('../images/lock_open.png'); + background-repeat: no-repeat; + /*float: right;*/ + width: 16px; + height: 16px; + padding-right: 4px; + -webkit-box-flex: 0; +} + +/******************************************/ + +.container-layer { + background-color: $color-panel-bg; + color: $color-panel-text; + font-size: 12px; + text-shadow: 1px 1px 1px $color-app-shadow; +} +.selected .container-layer { + background-color: $color-panel-bg; +} +.selected .container-layer .label-layer { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} + +.userlayers .collapsible-label { + display: block; + width: 100px; + height: 21px; + line-height: 20px; + color: $color-panel-text; + margin-left: 30px; + margin-right: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.layerSelected .label-layer { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.content-layer { + background-color: $color-panel-bg; + color: $color-panel-text; +} +.content-layer .collapsible-label { + background-position: 14px 5px; + border-width: 0px; +} +.label-layer, +.label-position, +.label-transform, +.label-style { + position: relative; + border-bottom: 1px solid #505050; + cursor: pointer; +} + +.content-layer .collapsible-label, +.content-layer .collapsible-content { + font-size: 11px; +} + +.collapsible-clicker { + position: absolute; + width: 10px; + height: 10px; + top: 5px; + left: 5px; + margin: 0px; + padding: 0px; + background-image: url(../images/icon-open.png); + background-repeat: no-repeat; +} +.collapsible-clicker.collapsible-collapsed { + background-image: url(../images/icon-collapsed.png); +} +.collapsible-content .collapsible-clicker { + left: 12px; +} +.content-layer.collapsible-collapsed { + height: 0px; + overflow: hidden; +} + +.label-layer .cssbutton, +.label-style .cssbutton { + width: 14px; + height: 14px; + overflow: hidden; + position: absolute; + background-repeat: no-repeat; +} +.label-layer .button-lock { + background-image: url(../images/icon-lock.png); + top: 3px; + right: 27px; +} +.label-layer .button-visible { + background-image: url(../images/icon-eye.png); + top: 3px; + right: 7px; +} +.label-style .button-add { + background-image: url(../images/icon-plus.png); + width: 15px; + height: 15px; + top: 3px; + right: 11px; +} +.label-style .button-delete { + background-image: url(../images/icon-minus.png); + width: 15px; + height: 15px; + top: 3px; + right: 31px; +} +.collapsible-content .layout-table { + width: 99.9%; +} +.content-layer .collapsible-content { + padding-left: 30px; +} +.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { + width: 40%; + height: 20px; + border-bottom: 1px solid $color-menu-divider; + line-height: 20px; + text-align: left; +} +.collapsible-content .layout-table:first-child { + border-top: 1px solid $color-menu-divider; +} +.collapsible-transition { + -webkit-transition-property: height; + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease-in; +} + +.editable2 { + height: 20px; + background-color: $color-panel-hilite-text !IMPORTANT; + color: $color-panel-hilite-bg !IMPORTANT; + border-width: 0px; + font-size: 11px; + overflow: hidden; + -webkit-user-select: text; + text-overflow: clip; +} + +/* styles elements */ +.content-style .item-template { + display: none; +} +.content-style .layout-row.selected .layout-cell { + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; +} +.style-row { + height: 20px; +} diff --git a/js/panels/Timeline/Layer.reel/scss/config.rb b/js/panels/Timeline/Layer.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/Layer.reel/scss/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 = "" +images_dir = "../images/" +javascripts_dir = "../js" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true -- cgit v1.2.3 From ad81fc7e75225d24ffaf59bb179a32aa12f5141a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 18:44:06 -0800 Subject: Timeline: select/deselect layers. Work on focus/blur for layers. --- js/panels/Timeline/Layer.reel/Layer.html | 5 +++++ js/panels/Timeline/Layer.reel/Layer.js | 29 ++++++++++++++++++++++++++--- 2 files changed, 31 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index add6cb38..add28385 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -66,6 +66,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty", "oneway" : false }, + "isSelected" : { + "boundObject" : {"@": "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", + "oneway" : false + }, "editorValue" : { "boundObject" : {"@": "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 29171272..c5f5d7e4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -103,6 +103,7 @@ var Layer = exports.Layer = Montage.create(Component, { _isSelected:{ value: false, writable: true, + serializable: true, enumerable: false }, @@ -111,7 +112,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isSelected; }, set:function(value){ - this._isSelected = value; + if (value !== this._isSelected) { + // Only concerned about different values + if (value === false) { + // Deselect all of the styles + var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; + if (arrLayerStylesLength > 0) { + for (i = 0; i < arrLayerStylesLength; i++) { + this.arrLayerStyles[i].isSelected = false; + } + this.styleRepetition.selectedIndexes = null; + } + } + this._isSelected = value; + this.needsDraw = true; + } + } }, _isAnimated:{ @@ -335,6 +351,12 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.bypassAnimation = true; this.styleCollapser.toggle(); } + + if (this.isSelected) { + this.element.classList.add("selected"); + } else { + this.element.classList.remove("selected"); + } } }, /* End: Draw cycle */ @@ -398,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorProperty = ""; newStyle.editorValue = ""; newStyle.ruleTweener = false; + newStyle.isSelected = true; if (!!this.styleRepetition.selectedIndexes) { mySelection = this.styleRepetition.selectedIndexes[0]; @@ -450,13 +473,13 @@ var Layer = exports.Layer = Montage.create(Component, { handleAddStyleClick: { value: function(event) { // Stop the event propagation - event.stopPropagation(); + //event.stopPropagation(); this.addStyle(); } }, handleDeleteStyleClick: { value: function(event) { - event.stopPropagation(); + //event.stopPropagation(); this.deleteStyle(); } }, -- cgit v1.2.3 From a8c16ca440b8ded3b78b59c767539e8c080680e7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 16:12:58 -0800 Subject: Squashed commit of the following: commit 46292bddbfbe7415c6852142dd10fd02a276722a Author: Jon Reid Date: Wed Feb 8 14:32:22 2012 -0800 Timeline: turn off console logging. commit b8de88393182bc6e819c3d6a290ade2f804236ac Merge: e651344 37b952c Author: Jon Reid Date: Wed Feb 8 14:10:06 2012 -0800 Merge branch 'Timeline-jduran' into Timeline-jreid commit e651344d5d6c2911b31a54510c65a349c4d52db2 Author: Jon Reid Date: Wed Feb 8 14:08:25 2012 -0800 Timeline: Bug fixes IKNINJA-947: Weird behavior with adding layers with an empty layer name selected IKNINJA-990: Multiple styles can be highlighted at the same time even when they are under different layers IKNINJA-1063: Styles can be added while style column is collapsed IKNINJA-970: When there is no style added yet, the arrow sign should be in a collapsed mode Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.html | 5 ++ js/panels/Timeline/Layer.reel/Layer.js | 118 +++++++++++++++++++++++++++---- 2 files changed, 110 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index add28385..dd819b2b 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -71,6 +71,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", "oneway" : false }, + "isActive" : { + "boundObject" : {"@": "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive", + "oneway" : false + }, "editorValue" : { "boundObject" : {"@": "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c5f5d7e4..71a1f01f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -5,6 +5,7 @@ var Hintable = require("js/components/hintable.reel").Hintable; var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; +var nj = require("js/lib/NJUtils").NJUtils; var Layer = exports.Layer = Montage.create(Component, { @@ -100,6 +101,8 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerID = value; } }, + + /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false, writable: true, @@ -115,14 +118,8 @@ var Layer = exports.Layer = Montage.create(Component, { if (value !== this._isSelected) { // Only concerned about different values if (value === false) { - // Deselect all of the styles - var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; - if (arrLayerStylesLength > 0) { - for (i = 0; i < arrLayerStylesLength; i++) { - this.arrLayerStyles[i].isSelected = false; - } - this.styleRepetition.selectedIndexes = null; - } + // If changing from false to true, we need to deselect any associated styles + this.selectStyle(false); } this._isSelected = value; this.needsDraw = true; @@ -130,6 +127,23 @@ var Layer = exports.Layer = Montage.create(Component, { } }, + + /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with + * TimelinePanel. + */ + _isActive: { + value: false + }, + isActive: { + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + } + }, + + _isAnimated:{ value: false, writable: true, @@ -328,6 +342,10 @@ var Layer = exports.Layer = Montage.create(Component, { this.buttonDeleteStyle.identifier = "deleteStyle"; this.buttonDeleteStyle.addEventListener("click", this, false); + + // Add mousedown listener to set isActive + this.element.addEventListener("mousedown", this, false); + //this.element.addEventListener("click", this, false); } }, @@ -408,7 +426,9 @@ var Layer = exports.Layer = Montage.create(Component, { // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); - + + this.isStyleCollapsed = false; + newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; @@ -420,17 +440,19 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorProperty = ""; newStyle.editorValue = ""; newStyle.ruleTweener = false; - newStyle.isSelected = true; - + newStyle.isSelected = false; + if (!!this.styleRepetition.selectedIndexes) { mySelection = this.styleRepetition.selectedIndexes[0]; this.arrLayerStyles.splice(mySelection, 0, newStyle); - this.styleRepetition.selectedIndexes = [mySelection]; + //this.styleRepetition.selectedIndexes = [mySelection]; + this.selectStyle(mySelection); } else { newLength = this.arrLayerStyles.length; this.arrLayerStyles.push(newStyle); mySelection = this.arrLayerStyles.length; - this.styleRepetition.selectedIndexes = [mySelection-1]; + // this.styleRepetition.selectedIndexes = [mySelection-1]; + this.selectStyle(mySelection-1); } // Set up the event info and dispatch the event @@ -467,6 +489,49 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + selectStyle : { + value: function(styleIndex) { + + // Select a style based on its index. + // use layerIndex = false to deselect all styles. + var i = 0, + arrLayerStylesLength = this.arrLayerStyles.length; + + // First, update this.arrStyles[].isSelected + for (i = 0; i < arrLayerStylesLength; i++) { + if (i === styleIndex) { + this.arrLayerStyles[i].isSelected = true; + } else { + this.arrLayerStyles[i].isSelected = false; + } + } + + // Next, update this.styleRepetition.selectedIndexes. + if (styleIndex !== false) { + this.styleRepetition.selectedIndexes = [styleIndex]; + } else { + this.styleRepetition.selectedIndexes = null; + } + + } + }, + getActiveStyleIndex : { + value: function() { + // Searches through the styles and looks for one that has + // set its isActive flag to true. + var i = 0, + returnVal = false, + arrLayerStylesLength = this.arrLayerStyles.length; + + for (i = 0; i < arrLayerStylesLength; i++) { + if (this.arrLayerStyles[i].isActive === true) { + returnVal = i; + this.arrLayerStyles[i].isActive = false; + } + } + return returnVal; + } + }, /* End: Controllers */ /* Begin: Event handlers */ @@ -498,6 +563,33 @@ var Layer = exports.Layer = Montage.create(Component, { this.needsDraw = true; } }, + handleMousedown: { + value: function(event) { + this.isActive = true; + // Check ALL THE CLICKS + // Are they in a particular style? If so, we need to select that style and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var myIndex = this.getActiveStyleIndex(); + this.selectStyle(myIndex); + } + } + }, + handleLayerClick : { + value: function(event) { + // Check ALL THE CLICKS + // Are they in a particular style? If so, we need to select that style and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var myIndex = this.getActiveStyleIndex(); + this.selectStyle(myIndex); + } + } + }, /* End: Event handlers */ /* Begin: Logging routines */ -- cgit v1.2.3