From ec2d5892a55aecd3befa05c51f4e21a6bdfb9248 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 28 Apr 2015 16:08:33 -0700 Subject: [PATCH 1/3] [Frontend] Markup for info bubble WTD-1054 Temp object to allow work on markup for info bubble --- bundles.json | 2 ++ platform/commonUI/inspect/bundle.json | 21 +++++++++++++++++++ platform/commonUI/inspect/res/infobubble.html | 5 +++++ 3 files changed, 28 insertions(+) create mode 100644 platform/commonUI/inspect/bundle.json create mode 100644 platform/commonUI/inspect/res/infobubble.html diff --git a/bundles.json b/bundles.json index 04515b1897..336aba67b8 100644 --- a/bundles.json +++ b/bundles.json @@ -6,11 +6,13 @@ "platform/commonUI/browse", "platform/commonUI/edit", "platform/commonUI/dialog", + "platform/commonUI/inspect", "platform/commonUI/general", "platform/containment", "platform/telemetry", "platform/features/layout", "platform/features/pages", + "platform/features/plot", "platform/features/scrolling", "platform/forms", diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json new file mode 100644 index 0000000000..16f2bdf89c --- /dev/null +++ b/platform/commonUI/inspect/bundle.json @@ -0,0 +1,21 @@ +{ + "extensions": { + "types": [ + { + "key": "infobubble", + "name": "Info Bubble", + "glyph": "\u00EA", + "description": "Static markup for info bubbles", + "features": [ "creation" ] + } + ], + "views": [ + { + "templateUrl": "infobubble.html", + "name": "Info Bubble", + "type": "infobubble", + "key": "infobubble" + } + ] + } +} \ No newline at end of file diff --git a/platform/commonUI/inspect/res/infobubble.html b/platform/commonUI/inspect/res/infobubble.html new file mode 100644 index 0000000000..653ccedbcf --- /dev/null +++ b/platform/commonUI/inspect/res/infobubble.html @@ -0,0 +1,5 @@ +
+
+ Info Bubble, and it works! +
+
\ No newline at end of file From eafc603e03b2140deee912e4b50dfe087dd0f964 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 29 Apr 2015 17:52:06 -0700 Subject: [PATCH 2/3] [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 From 0bbe3ec99af2410acc29c2f81308aec3856a22ed Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 29 Apr 2015 18:13:35 -0700 Subject: [PATCH 3/3] [Frontend] CSS enhancements WTD-1054 Better handling of different content cases; --- .../general/res/css/theme-espresso.css | 65 +++++++++++-------- .../general/res/sass/helpers/_bubbles.scss | 42 +++++++----- platform/commonUI/inspect/res/infobubble.html | 45 ++++++++----- 3 files changed, 92 insertions(+), 60 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6d1e916c26..b2668e99a7 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -2726,7 +2726,7 @@ input[type="text"] { /* line 11, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble { display: inline-block; - max-width: 400px; + max-width: 250px; padding: 5px 10px; } /* line 15, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble:before { @@ -2734,45 +2734,57 @@ input[type="text"] { position: absolute; width: 0; height: 0; } - /* 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 */ + /* line 21, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table { + width: 100%; } + /* line 24, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td { + padding: 2px 0; + vertical-align: top; } + /* line 31, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.label { + padding-right: 10px; + white-space: nowrap; } + /* line 35, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.value { + white-space: nowrap; } + /* line 39, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.align-wrap { + white-space: normal; } + /* line 45, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble .title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 5px; } + /* line 52, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-left { margin-left: 10px; } - /* line 41, ../sass/helpers/_bubbles.scss */ + /* line 54, ../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 */ + /* line 62, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-right { margin-right: 10px; } - /* line 51, ../sass/helpers/_bubbles.scss */ + /* line 64, ../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 */ + /* line 73, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-top .l-infobubble::before { top: 10px; } - /* line 66, ../sass/helpers/_bubbles.scss */ + /* line 79, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-btm .l-infobubble::before { bottom: 10px; } - /* line 71, ../sass/helpers/_bubbles.scss */ + /* line 84, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-down { margin-bottom: 10px; } - /* line 73, ../sass/helpers/_bubbles.scss */ + /* line 86, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-down .l-infobubble::before { left: 50%; top: 100%; @@ -2781,7 +2793,7 @@ input[type="text"] { border-right: 5px solid transparent; border-top: 7.5px solid #dddddd; } -/* line 86, ../sass/helpers/_bubbles.scss */ +/* line 99, ../sass/helpers/_bubbles.scss */ .s-infobubble { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -2791,19 +2803,18 @@ input[type="text"] { background: #dddddd; color: #666666; font-size: 0.8rem; } - /* line 92, ../sass/helpers/_bubbles.scss */ + /* line 105, ../sass/helpers/_bubbles.scss */ .s-infobubble .title { color: #333333; - font-weight: bold; - margin-bottom: 5px; } - /* line 98, ../sass/helpers/_bubbles.scss */ + font-weight: bold; } + /* line 110, ../sass/helpers/_bubbles.scss */ .s-infobubble tr td { border-top: 1px solid #c4c4c4; font-size: 0.9em; } - /* line 102, ../sass/helpers/_bubbles.scss */ + /* line 114, ../sass/helpers/_bubbles.scss */ .s-infobubble tr:first-child td { border-top: none; } - /* line 106, ../sass/helpers/_bubbles.scss */ + /* line 118, ../sass/helpers/_bubbles.scss */ .s-infobubble .value { color: #333333; } diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index 849cea01d3..63187c9690 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -10,7 +10,7 @@ $infoBubbleBg: #ddd; z-index: 70; .l-infobubble { display: inline-block; - max-width: 400px; + max-width: 250px; padding: 5px 10px; &:before { content:""; @@ -18,22 +18,35 @@ $infoBubbleBg: #ddd; 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; + table { + width: 100%; + tr { + td { + //max-width: 150px; + padding: 2px 0; + vertical-align: top; + //white-space: nowrap; + //overflow: hidden; + //text-overflow: ellipsis; + &.label { + padding-right: $interiorMargin * 2; + white-space: nowrap; + } + &.value { + white-space: nowrap; + //width: 90%; + } + &.align-wrap { + white-space: normal; + } } } } + .title { + @include ellipsize(); + margin-bottom: $interiorMargin; + //max-width: 200px; + } } &.arw-left { @@ -92,7 +105,6 @@ $infoBubbleBg: #ddd; .title { color: $emFg; font-weight: bold; - margin-bottom: $interiorMargin; } tr { td { diff --git a/platform/commonUI/inspect/res/infobubble.html b/platform/commonUI/inspect/res/infobubble.html index 97187a3465..436ba83557 100644 --- a/platform/commonUI/inspect/res/infobubble.html +++ b/platform/commonUI/inspect/res/infobubble.html @@ -6,36 +6,45 @@ bubbles = [ {layout: 'arw-btm arw-right'} ]; +titlex='Egress Scenario scelerisque mauris pid montes nunc ut aliquam elementum tincidunt phasellus 1'; title='Egress Scenario 1'; +propertiesShort=[{label:'Type', value:'Timeline', align:'left'}, +{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'}, +{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'}, +{label:'ID', value:'WRP-T-89', align:'left'}]; + properties=[{label:'Type', value:'Timeline', align:'left'}, {label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'}, -{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'}, -{label:'Duration', value:'09:15:37', align:'left'}, -{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'}, -{label:'Modified', value:'2015-04-26 18:38:00 UTC', align:'left'}, +{label:'End', value:'2015-04-27 06:07:26 UTC', align:'left'}, +{label:'Duration', value:'06:07:26', align:'left'}, +{label:'Created', value:'2015-04-26 12:27:00 UTC', align:'left'}, +{label:'Modified', value:'2015-04-26 23:21:00 UTC', align:'left'}, {label:'Status', value:'Up to date', align:'left'}, -{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'left'}, +{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'wrap'}, {label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that you’ll never be caught off guard.', align:'wrap'}, {label:'ID', value:'WRP-T-89', align:'left'}]; ">
+
-
-
{{title}} +
+
+
{{title}} +
+ + + + + +
{{property.label}}{{property.value}}
- - - - - -
{{property.label}}{{property.value}}
\ No newline at end of file