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

[Fronted] Minor final sanding and polishing

Browse Source 
WTD-839
.t-view-switcher > .view-switcher;
Added CSS transition to hide/show of view-switcher;
Moved .view-switcher hide/show to _frame.scss;
Tweaked .frame:hover to raise z-index to show complete border;
This commit is contained in:
Charles Hacskaylo 2015-06-12 14:17:19 -07:00
parent 8f153d4e75
commit 39531a0a9f
7 changed files with 93 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@
</mct-representation> </mct-representation>
</div> </div>
<div class="view-controls sort-controls btn-bar right abs"> <div class="btn-bar right abs">
<mct-representation key="'action-group'" <mct-representation key="'action-group'"
mct-object="domainObject" mct-object="domainObject"
parameters="{ category: 'view-control' }"> parameters="{ category: 'view-control' }">

90
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -2180,56 +2180,46 @@ label.checkbox.custom {
width: 15px; width: 15px;
height: auto; } height: auto; }
/* line 351, ../sass/controls/_controls.scss */
.view-switcher {
-moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color;
-webkit-transition-property: visibility, opacity, background-color, border-color;
transition-property: visibility, opacity, background-color, border-color;
-moz-transition-duration: 100ms;
-o-transition-duration: 100ms;
-webkit-transition-duration: 100ms;
transition-duration: 100ms;
-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; }
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
/* line 352, ../sass/controls/_controls.scss */ /* line 356, ../sass/controls/_controls.scss */
.object-header { .object-header {
display: inline-block; display: inline-block;
font-size: 1em; } font-size: 1em; }
/* line 356, ../sass/controls/_controls.scss */ /* line 360, ../sass/controls/_controls.scss */
.object-header .label .title-label { .object-header .label .title-label {
color: white; } color: white; }
/* line 359, ../sass/controls/_controls.scss */ /* line 363, ../sass/controls/_controls.scss */
.object-header .label .type-icon { .object-header .label .type-icon {
font-size: 1.5em; font-size: 1.5em;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; } vertical-align: middle; }
/* line 369, ../sass/controls/_controls.scss */ /* line 373, ../sass/controls/_controls.scss */
.top-bar .object-header, .top-bar .object-header,
.object-browse-bar .object-header { .object-browse-bar .object-header {
font-size: 1.1em; } font-size: 1.1em; }
/* line 371, ../sass/controls/_controls.scss */ /* line 375, ../sass/controls/_controls.scss */
.top-bar .object-header span, .top-bar .object-header span,
.object-browse-bar .object-header span { .object-browse-bar .object-header span {
display: inline-block; } display: inline-block; }
/******************************************************** VIEW-CONTROLS */
/*.view-controls .view-type {
// UNUSED?
$d: 20px;
$p: 5px;
@include border-radius($controlCr);
box-sizing: border-box;
display: inline-block;
margin-left: $interiorMargin;
height: $d;
line-height: $d;
padding-left: $p;
padding-right: $p;
&.cur {
background: lighten($colorBodyBg, $ltGamma);
}
}*/
/* line 398, ../sass/controls/_controls.scss */
.frame .t-view-switcher .name {
display: none; }
/* line 403, ../sass/controls/_controls.scss */
.edit-mode .top-bar .control-set.edit-view-controls {
margin-right: 50px; }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 414, ../sass/controls/_controls.scss */ /* line 387, ../sass/controls/_controls.scss */
.slider .slot { .slider .slot {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2250,7 +2240,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: auto; bottom: auto;
left: 0; } left: 0; }
/* line 425, ../sass/controls/_controls.scss */ /* line 398, ../sass/controls/_controls.scss */
.slider .knob { .slider .knob {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2308,12 +2298,12 @@ label.checkbox.custom {
/* line 197, ../sass/_mixins.scss */ /* line 197, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before { .slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 436, ../sass/controls/_controls.scss */ /* line 409, ../sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
bottom: 3px; bottom: 3px;
left: 5px; } left: 5px; }
/* line 443, ../sass/controls/_controls.scss */ /* line 416, ../sass/controls/_controls.scss */
.slider .range { .slider .range {
background: rgba(0, 153, 204, 0.6); background: rgba(0, 153, 204, 0.6);
cursor: ew-resize; cursor: ew-resize;
@ -2324,12 +2314,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 453, ../sass/controls/_controls.scss */ /* line 426, ../sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background: rgba(0, 153, 204, 0.7); } background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */ /******************************************************** BROWSER ELEMENTS */
/* line 461, ../sass/controls/_controls.scss */ /* line 434, ../sass/controls/_controls.scss */
::-webkit-scrollbar { ::-webkit-scrollbar {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2346,7 +2336,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 467, ../sass/controls/_controls.scss */ /* line 440, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2364,7 +2354,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
border-top: 1px solid gray; } border-top: 1px solid gray; }
/* line 474, ../sass/controls/_controls.scss */ /* line 447, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2373,7 +2363,7 @@ label.checkbox.custom {
background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: -webkit-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); } background-image: linear-gradient(#808080, #737373 20px); }
/* line 479, ../sass/controls/_controls.scss */ /* line 452, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } background: rgba(0, 0, 0, 0.4); }
@ -3877,22 +3867,32 @@ input[type="text"] {
border: 1px solid #4d4d4d; } border: 1px solid #4d4d4d; }
/* line 28, ../sass/user-environ/_frame.scss */ /* line 28, ../sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover { .frame.child-frame.panel:hover {
border-color: #666666; } border-color: #666666;
/* line 35, ../sass/user-environ/_frame.scss */ z-index: 2; }
/* line 36, ../sass/user-environ/_frame.scss */
.frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area { .frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
font-size: 0.75em; font-size: 0.75em;
height: 20px; } height: 20px; }
/* line 39, ../sass/user-environ/_frame.scss */ /* line 40, ../sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area { .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
top: 23px; } top: 23px; }
/* line 42, ../sass/user-environ/_frame.scss */ /* line 43, ../sass/user-environ/_frame.scss */
.frame .contents { .frame .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 54, ../sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher {
opacity: 0; }
/* line 58, ../sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher {
opacity: 1; }
/* line 66, ../sass/user-environ/_frame.scss */
.frame .view-switcher .name {
display: none; }
/* line 52, ../sass/user-environ/_frame.scss */ /* line 73, ../sass/user-environ/_frame.scss */
.edit-main .frame.child-frame.panel:hover { .edit-main .frame.child-frame.panel:hover {
border-color: #0099cc; border-color: #0099cc;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
@ -4685,5 +4685,5 @@ input[type="text"] {
.browse-mode .browse-area.holder { .browse-mode .browse-area.holder {
top: 5px; } top: 5px; }
/* line 39, ../sass/_hide-non-functional.scss */ /* line 39, ../sass/_hide-non-functional.scss */
.browse-mode .browse-area.holder > .contents.split-layout .object-browse-bar .t-btn.key-window { .browse-mode .browse-area.holder > .contents.split-layout .object-browse-bar .btn.key-window {
display: none; } display: none; }

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

@ -145,3 +145,6 @@ $imageThumbPad: 1px;
// Bubbles // Bubbles
$bubbleArwSize: 10px; $bubbleArwSize: 10px;
$bubblePad: $interiorMargin; $bubblePad: $interiorMargin;
// Timing
$controlFadeMs: 100ms;

2
platform/commonUI/general/res/sass/_hide-non-functional.scss
View File

@ -36,7 +36,7 @@
// Don't pad in from top and bottom // Don't pad in from top and bottom
//top: 0; bottom: 0; //top: 0; bottom: 0;
.object-browse-bar { .object-browse-bar {
.t-btn.key-window { .btn.key-window {
// Hide the Open in New Window button // Hide the Open in New Window button
display: none; display: none;
} }

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

@ -275,28 +275,28 @@ label.checkbox.custom {
$p: $interiorMarginSm * 2; $p: $interiorMarginSm * 2;
$c: $colorBodyFg; $c: $colorBodyFg;
@include btnSubtle($colorBodyBg); @include btnSubtle($colorBodyBg);
/* height: $h; /* height: $h;
line-height: $h; line-height: $h;
&.dropdown { &.dropdown {
padding-left: $p; padding-left: $p;
padding-right: $p; padding-right: $p;
}*/ }*/
&:not(.disabled):hover { &:not(.disabled):hover {
color: lighten($c, 20%); color: lighten($c, 20%);
} }
/* &.context-available { /* &.context-available {
// An element like the invoke-menu triangle; // An element like the invoke-menu triangle;
// Indicates that this element has a dropdown menu available; // Indicates that this element has a dropdown menu available;
// Currently unused // Currently unused
$c: $colorKey; $c: $colorKey;
color: $c; color: $c;
padding: 0 5px; padding: 0 5px;
&:hover { &:hover {
color: lighten($c, 10%); color: lighten($c, 10%);
} }
}*/ }*/
span.l-click-area { span.l-click-area {
// In markup, this element should not enclose anything. // In markup, this element should not enclose anything.
@ -348,6 +348,10 @@ label.checkbox.custom {
} }
} }
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
.object-header { .object-header {
display: inline-block; display: inline-block;
@ -374,37 +378,6 @@ label.checkbox.custom {
} }
} }
/******************************************************** VIEW-CONTROLS */
/*.view-controls .view-type {
// UNUSED?
$d: 20px;
$p: 5px;
@include border-radius($controlCr);
box-sizing: border-box;
display: inline-block;
margin-left: $interiorMargin;
height: $d;
line-height: $d;
padding-left: $p;
padding-right: $p;
&.cur {
background: lighten($colorBodyBg, $ltGamma);
}
}*/
.frame .t-view-switcher {
// Hide the name when the view switcher is in a frame context
.name {
display: none;
}
}
.edit-mode .top-bar .control-set.edit-view-controls {
// Used in templates/edit-view-controls.html
margin-right: $interiorMargin * 10;
}
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
.slider { .slider {

22
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -27,6 +27,7 @@
border: 1px solid $bc; border: 1px solid $bc;
&:hover { &:hover {
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
z-index: 2;
} }
.contents { .contents {
// overflow: hidden; // overflow: hidden;
@ -46,6 +47,26 @@
bottom: $myM; bottom: $myM;
left: $myM; left: $myM;
} }
&.frame-template {
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
// This has the effect of hiding the view switcher in nested frames in edit mode, which is desirable currently (as it's non-functional)
.view-switcher {
//display: none;
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
//display: inline-block !important;
opacity: 1;
}
}
.view-switcher {
// Hide the name when the view switcher is in a frame context
.name {
display: none;
}
}
} }
.edit-main .frame.child-frame.panel { .edit-main .frame.child-frame.panel {
@ -53,5 +74,4 @@
border-color: $colorKey; border-color: $colorKey;
@include boxShdwLarge(); @include boxShdwLarge();
} }
} }

2
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -22,7 +22,7 @@
<span ng-controller="ViewSwitcherController"> <span ng-controller="ViewSwitcherController">
<div <div
class="t-view-switcher menu-element btn btn-menu dropdown click-invoke" class="view-switcher menu-element btn btn-menu dropdown click-invoke"
ng-if="view.length > 1" ng-if="view.length > 1"
ng-controller="ClickAwayController as toggle" ng-controller="ClickAwayController as toggle"
> >