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 ++++++++++++++++++ 3 files changed, 168 insertions(+) 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 (limited to 'js/components/layout/bread-crumb-button.reel') 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; + } + } +}); + -- 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 ++- 2 files changed, 48 insertions(+), 2 deletions(-) (limited to 'js/components/layout/bread-crumb-button.reel') 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. -

- +

+ +

-- 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 + 1 file changed, 1 insertion(+) (limited to 'js/components/layout/bread-crumb-button.reel') 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 { -- cgit v1.2.3