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

[Frontend] Styling for New Edit Mode

Browse Source 
open #198
Refined CSS classing and animation timing;
This commit is contained in:
Charles Hacskaylo 2015-10-20 14:41:02 -07:00
parent 685dd2114d
commit 15c1bf20ab
5 changed files with 140 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -51,11 +51,11 @@
</div> </div>
<div class="l-object-wrapper" <div class="l-object-wrapper"
ng-class="{ active:editMode, 'not-active':!editMode }"> ng-class="{ active:editMode }">
<div class="l-object-wrapper-inner l-flex flex-col"> <div class="l-object-wrapper-inner l-flex flex-col">
<!-- Toolbar and Save/Cancel buttons --> <!-- Toolbar and Save/Cancel buttons -->
<div class="l-edit-controls flex-elem l-flex flex-row" <div class="l-edit-controls flex-elem l-flex flex-row"
ng-if="editMode"> ng-class="{ active:editMode }">
<mct-toolbar name="mctToolbar" <mct-toolbar name="mctToolbar"
structure="toolbar.structure" structure="toolbar.structure"
ng-model="toolbar.state" ng-model="toolbar.state"

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

@ -62,7 +62,7 @@
} }
@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) { @mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
@include transition-property(height, width, top, right, bottom, left); @include transition-property(height, width, top, right, bottom, left, opacity);
@include transition-duration($t); @include transition-duration($t);
@include transition-timing-function($tf); @include transition-timing-function($tf);
} }

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

