From b7402018659cf8058d5646c08b2a916492269e33 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 07:37:17 -0800 Subject: Timeline Reset to clean Master branch. Code scrub. Fresh copy of ninja-internal/master with Timeline folder copied in to resolved merge issues. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.html | 2 +- js/panels/Timeline/Layer.reel/Layer.js | 27 +++--- js/panels/Timeline/Layer.reel/css/Layer.css | 117 ++++++++------------------ js/panels/Timeline/Layer.reel/scss/Layer.scss | 17 ++-- 4 files changed, 60 insertions(+), 103 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 dd819b2b..e262afe2 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -153,7 +153,7 @@
Style -
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 71a1f01f..2e9a8f1a 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -80,7 +80,6 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerName = newVal; this._layerEditable.needsDraw = true; this.needsDraw = true; - } } @@ -323,6 +322,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.myContent = this.contentStyle; this.styleCollapser.element = this.element; this.styleCollapser.isCollapsed = this.isStyleCollapsed; + this.styleCollapser.contentHeight = 20; this.styleCollapser.isAnimated = true; this.styleCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); @@ -483,8 +483,11 @@ var Layer = exports.Layer = Montage.create(Component, { // 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?') + // Was that the last style? + if (this.arrLayerStyles.length === 0) { + this.buttonDeleteStyle.classList.add("disabled"); + } + } } } @@ -509,8 +512,12 @@ var Layer = exports.Layer = Montage.create(Component, { // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { this.styleRepetition.selectedIndexes = [styleIndex]; + this.buttonDeleteStyle.classList.remove("disabled"); } else { this.styleRepetition.selectedIndexes = null; + if (typeof(this.buttonDeleteStyle) !== "undefined") { + this.buttonDeleteStyle.classList.add("disabled"); + } } } @@ -537,14 +544,11 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleAddStyleClick: { value: function(event) { - // Stop the event propagation - //event.stopPropagation(); this.addStyle(); } }, handleDeleteStyleClick: { value: function(event) { - //event.stopPropagation(); this.deleteStyle(); } }, @@ -566,25 +570,16 @@ var Layer = exports.Layer = Montage.create(Component, { 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); + this.selectStyle(this.getActiveStyleIndex()); } } }, 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); } diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 39869c92..3547a15e 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -2,63 +2,6 @@ /* 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%; @@ -174,23 +117,24 @@ border-width: 0px; } -/* line 112, ../scss/Layer.scss */ +/* line 113, ../scss/Layer.scss */ .label-layer, .label-position, .label-transform, -.label-style { +.label-style, +.label-styles { position: relative; border-bottom: 1px solid #505050; cursor: pointer; } -/* line 119, ../scss/Layer.scss */ +/* line 120, ../scss/Layer.scss */ .content-layer .collapsible-label, .content-layer .collapsible-content { font-size: 11px; } -/* line 123, ../scss/Layer.scss */ +/* line 124, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -203,23 +147,23 @@ background-repeat: no-repeat; } -/* line 134, ../scss/Layer.scss */ +/* line 135, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 137, ../scss/Layer.scss */ +/* line 138, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 140, ../scss/Layer.scss */ +/* line 141, ../scss/Layer.scss */ .content-layer.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 146, ../scss/Layer.scss */ +/* line 147, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -229,21 +173,21 @@ background-repeat: no-repeat; } -/* line 153, ../scss/Layer.scss */ +/* line 154, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 158, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 163, ../scss/Layer.scss */ +/* line 164, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -252,7 +196,7 @@ right: 11px; } -/* line 170, ../scss/Layer.scss */ +/* line 171, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -261,17 +205,17 @@ right: 31px; } -/* line 177, ../scss/Layer.scss */ +/* line 178, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 180, ../scss/Layer.scss */ +/* line 181, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 183, ../scss/Layer.scss */ +/* line 184, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -280,19 +224,19 @@ text-align: left; } -/* line 190, ../scss/Layer.scss */ +/* line 191, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 193, ../scss/Layer.scss */ +/* line 194, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 199, ../scss/Layer.scss */ +/* line 200, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -304,19 +248,32 @@ text-overflow: clip; } +<<<<<<< .mine=======/* line 210, ../scss/Layer.scss */ +.label-style .disabled { + cursor: default; +} + +/* styles elements */ +>>>>>>> .theirs/* line 215, ../scss/Layer.scss */ +.label-style .disabled { + cursor: default; +} + /* styles elements */ -/* line 211, ../scss/Layer.scss */ +/* line 216, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 214, ../scss/Layer.scss */ -.content-style .layout-row.selected .layout-cell { +<<<<<<< .mine/* line 219, ../scss/Layer.scss */ +=======/* line 218, ../scss/Layer.scss */ +>>>>>>> .theirs.content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 218, ../scss/Layer.scss */ -.style-row { +<<<<<<< .mine/* line 223, ../scss/Layer.scss */ +=======/* line 222, ../scss/Layer.scss */ +>>>>>>> .theirs.style-row { height: 20px; } diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 7473a275..c66a6267 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -5,13 +5,13 @@ */ // Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -// @import "../../../../../_scss/imports/themes/default/fonts"; -@import "../../../../../_scss/imports/themes/default/mixins"; +@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"; +@import "../../../../../scss/imports/scss/mixins"; +// @import "../../../../../scss/imports/scss/Base"; .layerLabel{ width: 100%; @@ -109,7 +109,8 @@ .label-layer, .label-position, .label-transform, -.label-style { +.label-style, +.label-styles { position: relative; border-bottom: 1px solid #505050; cursor: pointer; @@ -207,6 +208,10 @@ text-overflow: clip; } +.label-style .disabled { + cursor: default; +} + /* styles elements */ .content-style .item-template { display: none; -- cgit v1.2.3