ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 14:48:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] WIP styling of View Large elements

Browse Source 
Fixes #1437
Markup and CSS for `view large` button in frame context;
Sass formatting cleanups; removed unused styles from
_layout.scss; mods to MCTTriggerModal.js to remove
button label functionality;
TODO: styling of object-header sizing; add 'Done' button
to overlay;
This commit is contained in:
Charles Hacskaylo
2017-02-14 17:30:24 -08:00
parent a11496078b
commit 999f0fc3e1
8 changed files with 89 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-controller="BrowseObjectController" class="abs l-flex-col"> <div ng-controller="BrowseObjectController" class="abs l-flex-col">
<div class="holder flex-elem l-flex-row object-browse-bar "> <div class="holder flex-elem l-flex-row object-browse-bar">
<div class="items-select left flex-elem l-flex-row grows"> <div class="items-select left flex-elem l-flex-row grows">
<mct-representation key="'back-arrow'" <mct-representation key="'back-arrow'"
mct-object="domainObject" mct-object="domainObject"
@ -31,16 +31,18 @@
</mct-representation> </mct-representation>
</div> </div>
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed"> <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'" <span class="l-object-action-buttons">
mct-object="domainObject" <mct-representation key="'switcher'"
ng-model="representation"> mct-object="domainObject"
</mct-representation> ng-model="representation">
<!-- Temporarily, on mobile, the action buttons are hidden--> </mct-representation>
<mct-representation key="'action-group'" <!-- Temporarily, on mobile, the action buttons are hidden-->
mct-object="domainObject" <mct-representation key="'action-group'"
parameters="{ category: 'view-control' }" mct-object="domainObject"
class="mobile-hide"> parameters="{ category: 'view-control' }"
</mct-representation> class="mobile-hide l-object-action-buttons">
</mct-representation>
</span>
</div> </div>
</div> </div>
<div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible"> <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">

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

@ -29,10 +29,7 @@
mct-object='domainObject' mct-object='domainObject'
class="flex-elem context-available-w"></mct-representation> class="flex-elem context-available-w"></mct-representation>
</span> </span>
<span class="expand"> <a class="s-button icon-new-window t-btn-view-large"
<a class="s-button" title="View large"
mct-trigger-modal> mct-trigger-modal>
View Large </a>
</a>
</span>

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

@ -631,7 +631,8 @@ textarea {
} }
} }
.view-switcher { .view-switcher,
.t-btn-view-large {
@include trans-prop-nice-fade($controlFadeMs); @include trans-prop-nice-fade($controlFadeMs);
} }

2
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -273,7 +273,7 @@
.btn-bar.right .menu, .btn-bar.right .menu,
.menus-to-left .menu { .menus-to-left .menu {
z-index: 79; z-index: 79;
left: auto; left: auto;
right: 0; right: 0;
width: auto; width: auto;

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

@ -132,6 +132,8 @@
.select { .select {
box-shadow: $shdwBtnsOverlay; box-shadow: $shdwBtnsOverlay;
} }
.t-btn-view-large { display: none; }
} }
.t-dialog-sm .overlay > .holder { .t-dialog-sm .overlay > .holder {

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

@ -20,69 +20,72 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.frame { .frame {
$ohH: $btnFrameH; $ohH: $btnFrameH;
$bc: $colorInteriorBorder; $bc: $colorInteriorBorder;
&.child-frame.panel { &.child-frame.panel {
background: $colorBodyBg; background: $colorBodyBg;
border: 1px solid $bc; border: 1px solid $bc;
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
&:hover { &:hover {
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
}
}
.object-top-bar {
font-size: 0.75em;
height: $ohH;
line-height: $ohH;
.left {
padding-right: $interiorMarginLg;
} }
} }
>.object-holder.abs { .object-top-bar {
top: $ohH + $interiorMargin; font-size: 0.75em;
} height: $ohH;
.contents { line-height: $ohH;
$myM: $interiorMargin; }
top: $myM;
right: $myM; > .object-holder.abs {
bottom: $myM; top: $ohH + $interiorMargin;
left: $myM; }
} .contents {
&.frame-template { $myM: $interiorMargin;
.s-button, top: $myM;
.s-menu-button { right: $myM;
height: $ohH; bottom: $myM;
line-height: $ohH; left: $myM;
padding: 0 $interiorMargin; }
> span, &.frame-template {
.s-button,
.s-menu-button {
height: $ohH;
line-height: $ohH;
padding: 0 $interiorMargin;
> span,
&:before { &:before {
font-size: 0.65rem; font-size: 0.65rem;
} }
} }
.s-menu-button:after { .s-menu-button:after {
font-size: 8px; font-size: 8px;
} }
.view-switcher { .view-switcher {
z-index: 10; z-index: 10;
} }
} }
.view-switcher { .view-switcher {
// Hide the name when the view switcher is in a frame context margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
.title-label { // Hide the name when the view switcher is in a frame context
display: none; .title-label {
} display: none;
} }
}
}
body.desktop .frame.frame-template {
// Hide local controls initially and show it them on hover when they're in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
.view-switcher,
.t-btn-view-large {
opacity: 0;
pointer-events: none;
}
&:hover .view-switcher,
&:hover .t-btn-view-large {
opacity: 1;
pointer-events: inherit;
}
} }
body.desktop .frame.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
.view-switcher {
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
opacity: 1;
}
}

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

@ -136,14 +136,6 @@
.mini-tab-icon.toggle-pane { .mini-tab-icon.toggle-pane {
z-index: 5; z-index: 5;
} }
&.items {
.object-browse-bar {
.left.abs,
.right.abs {
top: auto;
}
}
}
} }
body.desktop .pane .mini-tab-icon.toggle-pane { body.desktop .pane .mini-tab-icon.toggle-pane {
@ -250,10 +242,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
vertical-align: top; vertical-align: top;
} }
.object-browse-bar, .object-browse-bar {
.top-bar { .l-object-action-buttons {
.view-switcher { margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
margin-right: $interiorMarginLg * 2;
} }
} }

4
platform/features/layout/src/MCTTriggerModal.js
View File

@ -53,14 +53,12 @@ define([
closeButton.addEventListener('click', toggleOverlay); closeButton.addEventListener('click', toggleOverlay);
document.body.appendChild(span); document.body.appendChild(span);
layoutContainer.removeChild(frame); layoutContainer.removeChild(frame);
overlayContainer.appendChild(frame) overlayContainer.appendChild(frame);
$element.text('Return to Layout');
} }
function closeOverlay() { function closeOverlay() {
overlayContainer.removeChild(frame); overlayContainer.removeChild(frame);
layoutContainer.appendChild(frame); layoutContainer.appendChild(frame);
$element.text('View Large');
document.body.removeChild(span); document.body.removeChild(span);
closeButton.removeEventListener('click', toggleOverlay); closeButton.removeEventListener('click', toggleOverlay);
closeButton = undefined; closeButton = undefined;