From 8f78cb1377009dabde95f4a81d5090b79b9de0da Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 17 Jul 2012 23:34:57 -0700 Subject: menu design update and bug fixes - Moved Preview to the document bar - Redesigned the menu and improved DOM structure. - Removed un-used entires - Fixed layout and snap entries - Moved the preview button to the document bar. - Fixes for bugs: #1750, #1867, #1876, #1895 Signed-off-by: Valerio Virgillito --- js/ui/menu/menu-controller.js | 636 +++++++++++++++++++++++++++++ js/ui/menu/menu-entry.reel/menu-entry.css | 80 ++++ js/ui/menu/menu-entry.reel/menu-entry.html | 102 +++++ js/ui/menu/menu-entry.reel/menu-entry.js | 110 +++++ js/ui/menu/menu-item.reel/menu-item.css | 149 +++++++ js/ui/menu/menu-item.reel/menu-item.html | 120 ++++++ js/ui/menu/menu-item.reel/menu-item.js | 208 ++++++++++ js/ui/menu/menu.reel/menu.css | 39 ++ js/ui/menu/menu.reel/menu.html | 94 +++++ js/ui/menu/menu.reel/menu.js | 183 +++++++++ 10 files changed, 1721 insertions(+) create mode 100644 js/ui/menu/menu-controller.js create mode 100755 js/ui/menu/menu-entry.reel/menu-entry.css create mode 100755 js/ui/menu/menu-entry.reel/menu-entry.html create mode 100755 js/ui/menu/menu-entry.reel/menu-entry.js create mode 100755 js/ui/menu/menu-item.reel/menu-item.css create mode 100755 js/ui/menu/menu-item.reel/menu-item.html create mode 100755 js/ui/menu/menu-item.reel/menu-item.js create mode 100755 js/ui/menu/menu.reel/menu.css create mode 100755 js/ui/menu/menu.reel/menu.html create mode 100755 js/ui/menu/menu.reel/menu.js (limited to 'js/ui') diff --git a/js/ui/menu/menu-controller.js b/js/ui/menu/menu-controller.js new file mode 100644 index 00000000..43e1b0b0 --- /dev/null +++ b/js/ui/menu/menu-controller.js @@ -0,0 +1,636 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.MenuController = Montage.create(Component, { + + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + if(this._currentDocument && this._currentDocument.currentView === "design") { + this._currentDocument.model.draw3DGrid = document.application.model.show3dGrid; + } + + this._currentDocument = value; + + if(this._currentDocument && this._currentDocument.currentView === "design") { + document.application.model.show3dGrid = this._currentDocument.model.draw3DGrid; + this.topLevelMenu[2].entries[4].checked = this._currentDocument.model.draw3DGrid; + } + + if(!this._currentDocument) { + // No document - disable all menu items + this.documentEnabledItems.forEach(function(index) { + index.enabled = false; + }); + this.designDocumentEnabledItems.forEach(function(index) { + index.enabled = false; + }); + } else { + this.documentEnabledItems.forEach(function(index) { + index.enabled = true; + }); + + if(this.currentDocument.currentView === "design") { + this.designDocumentEnabledItems.forEach(function(index) { + index.enabled = true; + }); + } else { + this.designDocumentEnabledItems.forEach(function(index) { + index.enabled = false; + }); + } + } + + } + }, + + didCreate: { + value: function() { + var self = this; + + this.topLevelMenu.forEach(function(item) { + item.entries.forEach(function(entry) { + if(entry.depend) { + if(entry.depend === "document") { + self.documentEnabledItems.push(entry); + } else if(entry.depend === "designDocument") { + self.designDocumentEnabledItems.push(entry); + } + } + }); + }); + } + }, + + documentEnabledItems: { + value: [] + }, + + designDocumentEnabledItems: { + value: [] + }, + + toggleItem: { + value: function(value) { +// var f = value.substr(0, value.indexOf("-")); +// var c = value.slice(value.indexOf("-") + 1); + + this['handle' + value.substr(0, value.indexOf("-"))](value.slice(value.indexOf("-") + 1)); + } + }, + + + handlelayout: { + value: function(value) { + this.topLevelMenu[2].entries[2].entries.forEach(function(entry) { + if(entry.boundProperty === value && !entry.checked){ + entry.checked = true; + document.application.model.layoutView = value; + } else if(entry.boundProperty !== value && entry.checked) { + entry.checked = false; + } + }); + } + }, + + handlesnap: { + value: function(value) { + if(value === "onoff") { + this.topLevelMenu[2].entries[3].checked = !this.topLevelMenu[2].entries[3].checked; + this.topLevelMenu[2].entries[4].enabled = this.topLevelMenu[2].entries[3].checked; + document.application.model.snap = value; + } else { + this.topLevelMenu[2].entries[4].entries.forEach(function(entry) { + if(entry.boundProperty === value) { + entry.checked = !entry.checked; + document.application.model[entry.boundProperty] = entry.checked; + } + }); + } + } + }, + + handlegrid: { + value: function(value) { + this.topLevelMenu[2].entries[4].checked = !this.topLevelMenu[2].entries[4].checked; + document.application.model.show3dGrid = this.topLevelMenu[2].entries[4].checked; + } + }, + + handleview: { + value: function(value) { + if(this.topLevelMenu[2].entries[7].boundProperty === value) { + if(!this.topLevelMenu[2].entries[7].checked) { + this.topLevelMenu[2].entries[7].checked = true; + this.topLevelMenu[2].entries[8].checked = false; + this.topLevelMenu[2].entries[9].checked = false; + document.application.model.documentStageView = value; + } + } else if(this.topLevelMenu[2].entries[8].boundProperty === value) { + if(!this.topLevelMenu[2].entries[8].checked) { + this.topLevelMenu[2].entries[7].checked = false; + this.topLevelMenu[2].entries[8].checked = true; + this.topLevelMenu[2].entries[9].checked = false; + document.application.model.documentStageView = value; + } + } else { + if(!this.topLevelMenu[2].entries[9].checked) { + this.topLevelMenu[2].entries[7].checked = false; + this.topLevelMenu[2].entries[8].checked = false; + this.topLevelMenu[2].entries[9].checked = true; + document.application.model.documentStageView = value; + } + } + } + }, + + topLevelMenu: { + value: [ + { + "label": "File", + "entries": [ + { + "label" : "New Project", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "executeNewProject" + }, + { + "label" : "New File", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeNewFile" + }, + { + "label" : "Open File", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeFileOpen" + }, + { + "label" : "Close File", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "document", + "action": "executeFileClose" + }, + { + "label" : "Close All", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "document", + "action": "executeFileCloseAll" + }, + { + "label" : "", + "checked": false, + "submenu" : false, + "entries": [], + "separator": true, + "enabled": true, + "action": "" + }, + { + "label" : "Save", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "document", + "action": "executeSave" + }, + { + "label" : "Save As", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "document", + "action":"executeSaveAs" + }, + { + "label" : "Save All", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "document", + "action": "executeSaveAll" + }, + { + "label" : "", + "checked": false, + "submenu" : false, + "entries": [], + "separator": true, + "enabled": true, + "action": "" + }, + { + "label" : "Open Project", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Open Recent", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Close Project", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + } + ] + }, + { + "label": "Edit", + "entries": [ + { + "label" : "Undo", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "newenabled": { + "value": false, + "boundObj": "undocontroller", + "boundProperty": "canUndo", + "oneway": true + }, + "action": "executeUndo" + }, + { + "label" : "Redo", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "newenabled": { + "value": false, + "boundObj": "undocontroller", + "boundProperty": "canRedo", + "oneway": true + }, + "action": "executeRedo" + }, + { + "label" : "Cut", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeCut" + }, + { + "label" : "Copy", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeCopy" + }, + { + "label" : "Paste", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executePaste" + } + ] + }, + { + "label": "View", + "entries": [ + { + "label" : "Chrome Preview", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "executePreview" + }, + { + "label" : "", + "checked": false, + "submenu" : false, + "entries": [], + "separator": true, + "enabled": true, + "action": "" + }, + { + "label" : "Layout View", + "checked": false, + "submenu" : true, + "enabled": false, + "depend": "designDocument", + "action": "", + "entries": [ + { + "label" : "View All", + "checked": true, + "boundProperty": "layoutAll", + "submenu" : false, + "entries": [], + "depend": "layout", + "enabled": true, + "action": "toggle-layout-layoutAll" + }, + { + "label" : "View Items Only", + "checked": false, + "boundProperty": "layoutItems", + "submenu" : false, + "entries": [], + "depend": "layout", + "enabled": true, + "action": "toggle-layout-layoutItems" + }, + { + "label" : "Off", + "checked": false, + "boundProperty": "layoutOff", + "submenu" : false, + "entries": [], + "depend": "layout", + "enabled": true, + "action": "toggle-layout-layoutOff" + } + ] + }, + { + "label" : "Snap", + "checked": true, + "boundProperty": "snap", + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "toggle-snap-onoff" + }, + { + "label" : "Snap To", + "checked": false, + "submenu" : true, + "enabled": false, + "depend": "designDocument", + "action": "", + "entries": [ + { + "label" : "Grid", + "submenu" : false, + "checked": true, + "boundProperty": "snapGrid", + "entries": [], + "enabled": true, + "action": "toggle-snap-snapGrid" + }, + { + "label" : "Objects", + "checked": true, + "boundProperty": "snapObjects", + "submenu" : false, + "entries": [], + "enabled": true, + "action": "toggle-snap-snapObjects" + }, + { + "label" : "Snap Align", + "checked": true, + "boundProperty": "snapAlign", + "submenu" : false, + "entries": [], + "enabled": true, + "action": "toggle-snap-snapAlign" + } + ] + }, + { + "label" : "Show 3D Grid", + "checked": false, + "boundProperty": "show3dGrid", + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "toggle-grid-onoff" + }, + { + "label" : "", + "checked": false, + "submenu" : false, + "entries": [], + "separator": true, + "enabled": true, + "action": "" + }, + { + "label" : "Front View", + "checked": true, + "boundProperty": "front", + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "toggle-view-front" + }, + { + "label" : "Top View", + "checked": false, + "boundProperty": "top", + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "toggle-view-top" + }, + { + "label" : "Side View", + "checked": false, + "boundProperty": "side", + "submenu" : false, + "entries": [], + "enabled": false, + "depend": "designDocument", + "action": "toggle-view-side" + } + ] + }, + { + "label": "Window", + "entries": [ + { + "label" : "Tools", + "checked": true, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Timeline", + "checked": true, + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Properties", + "checked": true, + "boundProperty": "PropertiesPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Color", + "checked": true, + "boundProperty": "ColorPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Components", + "checked": true, + "boundProperty": "ComponentsPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "CSS", + "checked": true, + "boundProperty": "CSSPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Materials", + "checked": true, + "boundProperty": "MaterialsPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + }, + { + "label" : "Presets", + "checked": true, + "boundProperty": "PresetsPanel", + "submenu" : false, + "entries": [], + "enabled": false, + "action": "" + } + ] + }, + { + "label": "Help", + "entries": [ + { + "label" : "Ninja FAQ", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeHelpFAQ" + }, + { + "label" : "Ninja Forums", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeHelpForums" + }, + { + "label" : "Help Topics", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeHelpTopics" + }, + { + "label" : "About Ninja...", + "checked": false, + "submenu" : false, + "entries": [], + "enabled": true, + "action": "executeHelpAbout" + } + ] + } + ] + } +}); \ No newline at end of file diff --git a/js/ui/menu/menu-entry.reel/menu-entry.css b/js/ui/menu/menu-entry.reel/menu-entry.css new file mode 100755 index 00000000..70e8c400 --- /dev/null +++ b/js/ui/menu/menu-entry.reel/menu-entry.css @@ -0,0 +1,80 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +.topMenuItem { + float: left; + display: inline; + height: 26px; +} + +.headerButton { + color: #f7f7f7; + font-family: 'Droid Sans', sans-serif; + text-shadow: 1px 1px 1px black; + display: inline; + outline: none; + box-sizing: border-box; + font-size: 10pt; + height: 26px; + vertical-align: middle; + border: 0; + background: none; +} + +.headerButton:focus { + -webkit-box-shadow: none; +} + +.selected { + background-color: #222222; +} + +.subEntries{ + display: none; + position: absolute; + /*z-index: 100000;*/ + margin-top: 1px; + float:left; + font-family: 'Droid Sans', sans-serif !important; + color: #ffffff; + background: #494949; + /*border: 1px solid #292929;*/ + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + /*border-radius: 8px;*/ + padding: 8px 0px 8px 0px; + box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.8); + white-space:nowrap; +} + +.selected .subEntries { + display: block; +} diff --git a/js/ui/menu/menu-entry.reel/menu-entry.html b/js/ui/menu/menu-entry.reel/menu-entry.html new file mode 100755 index 00000000..fd03b951 --- /dev/null +++ b/js/ui/menu/menu-entry.reel/menu-entry.html @@ -0,0 +1,102 @@ + + + + + + + + + + + + +
  • + + + + +
  • + + + diff --git a/js/ui/menu/menu-entry.reel/menu-entry.js b/js/ui/menu/menu-entry.reel/menu-entry.js new file mode 100755 index 00000000..ca512895 --- /dev/null +++ b/js/ui/menu/menu-entry.reel/menu-entry.js @@ -0,0 +1,110 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.MenuEntry = Montage.create(Component, { + + _label: { + value: null + }, + + label: { + get: function() { + return this._label; + }, + set: function(value) { + if(this._label !== value) { + this._label = value; + } + } + }, + + _entries: { + value: [] + }, + + entries: { + get: function() { + return this._entries; + }, + set: function(value) { + if(this._entries !== value) { + this._entries = value; + } + } + }, + + menuHeaderButton: { + value: null + }, + + + prepareForDraw: { + value: function() { + this.menuHeaderButton.element.addEventListener("mousedown", this, true); + } + }, + + captureMousedown: { + value: function(event) { + var mouseDownEvent = document.createEvent("CustomEvent"); + mouseDownEvent.initCustomEvent("headermousedown", true, true, this); + this.dispatchEvent(mouseDownEvent); + } + }, + + _menuIsActive: { + value: false + }, + + menuIsActive: { + get: function() { + return this._menuIsActive; + }, + set: function(value) { + if(value) { + this.element.addEventListener("mouseover", this, false); + } else { + this.element.removeEventListener("mouseover", this, false); + } + } + }, + + handleMouseover: { + value: function(event) { + var mouseOverEvent = document.createEvent("CustomEvent"); + mouseOverEvent.initCustomEvent("headermouseover", true, true, this); + this.dispatchEvent(mouseOverEvent); + } + } +}); diff --git a/js/ui/menu/menu-item.reel/menu-item.css b/js/ui/menu/menu-item.reel/menu-item.css new file mode 100755 index 00000000..f3683492 --- /dev/null +++ b/js/ui/menu/menu-item.reel/menu-item.css @@ -0,0 +1,149 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +.menuItem { + font-size: 9pt; + padding: 4px 8px; + display: block; + position: relative; + background: #474747; + color: white; +} + +.menuItem:hover { + cursor:pointer; +} + +.disabled { + opacity: 0.5; +} + +.disabled:hover { + background-color: #474747; +} + +.menuItemButton { + color: #f7f7f7; + font-family: 'Droid Sans', sans-serif; + text-shadow: 1px 1px 1px black; + display: inline; + outline: none; + box-sizing: border-box; + font-size: 10pt; + height: 18px; + vertical-align: middle; + border: 0; + background: none; + /*margin: 0 2px;*/ + /*padding: 0 1em;*/ + /*padding: 23px 12px 0px 8px;*/ + cursor: pointer; + + padding-right: 18px; +} + +.menuItemButton:focus { + -webkit-box-shadow: none; + +} + +.separatorContainer { + padding-left: 0px; + padding-right: 0px; + width: 99%; +} + +.separatorContainer:hover { + background-color: #474747; +} + +.separator{ + width:100%; + height:2px; + position: relative; + border: 1px groove #474747 ; + border-radius: 2px; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#474747), to(#cccccc)); + opacity: 0.5; +} + +.menuItem .check { + float:left; + margin-top: 2px; + background-image: url(../../../../images/menu/checkmark.png); + background-repeat: no-repeat; + background-position: center; + width: 10px; + height: 15px; + opacity: 0; +} + +.menuItem .checked { + opacity: 1; +} + +.submenu .rightArrow { + float: right; + background-image:url('../../../../images/menu/arrow.png'); + background-repeat: no-repeat; + background-position: center; + width: 10px; + height: 15px; + position: absolute; + right:4px; + top: 5px; + margin-left: 8px; +} + +.submenuEntries{ + display: none; + position: absolute; + top: 0%; + left: 100%; + margin-top: 1px; + margin-left: 1px; + float:left; + font-family: 'Droid Sans', sans-serif !important; + color: #ffffff; + background: #494949; + /*border: 1px solid #292929;*/ + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + /*border-radius: 8px;*/ + padding: 8px 0px 8px 0px; + box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.8); + white-space:nowrap; +} + +.submenu .show { + display: block; +} + diff --git a/js/ui/menu/menu-item.reel/menu-item.html b/js/ui/menu/menu-item.reel/menu-item.html new file mode 100755 index 00000000..6c306c3b --- /dev/null +++ b/js/ui/menu/menu-item.reel/menu-item.html @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + diff --git a/js/ui/menu/menu-item.reel/menu-item.js b/js/ui/menu/menu-item.reel/menu-item.js new file mode 100755 index 00000000..97f13d13 --- /dev/null +++ b/js/ui/menu/menu-item.reel/menu-item.js @@ -0,0 +1,208 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.MenuItem = Montage.create(Component, { + + _enabled: { + value: false + }, + + enabled: { + get: function() { + return this._enabled; + }, + set: function(value) { + if(value !== this._enabled) { + this._enabled = value; + this.needsDraw = true; + } + } + }, + + _label: { + value: null + }, + + label: { + get: function() { + return this._label; + }, + set: function(value) { + if(this._label !== value) { + this._label = value; + } + } + }, + + _submenu: { + value: false + }, + + submenu: { + get: function() { + return this._submenu; + }, + set: function(value) { + if(this._submenu !== value) { + this._submenu = value; + } + } + }, + + _entries: { + value: null + }, + + entries: { + get: function() { + return this._entries; + }, + set: function(value) { + if(this._entries !== value) { + this._entries = value; + } + } + }, + + submenuElement: { + value: null + }, + + checkMark: { + value: null + }, + + _checked: { + value: null + }, + + checked: { + get: function() { + return this._checked; + }, + set: function(value) { + if(this._checked !== value) { + this._checked = value; + this.needsDraw = true; + } + } + }, + + _action: { + value: "" + }, + + action: { + get: function() { + return this._action; + }, + set: function(value) { + if(this._action !== value) { + this._action = value; + } + } + }, + + prepareForDraw: { + value: function() { + // Don't add mouse event if this is a separator + if(this.label === "" ) { + return; + } + + this.element.addEventListener("mouseover", this, false); + this.element.addEventListener("mouseout", this, false); + this.element.addEventListener("mouseup", this, true); + } + }, + + draw: { + value: function() { + if(this.label === "") { + this.element.classList.add("separatorContainer"); + this.element.innerHTML = "
    "; + } + + if(this.enabled) { + this.element.classList.remove("disabled"); + } else { + this.element.classList.add("disabled"); + } + + + if(this.checked) { + this.checkMark.classList.add("checked"); + } else { + this.checkMark.classList.remove("checked"); + } + + } + }, + + captureMouseup: { + value: function(event) { + if( this.enabled === true && this.submenu === false ) { + if(this.action !== "") { + + var menuItemClick = document.createEvent("CustomEvent"); + menuItemClick.initCustomEvent("menuItemClick", true, true, this.action); + this.dispatchEvent(menuItemClick); + + } + } + } + }, + + handleMouseover: { + value: function() { + if(this.enabled){ + this.element.style.backgroundColor = "#7f7f7f"; + if(this.submenu) { + this.submenuElement.classList.add("show"); + } + } + } + }, + + handleMouseout: { + value: function() { + this.element.style.backgroundColor = "#474747"; + + if(this.submenu) { + this.submenuElement.classList.remove("show"); + } + } + } + +}); diff --git a/js/ui/menu/menu.reel/menu.css b/js/ui/menu/menu.reel/menu.css new file mode 100755 index 00000000..a02d488d --- /dev/null +++ b/js/ui/menu/menu.reel/menu.css @@ -0,0 +1,39 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +.horizontal-menu { + list-style: none; + margin: 0; + padding: 0 5px 0 5px; + float: left; + cursor: default; + display: block; +} diff --git a/js/ui/menu/menu.reel/menu.html b/js/ui/menu/menu.reel/menu.html new file mode 100755 index 00000000..4708c2cb --- /dev/null +++ b/js/ui/menu/menu.reel/menu.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + diff --git a/js/ui/menu/menu.reel/menu.js b/js/ui/menu/menu.reel/menu.js new file mode 100755 index 00000000..aff60163 --- /dev/null +++ b/js/ui/menu/menu.reel/menu.js @@ -0,0 +1,183 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.Menu = Montage.create(Component, { + + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + } + }, + + menudata: { + value: null + }, + + _active: { + value: false + }, + + active: { + get: function() { + return this._active; + }, + set: function(value) { + if(this._active !== value) { + this._active = value; + } + + if(this._active) { + document.addEventListener("mousedown", this, false); + document.addEventListener("keydown", this, true); + } else { + document.removeEventListener("mousedown", this, false); + document.removeEventListener("keydown", this, true); + this.activeEntry = null; + } + + } + }, + + _activeEntry: { + value: null + }, + + activeEntry: { + get: function() { + return this._activeEntry; + }, + set: function(value) { + if(this._activeEntry === value) return; + + if(this._activeEntry) { + this._activeEntry.element.classList.remove("selected"); + } + + this._activeEntry = value; + + if(this._activeEntry) { + this._activeEntry.element.classList.add("selected"); + } + } + }, + + prepareForDraw: { + value: function() { + this.addEventListener("headermousedown", this, false); + this.addEventListener("headermouseover", this, false); + + this.addEventListener("menuItemClick", this, false); + } + }, + + handleHeadermousedown: { + value: function(evt) { + if(!this.active) { + this.active = true; + } + + this.activeEntry = evt.detail; + } + }, + + handleHeadermouseover: { + value: function(evt) { + if(this.active) { + this.activeEntry = evt.detail; + } + } + }, + + handleMenuItemClick: { + value: function(evt) { + if(evt.detail.indexOf("-") > 0) { + this.menudata.toggleItem(evt.detail.slice(evt.detail.indexOf("-") + 1)) + } else { + NJevent(evt.detail); + } + this.active = false; + } + }, + + captureKeydown: { + value: function(evt) { + if(evt.keyCode === 27) { + this.active = false; + } + } +