From f97e4b6ab1db9fb7de18b2e44c1b0edcf2ba072d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 12 Jun 2012 16:47:15 -0700 Subject: Timeline: New popup menu for easing choices. --- js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 34 +++++++++ js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 38 ++++++++++ .../Timeline/EasingMenu.reel/css/EasingMenu.css | 86 ++++++++++++++++++++++ .../Timeline/EasingMenu.reel/scss/EasingMenu.scss | 85 +++++++++++++++++++++ js/panels/Timeline/EasingMenu.reel/scss/config.rb | 9 +++ 5 files changed, 252 insertions(+) create mode 100644 js/panels/Timeline/EasingMenu.reel/EasingMenu.html create mode 100644 js/panels/Timeline/EasingMenu.reel/EasingMenu.js create mode 100644 js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css create mode 100644 js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss create mode 100644 js/panels/Timeline/EasingMenu.reel/scss/config.rb (limited to 'js/panels/Timeline/EasingMenu.reel') diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html new file mode 100644 index 00000000..82218b45 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html @@ -0,0 +1,34 @@ + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..b736ea59 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -0,0 +1,38 @@ +/* + 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. +
*/ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Popup = require("montage/ui/popup/popup.reel").Popup; + +var EasingMenu = exports.EasingMenu = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + draw: { + value: function() { + console.log("EasingMenu.draw") + } + }, + + show: { + value: function() { + var popup, easingMenu; + popup = Popup.create(); + this._popup = popup; + + popup.modal = false; + + easingMenu = EasingMenu.create(); + popup.content = easingMenu; + + popup.show(); + } + } + +}); diff --git a/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css b/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css new file mode 100644 index 00000000..ec300304 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css @@ -0,0 +1,86 @@ +@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. +
*/ +/* Layer.scss + * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.css. + */ +/* + * Easing picker + */ +/* line 26, ../scss/EasingMenu.scss */ +.container-easing-choice { + position: absolute; + top: 2px; + right: 8px; + font-size: 10px; + line-height: 8px; + border: 1px solid black; + color: white; + background-color: #474747; +} + +/* line 38, ../scss/EasingMenu.scss */ +.container-easing, +.container-easing-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; + width: 70px; + white-space: nowrap; +} + +/* line 44, ../scss/EasingMenu.scss */ +.container-easing, +.container-easing-choice .easing-choice { + height: 10px; +} + +/* line 47, ../scss/EasingMenu.scss */ +.container-easing-easing-choice .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} + +/* line 54, ../scss/EasingMenu.scss */ +.container-easing-choices .easing-choices { + position: absolute; + 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 68, ../scss/EasingMenu.scss */ +.container-easing-choices .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +/* line 79, ../scss/EasingMenu.scss */ +.container-easing-choices .easing-choices li:hover, +.container-easing-choices .easing-choices li.easing-selected { + color: #242424; + background-color: #b2b2b2; +} + +/* line 83, ../scss/EasingMenu.scss */ +.container-easing-choices .easing-choices li.easing-selected { + cursor: default; +} diff --git a/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss b/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss new file mode 100644 index 00000000..b7b1c70d --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss @@ -0,0 +1,85 @@ +@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. +
*/ + +/* Layer.scss + * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.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"; + +/* + * Easing picker + */ + +.container-easing-choice { + position: absolute; + top: 2px; + right: 8px; + 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-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; + width: 70px; + white-space: nowrap; +} +.container-easing, +.container-easing-choice .easing-choice { + height: 10px; +} +.container-easing-easing-choice .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} +.container-easing-choices .easing-choices { + position: absolute; + 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-choices .easing-choices li { + list-style-type: none; + margin: 0px; + padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +.container-easing-choices .easing-choices li:hover, +.container-easing-choices .easing-choices li.easing-selected { + color: $color-menu-hilite-text; + background-color: $color-menu-hilite-bg; +} +.container-easing-choices .easing-choices li.easing-selected { + cursor: default; +} \ No newline at end of file diff --git a/js/panels/Timeline/EasingMenu.reel/scss/config.rb b/js/panels/Timeline/EasingMenu.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.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