diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 8c216f0151..2175f11ab1 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -49,7 +49,7 @@ $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; $ueTimeControlH: (33px, 18px, 20px); -// Panes +/*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; $ueBrowseLeftPaneTreeW: 25%; @@ -57,48 +57,59 @@ $ueBrowseRightPaneInspectMinW: 200px; $ueBrowseRightPaneInspectMaxW: 35%; $ueBrowseRightPaneInspectW: 20%; $ueDesktopMinW: 600px; - -// Overlay +/*************** Overlay */ $ovrTopBarH: 45px; $ovrFooterH: 24px; $overlayMargin: 25px; -// Items +/*************** Items */ $ueBrowseGridItemLg: 200px; $ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemBottomBarH: 30px; $itemPadLR: 5px; -// Tree +/*************** Tree */ $treeVCW: 10px; $treeTypeIconH: 1.4em; // was 16px $treeTypeIconHPx: 16px; $treeTypeIconW: 18px; $treeContextTriggerW: 20px; -// Tabular +/*************** Tabular */ $tabularHeaderH: 22px; //18px $tabularTdPadLR: $itemPadLR; $tabularTdPadTB: 3px; -// Imagery +/*************** Imagery */ $imageMainControlBarH: 25px; $imageThumbsD: 120px; $imageThumbsWrapperH: $imageThumbsD * 1.4; $imageThumbPad: 1px; -// Ticks +/*************** Ticks */ $ticksH: 25px; $tickLblVMargin: 3px; $tickLblH: 15px; $tickLblW: 50px; $tickH: $ticksH - $tickLblVMargin - $tickLblH; $tickW: 1px; -// Bubbles +/*************** Plots */ +$plotYBarW: 60px; +$plotYLabelMinH: 20px; +$plotYLabelW: 10px; +$plotXBarH: 32px; +$plotLegendH: 20px; +$plotSwatchD: 8px; +// 1: Top, 2: right, 3: bottom, 4: left +$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH + $interiorMargin, $plotYBarW); +/* Based on current implementation of ~ 5 ticks per plot element; +Include legend, plot-display-area and X ticks */ +$plotMinH: $plotLegendH + ($interiorMargin * 2) + ($plotYLabelMinH * 5) + nth($plotDisplayArea,3); +/*************** Bubbles */ $bubbleArwSize: 10px; $bubblePad: $interiorMargin; $bubbleMinW: 100px; $bubbleMaxW: 300px; -// Forms +/*************** Forms */ $reqSymbolW: 15px; $reqSymbolM: $interiorMargin * 2; $reqSymbolFontSize: 0.7em; -// Wait Spinner Defaults +/*************** Wait Spinner Defaults */ $waitSpinnerD: 32px; $waitSpinnerTreeD: 20px; $waitSpinnerBorderW: 5px; diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 22e8312087..2af21f1353 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -19,12 +19,10 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -$yBarW: 60px; -$yLabelW: 10px; -$xBarH: 32px; -$legendH: 20px; -$swatchD: 8px; -$plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left +.abs.holder-plot { + // Fend off the scrollbar when less than min-height; + right: $interiorMargin; +} .gl-plot { color: $colorPlotFg; @@ -32,6 +30,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa position: relative; width: 100%; height: 100%; + min-height: $plotMinH; .gl-plot-local-controls { @include trans-prop-nice(opacity, 150ms); @@ -54,17 +53,17 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa top: auto; right: 0; bottom: $interiorMargin; - left: $yBarW; - height: $xBarH; + left: $plotYBarW; + height: $plotXBarH; width: auto; overflow: hidden; } &.gl-plot-y { - top: $legendH + $interiorMargin; + top: $plotLegendH + $interiorMargin; right: auto; bottom: nth($plotDisplayArea, 3); left: 0; - width: $yBarW; + width: $plotYBarW; } } @@ -146,7 +145,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa @include transform(translateY(-50%)); min-width: 150px; // Need this due to enclosure of .select top: 50%; - left: $yLabelW + $interiorMargin * 2; + left: $plotYLabelW + $interiorMargin * 2; } .t-plot-display-controls { @@ -174,7 +173,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa right: 0; bottom: auto; left: 0; - height: $legendH; + height: $plotLegendH; overflow-x: hidden; overflow-y: auto; } @@ -236,8 +235,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa .color-swatch { border-radius: 2px; display: inline-block; - height: $swatchD; - width: $swatchD; + height: $plotSwatchD; + width: $plotSwatchD; } } } @@ -249,8 +248,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa padding: 0px $itemPadLR; .plot-color-swatch { border: 1px solid $colorBodyBg; - height: $swatchD + 1; - width: $swatchD + 1; + height: $plotSwatchD + 1; + width: $plotSwatchD + 1; } } }