From 2dd8fabacf115cf32e38115a472f3f2c59926135 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 12 Jul 2012 16:06:11 -0700 Subject: Improving Document Bar UI Setting up new document bar UI to then set up switching document view modes. Improving layout of component and cleaning up. Added icons and button UI. --- .../layout/document-bar.reel/document-bar.css | 88 ++++++++++----- .../layout/document-bar.reel/document-bar.html | 124 +++++++++++++-------- js/ninja.reel/ninja.html | 8 +- 3 files changed, 145 insertions(+), 75 deletions(-) diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index a356dd1a..cb9accdd 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -28,46 +28,84 @@ 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. */ -.documentBar { - position: relative; - overflow: hidden; - color: white; + +.timelineResizer { + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important; } -.documentBar .active { - text-decoration: underline; - cursor: pointer; - color: #666666; +.documentBar { + background: rgb(40, 40, 40); + height: 20px !important; + color: #FFF; + font-size: 11px; } -.documentBar .active:hover { - color: #ffffff; +.documentBar section{ + background: rgb(60, 60, 60); + float: left; + height: 100%; + padding: 0px 4px; + border-right: 2px solid #000; } -.documentBar .selected { - text-decoration: underline; - cursor: default; - color: #ffffff; +.documentBar .zoomicon { + background-image: url('../../../../images/tools/Tool-Zoom.png'); + background-repeat: no-repeat; + background-position: center center; + background-size: 75%; + width: 18px; + height: 18px; + float: left; } -.documentBar .selected { - color: #ffffff; +.documentBar .zoomHotText { + font-size: 11px; + width: 40px; + margin: 0 0 0 2px; + text-align: center; } -.documentBar span{ - text-decoration: none; +.documentBar .btn_view { + display: block; + background: none; + margin: 3px 0 0 0; + padding: 0; + border: none; + color: #FFF; + width: 44px; + text-transform: uppercase; + text-align: left; + float: left; cursor: pointer; - color: #3a3a3a; } -.documentBar .zoomHotText span { - color: white; +.documentBar .viewicon { + background-repeat: no-repeat; + background-position: center center; + width: 16px; + height: 16px; + margin: 2px 4px 0 0; + float: left; } -.documentBar .enable{ - color: #d7d7d7; +.documentBar .viewcode { + background-image: url('../../../../images/optionsbar/text/AlignLeft.png'); + background-size: 80%; } -.documentBar .disable{ - color: #3a3a3a; +.documentBar .viewdesign { + background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png'); + background-size: 90%; } + +.documentBar section.inactive .viewicon{ + opacity: .5; +} + +.documentBar section.inactive button { + opacity: .5; +} + +.documentBar section.inactive button:hover { + opacity: 1; +} \ No newline at end of file diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 101f716d..69f8107f 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html @@ -29,62 +29,90 @@ 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. --> + - - - + + + + + - - + - + - -
- - Design View - Code View -
-
- + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 0eeb468c..17726712 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -482,16 +482,20 @@ POSSIBILITY OF SUCH DAMAGE.
-
+
- + +
+
+
+ -- cgit v1.2.3 From 73077acd7b5d9548539dccdf7a3e3c15af18a38a Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 12 Jul 2012 16:55:41 -0700 Subject: adding a container around the breadcrumb button Signed-off-by: Valerio Virgillito --- .../bread-crumb-button.reel/bread-crumb-button.css | 30 +++++++++ .../bread-crumb-button.html | 75 ++++++++++++++++++++++ .../bread-crumb-button.reel/bread-crumb-button.js | 63 ++++++++++++++++++ .../layout/bread-crumb.reel/bread-crumb.html | 17 ++--- .../layout/bread-crumb.reel/bread-crumb.js | 2 +- 5 files changed, 174 insertions(+), 13 deletions(-) create mode 100755 js/components/layout/bread-crumb-button.reel/bread-crumb-button.css create mode 100755 js/components/layout/bread-crumb-button.reel/bread-crumb-button.html create mode 100755 js/components/layout/bread-crumb-button.reel/bread-crumb-button.js diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css new file mode 100755 index 00000000..9d6c37a7 --- /dev/null +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css @@ -0,0 +1,30 @@ +/* +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. + */ diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html new file mode 100755 index 00000000..6c881277 --- /dev/null +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + +
+ +
+ + + diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js new file mode 100755 index 00000000..89df2fa0 --- /dev/null +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js @@ -0,0 +1,63 @@ +/* +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.BreadCrumbButton = Montage.create(Component, { + + _label: { + value: null + }, + + label: { + get: function() { + return this._label; + }, + set: function(value) { + this._label = value + } + }, + + _value: { + value: null + }, + + value: { + get: function() { + return this._value; + }, + set: function(value) { + this._value = value; + } + } +}); + diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html index 19707632..2c6d941f 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.html +++ b/js/components/layout/bread-crumb.reel/bread-crumb.html @@ -40,22 +40,15 @@ POSSIBILITY OF SUCH DAMAGE. "owner": { "prototype": "js/components/layout/bread-crumb.reel[Breadcrumb]", "properties": { - "element": {"#": "breadcrumbTrail"}, - "breadcrumbBt": {"@": "breadCrumbButton"} + "element": {"#": "breadcrumbTrail"} } }, - "breadCrumbButton": { - "prototype": "montage/ui/native/button.reel", + "breadcrumbButton": { + "prototype": "js/components/layout/bread-crumb-button.reel", "properties": { - "element": {"#": "breadcrumb_button"} + "element": {"#": "breadcrumbButton"} }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ], "bindings": { "label": {"<-": "@buttonsList.objectAtCurrentIteration.label"}, "value": {"<-": "@buttonsList.objectAtCurrentIteration.nodeUuid"} @@ -94,7 +87,7 @@ POSSIBILITY OF SUCH DAMAGE. diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index 40494bc3..efa0dfd5 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -87,7 +87,7 @@ exports.Breadcrumb = Montage.create(Component, { prepareForDraw: { value: function() { - this.breadcrumbBt.addEventListener("action", this, false); + this.addEventListener("action", this, false); this.addPropertyChangeListener("currentDocument.model.domContainer", this) } }, -- cgit v1.2.3 From c5d59f48a8bccc8770b257f851bba18bdce61d2e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 13 Jul 2012 11:45:09 -0700 Subject: New: Improved Breadcrumb Layout Added new CSS/HTML layout for the breadcrumb component. --- .../bread-crumb-button.reel/bread-crumb-button.css | 45 ++++++++++++++++++++++ .../bread-crumb-button.html | 5 ++- .../layout/bread-crumb.reel/bread-crumb.css | 8 ++-- 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css index 9d6c37a7..eb5a29e0 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css @@ -28,3 +28,48 @@ 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. */ + +.breadcrumbComp { + float: left; + margin: 3px -10px 0 0; +} + +.breadcrumbButton { + color: #FFF; + float: left; + background: rgb(80, 80, 80); + border: none; + padding: 0 8px 0 14px; + height: 20px; + margin: 0; + border-top: 1px solid rgb(60, 60, 60); + border-left: 1px solid rgb(60, 60, 60); + border-bottom: 1px solid rgb(60, 60, 60); + cursor: pointer; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); +} + +.breadcrumbButton:active, .breadcrumbButton:hover, .breadcrumbButton:focus { + -webkit-box-shadow: none !important; + outline: none !important; +} + +.breadcrumbTipMask +{ + display: block; + width: 11px; + height: 20px; + float: left; + overflow: hidden; +} + +.breadcrumbTip { + display: block; + width: 14px; + height: 14px; + margin: 3px 0 0 -7px; + -webkit-transform: rotate(45deg); + background: rgb(80, 80, 80); + border-top: 1px solid rgb(60, 60, 60); + border-right: 1px solid rgb(60, 60, 60); +} \ No newline at end of file diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html index 6c881277..596975de 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html @@ -67,8 +67,9 @@ POSSIBILITY OF SUCH DAMAGE. -
- + diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index 2dd34af3..ab00bcc8 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css @@ -43,9 +43,7 @@ POSSIBILITY OF SUCH DAMAGE. border-bottom:1px solid #000; margin-bottom:1px; } -.breadcrumbTrail button.nj-skinned { - float: left; - width: 60px; - margin: 2px; -} +.breadcrumbTrail div:first-child { + margin-left: 2px; +} -- cgit v1.2.3 From 2c5b9fac8a1085788ae00ecee527760e6c8953f6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 13 Jul 2012 12:44:21 -0700 Subject: New: Added knob to timeline resizer Added visual feedback for the timeline resizer --- js/components/layout/document-bar.reel/document-bar.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index cb9accdd..d92a3dd6 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -30,7 +30,10 @@ POSSIBILITY OF SUCH DAMAGE. */ .timelineResizer { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important; + background: -webkit-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(60, 60, 60)), color-stop(70%, rgb(30, 30, 30)), color-stop(100%, rgb(25, 25, 25))), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(10, 10, 10)), color-stop(50%, rgb(20, 20, 20)), color-stop(100%, rgb(10, 10, 10))) !important; + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important; + background-position: 49.5% center, 50.5% center, center center, left top !important; + background-size: 5px 5px, 5px 5px, 3% 100%, 100% 100%; } .documentBar { -- cgit v1.2.3 From ec3f0a848f264f466c3cd5dec60e27a84216d288 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 16 Jul 2012 10:38:50 -0700 Subject: CSS Fixes for Windows Font size is not inherited in Chrome for Windows, but does inherit in Mac, adding size for avoid inconsistency. --- js/components/layout/bread-crumb-button.reel/bread-crumb-button.css | 1 + js/components/layout/bread-crumb.reel/bread-crumb.css | 2 +- js/components/layout/document-bar.reel/document-bar.css | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css index eb5a29e0..5b5c244d 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css @@ -47,6 +47,7 @@ POSSIBILITY OF SUCH DAMAGE. border-bottom: 1px solid rgb(60, 60, 60); cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + font-size: 11px; } .breadcrumbButton:active, .breadcrumbButton:hover, .breadcrumbButton:focus { diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index ab00bcc8..a80b6052 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css @@ -37,7 +37,7 @@ POSSIBILITY OF SUCH DAMAGE. -webkit-box-flex: 0; } -.mainContentContainer > section.breadcrumbTrail { +.mainContentContainer section.breadcrumbTrail { border:0; margin:0; border-bottom:1px solid #000; diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index d92a3dd6..b86855b7 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -80,6 +80,7 @@ POSSIBILITY OF SUCH DAMAGE. text-align: left; float: left; cursor: pointer; + font-size: 11px; } .documentBar .viewicon { -- cgit v1.2.3