mirror of
https://github.com/nasa/openmct.git
synced 2025-06-21 08:39:59 +00:00
[Layout] Add view large button for zooming
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; Added new "icon-expand" glyph and class; Fixes #1437 Fixes #1423 New overlay > l-dialog and l-large-view classes; Fix context-menu z-index to allow context menu to appear in the overlay; .object-top-bar refactored and replaced with .object-browse-bar; frame > hover now only displays local controls for proper level, handles nested layout situation; Fixed font-weight display issues; MCTTriggerModal.js modified to do the following: - Remove .frame classes when displaying object in overlay - Allow click on this overlay .blocker to dismiss overlay Fixed min-width issue incorrectly targeting .object-browse-bar in frame context; Added expand anim to large view holder; Changed close button icon Significant mobile styling and cleanups; Markup mods for overlay.html; Handles dialog on top of large view; Form validation now displays better in mobile; Updated /src/api/ui/dialog.html to be in-line with /platform/commonUI/dialog/res/templates/overlay.html; Moved border-radius from containerBase to btnBase mixins; Animate with scale for GPU acceleration Change desktop animation to use scale, so that it is hardware accelerated and buttery smooth. Also fixes text anti-aliasing to improve readability. Moved mobile/overlay/_overlay.scss styles into overlay/_overlay.scss; removed mobile/overlay/_overlay.scss; Cleanups in _overlay.scss; restored max-width/max-height to dialogs (removed in #1376 for #1298) and added min-width; [Frontend] Mobile fixes in overlay and related Fixes #1437 Added mobile-specific styling to _messages.scss; Fixed button layout and margins in _overlay.scss; Fixed message.html to not default to major style buttons; [Frontend] Timing tweaks Fixes #1437 Moved large view expand transition duration into theme _constants files; shortened anim duration Fix Style errors [mctTriggerModal] correct scope for toggle Correct scope for toggleFunction such that #1503 no longer occurs. Fixes #1503 [Style] Add copyright header
This commit is contained in:
Pete Richards
@ -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 t-primary">
|
||||||
<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,6 +31,7 @@
|
|||||||
</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">
|
||||||
|
<span class="l-object-action-buttons">
|
||||||
<mct-representation key="'switcher'"
|
<mct-representation key="'switcher'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
ng-model="representation">
|
ng-model="representation">
|
||||||
@ -39,8 +40,9 @@
|
|||||||
<mct-representation key="'action-group'"
|
<mct-representation key="'action-group'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
parameters="{ category: 'view-control' }"
|
parameters="{ category: 'view-control' }"
|
||||||
class="mobile-hide">
|
class="mobile-hide l-object-action-buttons">
|
||||||
</mct-representation>
|
</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">
|
||||||
|
|||||||
@ -29,3 +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>
|
||||||
|
<a class="s-button icon-expand t-btn-view-large"
|
||||||
|
title="View large"
|
||||||
|
mct-trigger-modal>
|
||||||
|
</a>
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="bottom-bar">
|
<div class="bottom-bar">
|
||||||
<a ng-repeat="dialogOption in ngModel.options"
|
<a ng-repeat="dialogOption in ngModel.options"
|
||||||
class="s-button major"
|
class="s-button"
|
||||||
ng-click="dialogOption.callback()">
|
ng-click="dialogOption.callback()">
|
||||||
{{dialogOption.label}}
|
{{dialogOption.label}}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -19,12 +19,12 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
|
<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
|
||||||
<div class="abs blocker"></div>
|
<div class="abs blocker"></div>
|
||||||
<div class="abs holder">
|
<div class="abs outer-holder">
|
||||||
<a ng-click="ngModel.cancel()"
|
<a ng-click="ngModel.cancel()"
|
||||||
ng-if="ngModel.cancel"
|
ng-if="ngModel.cancel"
|
||||||
class="close icon-x"></a>
|
class="close icon-x-in-circle"></a>
|
||||||
<div class="abs contents" ng-transclude></div>
|
<div class="abs inner-holder contents" ng-transclude></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,10 +1,17 @@
|
|||||||
@mixin glyph($unicode, $family: 'symbolsfont') {
|
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
|
||||||
&:before {
|
&:before {
|
||||||
content: $unicode;
|
content: $unicode;
|
||||||
font-family: $family;
|
font-family: $family;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin glyphAfter($unicode, $family: 'symbolsfont') {
|
||||||
|
&:after {
|
||||||
|
content: $unicode;
|
||||||
|
font-family: $family;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/************************** CHAR UNICODES */
|
/************************** CHAR UNICODES */
|
||||||
|
|
||||||
$glyph-icon-alert-rect: '\e900';
|
$glyph-icon-alert-rect: '\e900';
|
||||||
@ -111,111 +118,111 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
|
|||||||
|
|
||||||
/************************** 16 PX CLASSES */
|
/************************** 16 PX CLASSES */
|
||||||
|
|
||||||
.icon-alert-rect { @include glyph($glyph-icon-alert-rect); }
|
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
|
||||||
.icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); }
|
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }
|
||||||
.icon-arrow-down { @include glyph($glyph-icon-arrow-down); }
|
.icon-arrow-down { @include glyphBefore($glyph-icon-arrow-down); }
|
||||||
.icon-arrow-left { @include glyph($glyph-icon-arrow-left); }
|
.icon-arrow-left { @include glyphBefore($glyph-icon-arrow-left); }
|
||||||
.icon-arrow-right { @include glyph($glyph-icon-arrow-right); }
|
.icon-arrow-right { @include glyphBefore($glyph-icon-arrow-right); }
|
||||||
.icon-arrow-double-up { @include glyph($glyph-icon-arrow-double-up); }
|
.icon-arrow-double-up { @include glyphBefore($glyph-icon-arrow-double-up); }
|
||||||
.icon-arrow-tall-up { @include glyph($glyph-icon-arrow-tall-up); }
|
.icon-arrow-tall-up { @include glyphBefore($glyph-icon-arrow-tall-up); }
|
||||||
.icon-arrow-tall-down { @include glyph($glyph-icon-arrow-tall-down); }
|
.icon-arrow-tall-down { @include glyphBefore($glyph-icon-arrow-tall-down); }
|
||||||
.icon-arrow-double-down { @include glyph($glyph-icon-arrow-double-down); }
|
.icon-arrow-double-down { @include glyphBefore($glyph-icon-arrow-double-down); }
|
||||||
.icon-arrow-up { @include glyph($glyph-icon-arrow-up); }
|
.icon-arrow-up { @include glyphBefore($glyph-icon-arrow-up); }
|
||||||
.icon-asterisk { @include glyph($glyph-icon-asterisk); }
|
.icon-asterisk { @include glyphBefore($glyph-icon-asterisk); }
|
||||||
.icon-bell { @include glyph($glyph-icon-bell); }
|
.icon-bell { @include glyphBefore($glyph-icon-bell); }
|
||||||
.icon-box { @include glyph($glyph-icon-box); }
|
.icon-box { @include glyphBefore($glyph-icon-box); }
|
||||||
.icon-box-with-arrow { @include glyph($glyph-icon-box-with-arrow); }
|
.icon-box-with-arrow { @include glyphBefore($glyph-icon-box-with-arrow); }
|
||||||
.icon-check { @include glyph($glyph-icon-check); }
|
.icon-check { @include glyphBefore($glyph-icon-check); }
|
||||||
.icon-connectivity { @include glyph($glyph-icon-connectivity); }
|
.icon-connectivity { @include glyphBefore($glyph-icon-connectivity); }
|
||||||
.icon-database-in-brackets { @include glyph($glyph-icon-database-in-brackets); }
|
.icon-database-in-brackets { @include glyphBefore($glyph-icon-database-in-brackets); }
|
||||||
.icon-eye-open { @include glyph($glyph-icon-eye-open); }
|
.icon-eye-open { @include glyphBefore($glyph-icon-eye-open); }
|
||||||
.icon-gear { @include glyph($glyph-icon-gear); }
|
.icon-gear { @include glyphBefore($glyph-icon-gear); }
|
||||||
.icon-hourglass { @include glyph($glyph-icon-hourglass); }
|
.icon-hourglass { @include glyphBefore($glyph-icon-hourglass); }
|
||||||
.icon-info { @include glyph($glyph-icon-info); }
|
.icon-info { @include glyphBefore($glyph-icon-info); }
|
||||||
.icon-link { @include glyph($glyph-icon-link); }
|
.icon-link { @include glyphBefore($glyph-icon-link); }
|
||||||
.icon-lock { @include glyph($glyph-icon-lock); }
|
.icon-lock { @include glyphBefore($glyph-icon-lock); }
|
||||||
.icon-minus { @include glyph($glyph-icon-minus); }
|
.icon-minus { @include glyphBefore($glyph-icon-minus); }
|
||||||
.icon-people { @include glyph($glyph-icon-people); }
|
.icon-people { @include glyphBefore($glyph-icon-people); }
|
||||||
.icon-person { @include glyph($glyph-icon-person); }
|
.icon-person { @include glyphBefore($glyph-icon-person); }
|
||||||
.icon-plus { @include glyph($glyph-icon-plus); }
|
.icon-plus { @include glyphBefore($glyph-icon-plus); }
|
||||||
.icon-trash { @include glyph($glyph-icon-trash); }
|
.icon-trash { @include glyphBefore($glyph-icon-trash); }
|
||||||
.icon-x { @include glyph($glyph-icon-x); }
|
.icon-x { @include glyphBefore($glyph-icon-x); }
|
||||||
.icon-brackets { @include glyph($glyph-icon-brackets); }
|
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
|
||||||
.icon-arrows-out { @include glyph($glyph-icon-arrows-out); }
|
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
|
||||||
.icon-arrows-right-left { @include glyph($glyph-icon-arrows-right-left); }
|
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||||
.icon-arrows-up-down { @include glyph($glyph-icon-arrows-up-down); }
|
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||||
.icon-bullet { @include glyph($glyph-icon-bullet); }
|
.icon-bullet { @include glyphBefore($glyph-icon-bullet); }
|
||||||
.icon-calendar { @include glyph($glyph-icon-calendar); }
|
.icon-calendar { @include glyphBefore($glyph-icon-calendar); }
|
||||||
.icon-chain-links { @include glyph($glyph-icon-chain-links); }
|
.icon-chain-links { @include glyphBefore($glyph-icon-chain-links); }
|
||||||
.icon-collapse-pane-left { @include glyph($glyph-icon-collapse-pane-left); }
|
.icon-collapse-pane-left { @include glyphBefore($glyph-icon-collapse-pane-left); }
|
||||||
.icon-collapse-pane-right { @include glyph($glyph-icon-collapse-pane-right); }
|
.icon-collapse-pane-right { @include glyphBefore($glyph-icon-collapse-pane-right); }
|
||||||
.icon-download { @include glyph($glyph-icon-download); }
|
.icon-download { @include glyphBefore($glyph-icon-download); }
|
||||||
.icon-duplicate { @include glyph($glyph-icon-duplicate); }
|
.icon-duplicate { @include glyphBefore($glyph-icon-duplicate); }
|
||||||
.icon-folder-new { @include glyph($glyph-icon-folder-new); }
|
.icon-folder-new { @include glyphBefore($glyph-icon-folder-new); }
|
||||||
.icon-fullscreen-collapse { @include glyph($glyph-icon-fullscreen-collapse); }
|
.icon-fullscreen-collapse { @include glyphBefore($glyph-icon-fullscreen-collapse); }
|
||||||
.icon-fullscreen-expand { @include glyph($glyph-icon-fullscreen-expand); }
|
.icon-fullscreen-expand { @include glyphBefore($glyph-icon-fullscreen-expand); }
|
||||||
.icon-layers { @include glyph($glyph-icon-layers); }
|
.icon-layers { @include glyphBefore($glyph-icon-layers); }
|
||||||
.icon-line-horz { @include glyph($glyph-icon-line-horz); }
|
.icon-line-horz { @include glyphBefore($glyph-icon-line-horz); }
|
||||||
.icon-magnify { @include glyph($glyph-icon-magnify); }
|
.icon-magnify { @include glyphBefore($glyph-icon-magnify); }
|
||||||
.icon-magnify-in { @include glyph($glyph-icon-magnify-in); }
|
.icon-magnify-in { @include glyphBefore($glyph-icon-magnify-in); }
|
||||||
.icon-magnify-out { @include glyph($glyph-icon-magnify-out); }
|
.icon-magnify-out { @include glyphBefore($glyph-icon-magnify-out); }
|
||||||
.icon-menu-hamburger { @include glyph($glyph-icon-menu-hamburger); }
|
.icon-menu-hamburger { @include glyphBefore($glyph-icon-menu-hamburger); }
|
||||||
.icon-move { @include glyph($glyph-icon-move); }
|
.icon-move { @include glyphBefore($glyph-icon-move); }
|
||||||
.icon-new-window { @include glyph($glyph-icon-new-window); }
|
.icon-new-window { @include glyphBefore($glyph-icon-new-window); }
|
||||||
.icon-paint-bucket { @include glyph($glyph-icon-paint-bucket); }
|
.icon-paint-bucket { @include glyphBefore($glyph-icon-paint-bucket); }
|
||||||
.icon-pause { @include glyph($glyph-icon-pause); }
|
.icon-pause { @include glyphBefore($glyph-icon-pause); }
|
||||||
.icon-pencil { @include glyph($glyph-icon-pencil); }
|
.icon-pencil { @include glyphBefore($glyph-icon-pencil); }
|
||||||
.icon-play { @include glyph($glyph-icon-play); }
|
.icon-play { @include glyphBefore($glyph-icon-play); }
|
||||||
.icon-plot-resource { @include glyph($glyph-icon-plot-resource); }
|
.icon-plot-resource { @include glyphBefore($glyph-icon-plot-resource); }
|
||||||
.icon-pointer-left { @include glyph($glyph-icon-pointer-left); }
|
.icon-pointer-left { @include glyphBefore($glyph-icon-pointer-left); }
|
||||||
.icon-pointer-right { @include glyph($glyph-icon-pointer-right); }
|
.icon-pointer-right { @include glyphBefore($glyph-icon-pointer-right); }
|
||||||
.icon-refresh { @include glyph($glyph-icon-refresh); }
|
.icon-refresh { @include glyphBefore($glyph-icon-refresh); }
|
||||||
.icon-save { @include glyph($glyph-icon-save); }
|
.icon-save { @include glyphBefore($glyph-icon-save); }
|
||||||
.icon-sine { @include glyph($glyph-icon-sine); }
|
.icon-sine { @include glyphBefore($glyph-icon-sine); }
|
||||||
.icon-T { @include glyph($glyph-icon-T); }
|
.icon-T { @include glyphBefore($glyph-icon-T); }
|
||||||
.icon-thumbs-strip { @include glyph($glyph-icon-thumbs-strip); }
|
.icon-thumbs-strip { @include glyphBefore($glyph-icon-thumbs-strip); }
|
||||||
.icon-two-parts-both { @include glyph($glyph-icon-two-parts-both); }
|
.icon-two-parts-both { @include glyphBefore($glyph-icon-two-parts-both); }
|
||||||
.icon-two-parts-one-only { @include glyph($glyph-icon-two-parts-one-only); }
|
.icon-two-parts-one-only { @include glyphBefore($glyph-icon-two-parts-one-only); }
|
||||||
.icon-resync { @include glyph($glyph-icon-resync); }
|
.icon-resync { @include glyphBefore($glyph-icon-resync); }
|
||||||
.icon-reset { @include glyph($glyph-icon-reset); }
|
.icon-reset { @include glyphBefore($glyph-icon-reset); }
|
||||||
.icon-x-in-circle { @include glyph($glyph-icon-x-in-circle); }
|
.icon-x-in-circle { @include glyphBefore($glyph-icon-x-in-circle); }
|
||||||
.icon-brightness { @include glyph($glyph-icon-brightness); }
|
.icon-brightness { @include glyphBefore($glyph-icon-brightness); }
|
||||||
.icon-contrast { @include glyph($glyph-icon-contrast); }
|
.icon-contrast { @include glyphBefore($glyph-icon-contrast); }
|
||||||
.icon-expand { @include glyph($glyph-icon-expand); }
|
.icon-expand { @include glyphBefore($glyph-icon-expand); }
|
||||||
.icon-activity { @include glyph($glyph-icon-activity); }
|
.icon-activity { @include glyphBefore($glyph-icon-activity); }
|
||||||
.icon-activity-mode { @include glyph($glyph-icon-activity-mode); }
|
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
|
||||||
.icon-autoflow-tabular { @include glyph($glyph-icon-autoflow-tabular); }
|
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }
|
||||||
.icon-clock { @include glyph($glyph-icon-clock); }
|
.icon-clock { @include glyphBefore($glyph-icon-clock); }
|
||||||
.icon-database { @include glyph($glyph-icon-database); }
|
.icon-database { @include glyphBefore($glyph-icon-database); }
|
||||||
.icon-database-query { @include glyph($glyph-icon-database-query); }
|
.icon-database-query { @include glyphBefore($glyph-icon-database-query); }
|
||||||
.icon-dataset { @include glyph($glyph-icon-dataset); }
|
.icon-dataset { @include glyphBefore($glyph-icon-dataset); }
|
||||||
.icon-datatable { @include glyph($glyph-icon-datatable); }
|
.icon-datatable { @include glyphBefore($glyph-icon-datatable); }
|
||||||
.icon-dictionary { @include glyph($glyph-icon-dictionary); }
|
.icon-dictionary { @include glyphBefore($glyph-icon-dictionary); }
|
||||||
.icon-folder { @include glyph($glyph-icon-folder); }
|
.icon-folder { @include glyphBefore($glyph-icon-folder); }
|
||||||
.icon-image { @include glyph($glyph-icon-image); }
|
.icon-image { @include glyphBefore($glyph-icon-image); }
|
||||||
.icon-layout { @include glyph($glyph-icon-layout); }
|
.icon-layout { @include glyphBefore($glyph-icon-layout); }
|
||||||
.icon-object { @include glyph($glyph-icon-object); }
|
.icon-object { @include glyphBefore($glyph-icon-object); }
|
||||||
.icon-object-unknown { @include glyph($glyph-icon-object-unknown); }
|
.icon-object-unknown { @include glyphBefore($glyph-icon-object-unknown); }
|
||||||
.icon-packet { @include glyph($glyph-icon-packet); }
|
.icon-packet { @include glyphBefore($glyph-icon-packet); }
|
||||||
.icon-page { @include glyph($glyph-icon-page); }
|
.icon-page { @include glyphBefore($glyph-icon-page); }
|
||||||
.icon-plot-overlay { @include glyph($glyph-icon-plot-overlay); }
|
.icon-plot-overlay { @include glyphBefore($glyph-icon-plot-overlay); }
|
||||||
.icon-plot-stacked { @include glyph($glyph-icon-plot-stacked); }
|
.icon-plot-stacked { @include glyphBefore($glyph-icon-plot-stacked); }
|
||||||
.icon-session { @include glyph($glyph-icon-session); }
|
.icon-session { @include glyphBefore($glyph-icon-session); }
|
||||||
.icon-tabular { @include glyph($glyph-icon-tabular); }
|
.icon-tabular { @include glyphBefore($glyph-icon-tabular); }
|
||||||
.icon-tabular-lad { @include glyph($glyph-icon-tabular-lad); }
|
.icon-tabular-lad { @include glyphBefore($glyph-icon-tabular-lad); }
|
||||||
.icon-tabular-lad-set { @include glyph($glyph-icon-tabular-lad-set); }
|
.icon-tabular-lad-set { @include glyphBefore($glyph-icon-tabular-lad-set); }
|
||||||
.icon-tabular-realtime { @include glyph($glyph-icon-tabular-realtime); }
|
.icon-tabular-realtime { @include glyphBefore($glyph-icon-tabular-realtime); }
|
||||||
.icon-tabular-scrolling { @include glyph($glyph-icon-tabular-scrolling); }
|
.icon-tabular-scrolling { @include glyphBefore($glyph-icon-tabular-scrolling); }
|
||||||
.icon-telemetry { @include glyph($glyph-icon-telemetry); }
|
.icon-telemetry { @include glyphBefore($glyph-icon-telemetry); }
|
||||||
.icon-telemetry-panel { @include glyph($glyph-icon-telemetry-panel); }
|
.icon-telemetry-panel { @include glyphBefore($glyph-icon-telemetry-panel); }
|
||||||
.icon-timeline { @include glyph($glyph-icon-timeline); }
|
.icon-timeline { @include glyphBefore($glyph-icon-timeline); }
|
||||||
.icon-timer { @include glyph($glyph-icon-timer); }
|
.icon-timer { @include glyphBefore($glyph-icon-timer); }
|
||||||
.icon-topic { @include glyph($glyph-icon-topic); }
|
.icon-topic { @include glyphBefore($glyph-icon-topic); }
|
||||||
.icon-box-with-dashed-lines { @include glyph($glyph-icon-box-with-dashed-lines); }
|
.icon-box-with-dashed-lines { @include glyphBefore($glyph-icon-box-with-dashed-lines); }
|
||||||
|
|
||||||
/************************** 12 PX CLASSES */
|
/************************** 12 PX CLASSES */
|
||||||
|
|
||||||
.icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
|
.icon-eye-open-12px { @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); }
|
||||||
.icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
|
.icon-collapse-pane-left-12px { @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
|
||||||
.icon-collapse-pane-right-12px { @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
|
.icon-collapse-pane-right-12px { @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
|
||||||
.icon-folder-12px { @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
|
.icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
|
||||||
|
|||||||
@ -58,7 +58,6 @@
|
|||||||
@import "search/search";
|
@import "search/search";
|
||||||
@import "mobile/search/search";
|
@import "mobile/search/search";
|
||||||
@import "overlay/overlay";
|
@import "overlay/overlay";
|
||||||
@import "mobile/overlay/overlay";
|
|
||||||
@import "tree/tree";
|
@import "tree/tree";
|
||||||
@import "object-label";
|
@import "object-label";
|
||||||
@import "mobile/tree";
|
@import "mobile/tree";
|
||||||
|
|||||||
@ -285,13 +285,14 @@
|
|||||||
|
|
||||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
border-radius: $controlCr;
|
//border-radius: $controlCr;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
|
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
|
||||||
@include user-select(none);
|
@include user-select(none);
|
||||||
|
border-radius: $controlCr;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
.icon,
|
.icon,
|
||||||
&:before {
|
&:before {
|
||||||
|
|||||||
@ -651,7 +651,8 @@ textarea {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher,
|
||||||
|
.t-btn-view-large {
|
||||||
@include trans-prop-nice-fade($controlFadeMs);
|
@include trans-prop-nice-fade($controlFadeMs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -249,7 +249,7 @@
|
|||||||
.context-menu-holder,
|
.context-menu-holder,
|
||||||
.menu-holder {
|
.menu-holder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 70;
|
z-index: 120;
|
||||||
.context-menu-wrapper {
|
.context-menu-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -311,6 +311,24 @@ body.desktop .t-message-single {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include phonePortrait {
|
||||||
|
.t-message-single {
|
||||||
|
.l-message {
|
||||||
|
@include flex-direction(column);
|
||||||
|
.message-contents { margin-left: 0; }
|
||||||
|
}
|
||||||
|
.type-icon.message-type {
|
||||||
|
margin-bottom: $interiorMarginLg;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Messages in list
|
// Messages in list
|
||||||
.t-message-list {
|
.t-message-list {
|
||||||
@include messageBlock(32px);
|
@include messageBlock(32px);
|
||||||
|
|||||||
@ -19,44 +19,40 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
@mixin labelValidate($sym, $c) {
|
||||||
|
> .label {
|
||||||
|
@include glyphAfter($sym);
|
||||||
|
&:after {
|
||||||
|
color: $c;
|
||||||
|
margin-left: $interiorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
mct-form.validates {
|
mct-form.validates {
|
||||||
.form-row.validates {
|
.form-row.validates {
|
||||||
> .label {
|
> .label {
|
||||||
padding-right: $reqSymbolM; // Keep room for validation element
|
padding-right: $reqSymbolM; // Keep room for validation element
|
||||||
&:before {
|
&:after {
|
||||||
position: absolute;
|
|
||||||
right: $interiorMargin;
|
|
||||||
font-size: $reqSymbolFontSize;
|
font-size: $reqSymbolFontSize;
|
||||||
height: 100%;
|
|
||||||
line-height: 200%;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.invalid,
|
&.invalid,
|
||||||
&.invalid.req {
|
&.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
|
||||||
> .label {
|
|
||||||
@extend .icon-x;
|
|
||||||
&:before {
|
|
||||||
color: $colorFormInvalid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.valid,
|
&.valid,
|
||||||
&.valid.req {
|
&.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
|
||||||
> .label {
|
|
||||||
@extend .icon-check;
|
&.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
|
||||||
&:before {
|
}
|
||||||
color: $colorFormValid;
|
}
|
||||||
}
|
|
||||||
}
|
body.desktop .form-row.validates > .label {
|
||||||
}
|
&:after {
|
||||||
&.req {
|
position: absolute;
|
||||||
> .label {
|
right: $interiorMargin;
|
||||||
@extend .icon-asterisk;
|
height: 100%;
|
||||||
&:before {
|
line-height: 200%;
|
||||||
color: $colorFormRequired;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -92,7 +92,7 @@ body.mobile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.object-browse-bar {
|
.object-browse-bar {
|
||||||
margin-left: 45px;
|
&.t-primary { margin-left: 45px; }
|
||||||
.context-available {
|
.context-available {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,74 +0,0 @@
|
|||||||
@include phoneandtablet {
|
|
||||||
.overlay {
|
|
||||||
.clk-icon.close {
|
|
||||||
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .holder {
|
|
||||||
height: 90%; width: 90%;
|
|
||||||
|
|
||||||
> .contents {
|
|
||||||
top: $mobileOverlayMargin;
|
|
||||||
right: $mobileOverlayMargin;
|
|
||||||
bottom: $mobileOverlayMargin;
|
|
||||||
left: $mobileOverlayMargin;
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
> .title {
|
|
||||||
margin-right: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include phone {
|
|
||||||
.overlay > .holder {
|
|
||||||
$m: 0;
|
|
||||||
border-radius: $m;
|
|
||||||
top: $m;
|
|
||||||
right: $m;
|
|
||||||
bottom: $m;
|
|
||||||
left: $m;
|
|
||||||
height: auto; width: auto;
|
|
||||||
min-width: 200px; min-height: 200px;
|
|
||||||
max-height: 100%; max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
@include transform(none);
|
|
||||||
|
|
||||||
.editor .form .form-row.l-flex-row {
|
|
||||||
// Display elements in a columnar view
|
|
||||||
@include flex-direction(column);
|
|
||||||
> .flex-elem {
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: $interiorMargin;
|
|
||||||
}
|
|
||||||
&.label {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&.controls {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.validates > .label:before {
|
|
||||||
position: relative;
|
|
||||||
right: auto;
|
|
||||||
line-height: inherit;
|
|
||||||
margin-right: $interiorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.t-dialog-sm .overlay > .holder {
|
|
||||||
height: auto; max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include phonePortrait {
|
|
||||||
.overlay > .holder {
|
|
||||||
.contents .bottom-bar {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -21,11 +21,16 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
font-size: 90%;
|
|
||||||
&.delayEntry100ms {
|
&.delayEntry100ms {
|
||||||
@include keyframes(fadeInFromNone) {
|
@include keyframes(fadeInFromNone) {
|
||||||
0% { display: none; opacity: 0; }
|
0% {
|
||||||
100% { display: block; opacity: 1; }
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@include animation-delay($delayEntryMs);
|
@include animation-delay($delayEntryMs);
|
||||||
@include animation(fadeInFromNone $durEntryMs ease-in);
|
@include animation(fadeInFromNone $durEntryMs ease-in);
|
||||||
@ -35,29 +40,21 @@
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
.close {
|
.close {
|
||||||
font-size: 0.8rem;
|
$d: $interiorMargin;
|
||||||
|
opacity: 0.3;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $interiorMarginLg;
|
top: $d;
|
||||||
right: $interiorMarginLg;
|
right: $d;
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
left: auto;
|
left: auto;
|
||||||
z-index: 100;
|
&:hover {
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
> .holder {
|
}
|
||||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
|
||||||
border-radius: $basicCr * 3;
|
> .abs.outer-holder {
|
||||||
color: $colorOvrFg;
|
z-index: 102;
|
||||||
top: 50%;
|
> .abs.inner-holder {
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
left: 50%;
|
|
||||||
@include transform(translateX(-50%) translateY(-50%));
|
|
||||||
height: 70%;
|
|
||||||
width: 50%;
|
|
||||||
min-height: 300px;
|
|
||||||
min-width: 600px;
|
|
||||||
z-index: 101;
|
|
||||||
> .contents {
|
|
||||||
$m: $overlayMargin;
|
$m: $overlayMargin;
|
||||||
top: $m;
|
top: $m;
|
||||||
right: $m;
|
right: $m;
|
||||||
@ -65,6 +62,69 @@
|
|||||||
left: $m;
|
left: $m;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
text-align: right;
|
||||||
|
.s-button {
|
||||||
|
font-size: 95%;
|
||||||
|
height: $ovrFooterH;
|
||||||
|
line-height: $ovrFooterH;
|
||||||
|
margin-bottom: $interiorMarginSm;
|
||||||
|
padding: 0 $interiorMargin * 3;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: $interiorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dialog boxes, size constrained and centered in desktop/tablet
|
||||||
|
&.l-dialog {
|
||||||
|
.s-button {
|
||||||
|
&:not(.major) {
|
||||||
|
@include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .abs.outer-holder {
|
||||||
|
@include desktopandtablet {
|
||||||
|
$max: 1280px;
|
||||||
|
@include transform(translateX(-50%) translateY(-50%));
|
||||||
|
border-radius: $overlayCr;
|
||||||
|
top: 50%; right: auto; bottom: auto; left: 50%;
|
||||||
|
width: 70%; height: 70%;
|
||||||
|
min-width: 520px;
|
||||||
|
max-width: $max; max-height: $max;
|
||||||
|
}
|
||||||
|
@include phone {
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.editor .form .form-row.l-flex-row {
|
||||||
|
// Display elements in a columnar view
|
||||||
|
@include flex-direction(column);
|
||||||
|
> .flex-elem {
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: $interiorMargin;
|
||||||
|
}
|
||||||
|
&.label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&.controls {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.validates > .label:before {
|
||||||
|
position: relative;
|
||||||
|
right: auto;
|
||||||
|
line-height: inherit;
|
||||||
|
margin-right: $interiorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@include ellipsize();
|
@include ellipsize();
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
@ -72,12 +132,23 @@
|
|||||||
margin-bottom: $interiorMargin;
|
margin-bottom: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint, .field-hints { color: $colorFieldHintOverlay !important; }
|
.hint, .field-hints {
|
||||||
|
color: $colorFieldHintOverlay !important;
|
||||||
|
}
|
||||||
|
|
||||||
.abs.top-bar {
|
.abs.top-bar {
|
||||||
height: $ovrTopBarH;
|
height: $ovrTopBarH;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.abs.bottom-bar {
|
||||||
|
top: auto;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: visible;
|
||||||
|
height: $ovrFooterH;
|
||||||
|
}
|
||||||
|
|
||||||
.abs.editor,
|
.abs.editor,
|
||||||
.abs.message-body {
|
.abs.message-body {
|
||||||
top: $ovrTopBarH + $interiorMarginLg;
|
top: $ovrTopBarH + $interiorMarginLg;
|
||||||
@ -92,34 +163,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-bar {
|
|
||||||
text-align: right;
|
|
||||||
.s-button {
|
|
||||||
$bg: $colorOvrBtnBg;
|
|
||||||
&:not(.major) {
|
|
||||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
|
||||||
}
|
|
||||||
font-size: 95%;
|
|
||||||
height: $ovrFooterH;
|
|
||||||
line-height: $ovrFooterH;
|
|
||||||
margin-left: $interiorMargin;
|
|
||||||
padding: 0 $interiorMargin * 3;
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.abs.bottom-bar {
|
|
||||||
top: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: visible;
|
|
||||||
height: $ovrFooterH;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-progress-bar {
|
.l-progress-bar {
|
||||||
$h: $progressBarHOverlay;
|
$h: $progressBarHOverlay;
|
||||||
display: block;
|
display: block;
|
||||||
@ -132,11 +175,63 @@
|
|||||||
.select {
|
.select {
|
||||||
box-shadow: $shdwBtnsOverlay;
|
box-shadow: $shdwBtnsOverlay;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Large view overlays for mobile and desktop
|
||||||
|
&.l-large-view {
|
||||||
|
> .abs.outer-holder {
|
||||||
|
@include keyframes(overlayIn) {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.0, 1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
|
||||||
|
background: $colorBodyBg;
|
||||||
|
|
||||||
|
.abs.inner-holder {
|
||||||
|
opacity: 0;
|
||||||
|
@include keyframes(contentsIn) {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-btn-view-large {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-dialog-sm .overlay > .holder {
|
body.desktop {
|
||||||
|
.overlay {
|
||||||
|
> .abs.outer-holder {
|
||||||
|
border-radius: $overlayCr;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.l-large-view {
|
||||||
|
> .abs.outer-holder {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
top: 5%;
|
||||||
|
left: 5%;
|
||||||
|
@include boxShdwLarge();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-dialog-sm .overlay > .outer-holder {
|
||||||
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
||||||
$h: 225px;
|
$h: 225px;
|
||||||
min-height: $h;
|
max-height: $h;
|
||||||
height: $h;
|
height: $h;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,15 +30,13 @@
|
|||||||
border-color: lighten($bc, 10%);
|
border-color: lighten($bc, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.object-top-bar {
|
.object-browse-bar {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
height: $ohH;
|
height: $ohH;
|
||||||
line-height: $ohH;
|
line-height: $ohH;
|
||||||
.left {
|
|
||||||
padding-right: $interiorMarginLg;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
>.object-holder.abs {
|
> .object-holder.abs {
|
||||||
top: $ohH + $interiorMargin;
|
top: $ohH + $interiorMargin;
|
||||||
}
|
}
|
||||||
.contents {
|
.contents {
|
||||||
@ -69,20 +67,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.view-switcher {
|
.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
|
// Hide the name when the view switcher is in a frame context
|
||||||
.title-label {
|
.title-label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
body.desktop .frame.frame-template {
|
|
||||||
// Hide the view switcher by default when it's in an element that's in a frame context
|
body.desktop .frame {
|
||||||
|
// 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
|
// Frame template is used because we need to target the lowest nested frame
|
||||||
.view-switcher {
|
.view-switcher,
|
||||||
|
.t-btn-view-large {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
&:hover .view-switcher {
|
|
||||||
// Show the view switcher on frame hover
|
// Target the first descendant so that we only show the elements in the outermost container.
|
||||||
|
// Handles the case where we have layouts in layouts.
|
||||||
|
&:hover > .object-browse-bar {
|
||||||
|
.view-switcher,
|
||||||
|
.t-btn-view-large {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
pointer-events: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -265,7 +256,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
padding-right: $interiorMarginLg;
|
|
||||||
.l-back {
|
.l-back {
|
||||||
margin-right: $interiorMarginLg;
|
margin-right: $interiorMarginLg;
|
||||||
&.s-status-editing { display: none; }
|
&.s-status-editing { display: none; }
|
||||||
@ -348,7 +338,7 @@ body.desktop {
|
|||||||
.pane:not(.resizing) {
|
.pane:not(.resizing) {
|
||||||
@include trans-prop-nice-resize-w(250ms);
|
@include trans-prop-nice-resize-w(250ms);
|
||||||
}
|
}
|
||||||
.pane.primary-pane .object-browse-bar {
|
.pane.primary-pane > .object-browse-bar {
|
||||||
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
|
|||||||
$basicCr: 3px;
|
$basicCr: 3px;
|
||||||
$controlCr: 2px;
|
$controlCr: 2px;
|
||||||
$smallCr: 2px;
|
$smallCr: 2px;
|
||||||
|
$overlayCr: 11px;
|
||||||
|
|
||||||
// Buttons and Controls
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
@ -146,6 +147,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
|
|||||||
$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
|
$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
|
||||||
$colorOvrBtnFg: #fff;
|
$colorOvrBtnFg: #fff;
|
||||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
|
$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
|
||||||
|
$durLargeViewExpand: 250ms;
|
||||||
|
|
||||||
// Items
|
// Items
|
||||||
$colorItemBg: lighten($colorBodyBg, 5%);
|
$colorItemBg: lighten($colorBodyBg, 5%);
|
||||||
|
|||||||
@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
|
|||||||
$basicCr: 4px;
|
$basicCr: 4px;
|
||||||
$controlCr: $basicCr;
|
$controlCr: $basicCr;
|
||||||
$smallCr: 3px;
|
$smallCr: 3px;
|
||||||
|
$overlayCr: 11px;
|
||||||
|
|
||||||
// Buttons and Controls
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
@ -146,6 +147,7 @@ $colorOvrFg: $colorBodyFg;
|
|||||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||||
$colorOvrBtnFg: #fff;
|
$colorOvrBtnFg: #fff;
|
||||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||||
|
$durLargeViewExpand: 250ms;
|
||||||
|
|
||||||
// Items
|
// Items
|
||||||
$colorItemBg: #ddd;
|
$colorItemBg: #ddd;
|
||||||
|
|||||||
@ -24,6 +24,7 @@ define([
|
|||||||
"./src/LayoutController",
|
"./src/LayoutController",
|
||||||
"./src/FixedController",
|
"./src/FixedController",
|
||||||
"./src/LayoutCompositionPolicy",
|
"./src/LayoutCompositionPolicy",
|
||||||
|
'./src/MCTTriggerModal',
|
||||||
"text!./res/templates/layout.html",
|
"text!./res/templates/layout.html",
|
||||||
"text!./res/templates/fixed.html",
|
"text!./res/templates/fixed.html",
|
||||||
"text!./res/templates/frame.html",
|
"text!./res/templates/frame.html",
|
||||||
@ -37,6 +38,7 @@ define([
|
|||||||
LayoutController,
|
LayoutController,
|
||||||
FixedController,
|
FixedController,
|
||||||
LayoutCompositionPolicy,
|
LayoutCompositionPolicy,
|
||||||
|
MCTTriggerModal,
|
||||||
layoutTemplate,
|
layoutTemplate,
|
||||||
fixedTemplate,
|
fixedTemplate,
|
||||||
frameTemplate,
|
frameTemplate,
|
||||||
@ -222,6 +224,15 @@ define([
|
|||||||
"template": frameTemplate
|
"template": frameTemplate
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"directives": [
|
||||||
|
{
|
||||||
|
"key": "mctTriggerModal",
|
||||||
|
"implementation": MCTTriggerModal,
|
||||||
|
"depends": [
|
||||||
|
"$document"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
"controllers": [
|
"controllers": [
|
||||||
{
|
{
|
||||||
"key": "LayoutController",
|
"key": "LayoutController",
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="frame frame-template abs">
|
<div class="frame frame-template abs">
|
||||||
<div class="abs object-top-bar l-flex-row">
|
<div class="abs object-browse-bar l-flex-row">
|
||||||
<div class="left flex-elem l-flex-row grows">
|
<div class="left flex-elem l-flex-row grows">
|
||||||
<mct-representation
|
<mct-representation
|
||||||
key="'object-header'"
|
key="'object-header'"
|
||||||
|
|||||||
137
platform/features/layout/src/MCTTriggerModal.js
Normal file
137
platform/features/layout/src/MCTTriggerModal.js
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT, Copyright (c) 2014-2016, United States Government
|
||||||
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
* Administration. All rights reserved.
|
||||||
|
*
|
||||||
|
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*
|
||||||
|
* Open MCT includes source code licensed under additional open source
|
||||||
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||||
|
* this source code distribution or the Licensing information page available
|
||||||
|
* at runtime from the About dialog for additional information.
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'zepto'
|
||||||
|
], function (
|
||||||
|
$
|
||||||
|
) {
|
||||||
|
|
||||||
|
var OVERLAY_TEMPLATE = '' +
|
||||||
|
'<div class="abs overlay l-large-view">' +
|
||||||
|
' <div class="abs blocker"></div>' +
|
||||||
|
' <div class="abs outer-holder">' +
|
||||||
|
' <a class="close icon-x-in-circle"></a>' +
|
||||||
|
' <div class="abs inner-holder l-flex-col">' +
|
||||||
|
' <div class="t-contents flex-elem holder grows"></div>' +
|
||||||
|
' <div class="bottom-bar flex-elem holder">' +
|
||||||
|
' <a class="t-done s-button major">Done</a>' +
|
||||||
|
' </div>' +
|
||||||
|
' </div>' +
|
||||||
|
' </div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* MCT Trigger Modal is intended for use in only one location: inside the
|
||||||
|
* object-header to allow views in a layout to be popped out in a modal.
|
||||||
|
* Users can close the modal and go back to normal, and everything generally
|
||||||
|
* just works fine.
|
||||||
|
*
|
||||||
|
* This code is sensitive to how our html is constructed-- particularly with
|
||||||
|
* how it locates the the container of an element in a layout. However, it
|
||||||
|
* should be able to handle slight relocations so long as it is always a
|
||||||
|
* descendent of a `.frame` element.
|
||||||
|
*/
|
||||||
|
function MCTTriggerModal($document) {
|
||||||
|
var document = $document[0];
|
||||||
|
|
||||||
|
function link($scope, $element) {
|
||||||
|
var frame = $element.parent();
|
||||||
|
|
||||||
|
for (var i = 0; i < 10; i++) {
|
||||||
|
if (frame.hasClass('frame')) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
frame = frame.parent();
|
||||||
|
}
|
||||||
|
if (!frame.hasClass('frame')) {
|
||||||
|
$element.remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
frame = frame[0];
|
||||||
|
var layoutContainer = frame.parentElement,
|
||||||
|
isOpen = false,
|
||||||
|
toggleOverlay,
|
||||||
|
overlay,
|
||||||
|
closeButton,
|
||||||
|
doneButton,
|
||||||
|
blocker,
|
||||||
|
overlayContainer;
|
||||||
|
|
||||||
|
function openOverlay() {
|
||||||
|
// Remove frame classes from being applied in a non-frame context
|
||||||
|
$(frame).removeClass('frame frame-template');
|
||||||
|
overlay = document.createElement('span');
|
||||||
|
overlay.innerHTML = OVERLAY_TEMPLATE;
|
||||||
|
overlayContainer = overlay.querySelector('.t-contents');
|
||||||
|
closeButton = overlay.querySelector('a.close');
|
||||||
|
closeButton.addEventListener('click', toggleOverlay);
|
||||||
|
doneButton = overlay.querySelector('a.t-done');
|
||||||
|
doneButton.addEventListener('click', toggleOverlay);
|
||||||
|
blocker = overlay.querySelector('.abs.blocker');
|
||||||
|
blocker.addEventListener('click', toggleOverlay);
|
||||||
|
document.body.appendChild(overlay);
|
||||||
|
layoutContainer.removeChild(frame);
|
||||||
|
overlayContainer.appendChild(frame);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeOverlay() {
|
||||||
|
$(frame).addClass('frame frame-template');
|
||||||
|
overlayContainer.removeChild(frame);
|
||||||
|
layoutContainer.appendChild(frame);
|
||||||
|
document.body.removeChild(overlay);
|
||||||
|
closeButton.removeEventListener('click', toggleOverlay);
|
||||||
|
closeButton = undefined;
|
||||||
|
doneButton.removeEventListener('click', toggleOverlay);
|
||||||
|
doneButton = undefined;
|
||||||
|
blocker.removeEventListener('click', toggleOverlay);
|
||||||
|
blocker = undefined;
|
||||||
|
overlayContainer = undefined;
|
||||||
|
overlay = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleOverlay = function () {
|
||||||
|
if (!isOpen) {
|
||||||
|
openOverlay();
|
||||||
|
isOpen = true;
|
||||||
|
} else {
|
||||||
|
closeOverlay();
|
||||||
|
isOpen = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$element.on('click', toggleOverlay);
|
||||||
|
$scope.$on('$destroy', function () {
|
||||||
|
$element.off('click', toggleOverlay);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
link: link
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return MCTTriggerModal;
|
||||||
|
|
||||||
|
});
|
||||||
122
platform/features/layout/test/MCTTriggerModalSpec.js
Normal file
122
platform/features/layout/test/MCTTriggerModalSpec.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT, Copyright (c) 2014-2016, United States Government
|
||||||
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
* Administration. All rights reserved.
|
||||||
|
*
|
||||||
|
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*
|
||||||
|
* Open MCT includes source code licensed under additional open source
|
||||||
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||||
|
* this source code distribution or the Licensing information page available
|
||||||
|
* at runtime from the About dialog for additional information.
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'../src/MCTTriggerModal'
|
||||||
|
], function (
|
||||||
|
MCTTriggerModal
|
||||||
|
) {
|
||||||
|
describe('MCTTriggerModal', function () {
|
||||||
|
var $scope,
|
||||||
|
$element,
|
||||||
|
frame,
|
||||||
|
layoutContainer,
|
||||||
|
$document,
|
||||||
|
mctTriggerModal;
|
||||||
|
|
||||||
|
function makeElement(classes, parentEl) {
|
||||||
|
var elem = jasmine.createSpyObj('element.' + classes.join('.'), [
|
||||||
|
'hasClass',
|
||||||
|
'parent'
|
||||||
|
]);
|
||||||
|
elem.hasClass.andCallFake(function (className) {
|
||||||
|
return classes.indexOf(className) !== -1;
|
||||||
|
});
|
||||||
|
elem.parent.andReturn(parentEl);
|
||||||
|
var div = document.createElement('div');
|
||||||
|
div.className = classes.join(' ');
|
||||||
|
parentEl[0].appendChild(div);
|
||||||
|
elem[0] = div;
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
beforeEach(function () {
|
||||||
|
$scope = jasmine.createSpyObj('$scope', ['$on']);
|
||||||
|
$element = jasmine.createSpyObj('$element', [
|
||||||
|
'parent',
|
||||||
|
'remove',
|
||||||
|
'on',
|
||||||
|
'off'
|
||||||
|
]);
|
||||||
|
layoutContainer = document.createElement('div');
|
||||||
|
frame = makeElement(['frame'], [layoutContainer]);
|
||||||
|
var child = makeElement([], frame);
|
||||||
|
for (var i = 0; i < 5; i++) {
|
||||||
|
child = makeElement([], child);
|
||||||
|
}
|
||||||
|
$element.parent.andReturn(child);
|
||||||
|
$document = [jasmine.createSpyObj('document', ['createElement'])];
|
||||||
|
$document[0].body = document.createElement('div');
|
||||||
|
$document[0].createElement.andCallFake(function (tag) {
|
||||||
|
return document.createElement(tag);
|
||||||
|
});
|
||||||
|
|
||||||
|
mctTriggerModal = new MCTTriggerModal($document);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('is a directive definition', function () {
|
||||||
|
expect(mctTriggerModal.restrict).toBe('A');
|
||||||
|
expect(mctTriggerModal.link).toEqual(jasmine.any(Function));
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('link', function () {
|
||||||
|
beforeEach(function () {
|
||||||
|
mctTriggerModal.link($scope, $element);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('attaches handlers to $element', function () {
|
||||||
|
expect($element.on).toHaveBeenCalledWith(
|
||||||
|
'click',
|
||||||
|
jasmine.any(Function)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('cleans up on $scope $destroy', function () {
|
||||||
|
expect($scope.$on).toHaveBeenCalledWith(
|
||||||
|
'$destroy',
|
||||||
|
jasmine.any(Function)
|
||||||
|
);
|
||||||
|
$scope.$on.mostRecentCall.args[1]();
|
||||||
|
expect($element.off).toHaveBeenCalledWith(
|
||||||
|
'click',
|
||||||
|
jasmine.any(Function)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('opens and closes overlays', function () {
|
||||||
|
[
|
||||||
|
'a.close', 'a.t-done', '.abs.blocker'
|
||||||
|
].forEach(function (selector) {
|
||||||
|
$element.on.mostRecentCall.args[1]();
|
||||||
|
var container = $document[0].body.querySelector('.t-contents');
|
||||||
|
expect(container.children[0]).toBe(frame[0]);
|
||||||
|
expect(layoutContainer.children[0]).not.toBe(frame[0]);
|
||||||
|
$document[0].body.querySelector(selector)
|
||||||
|
.dispatchEvent(new Event('click'));
|
||||||
|
expect(container.children[0]).not.toBe(frame[0]);
|
||||||
|
expect(layoutContainer.children[0]).toBe(frame[0]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<div class="abs overlay">
|
<div class="abs overlay l-dialog">
|
||||||
<div class="abs blocker"></div>
|
<div class="abs blocker"></div>
|
||||||
<div class="abs holder">
|
<div class="abs outer-holder">
|
||||||
<a class="clk-icon icon ui-symbol close">x</a>
|
<a class="close icon-x-in-circle"></a>
|
||||||
<div class="abs contents">
|
<div class="abs inner-holder contents">
|
||||||
<div class="abs top-bar">
|
<div class="abs top-bar">
|
||||||
<div class="title"></div>
|
<div class="title"></div>
|
||||||
<div class="hint"></div>
|
<div class="hint"></div>
|
||||||
@ -10,12 +10,9 @@
|
|||||||
<div class='abs editor'>
|
<div class='abs editor'>
|
||||||
</div>
|
</div>
|
||||||
<div class="abs bottom-bar">
|
<div class="abs bottom-bar">
|
||||||
<a class='s-btn major ok'>OK</a>
|
<a class='s-button major'>OK</a>
|
||||||
<a class='s-btn cancel'>Cancel</a>
|
<a class='s-button'>Cancel</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user