4 files changed, 80 insertions, 100 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index dd819b2b..a3fbd5b1 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
 <html lang="en">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -153,7 +158,7 @@
                                <div class="label-style">
                                        <span class="collapsible-label">Style</span>
                                        <span class="clicker-style collapsible-clicker"></span>
-                                        <div class="cssbutton button-delete"></div>
+                                        <div class="cssbutton button-delete disabled"></div>
                                        <div class="cssbutton button-add"></div>
                                </div>
                                <div class="content-style collapsible-content">
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 71a1f01f..f62c0b90 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1,3 +1,9 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var Collapser = require("js/panels/Timeline/Collapser").Collapser;
@@ -80,7 +86,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                        this._layerName = newVal;
                        this._layerEditable.needsDraw = true;
                        this.needsDraw = true;
-                        
                }
                
        }
@@ -323,6 +328,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 +489,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                                        // Delete the style from the view
                                        this.arrLayerStyles.splice(selectedIndex, 1);
                                        
-                                } else {
+                                        // Was that the last style?
-                                        alert('TODO: what should happen when no rule is selected and the user clicks the delete button?')
+                                        if (this.arrLayerStyles.length === 0) {
+                                                this.buttonDeleteStyle.classList.add("disabled");
+                                        }
+                                        
                                }
                        }
                }
@@ -509,8 +518,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 +550,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 +576,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?
+                                this.selectStyle(this.getActiveStyleIndex());
-                                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);
                        }
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 39869c92..833c921c 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -1,63 +1,12 @@
 @charset "UTF-8";
-/* Layer.scss
- * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
- */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * _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 */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * themes/themename/mixins.scss
- * Mixins that are theme-dependent (e.g. sprite mixins, etc)
- */
 /* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-/*
- * mixins.scss
+/* Layer.scss
- * Generic mixins.  Theme-specific mixins (e.g. for sprites)

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index dd819b2b..a3fbd5b1 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -1,4 +1,9 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
		2	<!-- <copyright>
		3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		6	</copyright> -->
2	<html lang="en">	7	<html lang="en">
3	<head>	8	<head>
4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -153,7 +158,7 @@
153	<div class="label-style">	158	<div class="label-style">
154	<span class="collapsible-label">Style</span>	159	<span class="collapsible-label">Style</span>
155	<span class="clicker-style collapsible-clicker"></span>	160	<span class="clicker-style collapsible-clicker"></span>
156	<div class="cssbutton button-delete"></div>	161	<div class="cssbutton button-delete disabled"></div>
157	<div class="cssbutton button-add"></div>	162	<div class="cssbutton button-add"></div>
158	</div>	163	</div>
159	<div class="content-style collapsible-content">	164	<div class="content-style collapsible-content">


diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 71a1f01f..f62c0b90 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1,3 +1,9 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		5	</copyright> */
		6
