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

[Frontend] Styling for New Edit Mode

Browse Source 
open #198
In-progress styling of toolbar elements;
Revamped edit-action-buttons.html to use only icons;
This commit is contained in:
Charles Hacskaylo 2015-10-20 15:43:53 -07:00
parent 15c1bf20ab
commit 5382cca435
6 changed files with 77 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,24 +56,43 @@
<!-- Toolbar and Save/Cancel buttons -->
<div class="l-edit-controls flex-elem l-flex flex-row"
ng-class="{ active:editMode }">
<mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state"
class="flex-elem grow">
</mct-toolbar>
<!-- <mct-representation key="'edit-action-buttons'"
<!-- from toolbar.html -->
<!-- <mct-toolbar-x class="flex-elem grow">
<form novalidate>
<div class="tool-bar btn-bar contents abs">
<span class="l-control-group">
<span class="s-menu-btn">Foo</span>
<span class="s-menu-btn">Bar</span>
</span>
</div>
</form>
</mct-toolbar-x>-->
<mct-representation key="'edit-action-buttons'"
mct-object="domainObject"
class='flex-elem conclude-editing'>
</mct-representation>-->
</mct-representation>
<!-- from edit-action-buttons.html -->
<span>
<!-- <span>
<span ng-repeat="btn in editBtns">
<a class='s-btn t-{{btn.cssclass}}'
title='{{btn.title}}'
ng-click="currentAction.perform()"
ng-class="{ major: $index === 0 }"></a>
</span>
</span>
</span>-->
</div>
<mct-representation key="representation.selected.key"

6
platform/commonUI/edit/res/templates/edit-action-buttons.html
View File

@ -21,10 +21,10 @@
-->
<span ng-controller="EditActionController">
<span ng-repeat="currentAction in editActions">
<a class='s-btn'
<a class='s-btn t-{{currentAction.getMetadata().key}}'
title='{{currentAction.getMetadata().name}}'
ng-click="currentAction.perform()"
ng-class="{ major: $index === 0, subtle: $index !== 0 }">
{{currentAction.getMetadata().name}}
ng-class="{ major: $index === 0 }">
</a>
</span>
</span>

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

@ -75,7 +75,7 @@ a.disabled {
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count($iteration);
@include animation-timing-function(linear);
@include animation-timing-function(ease);
}
.pulse {

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

@ -304,7 +304,7 @@
@extend .abs;
top: $ueTopBarH + $interiorMarginLg;
&.active {
@include pulseBorder($colorKey, 150ms, 6);
@include pulseBorder($colorKey, 150ms, 8);
@include border-radius($controlCr);
border-color: $colorKey;
border-width:2px;
@ -325,6 +325,7 @@
@include trans-prop-nice-resize(0.25s);
height: 0;
opacity: 0;
overflow: hidden;
&.active {
border-bottom: 1px solid $colorInteriorBorder;
height: $ueEditToolBarH + $interiorMargin;

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

@ -3643,12 +3643,12 @@ span.req {
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-moz-animation-iteration-count: 6;
-webkit-animation-iteration-count: 6;
animation-iteration-count: 6;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: 8;
-webkit-animation-iteration-count: 8;
animation-iteration-count: 8;
-moz-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
@ -3709,15 +3709,16 @@ span.req {
-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 */
opacity: 0;
overflow: hidden; }
/* line 329, ../../../../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 336, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn,
@ -3729,12 +3730,12 @@ span.req {
line-height: 25px;
vertical-align: top; }
/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher,
.top-bar .view-switcher {
margin-right: 20px; }
/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar {
overflow: visible;
position: absolute;
@ -3750,49 +3751,49 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 20px; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex {
display: -webkit-flex;
display: flex; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row {
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap; }
/* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem.active {
margin-right: 5px; }
/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem.active:last-child {
margin-right: 0; }
/* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap; }
/* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem.active {
margin-bottom: 10px; }
/* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem.active:last-child {
margin-bottom: 0; }
/* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem {
-webkit-flex: 0 1;
flex: 0 1;
position: relative; }
/* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem.grow {
-webkit-flex: 1 1;
flex: 1 1; }
/* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;

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

@ -3590,12 +3590,12 @@ span.req {
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-moz-animation-iteration-count: 6;
-webkit-animation-iteration-count: 6;
animation-iteration-count: 6;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: 8;
-webkit-animation-iteration-count: 8;
animation-iteration-count: 8;
-moz-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
@ -3656,15 +3656,16 @@ span.req {
-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 */
opacity: 0;
overflow: hidden; }
/* line 329, ../../../../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 336, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn,
@ -3676,12 +3677,12 @@ span.req {
line-height: 25px;
vertical-align: top; }
/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher,
.top-bar .view-switcher {
margin-right: 20px; }
/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar {
overflow: visible;
position: absolute;
@ -3697,49 +3698,49 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 20px; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex {
display: -webkit-flex;
display: flex; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row {
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap; }
/* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem.active {
margin-right: 5px; }
/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-row .flex-elem.active:last-child {
margin-right: 0; }
/* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap; }
/* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem.active {
margin-bottom: 10px; }
/* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex.flex-col .flex-elem.active:last-child {
margin-bottom: 0; }
/* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem {
-webkit-flex: 0 1;
flex: 0 1;
position: relative; }
/* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .flex-elem.grow {
-webkit-flex: 1 1;
flex: 1 1; }
/* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;