ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-12 13:47:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Layout and positioning fixes for TC controls

Browse Source 
open #889
IN PROGRESS
- Smaller font used on range value;
- More space allocated to left and right
for slider range values;
- Style tweaks to slider look;
- Layout and style of datetime inputs
fixed;
- Input error colors fixed, moved to
theme constants;
This commit is contained in:
Charles Hacskaylo 2016-05-09 17:56:50 -07:00
parent 2e8604e18d
commit c301523156
9 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
$uePaneMiniTabCollapsedW: 11px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 23px, 15px);
$ueTimeControlH: (33px, 15px, 15px);
// Panes
$ueBrowseLeftPaneTreeMinW: 150px;
$ueBrowseLeftPaneTreeMaxW: 35%;

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

@ -63,9 +63,10 @@ input, textarea {
font-family: Helvetica, Arial, sans-serif;
}
input[type="text"] {
input[type="text"],
input[type="search"] {
vertical-align: baseline;
padding: 3px 5px !important;
padding: 3px 5px;
}
h1, h2, h3 {

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

@ -322,13 +322,13 @@
color: $fg;
outline: none;
&.error {
background: rgba(red, 0.5);
background-color: $colorFormFieldErrorBg;
color: $colorFormFieldErrorFg;
}
}
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
@mixin contextArrow() {

2
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -29,7 +29,7 @@
.accordion-head {
$op: 0.2;
border-radius: $basicCr * 0.75;
box-sizing: "border-box";
box-sizing: border-box;
background: rgba($colorBodyFg, $op);
cursor: pointer;
font-size: 0.75em;

46
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -10,8 +10,8 @@
$knobHOffset: 0px;
$knobM: ($sliderKnobW + $knobHOffset) * -1;
$rangeValPad: $interiorMargin;
$rangeValOffset: $sliderKnobW;
$timeRangeSliderLROffset: 80px + ($sliderKnobW * 2);
$rangeValOffset: $sliderKnobW + $interiorMargin;
$timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
$r1H: nth($ueTimeControlH,1);
$r2H: nth($ueTimeControlH,2);
$r3H: nth($ueTimeControlH,3);
@ -38,7 +38,6 @@
.l-time-range-inputs-holder {
height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
//padding-top: $interiorMargin;
border-top: 1px solid $colorInteriorBorder;
&.l-flex-row {
@include align-items(center);
@ -51,7 +50,7 @@
font-size: 120%;
vertical-align: middle;
}
.l-time-range-input,
.l-time-range-input-w,
.l-time-range-inputs-elem {
margin-right: $interiorMargin;
.lbl {
@ -59,9 +58,23 @@
}
.ui-symbol.icon {
font-size: 11px;
width: 11px;
}
}
.l-time-range-input-w {
// Wraps a datetime text input field
position: relative;
input[type="text"] {
width: 200px;
&.picker-icon {
padding-right: 20px;
}
}
.icon-calendar {
position: absolute;
right: 5px;
top: 5px;
}
}
}
.l-time-range-slider-holder {
@ -80,26 +93,14 @@
width: $myW;
height: auto;
z-index: 2;
&:before,
&:after {
background-color: $myC;
//content: "";
position: absolute;
}
&:before {
// Vert line
background-color: $myC;
position: absolute;
content: "";
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
width: 1px;
}
/* &:after {
// Circle element
border-radius: $myW;
@include transform(translateY(-50%));
top: 50%; right: 0; bottom: auto; left: 0;
width: auto;
height: $myW;
}*/
}
&:hover .toi-line {
@include toiLineHovEffects;
@ -149,10 +150,10 @@
.range-value {
@include trans-prop-nice-fade(.25s);
font-size: 0.7rem;
padding: 0 $rangeValOffset;
position: absolute;
height: $r2H;
line-height: $r2H/2;
line-height: $r2H;
white-space: nowrap;
z-index: 1;
}
&:hover {
@ -181,7 +182,7 @@
.l-time-domain-selector {
position: absolute;
right: 0px;
bottom: 43px;
bottom: $r2H + $r3H + $interiorMargin;
}
}
@ -272,7 +273,6 @@
}
}
@include tablet {
.l-time-controller {
height: 17px;

9
platform/commonUI/general/res/templates/controls/datetime-field.html
View File

@ -19,18 +19,17 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class="s-btn"
ng-controller="DateTimeFieldController">
<span ng-controller="DateTimeFieldController">
<input type="text"
ng-model="textValue"
ng-blur="restoreTextValue(); ngBlur()"
ng-class="{
error: textInvalid ||
(structure.validate &&
!structure.validate(ngModel[field]))
!structure.validate(ngModel[field])),
'picker-icon': structure.format === 'utc' || !structure.format
}">
</input>
<a class="ui-symbol icon icon-calendar"
</input><a class="ui-symbol icon icon-calendar"
ng-if="structure.format === 'utc' || !structure.format"
ng-click="picker.active = !picker.active">
</a>

6
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -23,7 +23,7 @@
<form class="l-time-range-inputs-holder l-flex-row"
ng-submit="trCtrl.updateBoundsFromForm()">
<span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
<span class="l-time-range-input flex-elem">
<span class="l-time-range-input-w flex-elem">
<mct-control key="'datetime-field'"
structure="{
format: parameters.format,
@ -38,7 +38,7 @@
<span class="l-time-range-inputs-elem lbl flex-elem">to</span>
<span class="l-time-range-input flex-elem" ng-controller="ToggleController as t2">
<span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
<mct-control key="'datetime-field'"
structure="{
format: parameters.format,
@ -48,7 +48,7 @@
ng-blur="trCtrl.updateBoundsFromForm()"
field="'end'"
class="time-range-end">
</mct-control>&nbsp;
</mct-control>
</span>
<input type="submit" class="hidden">

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

@ -70,8 +70,10 @@ $colorCreateMenuText: $colorMenuFg;
$colorCheck: $colorKey;
$colorFormRequired: $colorAlt1;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormError: #990000;
$colorFormInvalid: #ff3300;
$colorFormFieldErrorBg: $colorFormError;
$colorFormFieldErrorFg: rgba(#fff, 0.6);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#fff, 0.1);
$colorInputBg: rgba(#000, 0.1);

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

@ -36,7 +36,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5);
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
$sliderKnobW: 10px;
$sliderKnobR: 2px;
$timeControllerToiLineColor: $colorBodyFg;
$timeControllerToiLineColorHov: #0052b5;
@ -70,8 +70,10 @@ $colorCreateMenuText: $colorBodyFg;
$colorCheck: $colorKey;
$colorFormRequired: $colorKey;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormError: #990000;
$colorFormInvalid: #ff2200;
$colorFormFieldErrorBg: $colorFormError;
$colorFormFieldErrorFg: rgba(#fff, 0.6);
$colorFormLines: rgba(#000, 0.1);
$colorFormSectionHeader: rgba(#000, 0.05);
$colorInputBg: $colorGenBg;