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

[Frontend] Further cleanups to form elements

Browse Source 
#700
#689
#740
Removed _selects.scss and moved classes
into _controls.scss;
Reorg'd _controls;
Moved classes into _elems.scss;
Added and fixed cssclass defs in multiple
bundle.js files to allow better field widths
in overlay dialogs;
Fixed overlay custom scrollbar colors;
Fixed alignment of required glyphs in forms;
This commit is contained in:
Charles Hacskaylo 2016-03-16 14:33:23 -07:00
parent 32a42bd679
commit 3258342783
12 changed files with 122 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/generator/bundle.js
View File

@ -126,7 +126,7 @@ define([
{
"name": "Period",
"control": "textfield",
"cssclass": "l-small l-numeric",
"cssclass": "l-input-sm l-numeric",
"key": "period",
"required": true,
"property": [

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

@ -45,7 +45,6 @@
/********************************* FORMS */
@import "forms/elems";
@import "forms/selects";
@import "forms/channel-selector";
@import "forms/datetime";
@import "forms/validation";

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

@ -74,6 +74,12 @@
.l-composite-control {
vertical-align: middle;
&:not(.l-inline) {
margin-bottom: $interiorMargin;
}
&.l-inline {
display: inline-block;
}
&.l-checkbox {
.composite-control-label {
line-height: 18px;
@ -108,6 +114,7 @@
font-size: 0.7rem;
}
/******************************************************** CUSTOM CHECKBOXES */
label.checkbox.custom,
label.radio.custom {
$bg: pullForward($colorBodyBg, 10%);
@ -162,7 +169,40 @@ label.radio.custom {
label.checkbox.custom input:checked ~ em:before { content: "\32"; }
label.radio.custom input:checked ~ em:before { content: "\e619"; }
.s-menu-btn label.checkbox.custom {
margin-left: 5px;
}
.item .checkbox {
&.checked label {
box-shadow: none;
border-bottom: none;
}
}
label.form-control.checkbox {
input {
margin-right: $interiorMargin;
vertical-align: top;
}
}
/******************************************************** INPUTS */
input[type="text"],
input[type="search"] {
@include nice-input();
&.numeric {
text-align: right;
}
}
.l-input-lg input[type="text"] { width: 100% !important; }
.l-input-med input[type="text"] { width: 200px !important; }
.l-input-sm input[type="text"] { width: 50px !important; }
.l-numeric input[type="text"] { text-align: right; }
.input-labeled {
// Used in toolbar
margin-left: $interiorMargin;
label {
display: inline-block;
@ -176,28 +216,36 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
}
}
.s-menu-btn label.checkbox.custom {
margin-left: 5px;
}
.item .checkbox {
&.checked label {
box-shadow: none;
border-bottom: none;
/******************************************************** SELECTS */
.select {
@include btnSubtle($colorSelectBg);
@if $shdwBtns != none {
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
}
}
.context-available,
.s-icon-btn {
$c: $colorKey;
color: $c;
&:hover {
color: lighten($c, 10%);
padding: 0 $interiorMargin;
overflow: hidden;
position: relative;
line-height: $formInputH;
select {
@include appearance(none);
box-sizing: border-box;
background: none;
color: $colorSelectFg;
cursor: pointer;
border: none !important;
padding: 4px 25px 2px 0px;
width: 130%;
option {
margin: $interiorMargin 0; // Firefox
}
}
&:after {
@include contextArrow();
pointer-events: none;
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
position: absolute;
right: $interiorMargin; top: 0;
}
}
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** OBJECT-HEADER */
@ -331,7 +379,6 @@ body.desktop .object-header {
}
/******************************************************** SLIDERS */
.slider {
$knobH: 100%;
.slot {
@ -425,7 +472,7 @@ body.desktop .object-header {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
line-height: inherit; //$formInputH;
}
}
@ -479,11 +526,31 @@ body.desktop .object-header {
}
}
/******************************************************** BROWSER ELEMENTS */
/******************************************************** TEXTAREA */
textarea {
@include nice-textarea($colorInputBg, $colorInputFg);
position: absolute;
height: 100%;
width: 100%;
}
/******************************************************** MISC */
.context-available,
.s-icon-btn {
$c: $colorKey;
color: $c;
&:hover {
color: lighten($c, 10%);
}
}
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** BROWSER ELEMENTS */
body.desktop {
::-webkit-scrollbar {
border-radius: 2px;
box-sizing: border-box;
box-shadow: inset $scrollbarTrackShdw;
background-color: $scrollbarTrackColorBg;
@ -492,15 +559,15 @@ body.desktop {
}
::-webkit-scrollbar-thumb {
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
border-radius: 2px;
box-sizing: border-box;
&:hover {
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
}
background: $scrollbarThumbColor;
&:hover { background: $scrollbarThumbColorHov; }
}
.overlay ::-webkit-scrollbar-thumb {
$lr: 15%;
background: $scrollbarThumbColorOverlay;
&:hover { background: $scrollbarThumbColorOverlayHov; }
}
::-webkit-scrollbar-corner {

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

@ -139,13 +139,6 @@
}
}
label.form-control.checkbox {
input {
margin-right: $interiorMargin;
vertical-align: top;
}
}
.hint,
.s-hint {
font-size: 0.9em;
@ -165,31 +158,4 @@ label.form-control.checkbox {
color: lighten($colorFormInvalid, 30%);
padding: $interiorMargin;
}
}
input[type="text"],
input[type="search"] {
@include nice-input();
&.numeric {
text-align: right;
}
}
.l-input-med input[type="text"] {
width: 200px !important;
}
.l-input-sm input[type="text"] {
width: 50px !important;
}
.l-numeric input[type="text"] {
text-align: right;
}
textarea {
@include nice-textarea($colorInputBg, $colorInputFg);
position: absolute;
height: 100%;
width: 100%;
}

51
platform/commonUI/general/res/sass/forms/_selects.scss
View File

@ -1,51 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.select {
@include btnSubtle($colorSelectBg);
@if $shdwBtns != none {
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
}
padding: 0 $interiorMargin;
overflow: hidden;
position: relative;
line-height: $formInputH;
select {
@include appearance(none);
box-sizing: border-box;
background: none;
color: $colorSelectFg;
cursor: pointer;
border: none !important;
padding: 4px 25px 2px 0px;
width: 130%;
option {
margin: $interiorMargin 0; // Firefox
}
}
&:after {
@include contextArrow();
pointer-events: none;
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
position: absolute;
right: $interiorMargin; top: 0;
}
}

14
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -35,7 +35,6 @@
z-index: 100;
}
> .holder {
//$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
border-radius: $basicCr * 3;
color: $colorOvrFg;
@ -57,15 +56,8 @@
right: $m;
bottom: $m;
left: $m;
//.top-bar,
//.editor,
//.bottom-bar {
// @include absPosDefault();
//}
}
}
.title {
@include ellipsize();
font-size: 1.2em;
@ -120,7 +112,6 @@
bottom: 0;
left: 0;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
}
@ -132,11 +123,14 @@
margin: .5em 0;
width: 100%;
}
.select {
box-shadow: $shdwBtnsOverlay;
}
}
.t-dialog-sm .overlay > .holder {
// Used for blocker and in-progress dialogs, modal alerts, etc.
//@include test(red);
$h: 225px;
min-height: $h;
height: $h;

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

@ -27,6 +27,7 @@ $colorBtnIcon: $colorKey;
$colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
$sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.1);
$sliderColorRange: rgba($sliderColorBase, 0.3);
@ -173,6 +174,8 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
// Splitter
$splitterD: 25px; // splitterD and HandleD should both be odd, or even

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

@ -27,6 +27,7 @@ $colorBtnIcon: #eee;
$colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%;
$shdwBtns: none;
$shdwBtnsOverlay: none;
$sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.2);
@ -170,9 +171,11 @@ $shdwItemTreeIcon: none;
// Scrollbar
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
$scrollbarTrackColorBg: rgba(#000, 0.1);
$scrollbarThumbColor: darken($colorBodyBg, 50%);//
$scrollbarTrackColorBg: rgba(#000, 0.2);
$scrollbarThumbColor: darken($colorBodyBg, 50%);
$scrollbarThumbColorHov: $colorKey;
$scrollbarThumbColorOverlay: darken($colorOvrBg, 15%);
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
// Splitter
$splitterD: 24px;

2
platform/core/bundle.js
View File

@ -248,7 +248,7 @@ define([
"property": "name",
"pattern": "\\S+",
"required": true,
"cssclass": "l-med"
"cssclass": "l-input-lg"
}
]
},

7
platform/features/clock/bundle.js
View File

@ -182,7 +182,8 @@ define([
"value": "hh:mm:ss",
"name": "hh:mm:ss"
}
]
],
"cssclass": "l-inline"
},
{
"control": "select",
@ -195,7 +196,8 @@ define([
"value": "clock24",
"name": "24hr"
}
]
],
"cssclass": "l-inline"
}
]
}
@ -223,6 +225,7 @@ define([
{
"key": "timerFormat",
"control": "select",
"name": "Display Format",
"options": [
{
"value": "long",

4
platform/features/layout/bundle.js
View File

@ -278,12 +278,12 @@ define([
{
"name": "Horizontal grid (px)",
"control": "textfield",
"cssclass": "l-small l-numeric"
"cssclass": "l-input-sm l-numeric"
},
{
"name": "Vertical grid (px)",
"control": "textfield",
"cssclass": "l-small l-numeric"
"cssclass": "l-input-sm l-numeric"
}
],
"key": "layoutGrid",

3
platform/features/pages/bundle.js
View File

@ -49,7 +49,8 @@ define([
"name": "URL",
"control": "textfield",
"pattern": "^(ftp|https?)\\:\\/\\/\\w+(\\.\\w+)*(\\:\\d+)?(\\/\\S*)*$",
"required": true
"required": true,
"cssclass": "l-input-lg"
}
]
}