ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-26 22:10:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Minor tweaks to sizing of controls

Browse Source 
open #95b
View switcher and plot control buttons now made small
when object is in a frame context in a Layout;
This commit is contained in:
Charles Hacskaylo 2015-09-21 14:24:19 -07:00
parent 9a7f435b61
commit c9b2f5804d
7 changed files with 97 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundles.json
View File

@ -8,7 +8,7 @@
"platform/commonUI/dialog", "platform/commonUI/dialog",
"platform/commonUI/general", "platform/commonUI/general",
"platform/commonUI/inspect", "platform/commonUI/inspect",
"platform/commonUI/themes/espresso", "platform/commonUI/themes/snow",
"platform/containment", "platform/containment",
"platform/execution", "platform/execution",
"platform/telemetry", "platform/telemetry",

1
platform/commonUI/general/res/sass/_constants.scss
View File

@ -96,6 +96,7 @@ $menuLineH: 1.5rem;
$menuLineHPx: 24px; $menuLineHPx: 24px;
$btnStdH: 25px; $btnStdH: 25px;
$btnToolbarH: $btnStdH; $btnToolbarH: $btnStdH;
$btnFrameH: 16px;
/************************** PATHS */ /************************** PATHS */
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory

17
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.frame { .frame {
$ohH: 16px; $ohH: $btnFrameH;
$bc: $colorInteriorBorder; $bc: $colorInteriorBorder;
&.child-frame.panel { &.child-frame.panel {
background: $colorBodyBg; background: $colorBodyBg;
@ -46,14 +46,23 @@
left: $myM; left: $myM;
} }
&.frame-template { &.frame-template {
.view-switcher { .s-btn,
.s-menu {
height: $ohH; height: $ohH;
line-height: $ohH; line-height: $ohH;
z-index: 10; padding: 0 $interiorMargin;
> span { > 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 // 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 // Frame template is used because we need to target the lowest nested frame
@include desktop { @include desktop {

60
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -20,7 +20,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } 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 { html {
line-height: 1; } 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 { ol, ul {
list-style: none; } 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } 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 { q, blockquote {
quotes: none; } 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } 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 { a img {
border: none; } 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 { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@ -3291,19 +3291,30 @@ span.req {
float: left; float: left;
margin-right: 10px; } 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 { .l-flex {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
-webkit-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 { .l-flex .left {
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
padding-right: 10px; } padding-right: 10px; }
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@ -4325,21 +4336,29 @@ ul.tree {
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 49, ../../../../general/res/sass/user-environ/_frame.scss */ /* 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; height: 16px;
line-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; } 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) { @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 { .frame.frame-template .view-switcher {
opacity: 0; } 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 { .frame.frame-template:hover .view-switcher {
opacity: 1; } } 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 { .frame .view-switcher .title-label {
display: none; } display: none; }
@ -4958,6 +4977,7 @@ table {
display: none; } display: none; }
/* line 76, ../../../../general/res/sass/plots/_plots-main.scss */ /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-display-area { .gl-plot .gl-plot-display-area {
background-color: rgba(0, 0, 0, 0.1);
position: absolute; position: absolute;
top: 25px; top: 25px;
right: 0; right: 0;
@ -5759,7 +5779,7 @@ table {
min-width: 150px; } min-width: 150px; }
/* line 16, ../../../../general/res/sass/features/_imagery.scss */ /* line 16, ../../../../general/res/sass/features/_imagery.scss */
.l-image-main-wrapper .l-image-main { .l-image-main-wrapper .l-image-main {
background-color: none; background-color: rgba(0, 0, 0, 0.1);
bottom: 30px; } bottom: 30px; }
/* line 20, ../../../../general/res/sass/features/_imagery.scss */ /* line 20, ../../../../general/res/sass/features/_imagery.scss */
.l-image-main-wrapper .l-image-main-controlbar { .l-image-main-wrapper .l-image-main-controlbar {

2
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -104,7 +104,7 @@ $colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: none; $colorPlotBg: rgba(black, 0.1);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(white, 0.2); $colorPlotHash: rgba(white, 0.2);
$stylePlotHash: dashed; $stylePlotHash: dashed;

61
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -20,7 +20,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } 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 { html {
line-height: 1; } 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 { ol, ul {
list-style: none; } 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } 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 { q, blockquote {
quotes: none; } 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } 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 { a img {
border: none; } 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 { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@ -3223,19 +3223,30 @@ span.req {
float: left; float: left;
margin-right: 10px; } 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 { .l-flex {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
-webkit-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 { .l-flex .left {
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
padding-right: 10px; } padding-right: 10px; }
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@ -4238,21 +4249,29 @@ ul.tree {
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 49, ../../../../general/res/sass/user-environ/_frame.scss */ /* 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; height: 16px;
line-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; } 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) { @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 { .frame.frame-template .view-switcher {
opacity: 0; } 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 { .frame.frame-template:hover .view-switcher {
opacity: 1; } } 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 { .frame .view-switcher .title-label {
display: none; } display: none; }
@ -4871,7 +4890,7 @@ table {
display: none; } display: none; }
/* line 76, ../../../../general/res/sass/plots/_plots-main.scss */ /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-display-area { .gl-plot .gl-plot-display-area {
background-color: #eee; background-color: rgba(0, 0, 0, 0.05);
position: absolute; position: absolute;
top: 25px; top: 25px;
right: 0; right: 0;
@ -5648,7 +5667,7 @@ table {
min-width: 150px; } min-width: 150px; }
/* line 16, ../../../../general/res/sass/features/_imagery.scss */ /* line 16, ../../../../general/res/sass/features/_imagery.scss */
.l-image-main-wrapper .l-image-main { .l-image-main-wrapper .l-image-main {
background-color: #eee; background-color: rgba(0, 0, 0, 0.05);
bottom: 30px; } bottom: 30px; }
/* line 20, ../../../../general/res/sass/features/_imagery.scss */ /* line 20, ../../../../general/res/sass/features/_imagery.scss */
.l-image-main-wrapper .l-image-main-controlbar { .l-image-main-wrapper .l-image-main-controlbar {

2
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -102,7 +102,7 @@ $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: #eee; $colorPlotBg: rgba(black, 0.05);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(black, 0.2); $colorPlotHash: rgba(black, 0.2);
$stylePlotHash: dashed; $stylePlotHash: dashed;