From d3f67c2e306cb1888099f4decba00a9d8727cc43 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 22 May 2012 18:23:36 -0700 Subject: Timeline: New easing selector in spans. --- js/panels/Timeline/Span.reel/Span.html | 17 +++- js/panels/Timeline/Span.reel/Span.js | 78 ++++++++++++++++++- js/panels/Timeline/Span.reel/css/Span.css | 90 +++++++++++++++++++--- js/panels/Timeline/Span.reel/scss/Span.scss | 87 +++++++++++++++++++++ js/panels/Timeline/Span.reel/scss/config.rb | 9 +++ .../TimelineTrack.reel/css/TimelineTrack.css | 2 +- .../TimelineTrack.reel/scss/TimelineTrack.scss | 2 +- 7 files changed, 270 insertions(+), 15 deletions(-) create mode 100644 js/panels/Timeline/Span.reel/scss/Span.scss create mode 100644 js/panels/Timeline/Span.reel/scss/config.rb (limited to 'js') diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index 8baa141a..d6c359ad 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -13,7 +13,10 @@ "owner": { "prototype": "js/panels/Timeline/Span.reel", "properties": { - "element": {"#": "spanspace"} + "element": {"#": "spanspace"}, + "container_easing" : {"#" : "container_easing"}, + "easing_choice" : {"#": "easing_choice"}, + "easing_choices" : {"#" : "easing_choices"} } } @@ -23,6 +26,18 @@
+
+
+
+ ease-in-out +
+ +
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bfa6aab8..e5894500 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, { value: true }, + // BEGIN: Models _spanWidth:{ value:0 }, - spanWidth:{ serializable:true, get:function () { @@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, { this.needsDraw = true; } }, - + + _isHighlighted: { + value: false + }, + isHighlighted: { + get: function() { + return this._isHighlighted; + }, + set: function(newVal) { + if (newVal !== this._isHighlighted) { + this._isHighlighted = newVal; + this.needsDraw = true; + } + } + }, + + _areChoicesVisible: { + value: false + }, + areChoicesVisible: { + get: function() { + return this._areChoicesVisible; + }, + set: function(newVal) { + if (newVal !== this._areChoicesVisible) { + this._areChoicesVisible = newVal; + this.needsDraw = true; + } + } + }, + + // BEGIN: draw cycle + prepareForDraw: { + value: function() { + this.init(); + } + }, + draw:{ value: function(){ this.element.style.width = this.spanWidth + "px"; + + // Highlight the span? + if (this.isHighlighted === true) { + this.element.classList.add("spanHighlight"); + } else { + this.element.classList.remove("spanHighlight"); + } + + // Hide or show the choices menu? + if (this.areChoicesVisible === true) { + this.easing_choices.style.display = "block"; + } else { + this.easing_choices.style.display = "none"; + } } }, + // BEGIN: Controllers + init: { + value: function() { + this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); + this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); + } + }, + highlightSpan:{ value: function(){ - this.element.classList.add("spanHighlight"); + // Class add/remove should only be done in draw cycle. + // this.element.classList.add("spanHighlight"); + this.isHighlighted = true; } + }, + + handleEasingChoiceClick: { + value: function(event) { + this.areChoicesVisible = true; + } + }, + handleEasingChoicesClick: { + value: function(event) { + this.areChoicesVisible = false; + } } }); diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 198d71f3..16f931b2 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -1,17 +1,89 @@ +@charset "UTF-8"; /* 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. */ +/* Span.scss + * Main SCSS file for Span component, compiled by SASS into the file css/Span.css. + */ +/* line 22, ../scss/Span.scss */ +.tween_span { + position: absolute; + height: 16px; +} + +/* line 26, ../scss/Span.scss */ +.tween_span .tween_span_bar { + width: 100%; + height: 100%; + background-color: #fff; + opacity: 0.15; +} + +/* line 33, ../scss/Span.scss */ +.tween_span.spanHighlight .tween_span_bar { + background-color: #a0c8ff; + opacity: 0.4; +} + +/* + * Easing picker + */ +/* line 42, ../scss/Span.scss */ +.container-easing { + position: absolute; + top: 2px; + right: 6px; + font-size: 10px; + line-height: 8px; + border: 1px solid black; + color: white; + background-color: #474747; +} -.tween_span{ - position: absolute; - height: 16px; - opacity: 0.15; - background-color: white; +/* line 54, ../scss/Span.scss */ +.container-easing, +.container-easing .easing-choice, +.container-easing .easing-choices { + width: 70px; } -.tween_span.spanHighlight{ - background-color: #a0c8ff; - opacity: 0.4; -} \ No newline at end of file +/* line 58, ../scss/Span.scss */ +.container-easing, +.container-easing .easing-choice { + height: 10px; +} + +/* line 61, ../scss/Span.scss */ +.container-easing .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} + +/* line 68, ../scss/Span.scss */ +.container-easing .easing-choices { + position: absolute; + display: none; + bottom: -1px; + left: -1px; + z-index: 100; + height: auto; + border: 1px solid black; + color: white; + background-color: #474747; + overflow: hidden; + list-style-type: none; + margin: 0px; + padding: 0px; +} + +/* line 83, ../scss/Span.scss */ +.container-easing .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; +} diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss new file mode 100644 index 00000000..a39cf465 --- /dev/null +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -0,0 +1,87 @@ +@charset "UTF-8"; + +/* + 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. + */ + +/* Span.scss + * Main SCSS file for Span component, compiled by SASS into the file css/Span.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"; + +.tween_span{ + position: absolute; + height: 16px; +} +.tween_span .tween_span_bar { + width: 100%; + height: 100%; + background-color: #fff; + opacity: 0.15; +} + +.tween_span.spanHighlight .tween_span_bar { + background-color: #a0c8ff; + opacity: 0.4; +} + +/* + * Easing picker + */ + +.container-easing { + position: absolute; + top: 2px; + right: 6px; + font-size: 10px; + line-height: 8px; + border: 1px solid $color-menu-border; + color: $color-menu-text; + background-color: $color-menu-bg; +} +.container-easing, +.container-easing .easing-choice, +.container-easing .easing-choices { + width: 70px; +} +.container-easing, +.container-easing .easing-choice { + height: 10px; +} +.container-easing .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} +.container-easing .easing-choices { + position: absolute; + display: none; + bottom: -1px; + left: -1px; + z-index: 100; + height: auto; + border: 1px solid $color-menu-border; + color: $color-menu-text; + background-color: $color-menu-bg; + overflow: hidden; + list-style-type: none; + margin: 0px; + padding: 0px; +} +.container-easing .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; +} diff --git a/js/panels/Timeline/Span.reel/scss/config.rb b/js/panels/Timeline/Span.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/Span.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 diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index 03d1cf8d..9ea5ce01 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -17,7 +17,7 @@ border-bottom-style: solid; border-bottom-width: thin; background-image: url("../images/gridline.jpg"); - overflow: hidden; + overflow: visible; } /* line 34, ../scss/TimelineTrack.scss */ diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss index 1b025c74..bad754a6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -28,7 +28,7 @@ border-bottom-style: solid; border-bottom-width: thin; background-image: url("../images/gridline.jpg"); - overflow: hidden; + overflow: visible; } .keyframe{ -- cgit v1.2.3