[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
@@ -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'); }
|
||||
|
||||
Reference in New Issue
Block a user