ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-29 17:38:53 +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>
</div>
<div class="view-controls sort-controls btn-bar right abs">
<div class="btn-bar right abs">
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }">

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

@ -2180,56 +2180,46 @@ label.checkbox.custom {
width: 15px;
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 */
/* line 352, ../sass/controls/_controls.scss */
/* line 356, ../sass/controls/_controls.scss */
.object-header {
display: inline-block;
font-size: 1em; }
/* line 356, ../sass/controls/_controls.scss */
/* line 360, ../sass/controls/_controls.scss */
.object-header .label .title-label {
color: white; }
/* line 359, ../sass/controls/_controls.scss */
/* line 363, ../sass/controls/_controls.scss */
.object-header .label .type-icon {
font-size: 1.5em;
margin-right: 5px;
vertical-align: middle; }
/* line 369, ../sass/controls/_controls.scss */
/* line 373, ../sass/controls/_controls.scss */
.top-bar .object-header,
.object-browse-bar .object-header {
font-size: 1.1em; }
/* line 371, ../sass/controls/_controls.scss */
/* line 375, ../sass/controls/_controls.scss */
.top-bar .object-header span,
.object-browse-bar .object-header span {
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 */
/* line 414, ../sass/controls/_controls.scss */
/* line 387, ../sass/controls/_controls.scss */
.slider .slot {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -2250,7 +2240,7 @@ label.checkbox.custom {
right: 0;
bottom: auto;
left: 0; }
/* line 425, ../sass/controls/_controls.scss */
/* line 398, ../sass/controls/_controls.scss */
.slider .knob {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -2308,12 +2298,12 @@ label.checkbox.custom {
/* line 197, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 436, ../sass/controls/_controls.scss */
/* line 409, ../sass/controls/_controls.scss */
.slider .knob:before {
top: 1px;
bottom: 3px;
left: 5px; }
/* line 443, ../sass/controls/_controls.scss */
/* line 416, ../sass/controls/_controls.scss */
.slider .range {
background: rgba(0, 153, 204, 0.6);
cursor: ew-resize;
@ -2324,12 +2314,12 @@ label.checkbox.custom {
left: auto;
height: auto;
width: auto; }
/* line 453, ../sass/controls/_controls.scss */
/* line 426, ../sass/controls/_controls.scss */
.slider .range:hover {
background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */
/* line 461, ../sass/controls/_controls.scss */
/* line 434, ../sass/controls/_controls.scss */
::-webkit-scrollbar {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -2346,7 +2336,7 @@ label.checkbox.custom {
height: 10px;
width: 10px; }
/* line 467, ../sass/controls/_controls.scss */
/* line 440, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -2364,7 +2354,7 @@ label.checkbox.custom {
-webkit-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; }
/* line 474, ../sass/controls/_controls.scss */
/* line 447, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -2373,7 +2363,7 @@ label.checkbox.custom {
background-image: -webkit-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 {
background: rgba(0, 0, 0, 0.4); }
@ -3877,22 +3867,32 @@ input[type="text"] {
border: 1px solid #4d4d4d; }
/* line 28, ../sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover {
border-color: #666666; }
/* line 35, ../sass/user-environ/_frame.scss */
border-color: #666666;
z-index: 2; }
/* line 36, ../sass/user-environ/_frame.scss */
.frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
font-size: 0.75em;
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 {
top: 23px; }
/* line 42, ../sass/user-environ/_frame.scss */
/* line 43, ../sass/user-environ/_frame.scss */
.frame .contents {
top: 5px;
right: 5px;
bottom: 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 {
border-color: #0099cc;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
@ -4685,5 +4685,5 @@ input[type="text"] {
.browse-mode .browse-area.holder {
top: 5px; }
/* 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; }

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

@ -145,3 +145,6 @@ $imageThumbPad: 1px;
// Bubbles
$bubbleArwSize: 10px;
$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
//top: 0; bottom: 0;
.object-browse-bar {
.t-btn.key-window {
.btn.key-window {
// Hide the Open in New Window button
display: none;
}

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

@ -348,6 +348,10 @@ label.checkbox.custom {
}
}
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** OBJECT-HEADER */
.object-header {
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 */
.slider {

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

@ -27,6 +27,7 @@
border: 1px solid $bc;
&:hover {
border-color: lighten($bc, 10%);
z-index: 2;
}
.contents {
// overflow: hidden;
@ -46,6 +47,26 @@
bottom: $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 {
@ -53,5 +74,4 @@
border-color: $colorKey;
@include boxShdwLarge();
}
}

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

@ -22,7 +22,7 @@
<span ng-controller="ViewSwitcherController">
<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-controller="ClickAwayController as toggle"
>