1	var Montage = require("montage/core/core").Montage;	7	var Montage = require("montage/core/core").Montage;
2	var Component = require("montage/ui/component").Component;	8	var Component = require("montage/ui/component").Component;
3	var Collapser = require("js/panels/Timeline/Collapser").Collapser;	9	var Collapser = require("js/panels/Timeline/Collapser").Collapser;
@@ -80,7 +86,6 @@ var Layer = exports.Layer = Montage.create(Component, {
80	this._layerName = newVal;	86	this._layerName = newVal;
81	this._layerEditable.needsDraw = true;	87	this._layerEditable.needsDraw = true;
82	this.needsDraw = true;	88	this.needsDraw = true;
83
84	}	89	}
85		90
86	}	91	}
@@ -323,6 +328,7 @@ var Layer = exports.Layer = Montage.create(Component, {
323	this.styleCollapser.myContent = this.contentStyle;	328	this.styleCollapser.myContent = this.contentStyle;
324	this.styleCollapser.element = this.element;	329	this.styleCollapser.element = this.element;
325	this.styleCollapser.isCollapsed = this.isStyleCollapsed;	330	this.styleCollapser.isCollapsed = this.isStyleCollapsed;
		331	this.styleCollapser.contentHeight = 20;
326	this.styleCollapser.isAnimated = true;	332	this.styleCollapser.isAnimated = true;
327	this.styleCollapser.labelClickEvent = function(boolBypass) {	333	this.styleCollapser.labelClickEvent = function(boolBypass) {
328	var newEvent = document.createEvent("CustomEvent");	334	var newEvent = document.createEvent("CustomEvent");
@@ -483,8 +489,11 @@ var Layer = exports.Layer = Montage.create(Component, {
483	// Delete the style from the view	489	// Delete the style from the view
484	this.arrLayerStyles.splice(selectedIndex, 1);	490	this.arrLayerStyles.splice(selectedIndex, 1);
485		491
486	} else {	492	// Was that the last style?
487	alert('TODO: what should happen when no rule is selected and the user clicks the delete button?')	493	if (this.arrLayerStyles.length === 0) {
		494	this.buttonDeleteStyle.classList.add("disabled");
		495	}
		496
488	}	497	}
489	}	498	}
490	}	499	}
@@ -509,8 +518,12 @@ var Layer = exports.Layer = Montage.create(Component, {
509	// Next, update this.styleRepetition.selectedIndexes.	518	// Next, update this.styleRepetition.selectedIndexes.
510	if (styleIndex !== false) {	519	if (styleIndex !== false) {
511	this.styleRepetition.selectedIndexes = [styleIndex];	520	this.styleRepetition.selectedIndexes = [styleIndex];
		521	this.buttonDeleteStyle.classList.remove("disabled");
512	} else {	522	} else {
513	this.styleRepetition.selectedIndexes = null;	523	this.styleRepetition.selectedIndexes = null;
		524	if (typeof(this.buttonDeleteStyle) !== "undefined") {
		525	this.buttonDeleteStyle.classList.add("disabled");
		526	}
514	}	527	}
515		528
516	}	529	}
@@ -537,14 +550,11 @@ var Layer = exports.Layer = Montage.create(Component, {
537	/* Begin: Event handlers */	550	/* Begin: Event handlers */
538	handleAddStyleClick: {	551	handleAddStyleClick: {
539	value: function(event) {	552	value: function(event) {
540	// Stop the event propagation
541	//event.stopPropagation();
542	this.addStyle();	553	this.addStyle();
543	}	554	}
544	},	555	},
545	handleDeleteStyleClick: {	556	handleDeleteStyleClick: {
546	value: function(event) {	557	value: function(event) {
547	//event.stopPropagation();
548	this.deleteStyle();	558	this.deleteStyle();
549	}	559	}
550	},	560	},
@@ -566,25 +576,16 @@ var Layer = exports.Layer = Montage.create(Component, {
566	handleMousedown: {	576	handleMousedown: {
567	value: function(event) {	577	value: function(event) {
568	this.isActive = true;	578	this.isActive = true;
569	// Check ALL THE CLICKS
570	// Are they in a particular style? If so, we need to select that style and
571	// deselect the others.
572	var ptrParent = nj.queryParentSelector(event.target, ".content-style");	579	var ptrParent = nj.queryParentSelector(event.target, ".content-style");
573	if (ptrParent !== false) {	580	if (ptrParent !== false) {
574	// Why yes, the click was within a layer. But which one?	581	this.selectStyle(this.getActiveStyleIndex());
575	var myIndex = this.getActiveStyleIndex();
576	this.selectStyle(myIndex);
577	}	582	}
578	}	583	}
579	},	584	},
580	handleLayerClick : {	585	handleLayerClick : {
581	value: function(event) {	586	value: function(event) {
582	// Check ALL THE CLICKS
583	// Are they in a particular style? If so, we need to select that style and
584	// deselect the others.
585	var ptrParent = nj.queryParentSelector(event.target, ".content-style");	587	var ptrParent = nj.queryParentSelector(event.target, ".content-style");
586	if (ptrParent !== false) {	588	if (ptrParent !== false) {
587	// Why yes, the click was within a layer. But which one?
588	var myIndex = this.getActiveStyleIndex();	589	var myIndex = this.getActiveStyleIndex();
589	this.selectStyle(myIndex);	590	this.selectStyle(myIndex);
590	}	591	}


diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 39869c92..833c921c 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -1,63 +1,12 @@
1	@charset "UTF-8";	1	@charset "UTF-8";
2	/* Layer.scss
3	* Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
4	*/
5	/* <copyright>
6	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
7	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
8	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
9	</copyright> */
10	/*
11	* _colors.scss
12	* Defines the colors for the UI of the application.
13	* To create a new theme, copy this file and change the values as desired.
14	* Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values.
15	*/
16	/* Colors for radio buttons and other form elements */
17	/* Base colors for dividers
18	*
19	* Dividers consist of a div with a background color and either
20	* a top & bottom border (in the case of horizontal dividers)
21	* or a left & right border (in the case of vertical dividers),
22	* for a total of three different colors.
23	*
24	*/
25	/* top and left */
26	/* Middle */
27	/* Bottom and right */
28	/* Main background color of entire app */
29	/* Main app background color. */
30	/* rgba version */
31	/* Main app border color */
32	/* color of drop shadows */
33	/* Stage color */
34	/* body border color */
35	/* Body background color */
36	/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
37	/* Colors for tools: background, text, how they interact with the UI */
38	/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
39	/* used for editable items in their non-edit state, etc. */
40	/* Border for panel and for block elements */
41	/* Shadow for text and block elements */
42	/* Colors for scroll bars */
43	/* <copyright>
44	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
45	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
46	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
47	</copyright> */
48	/*
49	* themes/themename/mixins.scss
50	* Mixins that are theme-dependent (e.g. sprite mixins, etc)
51	*/
52	/* <copyright>	2	/* <copyright>
53	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
54	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
55	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
56	</copyright> */	6	</copyright> */
57	/*	7
58	* mixins.scss	8	/* Layer.scss
59	* Generic mixins. Theme-specific mixins (e.g. for sprites)