From f77c6c821c80352ddac1d6873a57a583a0655203 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Mar 2019 13:27:13 -0700 Subject: [PATCH] Migrate styles (#2307) * Legacy style migration in progress - Working bottom up, many legacy items commented out. Stopped at controls/indicators; * Further migrations and deprecating - Legacy indicator styles moved; * WIP Styles migration - s-button converted to c-button, WIP; - Other * Significant progress on migration, but still very WIP - Mostly constants and overlay styling; - Also bubbles and splitter; - TODO: fix tree in overlay and splitter in imagery! * Fix Summary Widgets UI WIP - Remove non-working status 'editing' checks; * Fix Summary Widgets UI WIP - Remove non-working status 'editing' checks; - view-control > c-disclosure-triangle; * Fix Summary Widgets UI WIP - Markup changes; - Migrate CSS to styles-new, remove old; * Fix Summary Widgets UI WIP - Rule formatting and layout; - Refinement to _controls / select {} padding; * Fix Summary Widgets UI WIP - Toolbar styles made more portable; - Palette style migration; - Very WIP; * Fix Summary Widgets UI WIP - Palettes all fixed and functional; - Conditions layout; - New c-button--swatched styles; * Fix Summary Widgets UI WIP - Clean up code; * Fix Summary Widgets UI WIP - Fix button in Test Data area; * Fix layout in shell left pane due to elements being moved - Styles fixed and refined; * Fixed palettes - Fixed icon palette; - Significant refinement to general palette styles; * Significant fixes for Summary Widgets - Widget editing UI fixed; - JS cleanups and improvements; - CSS, JS code cleanup; * Migrate tree view used in Locator - Mods to legacy markup; - Mods to current CSS; - Removed import of legacy tree CSS in legacy-styles.scss; * Migrate archetypes - l-flex-row, l-flex-col, etc. moved to legacy; - grid-* styles cleaned up and moved, @extends removed; - WIP on c-object-label, move styles from mct-tree.vue into ObjectLabel .vue; - TODO: finish up c-object-label, cleanups in mct-tree.vue; * Migrate effects and animation mixins * Object labels, legacy cleanup - Add and apply .c-object-label for tree node elements; - Remove legacy class "tree" from markup; - Tweak color of tree item hover for better contrast in Inspector; * Fix palettes in Inspector * Various - Fix hover color in tree for better mechanics on a variety of bgs; - Fix object label in Locator tree; - Remove overlay blocker test color; * Significant work for Summary Widgets, mctForm, compact form - Forms in overlay dialogs fixed; - form, compact-form, other classes migrated into new _forms.scss; - Fixes for Summary Widgets; - Theme constants files synced, add form values; - Removed import of legacy forms/elems SCSS file; * Migrate various - Autoflow tabular; - Datetime; - Channel selector; - Form validation; * Migrate wait spinners, final cleanup * Remove old src/styles directory - Remove old Snow and Espresso plugins; - Remove refs to old Snow and Espresso config'd aliases; * Update Palette.js * Update Palette.js * Removed commented code * Removed commented code * Migrate About, startup and splash screen styles --- .../commonUI/dialog/res/templates/dialog.html | 14 +- .../dialog/res/templates/overlay-options.html | 12 +- .../dialog/res/templates/overlay.html | 10 +- .../commonUI/general/res/templates/label.html | 6 +- .../general/res/templates/tree-node.html | 27 +- .../commonUI/general/res/templates/tree.html | 4 +- .../general/res/templates/tree/node.html | 6 +- .../general/res/templates/tree/toggle.html | 3 +- .../res/templates/tree/tree-label.html | 10 +- .../commonUI/general/src/ui/ToggleView.js | 4 +- .../commonUI/general/src/ui/TreeNodeView.js | 12 +- platform/commonUI/general/src/ui/TreeView.js | 2 +- .../imagery/res/templates/imagery.html | 6 +- platform/forms/res/templates/form.html | 14 +- platform/search/res/templates/search.html | 2 +- .../overlays/components/OverlayComponent.vue | 28 +- .../res/templates/plot-options-browse.html | 4 +- .../plot/res/templates/plot-options-edit.html | 20 +- src/plugins/plot/res/templates/plot.html | 10 +- .../plot/res/templates/stacked-plot.html | 10 +- src/plugins/plugins.js | 20 - .../res/input/paletteTemplate.html | 15 +- .../res/input/selectTemplate.html | 4 +- .../summaryWidget/res/ruleTemplate.html | 50 +- .../summaryWidget/res/testDataTemplate.html | 4 +- .../summaryWidget/res/widgetTemplate.html | 31 +- src/plugins/summaryWidget/src/Rule.js | 16 +- .../summaryWidget/src/SummaryWidget.js | 62 +- .../summaryWidget/src/input/ColorPalette.js | 6 +- .../summaryWidget/src/input/IconPalette.js | 6 +- .../summaryWidget/src/input/Palette.js | 33 +- .../src/views/SummaryWidgetView.js | 7 +- .../src/views/summary-widget.html | 9 +- .../telemetryTable/components/table.vue | 4 +- src/{styles => styles-new}/_animations.scss | 8 +- src/styles-new/_constants-espresso.scss | 23 +- src/styles-new/_constants-maelstrom.scss | 23 +- src/styles-new/_constants-snow.scss | 21 +- src/styles-new/_constants.scss | 21 + src/styles-new/_controls.scss | 89 +- .../_elems.scss => styles-new/_forms.scss} | 258 ++- src/styles-new/_global.scss | 1 + src/styles-new/_legacy.scss | 1463 ++++++++++++++++- src/styles-new/_mixins.scss | 63 +- src/styles-new/core.scss | 9 +- src/styles-new/legacy-styles.scss | 76 - src/styles-new/sass-base.scss | 3 +- src/styles/_about.scss | 88 - src/styles/_app-start.scss | 11 - src/styles/_archetypes.scss | 213 --- src/styles/_autoflow.scss | 137 -- src/styles/_badges.scss | 45 - src/styles/_constants.scss | 146 -- src/styles/_data-status.scss | 6 - src/styles/_effects.scss | 58 - src/styles/_global.scss | 247 --- src/styles/_glyphs.scss | 280 ---- src/styles/_icons.scss | 91 - src/styles/_iframe.scss | 31 - src/styles/_inspector.scss | 191 --- src/styles/_logo-and-bg.scss | 64 - src/styles/_main.scss | 88 - src/styles/_mixins.scss | 447 ----- src/styles/_object-label.scss | 63 - src/styles/_openmct.scss | 39 - src/styles/_startup-base.scss | 74 - src/styles/_status.scss | 139 -- src/styles/_table.scss | 79 - src/styles/_text.scss | 49 - src/styles/_views.scss | 41 - src/styles/_widgets.scss | 282 ---- src/styles/conductor/_constants.scss | 11 - .../conductor/_time-conductor-base.scss | 494 ------ src/styles/conductor/_time-of-interest.scss | 271 --- .../conductor/time-conductor-espresso.scss | 43 - src/styles/conductor/time-conductor-snow.scss | 43 - src/styles/controls/_breadcrumb.scss | 31 - src/styles/controls/_buttons.scss | 140 -- src/styles/controls/_controls.scss | 878 ---------- src/styles/controls/_indicators.scss | 147 -- src/styles/controls/_lists.scss | 39 - src/styles/controls/_menus.scss | 331 ---- src/styles/controls/_messages.scss | 299 ---- src/styles/controls/_palette.scss | 89 - src/styles/controls/_ticks.scss | 53 - src/styles/core.scss | 25 - src/styles/edit/_editor.scss | 109 -- src/styles/features/_imagery.scss | 215 --- src/styles/features/_time-display.scss | 71 - src/styles/forms/_channel-selector.scss | 44 - src/styles/forms/_datetime.scss | 62 - src/styles/forms/_filter.scss | 149 -- src/styles/forms/_validation.scss | 58 - src/styles/helpers/_bubbles.scss | 188 --- src/styles/helpers/_splitter.scss | 133 -- src/styles/helpers/_wait-spinner.scss | 87 - src/styles/items/_item.scss | 164 -- src/styles/lists/_tabular.scss | 172 -- src/styles/mobile/_constants.scss | 65 - src/styles/mobile/_item.scss | 133 -- src/styles/mobile/_layout.scss | 158 -- src/styles/mobile/_mixins.scss | 104 -- src/styles/mobile/_tree.scss | 57 - src/styles/mobile/controls/_menus.scss | 41 - src/styles/mobile/search/_search.scss | 13 - src/styles/notebook/_notebook-base.scss | 294 ---- src/styles/notebook/_notebook-thematic.scss | 94 -- src/styles/notebook/notebook-espresso.scss | 25 - src/styles/notebook/notebook-snow.scss | 25 - src/styles/notebook/notebook.scss | 24 - src/styles/overlay/_overlay.scss | 250 --- src/styles/plots/_legend.scss | 208 --- src/styles/plots/_plots-main.scss | 379 ----- src/styles/search/_search.scss | 162 -- src/styles/style-guide/_style-guide-base.scss | 210 --- .../style-guide/style-guide-espresso.scss | 31 - src/styles/style-guide/style-guide-snow.scss | 31 - src/styles/theme-espresso.scss | 36 - src/styles/theme-snow.scss | 46 - src/styles/themes/espresso/_constants.scss | 264 --- src/styles/themes/espresso/_mixins.scss | 22 - src/styles/themes/snow/_constants.scss | 264 --- src/styles/themes/snow/_controls.scss | 7 - src/styles/themes/snow/_mixins.scss | 22 - src/styles/tree/_tree.scss | 192 --- src/styles/user-environ/_frame.scss | 264 --- src/styles/user-environ/_layout.scss | 382 ----- src/styles/user-environ/_selecting.scss | 82 - src/styles/user-environ/_tool-bar.scss | 43 - src/styles/user-environ/_top-bar.scss | 57 - src/styles/vendor/normalize.min.css | 1 - src/ui/components/ObjectLabel.vue | 39 +- src/ui/inspector/Elements.vue | 2 +- src/ui/inspector/Inspector.vue | 6 + src/ui/layout/Layout.vue | 9 + src/ui/layout/mct-tree.vue | 67 +- webpack.config.js | 2 - 137 files changed, 2151 insertions(+), 11744 deletions(-) rename src/{styles => styles-new}/_animations.scss (93%) rename src/{styles/forms/_elems.scss => styles-new/_forms.scss} (52%) delete mode 100644 src/styles-new/legacy-styles.scss delete mode 100644 src/styles/_about.scss delete mode 100644 src/styles/_app-start.scss delete mode 100644 src/styles/_archetypes.scss delete mode 100644 src/styles/_autoflow.scss delete mode 100644 src/styles/_badges.scss delete mode 100644 src/styles/_constants.scss delete mode 100644 src/styles/_data-status.scss delete mode 100644 src/styles/_effects.scss delete mode 100644 src/styles/_global.scss delete mode 100644 src/styles/_glyphs.scss delete mode 100644 src/styles/_icons.scss delete mode 100644 src/styles/_iframe.scss delete mode 100644 src/styles/_inspector.scss delete mode 100644 src/styles/_logo-and-bg.scss delete mode 100644 src/styles/_main.scss delete mode 100644 src/styles/_mixins.scss delete mode 100644 src/styles/_object-label.scss delete mode 100644 src/styles/_openmct.scss delete mode 100644 src/styles/_startup-base.scss delete mode 100644 src/styles/_status.scss delete mode 100644 src/styles/_table.scss delete mode 100644 src/styles/_text.scss delete mode 100644 src/styles/_views.scss delete mode 100644 src/styles/_widgets.scss delete mode 100644 src/styles/conductor/_constants.scss delete mode 100644 src/styles/conductor/_time-conductor-base.scss delete mode 100644 src/styles/conductor/_time-of-interest.scss delete mode 100644 src/styles/conductor/time-conductor-espresso.scss delete mode 100644 src/styles/conductor/time-conductor-snow.scss delete mode 100644 src/styles/controls/_breadcrumb.scss delete mode 100644 src/styles/controls/_buttons.scss delete mode 100644 src/styles/controls/_controls.scss delete mode 100644 src/styles/controls/_indicators.scss delete mode 100644 src/styles/controls/_lists.scss delete mode 100644 src/styles/controls/_menus.scss delete mode 100644 src/styles/controls/_messages.scss delete mode 100644 src/styles/controls/_palette.scss delete mode 100644 src/styles/controls/_ticks.scss delete mode 100644 src/styles/core.scss delete mode 100644 src/styles/edit/_editor.scss delete mode 100644 src/styles/features/_imagery.scss delete mode 100644 src/styles/features/_time-display.scss delete mode 100644 src/styles/forms/_channel-selector.scss delete mode 100644 src/styles/forms/_datetime.scss delete mode 100644 src/styles/forms/_filter.scss delete mode 100644 src/styles/forms/_validation.scss delete mode 100644 src/styles/helpers/_bubbles.scss delete mode 100644 src/styles/helpers/_splitter.scss delete mode 100644 src/styles/helpers/_wait-spinner.scss delete mode 100644 src/styles/items/_item.scss delete mode 100644 src/styles/lists/_tabular.scss delete mode 100644 src/styles/mobile/_constants.scss delete mode 100644 src/styles/mobile/_item.scss delete mode 100644 src/styles/mobile/_layout.scss delete mode 100644 src/styles/mobile/_mixins.scss delete mode 100644 src/styles/mobile/_tree.scss delete mode 100644 src/styles/mobile/controls/_menus.scss delete mode 100644 src/styles/mobile/search/_search.scss delete mode 100644 src/styles/notebook/_notebook-base.scss delete mode 100644 src/styles/notebook/_notebook-thematic.scss delete mode 100644 src/styles/notebook/notebook-espresso.scss delete mode 100644 src/styles/notebook/notebook-snow.scss delete mode 100644 src/styles/notebook/notebook.scss delete mode 100644 src/styles/overlay/_overlay.scss delete mode 100644 src/styles/plots/_legend.scss delete mode 100644 src/styles/plots/_plots-main.scss delete mode 100644 src/styles/search/_search.scss delete mode 100644 src/styles/style-guide/_style-guide-base.scss delete mode 100644 src/styles/style-guide/style-guide-espresso.scss delete mode 100644 src/styles/style-guide/style-guide-snow.scss delete mode 100644 src/styles/theme-espresso.scss delete mode 100644 src/styles/theme-snow.scss delete mode 100644 src/styles/themes/espresso/_constants.scss delete mode 100644 src/styles/themes/espresso/_mixins.scss delete mode 100644 src/styles/themes/snow/_constants.scss delete mode 100644 src/styles/themes/snow/_controls.scss delete mode 100644 src/styles/themes/snow/_mixins.scss delete mode 100644 src/styles/tree/_tree.scss delete mode 100644 src/styles/user-environ/_frame.scss delete mode 100644 src/styles/user-environ/_layout.scss delete mode 100644 src/styles/user-environ/_selecting.scss delete mode 100644 src/styles/user-environ/_tool-bar.scss delete mode 100644 src/styles/user-environ/_top-bar.scss delete mode 100644 src/styles/vendor/normalize.min.css diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html index 1febc51795..78b852c968 100644 --- a/platform/commonUI/dialog/res/templates/dialog.html +++ b/platform/commonUI/dialog/res/templates/dialog.html @@ -19,24 +19,24 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
{{ngModel.title}}
-
All fields marked are required.
+
+
{{ngModel.title}}
+
All fields marked are required.
-
+
-
- + OK - Cancel diff --git a/platform/commonUI/dialog/res/templates/overlay-options.html b/platform/commonUI/dialog/res/templates/overlay-options.html index 9b62b0b824..40bf8d9755 100644 --- a/platform/commonUI/dialog/res/templates/overlay-options.html +++ b/platform/commonUI/dialog/res/templates/overlay-options.html @@ -19,18 +19,18 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - -
-
{{ngModel.dialog.title}}
-
{{ngModel.dialog.hint}}
+ +
+
{{ngModel.dialog.title}}
+
{{ngModel.dialog.hint}}
-
+
-
+
-
-
-
+
+
+
-
+ class="c-click-icon c-overlay__close-button icon-x-in-circle"> +
diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index a111a5694f..2eb1aa9b69 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
-
{{model.name}}
+
+
+
{{model.name}}
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 20c7a8d64d..51f0c162e0 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -20,14 +20,11 @@ at runtime from the About dialog for additional information. --> - - - +
+ @@ -39,19 +36,15 @@ ng-click="treeNode.select()" > - - +
- + ng-if="model.composition !== undefined"> - - - +
+
diff --git a/platform/commonUI/general/res/templates/tree.html b/platform/commonUI/general/res/templates/tree.html index fb43396533..043eae7f77 100644 --- a/platform/commonUI/general/res/templates/tree.html +++ b/platform/commonUI/general/res/templates/tree.html @@ -19,8 +19,8 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -