alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Style and display changes to status block

Browse Source 
open #159
open #170
Moved classes from _bottom-bar.scss into _layout.scss
and new file _messages.scss;
Removed  _bottom-bar.scss;
Revised display behavior of .status.block to show label on
hover;
This commit is contained in:
Charles Hacskaylo
2015-10-02 15:41:02 -07:00
parent d6fe543c16
commit 7014808c13
6 changed files with 338 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/_main.scss
View File

@@ -39,6 +39,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
@import "controls/time-controller";
@import "mobile/controls/menus";
@@ -62,7 +63,6 @@
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/bottom-bar";
@import "user-environ/tool-bar";
/********************************* VIEWS */

58
platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss → platform/commonUI/general/res/sass/controls/_messages.scss
View File

@@ -19,46 +19,17 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.ue-bottom-bar {
background: $colorFooterBg;
color: lighten($colorBodyBg, 30%);
font-size: .7rem;
//line-height: $ueFooterH - 4px;
//line-height: $ueFooterH; // New status bar design
.status-holder {
//@include border-radius($basicCr * 1.75); // New status bar design
@include box-sizing(border-box);
//background: $colorFooterBg;
//border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design
@include absPosDefault($interiorMargin);
@include ellipsize();
line-height: $ueFooterH - ($interiorMargin * 2);
right: 120px;
text-transform: uppercase;
}
.app-logo {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
left: auto;
cursor: pointer;
//font-size: 0.8em;
//line-height: $ueFooterH - 10px;
//padding-top: 1px;
//text-transform: uppercase;
&.logo-openmctweb {
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
}
}
}
.status.block {
//display: inline-block;
display: inline; // New status bar design. Inline to support ellipsis overflow
margin-right: $interiorMarginLg;
//@include test();
cursor: help;
display: inline-block;
margin-right: $interiorMargin;
.status-indicator,
.label {
vertical-align: top;
}
.status-indicator {
//@include border-radius($controlCr * 0.9);
//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
//@include text-shadow(rgba(black, 0.3) 0 0 2px);
display: inline-block;
margin-right: $interiorMarginSm;
color: $colorKey;
@@ -69,4 +40,17 @@
color: #ffaa00;
}
}
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s);
display: inline-block;
overflow: hidden;
max-width: 0px;
}
&:hover {
.label {
max-width: 150px;
width: auto;
}
}
}

20
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -125,19 +125,35 @@
}
}
// from _bottom-bar.scss
.ue-bottom-bar {
//@include absPosDefault($bodyMargin);
@include absPosDefault(0);// New status bar design
top: auto;
height: $ueFooterH;
line-height: $ueFooterH - ($interiorMargin * 2);
background: $colorFooterBg;
color: lighten($colorBodyBg, 30%);
font-size: .7rem;
.status-holder {
//right: $ueAppLogoW + $bodyMargin; New status bar design
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
@include ellipsize();
//line-height: $ueFooterH - ($interiorMargin * 2);
right: 120px;
text-transform: uppercase;
z-index: 1;
}
.app-logo {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
cursor: pointer;
left: auto;
width: $ueAppLogoW;
z-index: 2;
&.logo-openmctweb {
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
}
}
}
}