From eafc603e03b2140deee912e4b50dfe087dd0f964 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 29 Apr 2015 17:52:06 -0700 Subject: [PATCH] [Frontend] Infobubble markup and CSS WTD-1054 Markup and styling for infobubble; Includes fake data in infobubble.html --- .../general/res/css/theme-espresso.css | 151 ++++++++++++------ .../general/res/sass/helpers/_bubbles.scss | 146 ++++++++++++----- platform/commonUI/inspect/res/infobubble.html | 44 ++++- 3 files changed, 247 insertions(+), 94 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index e2c08cabac..6d1e916c26 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -1,5 +1,5 @@ /* CONSTANTS */ -/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -20,38 +20,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } @@ -2716,49 +2716,96 @@ input[type="text"] { .tool-bar .input-labeled label { font-size: 12.6px; } -/* line 1, ../sass/helpers/_bubbles.scss */ -.bubble-wrapper { +/* line 6, ../sass/helpers/_bubbles.scss */ +.l-infobubble-wrapper { -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; position: absolute; - z-index: 10; } - /* line 8, ../sass/helpers/_bubbles.scss */ - .bubble-wrapper .bubble { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; + z-index: 70; } + /* line 11, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble { display: inline-block; - background: #990000; - color: #ff9999; - font-size: 0.8rem; - font-style: italic; - max-width: 200px; - padding: 4px 8px; } - /* line 17, ../sass/helpers/_bubbles.scss */ - .bubble-wrapper .bubble:before { + max-width: 400px; + padding: 5px 10px; } + /* line 15, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble:before { content: ""; position: absolute; width: 0; height: 0; } - /* line 24, ../sass/helpers/_bubbles.scss */ - .bubble-wrapper.arw-left .bubble:before { - right: 100%; - top: 50%; - margin-top: -7px; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-right: 10.5px solid #990000; } - /* line 32, ../sass/helpers/_bubbles.scss */ - .bubble-wrapper.arw-down .bubble:before { - left: 50%; - top: 100%; - margin-left: -7px; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 10.5px solid #990000; } + /* line 22, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td { + max-width: 150px; + padding: 2px 0; + vertical-align: top; } + /* line 29, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.value { + padding-left: 10px; } + /* line 32, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.align-wrap { + white-space: normal; } + /* line 39, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-left { + margin-left: 10px; } + /* line 41, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-left .l-infobubble::before { + right: 100%; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 7.5px solid #dddddd; } + /* line 49, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-right { + margin-right: 10px; } + /* line 51, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-right .l-infobubble::before { + left: 100%; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 7.5px solid #dddddd; } + /* line 60, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-top .l-infobubble::before { + top: 10px; } + /* line 66, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-btm .l-infobubble::before { + bottom: 10px; } + /* line 71, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-down { + margin-bottom: 10px; } + /* line 73, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper.arw-down .l-infobubble::before { + left: 50%; + top: 100%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 7.5px solid #dddddd; } + +/* line 86, ../sass/helpers/_bubbles.scss */ +.s-infobubble { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + background: #dddddd; + color: #666666; + font-size: 0.8rem; } + /* line 92, ../sass/helpers/_bubbles.scss */ + .s-infobubble .title { + color: #333333; + font-weight: bold; + margin-bottom: 5px; } + /* line 98, ../sass/helpers/_bubbles.scss */ + .s-infobubble tr td { + border-top: 1px solid #c4c4c4; + font-size: 0.9em; } + /* line 102, ../sass/helpers/_bubbles.scss */ + .s-infobubble tr:first-child td { + border-top: none; } + /* line 106, ../sass/helpers/_bubbles.scss */ + .s-infobubble .value { + color: #333333; } /* line 8, ../sass/helpers/_splitter.scss */ .split-layout .splitter { @@ -2882,10 +2929,10 @@ input[type="text"] { .wait-spinner { display: block; position: absolute; - -webkit-animation: rotation .6s infinite linear; - -moz-animation: rotation .6s infinite linear; - -o-animation: rotation .6s infinite linear; - animation: rotation .6s infinite linear; + -webkit-animation: rotation 0.6s infinite linear; + -moz-animation: rotation 0.6s infinite linear; + -o-animation: rotation 0.6s infinite linear; + animation: rotation 0.6s infinite linear; border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; @@ -2924,10 +2971,10 @@ input[type="text"] { .treeview .wait-spinner { display: block; position: absolute; - -webkit-animation: rotation .6s infinite linear; - -moz-animation: rotation .6s infinite linear; - -o-animation: rotation .6s infinite linear; - animation: rotation .6s infinite linear; + -webkit-animation: rotation 0.6s infinite linear; + -moz-animation: rotation 0.6s infinite linear; + -o-animation: rotation 0.6s infinite linear; + animation: rotation 0.6s infinite linear; border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; @@ -3041,7 +3088,7 @@ input[type="text"] { padding-left: 0; } /* Styles for the iframe EmbeddedPageController element */ -/* line 4, ../sass/iframe.scss */ +/* line 4, ../sass/_iframe.scss */ .l-iframe iframe { display: block; height: 100%; diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index 0f7548a9c9..849cea01d3 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -1,40 +1,110 @@ -.bubble-wrapper { - $arwSize: 7px; - $c: #990000; - @include box-shadow(rgba(black, 0.4) 0 1px 5px); - position: absolute; - //top: 200px; left: 200px; - z-index: 10; - .bubble { - @include border-radius($basicCr); - display: inline-block; - background: $c; - color: lighten($c, 50%); - font-size: 0.8rem; - font-style: italic; - max-width: 200px; - padding: 4px 8px; - &:before { - content:""; - position: absolute; - width: 0; - height: 0; - } +//************************************************* LAYOUT + +$infoBubbleFg: #666; +$infoBubbleBg: #ddd; + +.l-infobubble-wrapper { + $arwSize: 5px; + @include box-shadow(rgba(black, 0.4) 0 1px 5px); + position: absolute; + z-index: 70; + .l-infobubble { + display: inline-block; + max-width: 400px; + padding: 5px 10px; + &:before { + content:""; + position: absolute; + width: 0; + height: 0; + } + table tr { + td { + max-width: 150px; + padding: 2px 0; + vertical-align: top; + //white-space: nowrap; + //overflow: hidden; + //text-overflow: ellipsis; + &.value { + padding-left: $interiorMargin * 2; + } + &.align-wrap { + white-space: normal; + } + } + } } - &.arw-left .bubble:before { - right: 100%; - top: 50%; // 26px; - margin-top: -1 * $arwSize; - border-top: $arwSize solid transparent; - border-bottom: $arwSize solid transparent; - border-right: ($arwSize * 1.5) solid $c; - } - &.arw-down .bubble:before { - left: 50%; - top: 100%; - margin-left: -1 * $arwSize; - border-left: $arwSize solid transparent; - border-right: $arwSize solid transparent; - border-top: ($arwSize * 1.5) solid $c; - } + + &.arw-left { + margin-left: $arwSize*2; + .l-infobubble::before { + right: 100%; + border-top: $arwSize solid transparent; + border-bottom: $arwSize solid transparent; + border-right: ($arwSize * 1.5) solid $infoBubbleBg; + } + } + + &.arw-right { + margin-right: $arwSize*2; + .l-infobubble::before { + left: 100%; + border-top: $arwSize solid transparent; + border-bottom: $arwSize solid transparent; + border-left: ($arwSize * 1.5) solid $infoBubbleBg; + } + } + + &.arw-top { + .l-infobubble::before { + top: $arwSize * 2; + } + } + + &.arw-btm { + .l-infobubble::before { + bottom: $arwSize * 2; + } + } + + &.arw-down { + margin-bottom: $arwSize*2; + .l-infobubble::before { + left: 50%; + top: 100%; + margin-left: -1 * $arwSize; + border-left: $arwSize solid transparent; + border-right: $arwSize solid transparent; + border-top: ($arwSize * 1.5) solid $infoBubbleBg; + } + } +} + +//************************************************* LOOK AND FEEL + +.s-infobubble { + $emFg: darken($infoBubbleFg, 20%); + @include border-radius($basicCr); + background: $infoBubbleBg; + color: $infoBubbleFg; + font-size: 0.8rem; + .title { + color: $emFg; + font-weight: bold; + margin-bottom: $interiorMargin; + } + tr { + td { + border-top: 1px solid darken($infoBubbleBg, 10%); + font-size: 0.9em; + } + &:first-child td { + border-top: none; + } + } + .value { + color: $emFg; + } + } \ No newline at end of file diff --git a/platform/commonUI/inspect/res/infobubble.html b/platform/commonUI/inspect/res/infobubble.html index 653ccedbcf..97187a3465 100644 --- a/platform/commonUI/inspect/res/infobubble.html +++ b/platform/commonUI/inspect/res/infobubble.html @@ -1,5 +1,41 @@ -
-
- Info Bubble, and it works! -
+
+ +
+
+
{{title}} +
+ + + + + +
{{property.label}}{{property.value}}
+
\ No newline at end of file