mirror of
https://github.com/nasa/openmct.git
synced 2025-04-16 15:29:20 +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
parent
9f8578d79e
commit
04c2eac9ef
@ -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 t-primary">
|
||||
<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,3 +29,7 @@
|
||||
mct-object='domainObject'
|
||||
class="flex-elem context-available-w"></mct-representation>
|
||||
</span>
|
||||
<a class="s-button icon-expand t-btn-view-large"
|
||||
title="View large"
|
||||
mct-trigger-modal>
|
||||
</a>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="bottom-bar">
|
||||
<a ng-repeat="dialogOption in ngModel.options"
|
||||
class="s-button major"
|
||||
class="s-button"
|
||||
ng-click="dialogOption.callback()">
|
||||
{{dialogOption.label}}
|
||||
</a>
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
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 holder">
|
||||
<div class="abs outer-holder">
|
||||
<a ng-click="ngModel.cancel()"
|
||||
ng-if="ngModel.cancel"
|
||||
class="close icon-x"></a>
|
||||
<div class="abs contents" ng-transclude></div>
|
||||
class="close icon-x-in-circle"></a>
|
||||
<div class="abs inner-holder contents" ng-transclude></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
@mixin glyph($unicode, $family: 'symbolsfont') {
|
||||
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
|
||||
&:before {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin glyphAfter($unicode, $family: 'symbolsfont') {
|
||||
&:after {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** CHAR UNICODES */
|
||||
|
||||
$glyph-icon-alert-rect: '\e900';
|
||||
@ -111,111 +118,111 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
|
||||
/************************** 16 PX CLASSES */
|
||||
|
||||
.icon-alert-rect { @include glyph($glyph-icon-alert-rect); }
|
||||
.icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); }
|
||||
.icon-arrow-down { @include glyph($glyph-icon-arrow-down); }
|
||||
.icon-arrow-left { @include glyph($glyph-icon-arrow-left); }
|
||||
.icon-arrow-right { @include glyph($glyph-icon-arrow-right); }
|
||||
.icon-arrow-double-up { @include glyph($glyph-icon-arrow-double-up); }
|
||||
.icon-arrow-tall-up { @include glyph($glyph-icon-arrow-tall-up); }
|
||||
.icon-arrow-tall-down { @include glyph($glyph-icon-arrow-tall-down); }
|
||||
.icon-arrow-double-down { @include glyph($glyph-icon-arrow-double-down); }
|
||||
.icon-arrow-up { @include glyph($glyph-icon-arrow-up); }
|
||||
.icon-asterisk { @include glyph($glyph-icon-asterisk); }
|
||||
.icon-bell { @include glyph($glyph-icon-bell); }
|
||||
.icon-box { @include glyph($glyph-icon-box); }
|
||||
.icon-box-with-arrow { @include glyph($glyph-icon-box-with-arrow); }
|
||||
.icon-check { @include glyph($glyph-icon-check); }
|
||||
.icon-connectivity { @include glyph($glyph-icon-connectivity); }
|
||||
.icon-database-in-brackets { @include glyph($glyph-icon-database-in-brackets); }
|
||||
.icon-eye-open { @include glyph($glyph-icon-eye-open); }
|
||||
.icon-gear { @include glyph($glyph-icon-gear); }
|
||||
.icon-hourglass { @include glyph($glyph-icon-hourglass); }
|
||||
.icon-info { @include glyph($glyph-icon-info); }
|
||||
.icon-link { @include glyph($glyph-icon-link); }
|
||||
.icon-lock { @include glyph($glyph-icon-lock); }
|
||||
.icon-minus { @include glyph($glyph-icon-minus); }
|
||||
.icon-people { @include glyph($glyph-icon-people); }
|
||||
.icon-person { @include glyph($glyph-icon-person); }
|
||||
.icon-plus { @include glyph($glyph-icon-plus); }
|
||||
.icon-trash { @include glyph($glyph-icon-trash); }
|
||||
.icon-x { @include glyph($glyph-icon-x); }
|
||||
.icon-brackets { @include glyph($glyph-icon-brackets); }
|
||||
.icon-arrows-out { @include glyph($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyph($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyph($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyph($glyph-icon-bullet); }
|
||||
.icon-calendar { @include glyph($glyph-icon-calendar); }
|
||||
.icon-chain-links { @include glyph($glyph-icon-chain-links); }
|
||||
.icon-collapse-pane-left { @include glyph($glyph-icon-collapse-pane-left); }
|
||||
.icon-collapse-pane-right { @include glyph($glyph-icon-collapse-pane-right); }
|
||||
.icon-download { @include glyph($glyph-icon-download); }
|
||||
.icon-duplicate { @include glyph($glyph-icon-duplicate); }
|
||||
.icon-folder-new { @include glyph($glyph-icon-folder-new); }
|
||||
.icon-fullscreen-collapse { @include glyph($glyph-icon-fullscreen-collapse); }
|
||||
.icon-fullscreen-expand { @include glyph($glyph-icon-fullscreen-expand); }
|
||||
.icon-layers { @include glyph($glyph-icon-layers); }
|
||||
.icon-line-horz { @include glyph($glyph-icon-line-horz); }
|
||||
.icon-magnify { @include glyph($glyph-icon-magnify); }
|
||||
.icon-magnify-in { @include glyph($glyph-icon-magnify-in); }
|
||||
.icon-magnify-out { @include glyph($glyph-icon-magnify-out); }
|
||||
.icon-menu-hamburger { @include glyph($glyph-icon-menu-hamburger); }
|
||||
.icon-move { @include glyph($glyph-icon-move); }
|
||||
.icon-new-window { @include glyph($glyph-icon-new-window); }
|
||||
.icon-paint-bucket { @include glyph($glyph-icon-paint-bucket); }
|
||||
.icon-pause { @include glyph($glyph-icon-pause); }
|
||||
.icon-pencil { @include glyph($glyph-icon-pencil); }
|
||||
.icon-play { @include glyph($glyph-icon-play); }
|
||||
.icon-plot-resource { @include glyph($glyph-icon-plot-resource); }
|
||||
.icon-pointer-left { @include glyph($glyph-icon-pointer-left); }
|
||||
.icon-pointer-right { @include glyph($glyph-icon-pointer-right); }
|
||||
.icon-refresh { @include glyph($glyph-icon-refresh); }
|
||||
.icon-save { @include glyph($glyph-icon-save); }
|
||||
.icon-sine { @include glyph($glyph-icon-sine); }
|
||||
.icon-T { @include glyph($glyph-icon-T); }
|
||||
.icon-thumbs-strip { @include glyph($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyph($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyph($glyph-icon-two-parts-one-only); }
|
||||
.icon-resync { @include glyph($glyph-icon-resync); }
|
||||
.icon-reset { @include glyph($glyph-icon-reset); }
|
||||
.icon-x-in-circle { @include glyph($glyph-icon-x-in-circle); }
|
||||
.icon-brightness { @include glyph($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyph($glyph-icon-contrast); }
|
||||
.icon-expand { @include glyph($glyph-icon-expand); }
|
||||
.icon-activity { @include glyph($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyph($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyph($glyph-icon-autoflow-tabular); }
|
||||
.icon-clock { @include glyph($glyph-icon-clock); }
|
||||
.icon-database { @include glyph($glyph-icon-database); }
|
||||
.icon-database-query { @include glyph($glyph-icon-database-query); }
|
||||
.icon-dataset { @include glyph($glyph-icon-dataset); }
|
||||
.icon-datatable { @include glyph($glyph-icon-datatable); }
|
||||
.icon-dictionary { @include glyph($glyph-icon-dictionary); }
|
||||
.icon-folder { @include glyph($glyph-icon-folder); }
|
||||
.icon-image { @include glyph($glyph-icon-image); }
|
||||
.icon-layout { @include glyph($glyph-icon-layout); }
|
||||
.icon-object { @include glyph($glyph-icon-object); }
|
||||
.icon-object-unknown { @include glyph($glyph-icon-object-unknown); }
|
||||
.icon-packet { @include glyph($glyph-icon-packet); }
|
||||
.icon-page { @include glyph($glyph-icon-page); }
|
||||
.icon-plot-overlay { @include glyph($glyph-icon-plot-overlay); }
|
||||
.icon-plot-stacked { @include glyph($glyph-icon-plot-stacked); }
|
||||
.icon-session { @include glyph($glyph-icon-session); }
|
||||
.icon-tabular { @include glyph($glyph-icon-tabular); }
|
||||
.icon-tabular-lad { @include glyph($glyph-icon-tabular-lad); }
|
||||
.icon-tabular-lad-set { @include glyph($glyph-icon-tabular-lad-set); }
|
||||
.icon-tabular-realtime { @include glyph($glyph-icon-tabular-realtime); }
|
||||
.icon-tabular-scrolling { @include glyph($glyph-icon-tabular-scrolling); }
|
||||
.icon-telemetry { @include glyph($glyph-icon-telemetry); }
|
||||
.icon-telemetry-panel { @include glyph($glyph-icon-telemetry-panel); }
|
||||
.icon-timeline { @include glyph($glyph-icon-timeline); }
|
||||
.icon-timer { @include glyph($glyph-icon-timer); }
|
||||
.icon-topic { @include glyph($glyph-icon-topic); }
|
||||
.icon-box-with-dashed-lines { @include glyph($glyph-icon-box-with-dashed-lines); }
|
||||
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
|
||||
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }
|
||||
.icon-arrow-down { @include glyphBefore($glyph-icon-arrow-down); }
|
||||
.icon-arrow-left { @include glyphBefore($glyph-icon-arrow-left); }
|
||||
.icon-arrow-right { @include glyphBefore($glyph-icon-arrow-right); }
|
||||
.icon-arrow-double-up { @include glyphBefore($glyph-icon-arrow-double-up); }
|
||||
.icon-arrow-tall-up { @include glyphBefore($glyph-icon-arrow-tall-up); }
|
||||
.icon-arrow-tall-down { @include glyphBefore($glyph-icon-arrow-tall-down); }
|
||||
.icon-arrow-double-down { @include glyphBefore($glyph-icon-arrow-double-down); }
|
||||
.icon-arrow-up { @include glyphBefore($glyph-icon-arrow-up); }
|
||||
.icon-asterisk { @include glyphBefore($glyph-icon-asterisk); }
|
||||
.icon-bell { @include glyphBefore($glyph-icon-bell); }
|
||||
.icon-box { @include glyphBefore($glyph-icon-box); }
|
||||
.icon-box-with-arrow { @include glyphBefore($glyph-icon-box-with-arrow); }
|
||||
.icon-check { @include glyphBefore($glyph-icon-check); }
|
||||
.icon-connectivity { @include glyphBefore($glyph-icon-connectivity); }
|
||||
.icon-database-in-brackets { @include glyphBefore($glyph-icon-database-in-brackets); }
|
||||
.icon-eye-open { @include glyphBefore($glyph-icon-eye-open); }
|
||||
.icon-gear { @include glyphBefore($glyph-icon-gear); }
|
||||
.icon-hourglass { @include glyphBefore($glyph-icon-hourglass); }
|
||||
.icon-info { @include glyphBefore($glyph-icon-info); }
|
||||
.icon-link { @include glyphBefore($glyph-icon-link); }
|
||||
.icon-lock { @include glyphBefore($glyph-icon-lock); }
|
||||
.icon-minus { @include glyphBefore($glyph-icon-minus); }
|
||||
.icon-people { @include glyphBefore($glyph-icon-people); }
|
||||
.icon-person { @include glyphBefore($glyph-icon-person); }
|
||||
.icon-plus { @include glyphBefore($glyph-icon-plus); }
|
||||
.icon-trash { @include glyphBefore($glyph-icon-trash); }
|
||||
.icon-x { @include glyphBefore($glyph-icon-x); }
|
||||
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
|
||||
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyphBefore($glyph-icon-bullet); }
|
||||
.icon-calendar { @include glyphBefore($glyph-icon-calendar); }
|
||||
.icon-chain-links { @include glyphBefore($glyph-icon-chain-links); }
|
||||
.icon-collapse-pane-left { @include glyphBefore($glyph-icon-collapse-pane-left); }
|
||||
.icon-collapse-pane-right { @include glyphBefore($glyph-icon-collapse-pane-right); }
|
||||
.icon-download { @include glyphBefore($glyph-icon-download); }
|
||||
.icon-duplicate { @include glyphBefore($glyph-icon-duplicate); }
|
||||
.icon-folder-new { @include glyphBefore($glyph-icon-folder-new); }
|
||||
.icon-fullscreen-collapse { @include glyphBefore($glyph-icon-fullscreen-collapse); }
|
||||
.icon-fullscreen-expand { @include glyphBefore($glyph-icon-fullscreen-expand); }
|
||||
.icon-layers { @include glyphBefore($glyph-icon-layers); }
|
||||
.icon-line-horz { @include glyphBefore($glyph-icon-line-horz); }
|
||||
.icon-magnify { @include glyphBefore($glyph-icon-magnify); }
|
||||
.icon-magnify-in { @include glyphBefore($glyph-icon-magnify-in); }
|
||||
.icon-magnify-out { @include glyphBefore($glyph-icon-magnify-out); }
|
||||
.icon-menu-hamburger { @include glyphBefore($glyph-icon-menu-hamburger); }
|
||||
.icon-move { @include glyphBefore($glyph-icon-move); }
|
||||
.icon-new-window { @include glyphBefore($glyph-icon-new-window); }
|
||||
.icon-paint-bucket { @include glyphBefore($glyph-icon-paint-bucket); }
|
||||
.icon-pause { @include glyphBefore($glyph-icon-pause); }
|
||||
.icon-pencil { @include glyphBefore($glyph-icon-pencil); }
|
||||
.icon-play { @include glyphBefore($glyph-icon-play); }
|
||||
.icon-plot-resource { @include glyphBefore($glyph-icon-plot-resource); }
|
||||
.icon-pointer-left { @include glyphBefore($glyph-icon-pointer-left); }
|
||||
.icon-pointer-right { @include glyphBefore($glyph-icon-pointer-right); }
|
||||
.icon-refresh { @include glyphBefore($glyph-icon-refresh); }
|
||||
.icon-save { @include glyphBefore($glyph-icon-save); }
|
||||
.icon-sine { @include glyphBefore($glyph-icon-sine); }
|
||||
.icon-T { @include glyphBefore($glyph-icon-T); }
|
||||
.icon-thumbs-strip { @include glyphBefore($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyphBefore($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyphBefore($glyph-icon-two-parts-one-only); }
|
||||
.icon-resync { @include glyphBefore($glyph-icon-resync); }
|
||||
.icon-reset { @include glyphBefore($glyph-icon-reset); }
|
||||
.icon-x-in-circle { @include glyphBefore($glyph-icon-x-in-circle); }
|
||||
.icon-brightness { @include glyphBefore($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyphBefore($glyph-icon-contrast); }
|
||||
.icon-expand { @include glyphBefore($glyph-icon-expand); }
|
||||
.icon-activity { @include glyphBefore($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }
|
||||
.icon-clock { @include glyphBefore($glyph-icon-clock); }
|
||||
.icon-database { @include glyphBefore($glyph-icon-database); }
|
||||
.icon-database-query { @include glyphBefore($glyph-icon-database-query); }
|
||||
.icon-dataset { @include glyphBefore($glyph-icon-dataset); }
|
||||
.icon-datatable { @include glyphBefore($glyph-icon-datatable); }
|
||||
.icon-dictionary { @include glyphBefore($glyph-icon-dictionary); }
|
||||
.icon-folder { @include glyphBefore($glyph-icon-folder); }
|
||||
.icon-image { @include glyphBefore($glyph-icon-image); }
|
||||
.icon-layout { @include glyphBefore($glyph-icon-layout); }
|
||||
.icon-object { @include glyphBefore($glyph-icon-object); }
|
||||
.icon-object-unknown { @include glyphBefore($glyph-icon-object-unknown); }
|
||||
.icon-packet { @include glyphBefore($glyph-icon-packet); }
|
||||
.icon-page { @include glyphBefore($glyph-icon-page); }
|
||||
.icon-plot-overlay { @include glyphBefore($glyph-icon-plot-overlay); }
|
||||
.icon-plot-stacked { @include glyphBefore($glyph-icon-plot-stacked); }
|
||||
.icon-session { @include glyphBefore($glyph-icon-session); }
|
||||
.icon-tabular { @include glyphBefore($glyph-icon-tabular); }
|
||||
.icon-tabular-lad { @include glyphBefore($glyph-icon-tabular-lad); }
|
||||
.icon-tabular-lad-set { @include glyphBefore($glyph-icon-tabular-lad-set); }
|
||||
.icon-tabular-realtime { @include glyphBefore($glyph-icon-tabular-realtime); }
|
||||
.icon-tabular-scrolling { @include glyphBefore($glyph-icon-tabular-scrolling); }
|
||||
.icon-telemetry { @include glyphBefore($glyph-icon-telemetry); }
|
||||
.icon-telemetry-panel { @include glyphBefore($glyph-icon-telemetry-panel); }
|
||||
.icon-timeline { @include glyphBefore($glyph-icon-timeline); }
|
||||
.icon-timer { @include glyphBefore($glyph-icon-timer); }
|
||||
.icon-topic { @include glyphBefore($glyph-icon-topic); }
|
||||
.icon-box-with-dashed-lines { @include glyphBefore($glyph-icon-box-with-dashed-lines); }
|
||||
|
||||
/************************** 12 PX CLASSES */
|
||||
|
||||
.icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-right-12px { @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
|
||||
.icon-folder-12px { @include glyph($glyph-icon-folder,'symbolsfont-12px'); }
|
||||
.icon-eye-open-12px { @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-left-12px { @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); }
|
||||
.icon-collapse-pane-right-12px { @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); }
|
||||
.icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
@import "search/search";
|
||||
@import "mobile/search/search";
|
||||
@import "overlay/overlay";
|
||||
@import "mobile/overlay/overlay";
|
||||
@import "tree/tree";
|
||||
@import "object-label";
|
||||
@import "mobile/tree";
|
||||
|
||||
@ -285,13 +285,14 @@
|
||||
|
||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
background-color: $bg;
|
||||
border-radius: $controlCr;
|
||||
//border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
|
||||
@include user-select(none);
|
||||
border-radius: $controlCr;
|
||||
color: $fg;
|
||||
.icon,
|
||||
&:before {
|
||||
|
||||
@ -651,7 +651,8 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
.view-switcher,
|
||||
.t-btn-view-large {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
|
||||
@ -249,7 +249,7 @@
|
||||
.context-menu-holder,
|
||||
.menu-holder {
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
z-index: 120;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -273,7 +273,7 @@
|
||||
|
||||
.btn-bar.right .menu,
|
||||
.menus-to-left .menu {
|
||||
z-index: 79;
|
||||
z-index: 79;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: auto;
|
||||
|
||||
@ -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
|
||||
.t-message-list {
|
||||
@include messageBlock(32px);
|
||||
|
||||
@ -19,44 +19,40 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* 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 {
|
||||
.form-row.validates {
|
||||
> .label {
|
||||
padding-right: $reqSymbolM; // Keep room for validation element
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
&:after {
|
||||
font-size: $reqSymbolFontSize;
|
||||
height: 100%;
|
||||
line-height: 200%;
|
||||
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
&.invalid.req {
|
||||
> .label {
|
||||
@extend .icon-x;
|
||||
&:before {
|
||||
color: $colorFormInvalid;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
|
||||
|
||||
&.valid,
|
||||
&.valid.req {
|
||||
> .label {
|
||||
@extend .icon-check;
|
||||
&:before {
|
||||
color: $colorFormValid;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.req {
|
||||
> .label {
|
||||
@extend .icon-asterisk;
|
||||
&:before {
|
||||
color: $colorFormRequired;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
|
||||
|
||||
&.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .form-row.validates > .label {
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
height: 100%;
|
||||
line-height: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@ body.mobile {
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
margin-left: 45px;
|
||||
&.t-primary { margin-left: 45px; }
|
||||
.context-available {
|
||||
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 {
|
||||
font-size: 90%;
|
||||
&.delayEntry100ms {
|
||||
@include keyframes(fadeInFromNone) {
|
||||
0% { display: none; opacity: 0; }
|
||||
100% { display: block; opacity: 1; }
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include animation-delay($delayEntryMs);
|
||||
@include animation(fadeInFromNone $durEntryMs ease-in);
|
||||
@ -35,29 +40,21 @@
|
||||
z-index: 100;
|
||||
}
|
||||
.close {
|
||||
font-size: 0.8rem;
|
||||
$d: $interiorMargin;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
top: $interiorMarginLg;
|
||||
right: $interiorMarginLg;
|
||||
top: $d;
|
||||
right: $d;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
> .holder {
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
border-radius: $basicCr * 3;
|
||||
color: $colorOvrFg;
|
||||
top: 50%;
|
||||
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 {
|
||||
|
||||
> .abs.outer-holder {
|
||||
z-index: 102;
|
||||
> .abs.inner-holder {
|
||||
$m: $overlayMargin;
|
||||
top: $m;
|
||||
right: $m;
|
||||
@ -65,78 +62,176 @@
|
||||
left: $m;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.hint, .field-hints { color: $colorFieldHintOverlay !important; }
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-input-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
&: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 {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.hint, .field-hints {
|
||||
color: $colorFieldHintOverlay !important;
|
||||
}
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-input-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
box-shadow: $shdwBtnsOverlay;
|
||||
}
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
height: $ovrFooterH;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
.t-dialog-sm .overlay > .outer-holder {
|
||||
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
||||
$h: 225px;
|
||||
max-height: $h;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
box-shadow: $shdwBtnsOverlay;
|
||||
}
|
||||
}
|
||||
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
||||
$h: 225px;
|
||||
min-height: $h;
|
||||
height: $h;
|
||||
}
|
||||
|
||||
@ -20,69 +20,77 @@
|
||||
* 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-browse-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 {
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
@ -265,7 +256,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
.l-back {
|
||||
margin-right: $interiorMarginLg;
|
||||
&.s-status-editing { display: none; }
|
||||
@ -348,7 +338,7 @@ body.desktop {
|
||||
.pane:not(.resizing) {
|
||||
@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
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
|
||||
$basicCr: 3px;
|
||||
$controlCr: 2px;
|
||||
$smallCr: 2px;
|
||||
$overlayCr: 11px;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
@ -146,6 +147,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%);
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: lighten($colorBodyBg, 5%);
|
||||
|
||||
@ -17,6 +17,7 @@ $hoverRatioPercent: 10%;
|
||||
$basicCr: 4px;
|
||||
$controlCr: $basicCr;
|
||||
$smallCr: 3px;
|
||||
$overlayCr: 11px;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
@ -146,6 +147,7 @@ $colorOvrFg: $colorBodyFg;
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: #ddd;
|
||||
|
||||
@ -24,6 +24,7 @@ define([
|
||||
"./src/LayoutController",
|
||||
"./src/FixedController",
|
||||
"./src/LayoutCompositionPolicy",
|
||||
'./src/MCTTriggerModal',
|
||||
"text!./res/templates/layout.html",
|
||||
"text!./res/templates/fixed.html",
|
||||
"text!./res/templates/frame.html",
|
||||
@ -37,6 +38,7 @@ define([
|
||||
LayoutController,
|
||||
FixedController,
|
||||
LayoutCompositionPolicy,
|
||||
MCTTriggerModal,
|
||||
layoutTemplate,
|
||||
fixedTemplate,
|
||||
frameTemplate,
|
||||
@ -222,6 +224,15 @@ define([
|
||||
"template": frameTemplate
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctTriggerModal",
|
||||
"implementation": MCTTriggerModal,
|
||||
"depends": [
|
||||
"$document"
|
||||
]
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "LayoutController",
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<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">
|
||||
<mct-representation
|
||||
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 holder">
|
||||
<a class="clk-icon icon ui-symbol close">x</a>
|
||||
<div class="abs contents">
|
||||
<div class="abs outer-holder">
|
||||
<a class="close icon-x-in-circle"></a>
|
||||
<div class="abs inner-holder contents">
|
||||
<div class="abs top-bar">
|
||||
<div class="title"></div>
|
||||
<div class="hint"></div>
|
||||
@ -10,12 +10,9 @@
|
||||
<div class='abs editor'>
|
||||
</div>
|
||||
<div class="abs bottom-bar">
|
||||
<a class='s-btn major ok'>OK</a>
|
||||
<a class='s-btn cancel'>Cancel</a>
|
||||
<a class='s-button major'>OK</a>
|
||||
<a class='s-button'>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user