From c9b2f5804d752e15ed505b0e3421b78e7d32dedb Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 21 Sep 2015 14:24:19 -0700 Subject: [PATCH] [Frontend] Minor tweaks to sizing of controls open #95b View switcher and plot control buttons now made small when object is in a frame context in a Layout; --- bundles.json | 2 +- .../commonUI/general/res/sass/_constants.scss | 1 + .../general/res/sass/user-environ/_frame.scss | 17 ++++-- .../espresso/res/css/theme-espresso.css | 60 ++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 2 +- .../themes/snow/res/css/theme-snow.css | 61 ++++++++++++------- .../themes/snow/res/sass/_constants.scss | 2 +- 7 files changed, 97 insertions(+), 48 deletions(-) diff --git a/bundles.json b/bundles.json index e258bab64f..a52aa694f9 100644 --- a/bundles.json +++ b/bundles.json @@ -8,7 +8,7 @@ "platform/commonUI/dialog", "platform/commonUI/general", "platform/commonUI/inspect", - "platform/commonUI/themes/espresso", + "platform/commonUI/themes/snow", "platform/containment", "platform/execution", "platform/telemetry", diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 00c869bc68..78c7c916dd 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -96,6 +96,7 @@ $menuLineH: 1.5rem; $menuLineHPx: 24px; $btnStdH: 25px; $btnToolbarH: $btnStdH; +$btnFrameH: 16px; /************************** PATHS */ // Paths need to be relative to /platform/commonUI/theme//css/ directory diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 6b993f9075..d8b27d7690 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .frame { - $ohH: 16px; + $ohH: $btnFrameH; $bc: $colorInteriorBorder; &.child-frame.panel { background: $colorBodyBg; @@ -46,14 +46,23 @@ left: $myM; } &.frame-template { - .view-switcher { + .s-btn, + .s-menu { height: $ohH; line-height: $ohH; - z-index: 10; + padding: 0 $interiorMargin; > span { - font-size: 0.7rem; + font-size: 0.65rem; } } + + .s-menu:after { + font-size: 8px; + } + + .view-switcher { + z-index: 10; + } // Hide the view switcher by default when it's in an element that's in a frame context // Frame template is used because we need to target the lowest nested frame @include desktop { diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 71750ffb34..6eb39c0b0a 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -3291,19 +3291,30 @@ span.req { float: left; margin-right: 10px; } -/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ +/*.object-holder { + .s-btn { + //background: red !important; + $h: 16px; + height: $h; + line-height: $h; + > span { + font-size: 0.7rem; + } + } +}*/ +/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -4325,21 +4336,29 @@ ul.tree { bottom: 5px; left: 5px; } /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */ -.frame.frame-template .view-switcher { +.frame.frame-template .s-btn, .frame.frame-template .s-menu, +.frame.frame-template .s-menu { height: 16px; line-height: 16px; + padding: 0 5px; } + /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */ + .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span, + .frame.frame-template .s-menu > span { + font-size: 0.65rem; } +/* line 59, ../../../../general/res/sass/user-environ/_frame.scss */ +.frame.frame-template .s-menu:after { + font-size: 8px; } +/* line 63, ../../../../general/res/sass/user-environ/_frame.scss */ +.frame.frame-template .view-switcher { z-index: 10; } - /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */ - .frame.frame-template .view-switcher > span { - font-size: 0.7rem; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */ + /* line 69, ../../../../general/res/sass/user-environ/_frame.scss */ .frame.frame-template .view-switcher { opacity: 0; } - /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */ + /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */ .frame.frame-template:hover .view-switcher { opacity: 1; } } -/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */ +/* line 80, ../../../../general/res/sass/user-environ/_frame.scss */ .frame .view-switcher .title-label { display: none; } @@ -4958,6 +4977,7 @@ table { display: none; } /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot .gl-plot-display-area { + background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 25px; right: 0; @@ -5759,7 +5779,7 @@ table { min-width: 150px; } /* line 16, ../../../../general/res/sass/features/_imagery.scss */ .l-image-main-wrapper .l-image-main { - background-color: none; + background-color: rgba(0, 0, 0, 0.1); bottom: 30px; } /* line 20, ../../../../general/res/sass/features/_imagery.scss */ .l-image-main-wrapper .l-image-main-controlbar { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 502a672ed6..cbc9a67e0a 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -104,7 +104,7 @@ $colorTabHeaderFg: lighten($colorTabHeaderBg, 40%); $colorTabHeaderBorder: $colorBodyBg; // Plot -$colorPlotBg: none; +$colorPlotBg: rgba(black, 0.1); $colorPlotFg: $colorBodyFg; $colorPlotHash: rgba(white, 0.2); $stylePlotHash: dashed; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 43711c2d8e..3a819210eb 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -3223,19 +3223,30 @@ span.req { float: left; margin-right: 10px; } -/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ +/*.object-holder { + .s-btn { + //background: red !important; + $h: 16px; + height: $h; + line-height: $h; + > span { + font-size: 0.7rem; + } + } +}*/ +/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -4238,21 +4249,29 @@ ul.tree { bottom: 5px; left: 5px; } /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */ -.frame.frame-template .view-switcher { +.frame.frame-template .s-btn, .frame.frame-template .s-menu, +.frame.frame-template .s-menu { height: 16px; line-height: 16px; + padding: 0 5px; } + /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */ + .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span, + .frame.frame-template .s-menu > span { + font-size: 0.65rem; } +/* line 59, ../../../../general/res/sass/user-environ/_frame.scss */ +.frame.frame-template .s-menu:after { + font-size: 8px; } +/* line 63, ../../../../general/res/sass/user-environ/_frame.scss */ +.frame.frame-template .view-switcher { z-index: 10; } - /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */ - .frame.frame-template .view-switcher > span { - font-size: 0.7rem; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */ + /* line 69, ../../../../general/res/sass/user-environ/_frame.scss */ .frame.frame-template .view-switcher { opacity: 0; } - /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */ + /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */ .frame.frame-template:hover .view-switcher { opacity: 1; } } -/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */ +/* line 80, ../../../../general/res/sass/user-environ/_frame.scss */ .frame .view-switcher .title-label { display: none; } @@ -4871,7 +4890,7 @@ table { display: none; } /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot .gl-plot-display-area { - background-color: #eee; + background-color: rgba(0, 0, 0, 0.05); position: absolute; top: 25px; right: 0; @@ -5648,7 +5667,7 @@ table { min-width: 150px; } /* line 16, ../../../../general/res/sass/features/_imagery.scss */ .l-image-main-wrapper .l-image-main { - background-color: #eee; + background-color: rgba(0, 0, 0, 0.05); bottom: 30px; } /* line 20, ../../../../general/res/sass/features/_imagery.scss */ .l-image-main-wrapper .l-image-main-controlbar { diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 1f46db34ce..61d76cebb8 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -102,7 +102,7 @@ $colorTabHeaderFg: pullForward($colorBodyFg, 20%); $colorTabHeaderBorder: $colorBodyBg; // Plot -$colorPlotBg: #eee; +$colorPlotBg: rgba(black, 0.05); $colorPlotFg: $colorBodyFg; $colorPlotHash: rgba(black, 0.2); $stylePlotHash: dashed;