mirror of
https://github.com/nasa/openmct.git
synced 2025-06-17 14:48:13 +00:00
[Frontend] WIP styling of View Large elements
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
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<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">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
@ -31,16 +31,18 @@
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<!-- Temporarily, on mobile, the action buttons are hidden-->
|
||||
<mct-representation key="'action-group'"
|
||||
mct-object="domainObject"
|
||||
parameters="{ category: 'view-control' }"
|
||||
class="mobile-hide">
|
||||
</mct-representation>
|
||||
<span class="l-object-action-buttons">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<!-- Temporarily, on mobile, the action buttons are hidden-->
|
||||
<mct-representation key="'action-group'"
|
||||
mct-object="domainObject"
|
||||
parameters="{ category: 'view-control' }"
|
||||
class="mobile-hide l-object-action-buttons">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
|
||||
|
||||
@ -29,10 +29,7 @@
|
||||
mct-object='domainObject'
|
||||
class="flex-elem context-available-w"></mct-representation>
|
||||
</span>
|
||||
<span class="expand">
|
||||
<a class="s-button"
|
||||
mct-trigger-modal>
|
||||
View Large
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<a class="s-button icon-new-window t-btn-view-large"
|
||||
title="View large"
|
||||
mct-trigger-modal>
|
||||
</a>
|
||||
@ -631,7 +631,8 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
.view-switcher,
|
||||
.t-btn-view-large {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
|
||||
@ -273,7 +273,7 @@
|
||||
|
||||
.btn-bar.right .menu,
|
||||
.menus-to-left .menu {
|
||||
z-index: 79;
|
||||
z-index: 79;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: auto;
|
||||
|
||||
@ -132,6 +132,8 @@
|
||||
.select {
|
||||
box-shadow: $shdwBtnsOverlay;
|
||||
}
|
||||
|
||||
.t-btn-view-large { display: none; }
|
||||
}
|
||||
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
|
||||
@ -20,69 +20,72 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.frame {
|
||||
$ohH: $btnFrameH;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
$ohH: $btnFrameH;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
.object-top-bar {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
>.object-holder.abs {
|
||||
top: $ohH + $interiorMargin;
|
||||
}
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
}
|
||||
.object-top-bar {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
}
|
||||
|
||||
> .object-holder.abs {
|
||||
top: $ohH + $interiorMargin;
|
||||
}
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
&:before {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.s-menu-button:after {
|
||||
font-size: 8px;
|
||||
}
|
||||
.s-menu-button:after {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.title-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -136,14 +136,6 @@
|
||||
.mini-tab-icon.toggle-pane {
|
||||
z-index: 5;
|
||||
}
|
||||
&.items {
|
||||
.object-browse-bar {
|
||||
.left.abs,
|
||||
.right.abs {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
@ -250,10 +242,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.object-browse-bar,
|
||||
.top-bar {
|
||||
.view-switcher {
|
||||
margin-right: $interiorMarginLg * 2;
|
||||
.object-browse-bar {
|
||||
.l-object-action-buttons {
|
||||
margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -53,14 +53,12 @@ define([
|
||||
closeButton.addEventListener('click', toggleOverlay);
|
||||
document.body.appendChild(span);
|
||||
layoutContainer.removeChild(frame);
|
||||
overlayContainer.appendChild(frame)
|
||||
$element.text('Return to Layout');
|
||||
overlayContainer.appendChild(frame);
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
overlayContainer.removeChild(frame);
|
||||
layoutContainer.appendChild(frame);
|
||||
$element.text('View Large');
|
||||
document.body.removeChild(span);
|
||||
closeButton.removeEventListener('click', toggleOverlay);
|
||||
closeButton = undefined;
|
||||
|
||||
Reference in New Issue
Block a user