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

[Frontend] Styles for tabular views and view sections

Browse Source 
Original issue: https://github.jpl.nasa.gov/MissionControl/vista/issues/30

New CSS and symbols to support tabular views;
Required by JPL branch vista30 (https://github.jpl.nasa.gov/MissionControl/vista/tree/vista30)
This commit is contained in:
Charles Hacskaylo
2015-08-17 15:11:27 -07:00
parent 9ab06cfdd2
commit 366ec3d516
18 changed files with 605 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@ $interiorMargin: 5px;
$interiorMarginLg: $interiorMargin * 2;
$interiorMarginSm: 3px;
$basicCr: 2px;
$controlCr: 2px;
$controlCr: 3px;
$smallCr: 2px;
$badgeW: 35px;
@@ -84,6 +84,7 @@ $tabularColorBodyBg: darken($colorBodyBg, 10%);
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
$tabularColorHeaderBorder: $colorBodyBg;
/************************** RATIOS */
$ltGamma: 20%;
@@ -115,9 +116,9 @@ $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
// Tabular
$tabularHeaderH: 18px;
$tabularHeaderH: 22px; //18px
$tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 2px;
$tabularTdPadTB: 3px;
// Imagery
$imageMainControlBarH: 22px;
$imageThumbsD: 120px;
@@ -141,7 +142,6 @@ $reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em;
/************************** CONTROLS */
$controlCr: $basicCr;
$controlDisabledOpacity: 0.3;
$formLabelW: 20%;
$formInputH: 22px;

5
platform/commonUI/general/res/sass/_global.scss
View File

@@ -50,6 +50,11 @@ input, textarea {
font-family: Helvetica, Arial, sans-serif;
}
input[type="text"] {
vertical-align: baseline;
padding: 3px 5px !important;
}
h1, h2, h3 {
margin: 0;
}

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

@@ -34,7 +34,6 @@
@import "fixed-position";
@import "about";
@import "text";
@import "badges";
@import "icons";
@import "limits";
@import "data-status";
@@ -49,7 +48,6 @@
@import "edit/editor";
@import "features/imagery";
@import "features/time-display";
@import "forms/mixins";
@import "forms/elems";
@import "forms/validation";
@import "forms/text-input";
@@ -70,5 +68,7 @@
@import "properties";
@import "autoflow";
@import "iframe";
@import "messages";
@import "initialization";
@import "hide-non-functional";
@import "views";

12
platform/commonUI/general/res/sass/_messages.scss Normal file
View File

@@ -0,0 +1,12 @@
/* Styles for messages */
.message {
&.block {
@include border-radius($basicCr);
padding: $interiorMarginLg;
}
&.error {
background-color: rgba($colorAlert,0.3);
color: lighten($colorAlert, 20%);
}
}

32
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -259,6 +259,38 @@
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
}
/*********************************************** FORM ELEMENTS */
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1);
border: none;
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%);
outline: none;
&.error {
background: rgba(red, 0.5);
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: $interiorMargin;
}
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include nice-input($bg, $fg);
background: lighten($bg, 3%);
border-bottom: 1px solid lighten($bg, 10%);
}
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {

21
platform/commonUI/general/res/sass/_views.scss Normal file
View File

@@ -0,0 +1,21 @@
/* Styles for sub-dividing views generically */
.l-view-section {
@include absPosDefault(0);
font-size: 0.8rem;
h2 {
color: #fff;
margin-bottom: $interiorMargin;
}
&.fixed {
font-size: 0.8em;
}
&.scrolling {
overflow: auto;
}
.controls,
label,
.inline-block {
display: inline-block;
}
}

7
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -86,13 +86,6 @@
}
}
input[type="text"] {
height: $formInputH;
line-height: $formInputH;
margin-top: -4px;
vertical-align: baseline;
}
.l-med input[type="text"] {
width: 200px;
}

4
platform/commonUI/general/res/sass/forms/_mixins.scss
View File

@@ -23,11 +23,11 @@
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1);
border: none;
border-bottom: 1px solid rgba(#fff, 0.1);
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%);
outline: none;
&.error {

16
platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
View File

@@ -50,6 +50,12 @@
margin-top: $d / -1;
margin-left: $d / -1;
z-index: 2;
&.inline {
display: inline-block !important;
margin-right: $interiorMargin;
position: relative !important;
vertical-align: middle;
}
}
.l-wait-spinner-holder {
@@ -80,4 +86,14 @@
margin: 0 !important;
padding: 0 !important;
top: 2px; left: 0;
}
.wait-spinner.sm {
$d: 13px;
@include wait-spinner(0.25em, $colorKey);
height: $d; width: $d;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
top: 0; left: 0;
}

57
platform/commonUI/general/res/sass/lists/_tabular.scss
View File

@@ -24,13 +24,14 @@
height: 100%;
}
.tabular {
.tabular,
table {
@include box-sizing(border-box);
border-spacing: 0;
border-collapse: collapse;
color: #fff;
display: table;
font-size: 0.75em;
font-size: 0.75rem;
position: relative;
//height: 100%; MOVED
width: 100%;
@@ -41,19 +42,7 @@
//table-layout: fixed; MOVED
}
thead, .thead {
//width: calc(100% - 10px); MOVED
tr, .tr {
height: $tabularHeaderH;
}
&:before {
content: "";
display: block;
z-index: 0;
position: absolute;
width: 100%;
height: $tabularHeaderH;
background: rgba(#fff, 0.15);
}
border-bottom: 1px solid $tabularColorHeaderBorder;
}
tbody, .tbody {
//@include absPosDefault(0); MOVED
@@ -72,14 +61,21 @@
&:first-child .td {
border-top: none;
}
&.group-header {
td, .td {
$d: 5%;
background-color: darken($tabularColorHeaderBg, $d);
color: darken($tabularColorHeaderFg, $d);
}
}
th, .th, td, .td {
display: table-cell;
}
th, .th {
border: none;
border-left: 1px solid $tabularColorBorder;
background-color: $tabularColorHeaderBg;
border-left: 1px solid $tabularColorHeaderBorder;
color: $tabularColorHeaderFg;
padding: 0 $tabularTdPadLR;
padding: $tabularTdPadLR $tabularTdPadLR;
white-space: nowrap;
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
&:first-child {
@@ -100,10 +96,11 @@
}
}
td, .td {
border-top: 1px solid $tabularColorBorder;
min-width: 110px;
border-bottom: 1px solid $tabularColorBorder;
min-width: 20px;
color: $colorTelemFresh;
padding: $tabularTdPadTB $tabularTdPadLR;
word-wrap: break-word;
vertical-align: top;
&.numeric {
text-align: right;
@@ -119,9 +116,20 @@
}
}
&.filterable {
thead, .thead {
tr.s-filters, .tr.s-filters {
th, .th {
//border-left: none;
}
}
}
tbody, .tbody {
top: $tabularHeaderH * 2;
}
input[type="text"] {
@include box-sizing(border-box);
width: 100%; //50px;
}
}
&.fixed-header {
@@ -133,6 +141,15 @@
}
thead, .thead {
width: calc(100% - 10px);
&:before {
content: "";
display: block;
z-index: 0;
position: absolute;
width: 100%;
height: $tabularHeaderH;
background: rgba(#fff, 0.15);
}
}
tbody, .tbody {
@include absPosDefault(0);