diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 52 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 79 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 |
5 files changed, 59 insertions, 81 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index c7e7b575..44022211 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,6 +17,7 @@ | |||
17 | "styleRepetition" : {"@":"repetition1"}, | 17 | "styleRepetition" : {"@":"repetition1"}, |
18 | "dynamicLayerName" : {"@":"dtext1"}, | 18 | "dynamicLayerName" : {"@":"dtext1"}, |
19 | "dynamicLayerTag" : {"@": "dtext2"}, | 19 | "dynamicLayerTag" : {"@": "dtext2"}, |
20 | "layer_label_text" : {"#": "layer-label-text"}, | ||
20 | "mainCollapser" : {"@" : "mainCollapser"}, | 21 | "mainCollapser" : {"@" : "mainCollapser"}, |
21 | "positionCollapser" : {"@" : "positionCollapser"}, | 22 | "positionCollapser" : {"@" : "positionCollapser"}, |
22 | "styleCollapser" : {"@" : "styleCollapser"}, | 23 | "styleCollapser" : {"@" : "styleCollapser"}, |
@@ -33,7 +34,7 @@ | |||
33 | "value" : { | 34 | "value" : { |
34 | "boundObject" : {"@": "owner"}, | 35 | "boundObject" : {"@": "owner"}, |
35 | "boundObjectPropertyPath" : "layerName", | 36 | "boundObjectPropertyPath" : "layerName", |
36 | "oneway" : false | 37 | "oneway" : true |
37 | } | 38 | } |
38 | } | 39 | } |
39 | }, | 40 | }, |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 8df0e9ae..45d6f0a3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -74,7 +74,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
74 | 74 | ||
75 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ | 75 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ |
76 | _layerName:{ | 76 | _layerName:{ |
77 | value: "Default Layer Name" | 77 | value: "" |
78 | }, | 78 | }, |
79 | 79 | ||
80 | layerName:{ | 80 | layerName:{ |
@@ -83,13 +83,22 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
83 | return this._layerName; | 83 | return this._layerName; |
84 | }, | 84 | }, |
85 | set:function(newVal){ | 85 | set:function(newVal){ |
86 | this._layerEditable.value = newVal; | 86 | if (this._layerEditable.value !== newVal) { |
87 | this._layerName = newVal; | 87 | this._layerEditable.value = newVal; |
88 | this.layerData.layerName = newVal; | 88 | } |
89 | if (this._layerName !== newVal) { | ||
90 | this._layerName = newVal; | ||
91 | } | ||
92 | if (this.layerData.layerName !== newVal) { | ||
93 | this.layerData.layerName = newVal; | ||
94 | } | ||
95 | |||
89 | if (typeof(this.dynamicLayerName) !== "undefined") { | 96 | if (typeof(this.dynamicLayerName) !== "undefined") { |
90 | this.dynamicLayerName.value = newVal; | 97 | if (this.dynamicLayerName.value !== newVal) { |
98 | this.dynamicLayerName.value = newVal; | ||
99 | } | ||
91 | } | 100 | } |
92 | 101 | this.needsDraw = true; | |
93 | } | 102 | } |
94 | }, | 103 | }, |
95 | _layerID:{ | 104 | _layerID:{ |
@@ -513,6 +522,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
513 | //console.log('Layer.draw, removing selection for layer ', this.layerName) | 522 | //console.log('Layer.draw, removing selection for layer ', this.layerName) |
514 | this.element.classList.remove("layerSelected"); | 523 | this.element.classList.remove("layerSelected"); |
515 | } | 524 | } |
525 | |||
526 | // Update layer name? | ||
527 | if (this.layerName !== this.layer_label_text.innerText) { | ||
528 | this.layer_label_text.innerText = this.layerName; | ||
529 | } | ||
516 | } | 530 | } |
517 | }, | 531 | }, |
518 | didDraw: { | 532 | didDraw: { |
@@ -565,10 +579,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
565 | // newStyle = LayerStyle.create(), | 579 | // newStyle = LayerStyle.create(), |
566 | newStyle = {}, | 580 | newStyle = {}, |
567 | newEvent = document.createEvent("CustomEvent"); | 581 | newEvent = document.createEvent("CustomEvent"); |
568 | 582 | /* | |
569 | this.isStyleCollapsed = false; | 583 | this.isStyleCollapsed = false; |
570 | this.layerData.isStyleCollapsed = false; | 584 | this.layerData.isStyleCollapsed = false; |
571 | this.triggerOutgoingBinding(); | 585 | this.triggerOutgoingBinding(); |
586 | */ | ||
572 | 587 | ||
573 | newEvent.initCustomEvent("layerEvent", false, true); | 588 | newEvent.initCustomEvent("layerEvent", false, true); |
574 | newEvent.layerEventLocale = "styles"; | 589 | newEvent.layerEventLocale = "styles"; |
@@ -678,14 +693,21 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
678 | /* Begin: Event handlers */ | 693 | /* Begin: Event handlers */ |
679 | handleLayerNameChange: { | 694 | handleLayerNameChange: { |
680 | value: function(event) { | 695 | value: function(event) { |
681 | this.dynamicLayerName.value = this._layerEditable.value; | 696 | |
682 | this.needsDraw = true; | 697 | if (this._layerEditable.value !== this.layerName) { |
683 | this.application.ninja.documentController.activeDocument.needsSave = true; | 698 | this.layerName = this._layerEditable.value; |
684 | this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value); | 699 | this.application.ninja.documentController.activeDocument.needsSave = true; |
700 | this.layerData.stageElement.setAttribute("id",this._layerEditable.value); | ||
701 | } | ||
685 | } | 702 | } |
686 | }, | 703 | }, |
687 | handleAddStyleClick: { | 704 | handleAddStyleClick: { |
688 | value: function(event) { | 705 | value: function(event) { |
706 | |||
707 | this.isStyleCollapsed = false; | ||
708 | this.layerData.isStyleCollapsed = false; | ||
709 | this.triggerOutgoingBinding(); | ||
710 | |||
689 | this.addStyle(); | 711 | this.addStyle(); |
690 | } | 712 | } |
691 | }, | 713 | }, |
@@ -706,10 +728,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
706 | if (this._layerEditable.enteredValue.length === 0) { | 728 | if (this._layerEditable.enteredValue.length === 0) { |
707 | newVal = this._layerEditable._preEditValue; | 729 | newVal = this._layerEditable._preEditValue; |
708 | } | 730 | } |
709 | this.dynamicLayerName.value = newVal; | ||
710 | this.layerName = newVal; | 731 | this.layerName = newVal; |
711 | this.application.ninja.documentController.activeDocument.needsSave = true; | 732 | if (newVal !== this.layerName) { |
712 | this.needsDraw = true; | 733 | this.layerName = newVal; |
734 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
735 | this.layerData.stageElement.setAttribute("id", newVal); | ||
736 | } | ||
713 | } | 737 | } |
714 | }, | 738 | }, |
715 | handleMousedown: { | 739 | handleMousedown: { |
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css index 6c7542cb..0cc8a1f8 100644 --- a/js/panels/Timeline/Style.reel/css/Style.css +++ b/js/panels/Timeline/Style.reel/css/Style.css | |||
@@ -1,88 +1,36 @@ | |||
1 | /* Layer.scss | ||
2 | * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. | ||
3 | */ | ||
4 | /* <copyright> | 1 | /* <copyright> |
5 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
6 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
7 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
8 | </copyright> */ | 5 | </copyright> */ |
9 | /* | 6 | /* Layer.scss |
10 | * _colors.scss | 7 | * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. |
11 | * Defines the colors for the UI of the application. | ||
12 | * To create a new theme, copy this file and change the values as desired. | ||
13 | * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. | ||
14 | */ | ||
15 | /* Colors for radio buttons and other form elements */ | ||
16 | /* Base colors for dividers | ||
17 | * | ||
18 | * Dividers consist of a div with a background color and either | ||
19 | * a top & bottom border (in the case of horizontal dividers) | ||
20 | * or a left & right border (in the case of vertical dividers), | ||
21 | * for a total of three different colors. | ||
22 | * | ||
23 | */ | ||
24 | /* top and left */ | ||
25 | /* Middle */ | ||
26 | /* Bottom and right */ | ||
27 | /* Main background color of entire app */ | ||
28 | /* Main app background color. */ | ||
29 | /* rgba version */ | ||
30 | /* Main app border color */ | ||
31 | /* color of drop shadows */ | ||
32 | /* Stage color */ | ||
33 | /* body border color */ | ||
34 | /* Body background color */ | ||
35 | /* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ | ||
36 | /* Colors for tools: background, text, how they interact with the UI */ | ||
37 | /* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ | ||
38 | /* used for editable items in their non-edit state, etc. */ | ||
39 | /* Border for panel and for block elements */ | ||
40 | /* Shadow for text and block elements */ | ||
41 | /* Colors for scroll bars */ | ||
42 | /* <copyright> | ||
43 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
44 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
45 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
46 | </copyright> */ | ||
47 | /* | ||
48 | * themes/themename/mixins.scss | ||
49 | * Mixins that are theme-dependent (e.g. sprite mixins, etc) | ||
50 | */ | ||
51 | /* <copyright> | ||
52 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
53 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
54 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
55 | </copyright> */ | ||
56 | /* | ||
57 | * mixins.scss | ||
58 | * Generic mixins. Theme-specific mixins (e.g. for sprites) | ||
59 | * should go in the theme/themename/mixins.scss file. | ||
60 |