From 5a3466a3b6a0c0282ae183b2a2da67a913b76e30 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 25 Jul 2017 16:44:34 -0400 Subject: [PATCH 1/4] 3.2 hardening color audit --- awx/ui/client/legacy-styles/ansible-ui.less | 36 ++++++++++--------- awx/ui/client/legacy-styles/codemirror.less | 2 +- awx/ui/client/legacy-styles/forms.less | 26 ++++++++------ .../legacy-styles/jquery-ui-overrides.less | 2 +- awx/ui/client/lib/theme/_mixins.less | 2 +- awx/ui/client/lib/theme/_variables.less | 17 +++++---- awx/ui/client/src/app.js | 2 +- .../counts/dashboard-counts.block.less | 2 +- .../src/home/dashboard/dashboard.block.less | 2 +- .../src/home/dashboard/dashboard.partial.html | 1 + .../graphs/dashboard-graphs.block.less | 2 +- .../job-submission/job-submission.block.less | 2 +- .../management-jobs/card/mgmtcards.block.less | 2 +- .../src/organizations/orgcards.block.less | 2 +- .../src/setup-menu/setup-item.block.less | 2 +- .../src/shared/branding/colors.default.less | 23 ++++++------ awx/ui/client/src/shared/form-generator.js | 4 +-- 17 files changed, 69 insertions(+), 60 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 4f1df1be6d..51162a5bbf 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -27,12 +27,6 @@ body.modal-open { margin-right: 0; } - - -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - border-color: @b7grey; -} - /* Helper Classes */ .pad-right-sm { padding-right: 10px; } .pad-left-md { padding-left: 30px; } @@ -607,13 +601,13 @@ dd { .ui-widget-content a.help-link, .ui-widget-content a.help-link:active, .ui-widget-content a.help-link:visited { - color: @grey; + color: @default-icon; text-decoration: none; } .help-link:hover, .ui-widget-content a.help-link:hover { - color: @default-icon; + color: @default-interface-txt; text-decoration: none; } @@ -2085,8 +2079,8 @@ tr td button i { } .form-control { - border-color: @d7grey; - background-color: @default-no-items-bord; + border-color: @b7grey; + background-color: @f2grey; color: @default-data-txt; transition: border-color 0.3s; box-shadow: none; @@ -2096,7 +2090,7 @@ tr td button i { .form-control + .select2 .select2-selection { border-color: @b7grey !important; - background-color: @default-bg !important; + background-color: @f2grey !important; color: @default-data-txt !important; transition: border-color 0.3s !important; box-shadow: none !important; @@ -2108,7 +2102,7 @@ tr td button i { } .form-control + .select2-container--disabled .select2-selection { - background-color: @egrey !important; + background-color: @ebgrey !important; } .form-control:active, .form-control:focus { @@ -2146,7 +2140,7 @@ tr td button i { .select2-container--disabled,.select2-container--disabled .select2-selection--single,.select2-container--disabled .select2-selection--multiple { cursor: not-allowed; opacity: 100; - background: @egrey; + background: @ebgrey; border-radius: 5px; } @@ -2311,7 +2305,7 @@ html input[disabled] { .select2-container--disabled .select2-selection, .select2-container--disabled .select2-arrow { - background: @egrey; + background: @ebgrey; } .btn.disabled,.btn[disabled],fieldset[disabled] .bt { @@ -2320,11 +2314,11 @@ html input[disabled] { .ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled { opacity: 1; - background: @egrey; + background: @ebgrey; } input[disabled].ui-spinner-input { - background-color: @egrey; + background-color: @ebgrey; } .CodeMirror-scroll { @@ -2339,3 +2333,13 @@ input[disabled].ui-spinner-input { .CodeMirror-lines { margin-bottom: 20px; } + +.btn-default { + border-color: @b7grey; +} + +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { + background-color: @f2grey; + border-color: @b7grey; + color: @default-interface-txt; +} diff --git a/awx/ui/client/legacy-styles/codemirror.less b/awx/ui/client/legacy-styles/codemirror.less index 439291d4a6..68317c844d 100644 --- a/awx/ui/client/legacy-styles/codemirror.less +++ b/awx/ui/client/legacy-styles/codemirror.less @@ -43,7 +43,7 @@ textarea[disabled="disabled"] + div[id*="-container"]{ .CodeMirror.cm-s-default, .CodeMirror-line { - background-color: @egrey; + background-color: @ebgrey; } .CodeMirror-gutters { diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 0c3f397b98..6374b87153 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -156,7 +156,7 @@ } .Form-tab--disabled { - opacity: 0.4; + opacity: 0.65; } .Form-tab--disabled:hover { @@ -200,7 +200,7 @@ .Form-formGroup { input.form-control { - background-color: @default-secondary-bg; + background-color: @f2grey; border-color: @b7grey; border-radius: 5px; height: 30px; @@ -247,7 +247,7 @@ left: -20px; position: absolute; width: 5px; - background-color: @default-border; + background-color: @b7grey; height: 100%; } @@ -318,7 +318,7 @@ .ui-spinner{ height: 30px; - background-color: @field-secondary-bg !important; + background-color: @f2grey !important; border-radius: 5px; border:1px solid @field-border !important; color: @field-input-text; @@ -366,13 +366,12 @@ border-left:1px solid @field-border; border-bottom-right-radius: 5px; border-top-right-radius: 5px; - background-color: @field-button-bg !important; width: 30px!important; height: 28px!important; } .select2-container--disabled .select2-selection__arrow { - background: @egrey !important; + background: @ebgrey !important; } .select2-results__option{ @@ -420,19 +419,19 @@ .Form-passwordButton{ height: 30px; - color: @field-lookup-btn-icon!important; + color: @default-interface-txt; text-transform: uppercase; line-height: 1; padding-left: 7px; padding-right: 7px; - background-color: @field-lookup-btn-bg; - border:1px solid @field-border; + background-color: @default-bg; + border:1px solid @b7grey; } .Form-passwordButton:hover { cursor: pointer; - background-color: @field-lookup-btn-hov-bg; - border: 1px solid @field-border; + background-color: @f2grey; + border: 1px solid @b7grey; color: @field-lookup-btn-icon; } @@ -754,3 +753,8 @@ input[type='radio']:checked:before { :-moz-placeholder { /* Firefox 18- */ color: @b7grey; } + +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + border-color: @b7grey; + background: @ebgrey; +} diff --git a/awx/ui/client/legacy-styles/jquery-ui-overrides.less b/awx/ui/client/legacy-styles/jquery-ui-overrides.less index c214c55979..79f7dd5931 100644 --- a/awx/ui/client/legacy-styles/jquery-ui-overrides.less +++ b/awx/ui/client/legacy-styles/jquery-ui-overrides.less @@ -223,5 +223,5 @@ table.ui-datepicker-calendar { } .ui-state-disabled.ui-widget-content { - background-color: @egrey; + background-color: @ebgrey !important; } diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less index 3669549531..90a898be9b 100644 --- a/awx/ui/client/lib/theme/_mixins.less +++ b/awx/ui/client/lib/theme/_mixins.less @@ -34,7 +34,7 @@ &, &:active, &:hover, &:focus { color: @at-color-button-text-default; border-color: @at-color-input-border; - background-color: @at-color-default; + background-color: @at-gray-light-2x; cursor: pointer; } } diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index b006601d10..ea5240ebed 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -1,20 +1,20 @@ /** * All variables used in the UI. Use these variables directly during the development of components * and features. Be sure the context of the variable name applies to the work that's being done. - * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a - * button. Either add an alias if it makes sense to use the same base variable, or add a new + * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a + * button. Either add an alias if it makes sense to use the same base variable, or add a new * base variable to reference. * - * Keep in mind the goal is to be able to modify an item by referencing its context instead of - * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to + * Keep in mind the goal is to be able to modify an item by referencing its context instead of + * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to * "increase the height of inputs" * * 1. Colors * 2. Typography * 3. Layout * 4. Buttons - * 5. Misc - * + * 5. Misc + * */ // 1. Colors -------------------------------------------------------------------------------------- @@ -68,11 +68,11 @@ @at-color-input-disabled: @at-gray-light-2x; @at-color-icon-dismiss: @at-gray-dark; -@at-color-icon-popover: @at-gray-dark-3x; +@at-color-icon-popover: @at-gray-dark-4x; @at-color-icon-hover: @at-gray-dark-5x; @at-color-panel-heading: @at-gray-dark-5x; -@at-color-panel-border: @at-gray-dark; +@at-color-panel-border: @at-gray-dark-2x; @at-color-search-key-active: @at-blue; @@ -140,4 +140,3 @@ @at-line-height-short: 0.9; @at-line-height-tall: 2; @at-line-height: 24px; - diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js index fffaac55a4..1a2f427a85 100644 --- a/awx/ui/client/src/app.js +++ b/awx/ui/client/src/app.js @@ -206,7 +206,7 @@ var awApp = angular.module('awApp', [ LoadConfig, Store, pendoService, Prompt, Rest, Wait, ProcessErrors, $state, GetBasePath, ConfigService, FeaturesService, $filter, SocketService, AppStrings) { - + console.log("This works fine!"); $rootScope.$state = $state; $rootScope.$state.matches = function(stateName) { return $state.current.name.search(stateName) > 0; diff --git a/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less b/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less index 4c548c20d3..411fd2e313 100644 --- a/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less +++ b/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less @@ -19,7 +19,7 @@ padding-right: 15px; border-radius: 5px; background-color: @db-panel-bg; - border: 1px solid @db-panel-border; + border: 1px solid @b7grey; flex: 1 0 auto; max-width: ~"calc(16.6% - 15px)"; flex-basis: ~"calc(16.6% - 15px)"; diff --git a/awx/ui/client/src/home/dashboard/dashboard.block.less b/awx/ui/client/src/home/dashboard/dashboard.block.less index c5bb5a2082..ec509d1833 100644 --- a/awx/ui/client/src/home/dashboard/dashboard.block.less +++ b/awx/ui/client/src/home/dashboard/dashboard.block.less @@ -19,7 +19,7 @@ } .Dashboard-list { - border: 1px solid @default-border; + border: 1px solid @b7grey; border-radius: 5px; margin-top: 20px; width: 50%; diff --git a/awx/ui/client/src/home/dashboard/dashboard.partial.html b/awx/ui/client/src/home/dashboard/dashboard.partial.html index dc2aa78245..97ef27c136 100644 --- a/awx/ui/client/src/home/dashboard/dashboard.partial.html +++ b/awx/ui/client/src/home/dashboard/dashboard.partial.html @@ -1,4 +1,5 @@
+ HEY! \n
\n"; } @@ -1371,7 +1371,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat html += `
`; html += "\n"; - html += ``; From f04f900358871fd6c5d05c20172d58368aa54667 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 25 Jul 2017 16:59:54 -0400 Subject: [PATCH 2/4] color updates to workflows --- awx/ui/client/legacy-styles/ansible-ui.less | 4 ++++ awx/ui/client/src/shared/branding/colors.default.less | 1 + .../workflows/workflow-chart/workflow-chart.block.less | 2 +- .../workflows/workflow-maker/workflow-maker.block.less | 10 ++++++---- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 51162a5bbf..bfabb4c7ed 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -2343,3 +2343,7 @@ input[disabled].ui-spinner-input { border-color: @b7grey; color: @default-interface-txt; } + +.ui-dialog .ui-dialog-content { + background: @default-bg; +} diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index 0ec2d4795d..af8286108f 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -25,6 +25,7 @@ @f7grey: #F7F7F7; @insights-yellow: #dedc4f; @f2grey: #f2f2f2; +@f6grey: #f6f6f6; @ebgrey: #ebebeb; diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less index 7fd6a8aecc..e6424a90e0 100644 --- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less +++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less @@ -69,7 +69,7 @@ } .WorkflowResults-rightSide .WorkflowChart-svg { - background-color: @default-secondary-bg; + background-color: @f6grey; border: 1px solid @d7grey; border-top: 0px; border-bottom-right-radius: 5px; diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less index 0f860547b3..c506907a09 100644 --- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less +++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less @@ -43,7 +43,7 @@ } .WorkflowMaker-contentHolder { display: flex; - border: 1px solid @d7grey; + border: 1px solid @b7grey; border-radius: 5px; height: ~"calc(100% - 85px)"; } @@ -54,7 +54,8 @@ } .WorkflowMaker-contentRight { flex: 0 0 400px; - border-left: 1px solid @d7grey; + border-left: 1px solid @b7grey; + background: @default-bg; padding: 20px; height: 100%; overflow-y: scroll; @@ -157,7 +158,8 @@ height: 40px; line-height: 40px; color: @default-interface-txt; - border-bottom: 1px solid @d7grey; + background: @default-bg; + border-bottom: 1px solid @b7grey; } .WorkflowLegend-maker--left { flex: 1 0 auto; @@ -246,7 +248,7 @@ width: 293px; background-color: @default-bg; display: flex; - border: 1px solid @d7grey; + border: 1px solid @b7grey; border-top: 0px; border-bottom-left-radius: 5px; margin-left: -1px; From b204270871590a618c7b5516decbe6571efa4f9c Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 25 Jul 2017 17:03:02 -0400 Subject: [PATCH 3/4] fix typo that got added to dashboard partial --- awx/ui/client/src/home/dashboard/dashboard.partial.html | 1 - 1 file changed, 1 deletion(-) diff --git a/awx/ui/client/src/home/dashboard/dashboard.partial.html b/awx/ui/client/src/home/dashboard/dashboard.partial.html index 97ef27c136..dc2aa78245 100644 --- a/awx/ui/client/src/home/dashboard/dashboard.partial.html +++ b/awx/ui/client/src/home/dashboard/dashboard.partial.html @@ -1,5 +1,4 @@
- HEY!