From 8fe92b94ce5e1e2857d088752d94e19db7e3d8a8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Sun, 17 Jun 2012 22:31:44 -0700 Subject: montage v11 merge into ninja Signed-off-by: Valerio Virgillito --- .../bluemoon/button-group.reel/button-group.html | 14 +- .../montage/ui/bluemoon/button.reel/button.html | 8 +- .../ui/bluemoon/checkbox.reel/checkbox.html | 6 +- .../montage/ui/bluemoon/checkbox.reel/checkbox.js | 6 +- .../montage/ui/bluemoon/progress.reel/progress.css | 33 +--- .../ui/bluemoon/progress.reel/progress.html | 9 +- .../montage/ui/bluemoon/slider.reel/slider.html | 7 +- .../montage/ui/bluemoon/tabs.reel/tabs.css | 126 +++++++++++++++ .../montage/ui/bluemoon/tabs.reel/tabs.html | 66 ++++++++ node_modules/montage/ui/bluemoon/tabs.reel/tabs.js | 180 +++++++++++++++++++++ .../ui/bluemoon/textarea.reel/textarea.html | 7 +- .../ui/bluemoon/textfield.reel/textfield.html | 8 +- .../ui/bluemoon/textfield.reel/textfield.js | 6 +- .../montage/ui/bluemoon/toggle.reel/toggle.html | 8 +- 14 files changed, 413 insertions(+), 71 deletions(-) create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.css create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.html create mode 100755 node_modules/montage/ui/bluemoon/tabs.reel/tabs.js (limited to 'node_modules/montage/ui/bluemoon') diff --git a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html index e56d0bab..e721f6b5 100644 --- a/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html +++ b/node_modules/montage/ui/bluemoon/button-group.reel/button-group.html @@ -5,21 +5,19 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. --> - - - - - - + - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/button.reel/button.html b/node_modules/montage/ui/bluemoon/button.reel/button.html index 4ec77f61..ef7f4d5c 100644 --- a/node_modules/montage/ui/bluemoon/button.reel/button.html +++ b/node_modules/montage/ui/bluemoon/button.reel/button.html @@ -6,20 +6,18 @@ --> - - + + - - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html index 9bbec1b7..9c54ec94 100644 --- a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html @@ -6,9 +6,9 @@ --> - - + + - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js index 58e5154d..eec8a476 100644 --- a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js +++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js @@ -4,17 +4,17 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ /** - @module "montage/ui/bluemoon/checkbox.reel" + @module "montage/ui/bluemoon/input-checkbox.reel" @requires montage/core/core @requires montage/ui/component */ var Montage = require("montage").Montage, Component = require("ui/component").Component; /** - @class module:"montage/ui/bluemoon/checkbox.reel".Checkbox + @class module:"montage/ui/bluemoon/input-checkbox.reel".Checkbox @extends module:montage/ui/component.Component */ -exports.Checkbox = Montage.create(Component,/** @lends "module:montage/ui/bluemoon/checkbox.reel".Checkbox# */ { +exports.Checkbox = Montage.create(Component,/** @lends "module:montage/ui/bluemoon/input-checkbox.reel".Checkbox# */ { // Configuration /** The distance (squared) beyond which a touch will be considered. diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.css b/node_modules/montage/ui/bluemoon/progress.reel/progress.css index cf9e6543..3887fab3 100644 --- a/node_modules/montage/ui/bluemoon/progress.reel/progress.css +++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.css @@ -10,18 +10,18 @@ overflow: hidden; background: #ccc url(rule.png); -webkit-box-shadow: inset rgba(0,0,0,.2) 0 0 0 1px, rgba(255,255,255,.5) 0 1px 1px, rgba(0,0,0,.1) 0 -1px 0px; + -moz-box-shadow: inset rgba(0,0,0,.2) 0 0 0 1px, rgba(255,255,255,.5) 0 1px 1px, rgba(0,0,0,.1) 0 -1px 0px; + box-shadow: inset rgba(0,0,0,.2) 0 0 0 1px, rgba(255,255,255,.5) 0 1px 1px, rgba(0,0,0,.1) 0 -1px 0px; } .montage-progress .bar { height: 7px; border-radius: inherit; - - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, - color-stop(12%, #35c9ff), color-stop(12%, #0cbeff), - color-stop(85%, #0aa5dd), color-stop(85%, #0996c9) ); + background: #0cbeff; -webkit-transition: width .3s cubic-bezier(0.25, 0.1, 0.3, 0.9); + -moz-transition: width .3s cubic-bezier(0.25, 0.1, 0.3, 0.9); + transition: width .3s cubic-bezier(0.25, 0.1, 0.3, 0.9); } .montage-progress.dark { @@ -29,23 +29,6 @@ color-stop(0%, #303030), color-stop(100%, #3f3f3f) ); -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0, rgba(0,0,0,.1) 0 -1px 0px; -} - -@-webkit-keyframes montage-progress-scroll { - from { - background-position: 0px top; - } - to { - background-position: -8px top; - } -} - -.montage-progress .bar.scrolling { - background-image: url("scroll.png"); - background-repeat: repeat-x; - background-position: 10px top; - -webkit-animation-name: montage-progress-scroll; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; -} + -moz-box-shadow: rgba(255,255,255,.1) 0 1px 0, rgba(0,0,0,.1) 0 -1px 0px; + box-shadow: rgba(255,255,255,.1) 0 1px 0, rgba(0,0,0,.1) 0 -1px 0px; +} \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/progress.reel/progress.html b/node_modules/montage/ui/bluemoon/progress.reel/progress.html index a3835fe6..81e82b1a 100644 --- a/node_modules/montage/ui/bluemoon/progress.reel/progress.html +++ b/node_modules/montage/ui/bluemoon/progress.reel/progress.html @@ -6,8 +6,8 @@ --> - - + + - -

- - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/slider.reel/slider.html b/node_modules/montage/ui/bluemoon/slider.reel/slider.html index e80a520e..1671d0c2 100644 --- a/node_modules/montage/ui/bluemoon/slider.reel/slider.html +++ b/node_modules/montage/ui/bluemoon/slider.reel/slider.html @@ -6,8 +6,8 @@ --> - - + + -

@@ -78,4 +77,4 @@

- + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css new file mode 100755 index 00000000..e3615a9b --- /dev/null +++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css @@ -0,0 +1,126 @@ +/* + 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. + */ +.montage-tabs { + position: relative; + display: inline-block; + border-radius: 26px; + + background-color: #ccc; + -webkit-box-shadow: rgba(255, 255, 255, .7) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px; +} + +.montage-tabs-indicator { + position: absolute; + left: 0; + top: 0; + height: 48px; + margin: 2px; + padding: 0px 10px; + border-radius: 24px; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6)); + -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px; + +} + +.montage-tabs-list { + padding: 0; + margin: 0; + position: relative; +} + +.montage-tabs-list li { + display: inline-block; + line-height: 46px; + margin: 3px; + padding: 0 10px; + border-radius: 26px; + font-family: 'AGBuchBQRegular', Helvetica, sans-serif; + font-size: 18px; + color: #555; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + cursor: pointer; +} + +.montage-tabs-list li.selected { + color: #333; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6)); + padding: 0 10px; + -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px; +} + +.montage-tabs-list li img { + margin-bottom: -2px; /* based on 16px icons */ + opacity: .5; +} + +.montage-tabs-list li.selected img { + opacity: 1; +} + +.montage-tabs-list li span { + margin: 0; + padding: 0; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* states */ + +.montage-tabs-list li.pressed { + background-color: #aaa; + -webkit-box-shadow: rgba(255, 255, 255, .2) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px; + -webkit-transition: background-color .15s ease-out; +} + +/* ----------------------- Small ----------------------- */ + +/* tab width: 70px */ + +.montage-tabs.small .montage-tabs-indicator { + height: 27px; +} + +.montage-tabs.small .montage-tabs-list li { + padding: 0 10px; + line-height: 25px; + + font-size: 12px; +} + +/* ----------------------- Dark theme ----------------------- */ + +.montage-tabs.dark { + background-color: #404040; + -webkit-box-shadow: rgba(255, 255, 255, .25) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px; +} + +.montage-tabs.dark .montage-tabs-indicator { + background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #767676), color-stop(100%, #5c5c5c)); + +} + +.montage-tabs.dark .montage-tabs-list li { + color: #bbb; +} + +.montage-tabs.dark .montage-tabs-list li.selected { + color: #333; +} + +/* states */ + +.montage-tabs.dark .montage-tabs-list li.pressed { + background-color: #333; + -webkit-box-shadow: rgba(255, 255, 255, .05) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px; +} diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html new file mode 100755 index 00000000..9beda2b0 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html @@ -0,0 +1,66 @@ + + + + + + + + + +

+ +

+ + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js new file mode 100755 index 00000000..4836e455 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js @@ -0,0 +1,180 @@ +/* + 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. + */ +/** + @module "montage/ui/tabs.reel" + @requires montage/core/core + @requires montage/ui/component + @requires "montage/ui/repetition.reel" + @requires "montage/ui/substitution.reel" + @requires "montage/ui/dynamic-text.reel" + @requires "montage/ui/image.reel" + @requires montage/core/uuid +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component, + Repetition = require("ui/repetition.reel").Repetition, + Substitution = require("ui/substitution.reel").Substitution, + DynamicText = require("ui/dynamic-text.reel").DynamicText, + Image = require("ui/image.reel").Image, + Uuid = require("core/uuid").Uuid; + +/** + @class module:"montage/ui/tabs.reel".Tabs +*/ + +var Tabs = exports.Tabs = Montage.create(Component, /** @lends module:"montage/ui/tabs.reel".Tabs# */ { + + _repetition: { + value: null, + serializable: true + }, + + _indicator: { + value: null, + serializable: true + }, +/** + Description TODO + @type {Property} + @default {Array} [] + */ + tabs: { + distinct: true, + serializable: true, + value: [] + }, + + navController: { + value: null, + serializable: true + }, + // optional property. If provided, this will result in wiring tab clicks to switching components in content + /** + Description TODO + @type {Property} + @default null + */ + content: { + enumerable: false, + serializable: true, + value: null + }, + + // @private - + _selectedTabs: {value: null}, + selectedTabs: { + get: function() { + return this._selectedTabs; + }, + set: function(arr) { + if(arr && arr.length > 0) { + this._selectedTabs = arr; + this.selectedTab = arr[0]; + } + } + }, + + // selectedTabValue is the value of the Tab, selectedTab returns the object representing the tab + + _selectedTabValue: {value: null}, + selectedTabValue: { + get: function() { + return this._selectedTabValue; + }, + set: function(value) { + this._selectedTabValue = value; + if(this.navController) { + var index = this._indexOf(value); + this.navController.selectedIndexes = [index]; + } + }, + serializable: true + }, + + + _selectedTab: {value: null}, + selectedTab: { + enumerable: false, + get: function() { + return this._selectedTab; + }, + set: function(value) { + if(value && value !== this._selectedTab) { + this._selectedTab = value; + this.needsDraw = true; + } + } + }, + + _indexOf: { + value: function(value) { + var index = 0; + // get the index of the this value element in the tabs array + var i = 0, len = this.tabs.length; + for (; i < len; i++) { + if (this.tabs[i].value === value) { + index = i; + } + } + return index; + + } + }, + + propertyChangeBindingListener: { + value: function(type, listener, useCapture, atSignIndex, bindingOrigin, bindingPropertyPath, bindingDescriptor) { + // kishore: same as in list.js + if (bindingDescriptor.boundObjectPropertyPath.match(/objectAtCurrentIteration/)) { + if (this._repetition) { + bindingDescriptor.boundObject = this._repetition; + return this._repetition.propertyChangeBindingListener.apply(this._repetition, arguments); + } else { + return null; + } + } else { + return Object.prototype.propertyChangeBindingListener.apply(this, arguments); + } + } + }, + + deserializedFromTemplate: { + value: function() { + this._orphanedChildren = this.childComponents; + this.childComponents = null; + } + }, + + templateDidLoad: { + value: function() { + var orphanedFragment, + currentContentRange = this.element.ownerDocument.createRange(); + currentContentRange.selectNodeContents(this.element); + orphanedFragment = currentContentRange.extractContents(); + + this._repetition.element.querySelector('li').appendChild(orphanedFragment); + this._repetition.childComponents = this._orphanedChildren; + this._repetition.needsDraw = true; + + if(this.content) { + // substitution + Object.defineBinding(this.content, "switchValue", { + boundObject: this, + boundObjectPropertyPath: 'selectedTab.value' + }); + } + var index = (this.selectedTabValue ? this._indexOf(this.selectedTabValue) : 0); + this.navController.selectedIndexes = [index]; + + } + }, + + draw: { + value: function() { + //console.log("draw current tab = " + value); + } + } + +}); diff --git a/node_modules/montage/ui/bluemoon/textarea.reel/textarea.html b/node_modules/montage/ui/bluemoon/textarea.reel/textarea.html index 850fe533..d323bb53 100644 --- a/node_modules/montage/ui/bluemoon/textarea.reel/textarea.html +++ b/node_modules/montage/ui/bluemoon/textarea.reel/textarea.html @@ -6,10 +6,9 @@ --> - - + + - - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/textfield.reel/textfield.html b/node_modules/montage/ui/bluemoon/textfield.reel/textfield.html index 4175d1d3..25618843 100644 --- a/node_modules/montage/ui/bluemoon/textfield.reel/textfield.html +++ b/node_modules/montage/ui/bluemoon/textfield.reel/textfield.html @@ -6,11 +6,9 @@ --> - - - + + - - + \ No newline at end of file diff --git a/node_modules/montage/ui/bluemoon/textfield.reel/textfield.js b/node_modules/montage/ui/bluemoon/textfield.reel/textfield.js index 6de3d636..eb8e482f 100644 --- a/node_modules/montage/ui/bluemoon/textfield.reel/textfield.js +++ b/node_modules/montage/ui/bluemoon/textfield.reel/textfield.js @@ -4,17 +4,17 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ /** - @module "montage/ui/bluemoon/textfield.reel" + @module "montage/ui/bluemoon/input-text.reel" @requires montage/core/core @requires montage/ui/editable-text */ var Montage = require("montage").Montage, EditableText = require("ui/editable-text").EditableText; /** - @class module:"montage/ui/bluemoon/textfield.reel".Textfield + @class module:"montage/ui/bluemoon/input-text.reel".Textfield @extends module:montage/ui/editable-text.EditableText */ -var Textfield = exports.Textfield = Montage.create(EditableText,/** @lends module:"montage/ui/bluemoon/textfield.reel".Textfield# */ { +var Textfield = exports.Textfield = Montage.create(EditableText,/** @lends module:"montage/ui/bluemoon/input-text.reel".Textfield# */ { /** Description TODO @type {Property} diff --git a/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html index 33b847ef..30acaa10 100644 --- a/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html +++ b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html @@ -6,11 +6,9 @@ --> - - - + + - - + \ No newline at end of file -- cgit v1.2.3