@ -288,7 +288,7 @@
} }
.object-holder { .object-holder {
@include trans-prop-nice-resize(0.3s); @include trans-prop-nice-resize(0.25s);
overflow: hidden; // Contained objects need to handle their own overflow now overflow: hidden; // Contained objects need to handle their own overflow now
> ng-include { > ng-include {
@include absPosDefault(0, auto); @include absPosDefault(0, auto);
@ -318,13 +318,19 @@
.l-object-wrapper-inner { .l-object-wrapper-inner {
@extend .abs; @extend .abs;
@include display-flex(column nowrap); @include display-flex(column nowrap);
@include trans-prop-nice-resize(0.5s); @include trans-prop-nice-resize(0.25s);
} }
.l-edit-controls { .l-edit-controls {
border-bottom: 1px solid $colorInteriorBorder; @include trans-prop-nice-resize(0.25s);
height: $ueEditToolBarH + $interiorMargin; height: 0;
line-height: $ueEditToolBarH; opacity: 0;
&.active {
border-bottom: 1px solid $colorInteriorBorder;
height: $ueEditToolBarH + $interiorMargin;
line-height: $ueEditToolBarH;
opacity: 1;
}
} }
.object-browse-bar .s-btn, .object-browse-bar .s-btn,
@ -367,19 +373,19 @@
@include display-flex; @include display-flex;
&.flex-row { &.flex-row {
@include flex-flow(row nowrap); @include flex-flow(row nowrap);
.flex-elem { .flex-elem.active {
margin-left: $interiorMargin; margin-right: $interiorMargin;
&:first-child { &:last-child {
margin-left: 0; margin-right: 0;
} }
} }
} }
&.flex-col { &.flex-col {
@include flex-flow(column nowrap); @include flex-flow(column nowrap);
.flex-elem { .flex-elem.active {
margin-top: $interiorMarginLg; margin-bottom: $interiorMarginLg;
&:first-child { &:last-child {
margin-top: 0; margin-bottom: 0;
} }
} }
} }

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

@ -3602,14 +3602,14 @@ span.req {
/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
-moz-transition-property: height, width, top, right, bottom, left; -moz-transition-property: height, width, top, right, bottom, left, opacity;
-o-transition-property: height, width, top, right, bottom, left; -o-transition-property: height, width, top, right, bottom, left, opacity;
-webkit-transition-property: height, width, top, right, bottom, left; -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left; transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.3s; -moz-transition-duration: 0.25s;
-o-transition-duration: 0.3s; -o-transition-duration: 0.25s;
-webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.25s;
transition-duration: 0.3s; transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
@ -3681,14 +3681,14 @@ span.req {
.l-object-wrapper-inner { .l-object-wrapper-inner {
display: -webkit-column nowrap; display: -webkit-column nowrap;
display: column nowrap; display: column nowrap;
-moz-transition-property: height, width, top, right, bottom, left; -moz-transition-property: height, width, top, right, bottom, left, opacity;
-o-transition-property: height, width, top, right, bottom, left; -o-transition-property: height, width, top, right, bottom, left, opacity;
-webkit-transition-property: height, width, top, right, bottom, left; -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left; transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.5s; -moz-transition-duration: 0.25s;
-o-transition-duration: 0.5s; -o-transition-duration: 0.25s;
-webkit-transition-duration: 0.5s; -webkit-transition-duration: 0.25s;
transition-duration: 0.5s; transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
@ -3696,11 +3696,28 @@ span.req {
/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
.l-edit-controls { .l-edit-controls {
border-bottom: 1px solid rgba(153, 153, 153, 0.1); -moz-transition-property: height, width, top, right, bottom, left, opacity;
height: 30px; -o-transition-property: height, width, top, right, bottom, left, opacity;
line-height: 25px; } -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
height: 0;
opacity: 0; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
.l-edit-controls.active {
border-bottom: 1px solid rgba(153, 153, 153, 0.1);
height: 30px;
line-height: 25px;
opacity: 1; }
/* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 336, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -3712,12 +3729,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -3733,49 +3750,49 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 358, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex { .l-flex {
display: -webkit-flex; display: -webkit-flex;
display: flex; } display: flex; }
/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row { .l-flex.flex-row {
-webkit-flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
flex-flow: row nowrap; } flex-flow: row nowrap; }
/* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem { .l-flex.flex-row .flex-elem.active {
margin-left: 5px; } margin-right: 5px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem:first-child { .l-flex.flex-row .flex-elem.active:last-child {
margin-left: 0; } margin-right: 0; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col { .l-flex.flex-col {
-webkit-flex-flow: column nowrap; -webkit-flex-flow: column nowrap;
flex-flow: column nowrap; } flex-flow: column nowrap; }
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem { .l-flex.flex-col .flex-elem.active {
margin-top: 10px; } margin-bottom: 10px; }
/* line 381, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem:first-child { .l-flex.flex-col .flex-elem.active:last-child {
margin-top: 0; } margin-bottom: 0; }
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem { .l-flex .flex-elem {
-webkit-flex: 0 1; -webkit-flex: 0 1;
flex: 0 1; flex: 0 1;
position: relative; } position: relative; }
/* line 390, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem.grow { .l-flex .flex-elem.grow {
-webkit-flex: 1 1; -webkit-flex: 1 1;
flex: 1 1; } flex: 1 1; }
/* line 394, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;

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

@ -3549,14 +3549,14 @@ span.req {
/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
-moz-transition-property: height, width, top, right, bottom, left; -moz-transition-property: height, width, top, right, bottom, left, opacity;
-o-transition-property: height, width, top, right, bottom, left; -o-transition-property: height, width, top, right, bottom, left, opacity;
-webkit-transition-property: height, width, top, right, bottom, left; -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left; transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.3s; -moz-transition-duration: 0.25s;
-o-transition-duration: 0.3s; -o-transition-duration: 0.25s;
-webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.25s;
transition-duration: 0.3s; transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
@ -3628,14 +3628,14 @@ span.req {
.l-object-wrapper-inner { .l-object-wrapper-inner {
display: -webkit-column nowrap; display: -webkit-column nowrap;
display: column nowrap; display: column nowrap;
-moz-transition-property: height, width, top, right, bottom, left; -moz-transition-property: height, width, top, right, bottom, left, opacity;
-o-transition-property: height, width, top, right, bottom, left; -o-transition-property: height, width, top, right, bottom, left, opacity;
-webkit-transition-property: height, width, top, right, bottom, left; -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left; transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.5s; -moz-transition-duration: 0.25s;
-o-transition-duration: 0.5s; -o-transition-duration: 0.25s;
-webkit-transition-duration: 0.5s; -webkit-transition-duration: 0.25s;
transition-duration: 0.5s; transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
@ -3643,11 +3643,28 @@ span.req {
/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
.l-edit-controls { .l-edit-controls {
border-bottom: 1px solid rgba(102, 102, 102, 0.2); -moz-transition-property: height, width, top, right, bottom, left, opacity;
height: 30px; -o-transition-property: height, width, top, right, bottom, left, opacity;
line-height: 25px; } -webkit-transition-property: height, width, top, right, bottom, left, opacity;
transition-property: height, width, top, right, bottom, left, opacity;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
height: 0;
opacity: 0; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
.l-edit-controls.active {
border-bottom: 1px solid rgba(102, 102, 102, 0.2);
height: 30px;
line-height: 25px;
opacity: 1; }
/* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 336, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -3659,12 +3676,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -3680,49 +3697,49 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 358, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex { .l-flex {
display: -webkit-flex; display: -webkit-flex;
display: flex; } display: flex; }
/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row { .l-flex.flex-row {
-webkit-flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
flex-flow: row nowrap; } flex-flow: row nowrap; }
/* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem { .l-flex.flex-row .flex-elem.active {
margin-left: 5px; } margin-right: 5px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem:first-child { .l-flex.flex-row .flex-elem.active:last-child {
margin-left: 0; } margin-right: 0; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col { .l-flex.flex-col {
-webkit-flex-flow: column nowrap; -webkit-flex-flow: column nowrap;
flex-flow: column nowrap; } flex-flow: column nowrap; }
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem { .l-flex.flex-col .flex-elem.active {
margin-top: 10px; } margin-bottom: 10px; }
/* line 381, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem:first-child { .l-flex.flex-col .flex-elem.active:last-child {
margin-top: 0; } margin-bottom: 0; }
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem { .l-flex .flex-elem {
-webkit-flex: 0 1; -webkit-flex: 0 1;
flex: 0 1; flex: 0 1;
position: relative; } position: relative; }
/* line 390, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem.grow { .l-flex .flex-elem.grow {
-webkit-flex: 1 1; -webkit-flex: 1 1;
flex: 1 1; } flex: 1 1; }
/* line 394, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;