From 0ae2fd39813788ccdaecd83967340990931a2b23 Mon Sep 17 00:00:00 2001 From: Greg Considine Date: Thu, 16 Mar 2017 11:32:01 -0400 Subject: [PATCH] Add status and form ui/ux improvements * Adjust popover styling * Form label / dropdown styling Issue: #5615 Reference: Tower UX Improvements doc --- awx/ui/client/legacy-styles/ansible-ui.less | 29 +++++++++++++++++-- awx/ui/client/legacy-styles/forms.less | 4 --- .../configuration/configuration.block.less | 3 +- .../src/inventories/inventories.block.less | 18 ------------ .../list/inventory-list.controller.js | 3 -- .../notificationTemplates.form.js | 5 +++- .../src/smart-status/smart-status.block.less | 3 -- 7 files changed, 32 insertions(+), 33 deletions(-) delete mode 100644 awx/ui/client/src/inventories/inventories.block.less diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 763abab7f2..9deeb361a9 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -404,20 +404,27 @@ textarea.allowresize { /* TB tooltip overrides */ .popover-content { width: 100%; + padding: 0; .table>tbody>tr>td { + padding-left: 0; border-top: 1px solid @b7grey; } } h3.popover-title, .popover-content, .popover-content blockquote, .popover-content a { font-size: 12px; } + .flyout { + margin-bottom: 0; + } .flyout thead> tr> th, .flyout tbody> tr> td, .flyout tbody> tr> td> a { font-size: 12px; } + .flyout tbody > tr:last-child > td { + padding-bottom: 0; + } .popover-title { - padding-top: 5px; - padding-bottom: 5px; + padding: 0 0 5px 0; background-color: @default-interface-txt; color: @default-bg; font-weight: 600; @@ -431,6 +438,8 @@ textarea.allowresize { background-color: @default-interface-txt; color: @default-bg; //white text-align: left; + padding: 10px; + font-weight: 400; code { color: @default-data-txt; @@ -444,6 +453,14 @@ textarea.allowresize { color: @default-warning-hov; } } + + p { + font-weight: 400; + } + + p:last-child { + margin-bottom: 0; + } } .popover.right>.arrow:after { border-right-color: @default-interface-txt; @@ -1030,11 +1047,11 @@ input[type="checkbox"].checkbox-no-label { .table.table-condensed.flyout { thead>tr>th { + padding-left: 0; border: none; } } - /* Table info rows */ .loading-info { @@ -2207,6 +2224,12 @@ a:hover { background-color: @default-link; } +.select2-selection { + & > .select2-selection__arrow { + border-left: none; + } +} + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background-color: @default-err; } diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index d8f705e1ad..23f49bde58 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -337,10 +337,6 @@ height: 28px!important; } -.select2-selection__arrow:hover{ - background-color:@field-button-hov !important; -} - .select2-results__option{ color: @field-label !important; height: 30px!important; diff --git a/awx/ui/client/src/configuration/configuration.block.less b/awx/ui/client/src/configuration/configuration.block.less index 1abfa77023..a026253384 100644 --- a/awx/ui/client/src/configuration/configuration.block.less +++ b/awx/ui/client/src/configuration/configuration.block.less @@ -9,7 +9,8 @@ } .Form-resetValue { - float: right + float: right; + font-size: 10px; } .Form-resetAll { diff --git a/awx/ui/client/src/inventories/inventories.block.less b/awx/ui/client/src/inventories/inventories.block.less deleted file mode 100644 index f3ffd66c4b..0000000000 --- a/awx/ui/client/src/inventories/inventories.block.less +++ /dev/null @@ -1,18 +0,0 @@ -.Inventories {} - -.Inventories--popover-table { - margin-bottom: 0; - - & > thead > tr > th, - & > tbody > tr > td { - padding-left: 0; - } -} - -.Inventories--popover-content { - padding: 10px; -} - -.Inventories--popover-title { - padding: 10px 0 0 10px; -} diff --git a/awx/ui/client/src/inventories/list/inventory-list.controller.js b/awx/ui/client/src/inventories/list/inventory-list.controller.js index 283081d548..a3894da577 100644 --- a/awx/ui/client/src/inventories/list/inventory-list.controller.js +++ b/awx/ui/client/src/inventories/list/inventory-list.controller.js @@ -102,9 +102,6 @@ function InventoriesList($scope, $rootScope, $location, $log, elem.removeAttr('ng-click'); $compile(elem)($scope); $scope.triggerPopover(event); - - $('.popover-content').addClass('Inventories Inventories--popover-content'); - $('.popover-title').addClass('Inventories Inventories--popover-title'); } if ($scope.removeHostSummaryReady) { $scope.removeHostSummaryReady(); diff --git a/awx/ui/client/src/notifications/notificationTemplates.form.js b/awx/ui/client/src/notifications/notificationTemplates.form.js index 278e2e8ad9..dcec05ad78 100644 --- a/awx/ui/client/src/notifications/notificationTemplates.form.js +++ b/awx/ui/client/src/notifications/notificationTemplates.form.js @@ -196,6 +196,7 @@ export default ['i18n', function(i18n) { }, from_number: { label: i18n._('Source Phone Number'), + dataTitle: i18n._('Source Phone Number'), type: 'text', awPopOver: '

' + i18n._('Number associated with the "Messaging Service" in Twilio.') + '

'+ '

' + i18n.sprintf(i18n._('This must be of the form %s.'), '+18005550199') + '

', @@ -209,11 +210,11 @@ export default ['i18n', function(i18n) { }, to_numbers: { label: i18n._('Destination SMS Number'), + dataTitle: i18n._('Destination SMS Number'), type: 'textarea', rows: 3, awPopOver: '

' + i18n._('Type an option on each line.') + '

'+ '

' + i18n._('For example:') + '
+12125552368
\n+19105556162
\n', - dataTitle: i18n._('Destination SMS Number'), dataPlacement: 'right', dataContainer: "body", awRequiredWhen: { @@ -293,6 +294,7 @@ export default ['i18n', function(i18n) { }, color: { label: i18n._('Notification Color'), + dataTitle: i18n._('Notification Color'), type: 'text', awPopOver: '

' + i18n.sprintf(i18n._('Color can be one of %s.'), 'yellow, green, red, ' + 'purple, gray, random') + '\n', @@ -324,6 +326,7 @@ export default ['i18n', function(i18n) { }, headers: { label: i18n._('HTTP Headers'), + dataTitle: i18n._('HTTP Headers'), type: 'textarea', name: 'headers', rows: 5, diff --git a/awx/ui/client/src/smart-status/smart-status.block.less b/awx/ui/client/src/smart-status/smart-status.block.less index 633c5183ff..233c4a839f 100644 --- a/awx/ui/client/src/smart-status/smart-status.block.less +++ b/awx/ui/client/src/smart-status/smart-status.block.less @@ -53,7 +53,6 @@ .SmartStatus-tooltip--successful, .SmartStatus-tooltip--success{ color: @default-succ; - padding-left: 5px; padding-right: 0px; text-shadow: -1px -1px 0 @default-bg, @@ -65,7 +64,6 @@ .SmartStatus-tooltip--failed{ color: @default-err; - padding-left: 5px; padding-right: 0px; text-shadow: -1px -1px 0 @default-bg, @@ -76,7 +74,6 @@ .SmartStatus-tooltip--running{ color: @default-data-txt; - padding-left: 5px; padding-right: 0px; text-shadow: -1px -1px 0 @default-bg,