From be9023d86e058d81d6c2504e87c3a385f34472e6 Mon Sep 17 00:00:00 2001 From: Rob Cresswell Date: Wed, 24 Feb 2016 13:45:17 -0800 Subject: [PATCH] Fix theming in angular launch instance This patch makes the new angular Launch Instance workflow mostly themeable. Most of the existing CSS has been deleted, and this now follows bootstraps markup. This is not intended to solve all edge cases given the size of the work, but is a big step in the right direction. Changes: - Use stacked nav tabs for navigation. Move base nav tabs toward bootstrap default. Style primary side nav as before. - Use bootstraps form markup for modal - Use bootstraps form markup for form fields and their errors - Make pie charts and tables inherit any missing theme variables. A more thorough pass will be done on this next release cycle. Closes-Bug: 1538491 Change-Id: Ic20b7f4341a2853ca334824c6a811125b04e88cc --- .../widgets/action-list/action-list.scss | 39 +- .../widgets/charts/chart-tooltip.scss | 26 +- .../framework/widgets/charts/charts.module.js | 2 +- .../framework/widgets/charts/pie-chart.html | 7 +- .../framework/widgets/charts/pie-chart.scss | 66 ++-- .../help-panel/help-panel.directive.spec.js | 10 +- .../widgets/help-panel/help-panel.html | 12 +- .../widgets/help-panel/help-panel.scss | 85 ----- .../widgets/load-edit/load-edit.html | 42 +-- .../framework/widgets/metadata/tree/tree.scss | 35 +- .../widgets/modal/wizard-modal.service.js | 1 + .../static/framework/widgets/table/table.scss | 20 +- .../transfer-table/transfer-table.html | 14 +- .../transfer-table/transfer-table.scss | 51 --- horizon/static/framework/widgets/widgets.scss | 3 - .../framework/widgets/wizard/wizard.html | 142 ++++--- .../framework/widgets/wizard/wizard.scss | 352 ------------------ .../framework/widgets/wizard/wizard.spec.js | 40 +- .../static/dashboard/project/project.scss | 1 - .../configuration/configuration.help.html | 1 - .../configuration/configuration.html | 55 ++- .../configuration/configuration.scss | 65 ---- .../launch-instance/details/details.help.html | 2 - .../launch-instance/details/details.html | 103 ++--- .../launch-instance/flavor/flavor.help.html | 3 +- .../launch-instance/flavor/flavor.html | 47 ++- .../launch-instance/flavor/flavor.scss | 0 .../flavor/select-flavor-table.html | 27 +- .../keypair/create-keypair.html | 83 ++--- .../keypair/import-keypair.html | 89 ++--- .../launch-instance/keypair/keypair.help.html | 1 - .../launch-instance/keypair/keypair.html | 229 ++++++------ .../launch-instance/keypair/keypair.scss | 33 -- .../launch-instance-workflow.service.js | 2 +- .../launch-instance/launch-instance.module.js | 4 +- .../launch-instance/launch-instance.scss | 6 - .../metadata/metadata.help.html | 1 - .../launch-instance/metadata/metadata.html | 27 +- .../launch-instance/metadata/metadata.spec.js | 2 +- .../launch-instance/network/network.help.html | 1 - .../launch-instance/network/network.html | 16 +- .../launch-instance/network/network.scss | 0 .../security-group-details.html | 18 +- .../security-groups/security-groups.help.html | 1 - .../security-groups/security-groups.html | 208 +++++------ .../security-groups/security-groups.scss | 11 - .../launch-instance/source/source.help.html | 4 - .../launch-instance/source/source.html | 201 +++++----- .../launch-instance/source/source.scss | 44 --- .../dashboard/project/workflow/workflow.scss | 1 - openstack_dashboard/enabled/_1000_project.py | 4 - .../static/dashboard/scss/_debt.scss | 7 +- .../static/dashboard/scss/_util.scss | 8 + .../static/dashboard/scss/_variables.scss | 1 - .../scss/components/_help_panel.scss | 40 ++ .../dashboard/scss/components/_icons.scss | 10 + .../scss/components/_transfer_tables.scss | 18 + .../dashboard/scss/components/_wizard.scss | 11 + .../dashboard/scss/components/_workflow.scss | 6 - .../static/dashboard/scss/horizon.scss | 4 + .../themes/default/bootstrap/_variables.scss | 12 +- .../default/bootstrap/components/_navs.scss | 21 -- .../default/horizon/components/_sidebar.scss | 29 +- .../material/static/horizon/_icons.scss | 5 +- 64 files changed, 846 insertions(+), 1563 deletions(-) delete mode 100644 horizon/static/framework/widgets/help-panel/help-panel.scss delete mode 100644 horizon/static/framework/widgets/transfer-table/transfer-table.scss delete mode 100644 horizon/static/framework/widgets/wizard/wizard.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/project.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.scss delete mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/workflow.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_help_panel.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_icons.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_transfer_tables.scss create mode 100644 openstack_dashboard/static/dashboard/scss/components/_wizard.scss diff --git a/horizon/static/framework/widgets/action-list/action-list.scss b/horizon/static/framework/widgets/action-list/action-list.scss index 5b3fcc487d..c65e28d35a 100644 --- a/horizon/static/framework/widgets/action-list/action-list.scss +++ b/horizon/static/framework/widgets/action-list/action-list.scss @@ -6,7 +6,7 @@ action-list.btn-group { .dropdown-menu > li { &.disabled { - opacity: 0.65; + color: $dropdown-link-disabled-color; } > a.text-danger { @@ -16,50 +16,17 @@ action-list.btn-group { notifications { bottom: -0.5em; - font-size: 1.1em; opacity: 1; position: absolute; right: -0.35em; z-index: 3; - - & + .btn:last-child:not(:first-child):not(.dropdown-toggle), - & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle), - & + .btn.single-button:not(:first-child), - & + .btn.split-button:not(:first-child):not(:last-child) { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - } - - &.btn-group-sm { - notifications { - & + .btn:last-child:not(:first-child):not(.dropdown-toggle), - & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle), - & + .btn.single-button:not(:first-child), - & + .btn.split-button:not(:first-child):not(:last-child) { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - } - } - - &.btn-group-lg { - notifications { - & + .btn:last-child:not(:first-child):not(.dropdown-toggle), - & + .btn:not(:last-child):not(:first-child):not(.dropdown-toggle), - & + .btn.single-button:not(:first-child), - & + .btn.split-button:not(:first-child):not(:last-child) { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - } } .invalid { - color: $invalid-color; + color: $brand-warning; } & + .popover a { cursor: pointer; } -} \ No newline at end of file +} diff --git a/horizon/static/framework/widgets/charts/chart-tooltip.scss b/horizon/static/framework/widgets/charts/chart-tooltip.scss index dc9c7f0799..a8330f7cb3 100644 --- a/horizon/static/framework/widgets/charts/chart-tooltip.scss +++ b/horizon/static/framework/widgets/charts/chart-tooltip.scss @@ -1,44 +1,40 @@ .chart-tooltip { - background-color: $tooltip-bg-color; - border: $tooltip-border; - @include box-shadow($tooltip-box-shadow); + background-color: $tooltip-bg; display: none; padding: $tooltip-padding; position: absolute; white-space: nowrap; - z-index: 12000; + z-index: $zindex-popover; &.tooltip-enabled { display: inline-block; } .tooltip-key { - color: $tooltip-key-color; - font-weight: $tooltip-key-weight; - padding: $tooltip-key-padding; + color: $tooltip-color; } .tooltip-value { - color: $tooltip-value-color; + color: $tooltip-color; } span.fa { - background-color: inherit; fill: none; + &.usage { - color: $chart-quota-usage-color; + color: $brand-primary; } &.added { - color: $chart-quota-added-color; + color: lighten($brand-primary, 20%); } &.remaining { - color: $chart-quota-remaining-color; + color: $gray-lighter; } &.danger { - color: $chart-quota-danger-color; + color: $brand-danger; } } } @@ -48,8 +44,8 @@ .chart-tooltip { span.fa { &.added { - color: $chart-quota-danger-color; + color: $brand-danger; } } } -} \ No newline at end of file +} diff --git a/horizon/static/framework/widgets/charts/charts.module.js b/horizon/static/framework/widgets/charts/charts.module.js index c91daf886c..6b1fada174 100644 --- a/horizon/static/framework/widgets/charts/charts.module.js +++ b/horizon/static/framework/widgets/charts/charts.module.js @@ -59,7 +59,7 @@ */ .constant('horizon.framework.widgets.charts.donutChartSettings', { innerRadius: 24, - outerRadius: 30, + outerRadius: 36, titleClass: 'pie-chart-title-medium', showTitle: true, showLabel: true, diff --git a/horizon/static/framework/widgets/charts/pie-chart.html b/horizon/static/framework/widgets/charts/pie-chart.html index b47be287cc..747d7364c8 100644 --- a/horizon/static/framework/widgets/charts/pie-chart.html +++ b/horizon/static/framework/widgets/charts/pie-chart.html @@ -1,8 +1,7 @@ -
+
-
+
{$ ::chartData.title $} ({$ model.total ? model.total + ' ' : '' $}{$ model.totalLabel $})
@@ -28,4 +27,4 @@
{$ slice.label $}
-
\ No newline at end of file + diff --git a/horizon/static/framework/widgets/charts/pie-chart.scss b/horizon/static/framework/widgets/charts/pie-chart.scss index e88c8f9a7f..cf502fb78d 100644 --- a/horizon/static/framework/widgets/charts/pie-chart.scss +++ b/horizon/static/framework/widgets/charts/pie-chart.scss @@ -1,65 +1,44 @@ .pie-chart { display: inline-block; - position: relative; - margin-left: 10px; .svg-pie-chart { - float: left; + margin: $padding-small-horizontal 0; .slice { cursor: pointer; &.usage { - fill: $chart-quota-usage-color; + fill: $brand-primary; } &.added { - fill: $chart-quota-added-color; + fill: lighten($brand-primary, 20%); } &.remaining { - fill: $chart-quota-remaining-color; + fill: $gray-lighter; } } } - .pie-chart-title { - color: $chart-title-font-color; - font-weight: $chart-title-weight; - padding: $chart-title-padding; - } - - .pie-chart-title-medium { - font-size: $chart-title-font-size; - } - - .pie-chart-title-large { - font-size: $chart-title-font-size-large; - } - .pie-chart-label { - font-size: 1.2em; + font-size: $font-size-large; text-anchor: middle; text { - font-size: $chart-label-font-size; - fill: $chart-label-color; + font-size: $font-size-large; + fill: $text-color; } } .pie-chart-legend { - float: left; - font-size: $chart-legend-font-size; - line-height: 1em; - padding: $chart-legend-padding; - display: table; + text-align: left; .slice-legend { - padding: $chart-slice-legend-padding; display: table-row; & > :last-child { - padding-left: 5px; + padding-left: $padding-xs-horizontal; } div { @@ -69,41 +48,40 @@ .slice-key { color: transparent; display: inline-block; - height: 1.1em; - line-height: 1.1em; + height: 1em; position: relative; top: 0.12em; - width: 0.45em; - margin-right: 3px; + width: 0.7em; + margin-right: $padding-xs-horizontal; &.usage { - background-color: $chart-quota-usage-color; + background-color: $brand-primary; } &.added { - background-color: $chart-quota-added-color; + background-color: lighten($brand-primary, 20%); } &.remaining { - background-color: $chart-quota-remaining-color; + background-color: $gray-lighter; } } .chartless { - font-size: x-large; + font-size: $font-size-large; text-align: right; - padding-top: 10px; + padding-top: $padding-large-vertical; font-weight: bold; &.usage { - color: $chart-quota-usage-color; + color: $brand-primary; } &.added { - color: $chart-quota-added-color; + color: lighten($brand-primary, 20%); } &.remaining { - color: $chart-quota-remaining-color; + color: $gray-lighter; } } } @@ -117,7 +95,7 @@ &.added, &.usage, &.remaining { - fill: $chart-quota-danger-color; + fill: $brand-danger; } } } @@ -132,7 +110,7 @@ .slice-legend { .slice-key { &.added { - background-color: $chart-quota-danger-color; + background-color: $brand-danger; } } } diff --git a/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js b/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js index fe8182142c..47ae15e5a0 100644 --- a/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js +++ b/horizon/static/framework/widgets/help-panel/help-panel.directive.spec.js @@ -35,21 +35,21 @@ }); it('should be closed by default', function () { - expect(element[0].querySelector('.help-panel').className).toBe('help-panel'); + expect(element[0].querySelector('#help-panel').className).toBe('collapse width'); }); - it('should add "open" to class name if $scope.openHelp is true', function () { + it('should add "in" to class name if $scope.openHelp is true', function () { $scope.openHelp = true; $scope.$apply(); - expect(element[0].querySelector('.help-panel').className).toBe('help-panel open'); + expect(element[0].querySelector('#help-panel').className).toBe('collapse width in'); }); - it('should remove "open" from class name if $scope.openHelp is false', function () { + it('should remove "in" from class name if $scope.openHelp is false', function () { $scope.openHelp = true; $scope.$apply(); $scope.openHelp = false; $scope.$apply(); - expect(element[0].querySelector('.help-panel').className).toBe('help-panel'); + expect(element[0].querySelector('#help-panel').className).toBe('collapse width'); }); }); diff --git a/horizon/static/framework/widgets/help-panel/help-panel.html b/horizon/static/framework/widgets/help-panel/help-panel.html index 011fe59fd8..1aaa38c132 100644 --- a/horizon/static/framework/widgets/help-panel/help-panel.html +++ b/horizon/static/framework/widgets/help-panel/help-panel.html @@ -1,5 +1,9 @@ -
- - -
+ + +
+
diff --git a/horizon/static/framework/widgets/help-panel/help-panel.scss b/horizon/static/framework/widgets/help-panel/help-panel.scss deleted file mode 100644 index 995b15f0d9..0000000000 --- a/horizon/static/framework/widgets/help-panel/help-panel.scss +++ /dev/null @@ -1,85 +0,0 @@ -.help-panel { - position: absolute; - width: $helpPanelWidthDefault; - right: -$helpPanelWidthDefault; - top: 0; - bottom: 0; - color: $helpPanelColor; - background: $helpPanelBg; - @include transition(right linear 0.1s); - z-index: 10; - - .content { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 10px 20px; - overflow-y: auto; - - h1 { - font-size: 20px; - line-height: 1.8; - margin: 0; - } - - li { - list-style-position: inside; - } - - p { - line-height: 1.4; - margin: 1em 0; - } - } - - &.open { - right: 0; - border: 1px solid $helpPanelBorderColor; - border-right: none; - margin-top: -1px; - margin-bottom: -1px; - - & > button.open { - display: none; - } - - & > button.close { - display: block; - opacity: 1; // override bootstrap - font-size: 14px; // override bootstrap - } - } - - & > button { - position: absolute; - top: 0; - left: -$helpPanelBtnSize; - width: $helpPanelBtnSize; - height: $helpPanelBtnSize; - line-height: $helpPanelBtnSize; - padding: 0; - border: none; - text-align: center; - vertical-align: middle; - background: $helpPanelBtnBg; - border: 1px solid $helpPanelBorderColor; - border-right: none; - margin-top: -1px; - - - // button icon - & > * { - display: inline-block; - vertical-align: middle; - background: $helpPanelBtnIconBg; - color: $helpPanelBtnIconColor; - font-size: $helpPanelBtnIconSize; - } - - &.close { - display: none; - } - } -} diff --git a/horizon/static/framework/widgets/load-edit/load-edit.html b/horizon/static/framework/widgets/load-edit/load-edit.html index 345b6fbf15..822a33c3b9 100644 --- a/horizon/static/framework/widgets/load-edit/load-edit.html +++ b/horizon/static/framework/widgets/load-edit/load-edit.html @@ -1,35 +1,31 @@ -
-