From f3dc624fa464a79fd8e8cec1ddd16ed2109bda23 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:05:27 -0800 Subject: Revert "Merge from /joseeight/ninja-internal/tree/FileIO" This reverts commit c48eeb01bd726895dc577d8b843b2a75883eee07. Signed-off-by: Ananya Sen --- js/panels/Timeline/Style.reel/Style.html | 91 ---- js/panels/Timeline/Style.reel/Style.js | 648 -------------------------- js/panels/Timeline/Style.reel/css/Style.css | 133 ------ js/panels/Timeline/Style.reel/scss/Style.scss | 70 --- js/panels/Timeline/Style.reel/scss/config.rb | 9 - 5 files changed, 951 deletions(-) delete mode 100644 js/panels/Timeline/Style.reel/Style.html delete mode 100644 js/panels/Timeline/Style.reel/Style.js delete mode 100644 js/panels/Timeline/Style.reel/css/Style.css delete mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss delete mode 100644 js/panels/Timeline/Style.reel/scss/config.rb (limited to 'js/panels/Timeline/Style.reel') diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html deleted file mode 100644 index c6f29626..00000000 --- a/js/panels/Timeline/Style.reel/Style.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - - -

- - - -

- - \ No newline at end of file diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js deleted file mode 100644 index e6e03901..00000000 --- a/js/panels/Timeline/Style.reel/Style.js +++ /dev/null @@ -1,648 +0,0 @@ -/* - * Style component: Edits and manages a single style rule for a Layer in the Timeline. - * Public Properties: - * editorProperty: The CSS property for the style. - * editorValue: The value for the editorProperty. - * whichView: Which view to show, the hintable view (where a new property can be typed in) - * or the propval view (where the property's value can be set with the tweener). - * Valid values are "hintable" and "propval", defaults to "hintable". - * - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -var LayerStyle = exports.LayerStyle = Montage.create(Component, { - - hasTemplate:{ - value: true - }, - - /* === BEGIN: Models === */ - // isSelected: whether or not the style is selected - _isSelected: { - serializable: true, - value: false - }, - isSelected: { - serializable: true, - get: function() { - return this._isSelected; - }, - set: function(newVal) { - if (newVal !== this._isSelected) { - this._isSelected = newVal; - this.needsDraw = true; - } - } - }, - - /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with - * parent Layer. - */ - _isActive: { - value: false - }, - isActive: { - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - } - }, - - // Property for this editor - _editorProperty: { - serializable: true, - value: "" - }, - editorProperty: { - serializable: true, - get: function() { - return this._editorProperty; - }, - set: function(newVal) { - this._editorProperty = newVal; - this.needsDraw = true; - } - }, - - // Value for the property for this editor. - _editorValue: { - serializable: true, - value: "" - }, - editorValue: { - serializable: true, - get: function() { - return this._editorValue; - }, - set: function(newVal) { - this._editorValue = newVal; - this.needsDraw = true; - } - }, - - // The tweener used to change the value for this property. - _ruleTweener: { - serializable: true, - value: false - }, - ruleTweener: { - serializable: true, - get: function() { - return this._ruleTweener; - }, - set: function(newVal) { - this._ruleTweener = newVal; - this.needsDraw = true; - } - }, - - // The hintable we use to change the Property - _myHintable: { - value: "" - }, - myHintable: { - get: function() { - return this._myHintable; - }, - set: function(newVal) { - this._myHintable = newVal; - } - }, - _myHintableValue : { - value: null - }, - myHintableValue: { - get: function() { - return this._myHintableValue; - }, - set: function(newVal) { - this._myHintableValue = newVal; - } - }, - - // swapViews: Is a view swap happening? - _swapViews : { - value: true - }, - - // whichView: which view should we show: hintable or propval - _whichView : { - serializable: true, - value: "hintable" - }, - whichView: { - serializable: true, - get: function() { - return this._whichView; - }, - set: function(newVal) { - if (this._whichView !== newVal) { - if ((newVal !== "hintable") && (newVal !== "propval")) { - this.log("Error: Unknown view -"+newVal+"- requested for style.js."); - return; - } - this._whichView = newVal; - this._swapViews = true; - this.needsDraw = true; - } - } - }, - - // styleID: the id for this style; - // Used to publish events - _styleID : { - serializable: true, - value: null - }, - styleID: { - serializable: true, - get: function() { - return this._styleID; - }, - set: function(newVal) { - this._styleID = newVal; - this.needsDraw = true; - } - }, - - handleMousedown: { - value: function(event) { - this.isActive = true; - } - }, - - /* === END: Models === */ - - /* === BEGIN : Draw cycle === */ - prepareForDraw: { - value: function() { - this.init(); - } - }, - draw: { - value: function() { - - if (this._swapViews === true) { - // Show the right thing - this._showView(); - } - if (this.isSelected) { - this.element.classList.add("selected"); - } else { - this.element.classList.remove("selected"); - } - } - }, - didDraw: { - value: function() { - if (this._swapViews === true) { - // View swap has been completed. - this._swapViews === false; - } - } - }, - /* === END: Draw cycle === */ - - /* === BEGIN: controllers === */ - - // handleStylePropertyDblClick: What happens when the user double-clicks on the style property - handleStylePropertyDblclick: { - value: function(event) { - this.whichView = "hintable"; - } - }, - - // handleHintableStop: What happens when the hintable issues its stop event - handleHintableStop: { - value: function(event) { - // this should be handled via binding, but somehow is not. Setting manually for now. - this.editorProperty = this.myHintable.value; - - // Change views. - this.whichView = "propval"; - } - }, - - // Init: Initialize the component with some useful selectors and other defaults. - init : { - value: function() { - - var arrHints = [], - i = 0; - - // Get the array of hints from _myTweenables: - for (i = 0; i < this._myTweenables.length; i++) { - arrHints.push(this._myTweenables[i].property) - } - - // Set useful information for the hintable - this.myHintable.editingClass = "editable2"; - this.myHintable.hints = arrHints; - - // Bind a handler to the Hintable's change event - this.myHintable.identifier = "hintable"; - this.myHintable.addEventListener("stop", this, false); - - // Add the click handler to the styleProperty: When the user double-clicks on it, we want to start the editor. - this.styleProperty.identifier = "styleProperty"; - this.styleProperty.addEventListener("dblclick", this, false); - - // Get some selectors that we'll be using - this.editorHottextContainer = this.element.querySelector(".editor-hottext"); - this.editorInputContainer = this.element.querySelector(".editor-input"); - this.editorColorContainer = this.element.querySelector(".editor-color"); - this.containerHintable = this.element.querySelector(".row-hintable"); - this.containerPropvals = this.element.querySelector(".container-propvals"); - this.valueEditorInput = this.element.querySelector(".editor-input input"); - - // mousedown listener to handle - this.element.addEventListener("mousedown", this, false); - } - }, - - // showView: Show the appropriate view - _showView : { - value: function() { - if (this.whichView === "hintable") { - this.containerHintable.classList.remove("hidden"); - this.containerPropvals.classList.add("hidden"); - this.myHintable.start(); - } else { - this.containerHintable.classList.add("hidden"); - this.containerPropvals.classList.remove("hidden"); - this._showTweener(); - } - } - }, - - // showTweener: show the appropriate tweener - _showTweener : { - value: function() { - // Which tweener should we show? - // First, get the appropriate editor type from the data structure. - var tweenable = {}, - i = 0; - - tweenable.tweener = "input"; - - for (i = 0; i < this._myTweenables.length; i++) { - if (this._myTweenables[i].property === this.editorProperty) { - tweenable = this._myTweenables[i]; - } - } - - if (tweenable.tweener === "hottext" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.remove("hidden"); - this.valueEditorHottext.acceptableUnits = [tweenable.units]; - this.valueEditorHottext.units = tweenable.units; - this.valueEditorHottext.minValue = tweenable.min; - this.valueEditorHottext.maxValue = tweenable.max; - this.valueEditorHottext.needsDraw = true; - } else if (tweenable.tweener === "color" ) { - this.editorInputContainer.classList.add("hidden"); - this.editorColorContainer.classList.remove("hidden"); - this.editorHottextContainer.classList.add("hidden"); - // TODO: set up color chip here. - } else if (tweenable.tweener === "input"){ - this.editorInputContainer.classList.remove("hidden"); - this.editorColorContainer.classList.add("hidden"); - this.editorHottextContainer.classList.add("hidden"); - this.valueEditorInput.value = this.editorValue; - } else { - this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") - } - } - }, - - /* === END: Controllers === */ - - _myTweenables: { - value: [ - { - "property" : "background-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" :"#FFFFFF" - }, - { - "property" : "background-position-x", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "background-position-y", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-color", - "tweener" : "color", - "units" : "", - "min" : "", - "max" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-bottom-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-bottom-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-left-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-left-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-top-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-top-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-right-color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "border-right-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "border-radius", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "color", - "tweener" : "color", - "units" : "", - "default" : "#FFFFFF" - }, - { - "property" : "margin", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "margin-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-left", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-right", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-top", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "padding-bottom", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "max-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "min-width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "opacity", - "tweener" : "hottext", - "units" : "%", - "min" : 0, - "max" : 100, - "default" : 100 - }, - { - "property" : "text-indent", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "top", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "right", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "left", - "tweener" : "hottext", - "units" : "px", - "min" : -9999, - "max" : 9999, - "default" : 0 - }, - { - "property" : "width", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - }, - { - "property" : "height", - "tweener" : "hottext", - "units" : "px", - "min" : 0, - "max" : 9999, - "default" : 0 - } - ] - - }, - - /* Begin: Logging routines */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { - return this._boolDebug; - }, - set: function(boolDebugSwitch) { - this._boolDebug = boolDebugSwitch; - } - }, - log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } - }, - getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } - } - /* End: Logging routines */ - -}); \ No newline at end of file diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css deleted file mode 100644 index 6c7542cb..00000000 --- a/js/panels/Timeline/Style.reel/css/Style.css +++ /dev/null @@ -1,133 +0,0 @@ -/* 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 12, ../scss/Style.scss */ -.hidden { - display: none; -} - -/* line 15, ../scss/Style.scss */ -.row-editor { - position: relative; - height: 14px; -} - -/* line 19, ../scss/Style.scss */ -.style-padding { - padding-left: 5px; - padding-top: 3px; - padding-right: 5px; -} - -/* line 24, ../scss/Style.scss */ -.style-row { - height: 20px; - border-bottom: 1px solid #505050; -} - -/* line 29, ../scss/Style.scss */ -div.content-style div.editable2 { - height: 14px; - background-color: #242424 !important; - color: #b2b2b2 !important; - border-width: 0px; - font-size: 11px; - overflow: hidden; - -webkit-user-select: text; - white-space: nowrap; - text-overflow: clip; - width: 100%; -} - -/* line 43, ../scss/Style.scss */ -.content-style.collapsible-content, -.content-style.collapsible-content div, -.content-style.collapsible-content span { - overflow: visible; - text-overflow: visible; -} - -/* line 48, ../scss/Style.scss */ -div.content-style div.cell-property, -div.content-style div.cell-value { - width: 45%; - float: left; - height: 18px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 18px; -} - -/* line 57, ../scss/Style.scss */ -div.content-style div.cell-property div { - min-width: 90%; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* line 65, ../scss/Style.scss */ -div.content-style input.nj-skinned { - height: 10px; - font-size: 12px; - top: -3px; -} diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss deleted file mode 100644 index f15f553d..00000000 --- a/js/panels/Timeline/Style.reel/scss/Style.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* Layer.scss - * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. - */ - -// Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -@import "../../../../../_scss/imports/themes/default/mixins"; - -// Import generic mixins and styles -@import "../../../../../_scss/imports/scss/mixins"; - -.hidden { - display: none; -} -.row-editor { - position: relative; - height: 14px; -} -.style-padding { - padding-left: 5px; - padding-top: 3px; - padding-right: 5px; -} -.style-row { - height: 20px; - border-bottom: 1px solid $color-menu-divider; -} - -div.content-style div.editable2 { - height: 14px; - background-color: $color-panel-hilite-text !IMPORTANT; - color: $color-panel-hilite-bg !IMPORTANT; - border-width: 0px; - font-size: 11px; - overflow: hidden; - -webkit-user-select: text; - white-space: nowrap; - text-overflow: clip; - width: 100%; -} -.content-style.collapsible-content, -.content-style.collapsible-content div, -.content-style.collapsible-content span { - overflow: visible; - text-overflow: visible; -} -div.content-style div.cell-property, -div.content-style div.cell-value { - width: 45%; - float: left; - height: 18px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 18px; -} -div.content-style div.cell-property div { - min-width: 90%; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -div.content-style input.nj-skinned { - height: 10px; - font-size: 12px; - top: -3px; -} - diff --git a/js/panels/Timeline/Style.reel/scss/config.rb b/js/panels/Timeline/Style.reel/scss/config.rb deleted file mode 100644 index e5a99b70..00000000 --- a/js/panels/Timeline/Style.reel/scss/config.rb +++ /dev/null @@ -1,9 +0,0 @@ -# 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