From 0b46050e049f6e1e90885b13376ec11f3a78228b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 12 Jun 2015 15:46:31 -0700 Subject: [PATCH 1/2] [Fronted] Tweaks to bubbles and context menus scss WTD-1248 WTD-884 Changed z-index of context menus and bubbles to put the menus above; Changed text wrapping of 'value' td to no-wrap; Changed min and max-width of .l-infobubble; --- .../general/res/css/theme-espresso.css | 46 ++++++++++--------- .../general/res/sass/controls/_menus.scss | 2 +- .../general/res/sass/helpers/_bubbles.scss | 6 ++- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 64aa7e083a..3a9b6abe54 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -2443,7 +2443,7 @@ label.checkbox.custom { position: absolute; height: 200px; width: 170px; - z-index: 59; } + z-index: 70; } /* line 172, ../sass/controls/_menus.scss */ .context-menu-holder .context-menu-wrapper { position: absolute; @@ -3840,66 +3840,70 @@ input[type="date"] { -webkit-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: 70; } + z-index: 50; } /* line 29, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble { display: inline-block; + min-width: 100px; max-width: 300px; padding: 5px 10px; } - /* line 33, ../sass/helpers/_bubbles.scss */ + /* line 34, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble:before { content: ""; position: absolute; width: 0; height: 0; } - /* line 39, ../sass/helpers/_bubbles.scss */ + /* line 40, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table { width: 100%; } - /* line 42, ../sass/helpers/_bubbles.scss */ + /* line 43, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table tr td { padding: 2px 0; vertical-align: top; } - /* line 49, ../sass/helpers/_bubbles.scss */ + /* line 50, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table tr td.label { padding-right: 10px; white-space: nowrap; } - /* line 58, ../sass/helpers/_bubbles.scss */ + /* line 54, ../sass/helpers/_bubbles.scss */ + .l-infobubble-wrapper .l-infobubble table tr td.value { + white-space: nowrap; } + /* line 60, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table tr td.align-wrap { white-space: normal; } - /* line 64, ../sass/helpers/_bubbles.scss */ + /* line 66, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; } - /* line 71, ../sass/helpers/_bubbles.scss */ + /* line 73, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-left { margin-left: 10px; } - /* line 73, ../sass/helpers/_bubbles.scss */ + /* line 75, ../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 #ddd; } - /* line 81, ../sass/helpers/_bubbles.scss */ + /* line 83, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-right { margin-right: 10px; } - /* line 83, ../sass/helpers/_bubbles.scss */ + /* line 85, ../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 #ddd; } - /* line 92, ../sass/helpers/_bubbles.scss */ + /* line 94, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-top .l-infobubble::before { top: 10px; } - /* line 98, ../sass/helpers/_bubbles.scss */ + /* line 100, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-btm .l-infobubble::before { bottom: 10px; } - /* line 103, ../sass/helpers/_bubbles.scss */ + /* line 105, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-down { margin-bottom: 10px; } - /* line 105, ../sass/helpers/_bubbles.scss */ + /* line 107, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper.arw-down .l-infobubble::before { left: 50%; top: 100%; @@ -3908,7 +3912,7 @@ input[type="date"] { border-right: 5px solid transparent; border-top: 7.5px solid #ddd; } -/* line 118, ../sass/helpers/_bubbles.scss */ +/* line 120, ../sass/helpers/_bubbles.scss */ .s-infobubble { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3916,18 +3920,18 @@ input[type="date"] { background: #ddd; color: #666; font-size: 0.8rem; } - /* line 124, ../sass/helpers/_bubbles.scss */ + /* line 126, ../sass/helpers/_bubbles.scss */ .s-infobubble .title { color: #333333; font-weight: bold; } - /* line 129, ../sass/helpers/_bubbles.scss */ + /* line 131, ../sass/helpers/_bubbles.scss */ .s-infobubble tr td { border-top: 1px solid #c4c4c4; font-size: 0.9em; } - /* line 133, ../sass/helpers/_bubbles.scss */ + /* line 135, ../sass/helpers/_bubbles.scss */ .s-infobubble tr:first-child td { border-top: none; } - /* line 137, ../sass/helpers/_bubbles.scss */ + /* line 139, ../sass/helpers/_bubbles.scss */ .s-infobubble .value { color: #333333; } diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index d225d764fe..9c462fe8bb 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -168,7 +168,7 @@ position: absolute; height: 200px; width: 170px; - z-index: 59; + z-index: 70; .context-menu-wrapper { position: absolute; height: 100%; diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index ca228ef02a..88731c2527 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -25,9 +25,10 @@ $arwSize: 5px; @include box-shadow(rgba(black, 0.4) 0 1px 5px); position: absolute; - z-index: 70; + z-index: 50; .l-infobubble { display: inline-block; + min-width: 100px; max-width: 300px; padding: 5px 10px; &:before { @@ -51,8 +52,9 @@ white-space: nowrap; } &.value { + //@include ellipsize(); //@include test(red); - //white-space: nowrap; + white-space: nowrap; //width: 90%; } &.align-wrap { From c6c4fa71821a958fd119c5f393500f993faf7090 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 12 Jun 2015 16:24:25 -0700 Subject: [PATCH 2/2] [Fronted] Fixes for misaligned bubbles WTD-1247 WTD-884 Changed CSS .l-infobubble-wrapper abs > relative; Added display: block class for mct-container; Tweaked bubble evaluation JS for 'goLeft' behavior; Added constants for bubble max width and left/right margin; --- .../general/res/css/theme-espresso.css | 24 +++++++++++-------- .../commonUI/general/res/sass/_constants.scss | 4 ++++ .../commonUI/general/res/sass/_global.scss | 4 ++++ .../general/res/sass/helpers/_bubbles.scss | 6 ++--- .../commonUI/inspect/src/InfoConstants.js | 5 +++- .../inspect/src/services/InfoService.js | 3 ++- 6 files changed, 31 insertions(+), 15 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 3a9b6abe54..8106878a87 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -319,6 +319,10 @@ span { */ } /* line 72, ../sass/_global.scss */ +mct-container { + display: block; } + +/* line 76, ../sass/_global.scss */ .abs, .btn-menu span.l-click-area { position: absolute; top: 0; @@ -328,46 +332,46 @@ span { height: auto; width: auto; } -/* line 82, ../sass/_global.scss */ +/* line 86, ../sass/_global.scss */ .code, .codehilite { font-family: "Lucida Console", monospace; font-size: 0.7em; line-height: 150%; white-space: pre; } -/* line 89, ../sass/_global.scss */ +/* line 93, ../sass/_global.scss */ .codehilite { background-color: rgba(255, 255, 255, 0.1); padding: 1em; } -/* line 95, ../sass/_global.scss */ +/* line 99, ../sass/_global.scss */ .align-right { text-align: right; } -/* line 99, ../sass/_global.scss */ +/* line 103, ../sass/_global.scss */ .centered { text-align: center; } -/* line 103, ../sass/_global.scss */ +/* line 107, ../sass/_global.scss */ .no-margin { margin: 0; } -/* line 107, ../sass/_global.scss */ +/* line 111, ../sass/_global.scss */ .colorKey { color: #0099cc; } -/* line 111, ../sass/_global.scss */ +/* line 115, ../sass/_global.scss */ .ds { -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 115, ../sass/_global.scss */ +/* line 119, ../sass/_global.scss */ .hide, .hidden { display: none !important; } -/* line 120, ../sass/_global.scss */ +/* line 124, ../sass/_global.scss */ .sep { color: rgba(255, 255, 255, 0.2); } @@ -3839,7 +3843,7 @@ input[type="date"] { -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; - position: absolute; + position: relative; z-index: 50; } /* line 29, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble { diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 45731c8d7e..740f04b43d 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -126,3 +126,7 @@ $tickLblH: 15px; $tickLblW: 50px; $tickH: $ticksH - $tickLblVMargin - $tickLblH; $tickW: 1px; + +// Bubbles +$bubbleMinW: 100px; +$bubbleMaxW: 300px; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index 5a7293e4f2..0f12f4f4e4 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -69,6 +69,10 @@ span { */ } +mct-container { + display: block; +} + .abs { position: absolute; top: 0; diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index 88731c2527..ab273f091a 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -24,12 +24,12 @@ .l-infobubble-wrapper { $arwSize: 5px; @include box-shadow(rgba(black, 0.4) 0 1px 5px); - position: absolute; + position: relative; z-index: 50; .l-infobubble { display: inline-block; - min-width: 100px; - max-width: 300px; + min-width: $bubbleMinW; + max-width: $bubbleMaxW; padding: 5px 10px; &:before { content:""; diff --git a/platform/commonUI/inspect/src/InfoConstants.js b/platform/commonUI/inspect/src/InfoConstants.js index c550c1a6c3..5d073c7d24 100644 --- a/platform/commonUI/inspect/src/InfoConstants.js +++ b/platform/commonUI/inspect/src/InfoConstants.js @@ -28,5 +28,8 @@ define({ "" + "", // Pixel offset for bubble, to align arrow position - BUBBLE_OFFSET: [ 0, -16 ] + BUBBLE_OFFSET: [ 0, -16 ], + // Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss + BUBBLE_MARGIN_LR: 10, + BUBBLE_MAX_WIDTH: 300 }); \ No newline at end of file diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js index 3dd2d4985e..ddb3a3e1e1 100644 --- a/platform/commonUI/inspect/src/services/InfoService.js +++ b/platform/commonUI/inspect/src/services/InfoService.js @@ -39,7 +39,8 @@ define( var body = $document.find('body'), scope = $rootScope.$new(), winDim = [$window.innerWidth, $window.innerHeight], - goLeft = position[0] > (winDim[0] / 2), + bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH, + goLeft = position[0] > (winDim[0] - bubbleSpaceLR), goUp = position[1] > (winDim[1] / 2), bubble;