From b74bf9f2662cc8d067a67d3e8cd16acd5b8fad73 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Tue, 22 Oct 2019 13:31:53 -0400 Subject: [PATCH] Instance Groups Instances List styling fixes (#3846) * Instance Groups Instances slider renders properly, and that list wraps properly. * Instance Groups responds properly * assorted container groups ui fixes updated responsiveness of instance groups and instances list fix layout of container group form update help text for container group form elements update text for tech preview top bar * update container group doclink * list styling updates based on feedback --- awx/ui/client/legacy/styles/forms.less | 1 + .../code-mirror/code-mirror.partial.html | 4 +- awx/ui/client/lib/components/list/_index.less | 27 +-- .../capacity-adjuster.block.less | 4 +- .../capacity-bar/capacity-bar.block.less | 10 +- .../add-container-group.controller.js | 3 + .../add-container-group.view.html | 5 +- .../edit-container-group.controller.js | 8 +- .../instance-groups/instance-group.block.less | 189 +++++++----------- .../instance-groups.strings.js | 5 +- .../instances/instances-list.partial.html | 62 +++--- .../list/instance-groups-list.partial.html | 64 +++--- 12 files changed, 178 insertions(+), 204 deletions(-) diff --git a/awx/ui/client/legacy/styles/forms.less b/awx/ui/client/legacy/styles/forms.less index f36914df31..ccfc95f412 100644 --- a/awx/ui/client/legacy/styles/forms.less +++ b/awx/ui/client/legacy/styles/forms.less @@ -208,6 +208,7 @@ max-width: none !important; width: 100% !important; padding-right: 0px !important; + margin-top: 10px; } .Form-formGroup--checkbox{ diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html index b235ab5a5d..df8a141fd9 100644 --- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html +++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html @@ -15,7 +15,9 @@ title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}" tabindex="-1" ng-if="tooltip"> - + + +
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index b84d220809..ae88096a62 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -202,6 +202,7 @@ .at-Row-toggle { align-self: flex-start; margin-right: @at-space-4x; + margin-left: 15px; } .at-Row-actions { @@ -385,29 +386,3 @@ margin-right: @at-margin-right-list-row-item-inline-label; } } - -@media screen and (max-width: @at-breakpoint-instances-wrap) { - .at-Row-items--instances { - margin-bottom: @at-padding-bottom-instances-wrap; - } -} - -@media screen and (max-width: @at-breakpoint-compact-list) { - .at-Row-actions { - align-items: center; - } - - .at-RowAction { - margin: @at-margin-list-row-action-mobile; - } - - .at-RowItem--inline { - display: flex; - margin-right: inherit; - - .at-RowItem-label { - width: @at-width-list-row-item-label; - margin-right: inherit; - } - } -} diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less index a524c3b1a8..0417101a73 100644 --- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less +++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less @@ -1,9 +1,11 @@ .CapacityAdjuster { margin-right: @at-space-4x; + margin-top: 15px; + margin-left: -10px; position: relative; &-valueLabel { - bottom: @at-space-5x; + top: -10px; color: @at-color-body-text; font-size: @at-font-size; position: absolute; diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less index daee752b84..03b5464195 100644 --- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less +++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less @@ -5,6 +5,8 @@ capacity-bar { font-size: @at-font-size; min-width: 100px; white-space: nowrap; + margin-top: 5px; + margin-bottom: 5px; .CapacityBar { background-color: @default-bg; @@ -42,12 +44,4 @@ capacity-bar { text-align: right; text-transform: uppercase; } - - .Capacity-details--percentage { - width: 40px; - } - - &:only-child { - margin-right: 50px; - } } \ No newline at end of file diff --git a/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js b/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js index f23cc223f1..fc6bfaf846 100644 --- a/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js +++ b/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js @@ -12,6 +12,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1 vm.form = instanceGroup.createFormSchema('post'); vm.form.name.required = true; + delete vm.form.name.help_text; vm.form.credential = { type: 'field', @@ -22,6 +23,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1 vm.form.credential._route = "instanceGroups.addContainerGroup.credentials"; vm.form.credential._model = credential; vm.form.credential._placeholder = strings.get('container.CREDENTIAL_PLACEHOLDER'); + vm.form.credential.help_text = strings.get('container.CREDENTIAL_HELP_TEXT'); vm.form.credential.required = true; vm.form.extraVars = { @@ -29,6 +31,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1 value: DataSet.data.actions.POST.pod_spec_override.default, name: 'extraVars', toggleLabel: strings.get('container.POD_SPEC_TOGGLE'), + tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT') }; vm.tab = { diff --git a/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html b/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html index df8e6afee7..a7c3dcb446 100644 --- a/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html +++ b/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html @@ -1,8 +1,8 @@
- +
- This feature is tech preview, and is subject to change in a future release. Click here for documentation. + This feature is currently in tech preview and is subject to change in a future release. Click here for documentation.
@@ -34,6 +34,7 @@ variables="vm.form.extraVars.value" label="{{ vm.form.extraVars.label }}" name="{{ vm.form.extraVars.name }}" + tooltip="{{ vm.form.extraVars.tooltip }}" >
diff --git a/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js b/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js index 33d50cb758..62740a559d 100644 --- a/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js +++ b/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js @@ -27,6 +27,7 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string vm.switchDisabled = false; vm.form.disabled = !instanceGroup.has('options', 'actions.PUT'); vm.form.name.required = true; + delete vm.form.name.help_text; vm.form.credential = { type: 'field', label: i18n._('Credential'), @@ -38,6 +39,7 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string vm.form.credential._displayValue = EditContainerGroupDataset.data.summary_fields.credential.name; vm.form.credential.required = true; vm.form.credential._value = EditContainerGroupDataset.data.summary_fields.credential.id; + vm.form.credential.help_text = strings.get('container.CREDENTIAL_HELP_TEXT'); vm.tab = { details: { @@ -59,7 +61,8 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string label: strings.get('container.POD_SPEC_LABEL'), value: EditContainerGroupDataset.data.pod_spec_override || "---", name: 'extraVars', - disabled: true + disabled: true, + tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT') }; vm.switchDisabled = true; } else { @@ -67,7 +70,8 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string label: strings.get('container.POD_SPEC_LABEL'), value: EditContainerGroupDataset.data.pod_spec_override || instanceGroup.model.OPTIONS.actions.PUT.pod_spec_override.default, name: 'extraVars', - toggleLabel: strings.get('container.POD_SPEC_TOGGLE') + toggleLabel: strings.get('container.POD_SPEC_TOGGLE'), + tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT') }; } diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less index 6b4d1c9d54..9634b97b69 100644 --- a/awx/ui/client/src/instance-groups/instance-group.block.less +++ b/awx/ui/client/src/instance-groups/instance-group.block.less @@ -1,135 +1,100 @@ -.InstanceGroups { - .at-Row-actions{ - justify-content: flex-start; - width: 300px; - & > capacity-bar:only-child{ - margin-left: 0px; - margin-top: 5px - } - } - .at-RowAction{ - margin: 0; - } - .at-Row-links{ - justify-content: flex-start; +.at-Row--instances { + .at-Row-content { + flex-wrap: nowrap; } - .BreadCrumb-menuLinkImage:hover { - color: @default-link; + .at-Row-toggle { + align-self: auto; + flex: initial; } - .List-details { - align-self: flex-end; - color: @default-interface-txt; + .at-Row-itemGroup { display: flex; - flex: 0 0 auto; - font-size: 12px; - margin-right:20px; - text-transform: uppercase; + flex: 1; + flex-wrap: wrap; } - .Capacity-details { + .at-Row-items--instances { display: flex; - margin-right: 20px; + flex-wrap: wrap; align-items: center; - - .Capacity-details--label { - color: @default-interface-txt; - margin: 0 10px 0 0; - width: 100px; - } + align-content: center; + flex: 1; } - .RunningJobs-details { - align-items: center; - display: flex; - - .RunningJobs-details--label { - margin: 0 10px 0 0; - } + .at-RowItem--isHeader { + min-width: 250px; } - .List-tableCell--capacityColumn { + .at-Row-items--capacity { display: flex; - height: 40px; + flex-wrap: wrap; align-items: center; } - .List-noItems { - margin-top: 20px; - } - - .List-tableRow .List-titleBadge { - margin: 0 0 0 5px; - } - - .Panel-docsLink { - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - padding: 7px; - background: @at-white; - border-radius: @at-border-radius; - height: 30px; - width: 30px; - margin: 0 20px 0 auto; - - i { - font-size: @at-font-size-icon; - color: @at-gray-646972; - } - } - - .Panel-docsLink:hover { - background-color: @at-blue; - - i { - color: @at-white; - } - } - .at-Row-toggle{ - margin-top: 20px; - padding-left: 15px; - } - - .ContainerGroups-codeMirror{ - margin-bottom: 10px; - } - - .at-Row-container{ - flex-wrap: wrap; - } - - .containerGroups-messageBar-link:hover{ - text-decoration: underline; - } - - @media screen and (max-width: 1060px) and (min-width: 769px){ - .at-Row-links { - justify-content: flex-start; - flex-wrap: wrap; - } - } - - @media screen and (min-width: 1061px){ - .at-Row-actions{ - justify-content: flex-end; - & > capacity-bar:only-child { - margin-right: 30px; - } - } - .instanceGroupsList-details{ - display: flex; - } - .at-Row-links { - justify-content: flex-end; - display: flex; - width: 445px; - } + .CapacityAdjuster { + padding-bottom: 15px; } } +.at-Row--instanceGroups { + .at-Row-content { + flex-wrap: nowrap; + } + .at-Row-itemGroup { + display: flex; + flex: 1; + flex-wrap: wrap; + } + .at-Row-items--instanceGroups { + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 1; + max-width: 100%; + } + .at-Row-itemHeaderGroup { + min-width: 320px; + display: flex; + } + + .at-Row-items--capacity { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-right: 5px; + min-width: 215px; + } + + .at-Row--instanceSpacer { + width: 140px; + } + + .at-Row--capacitySpacer { + flex: .6; + } + + .at-Row-actions { + min-width: 50px; + } +} + +@media screen and (max-width: 1260px) { + .at-Row--instances .at-Row-items--capacity { + flex: 1 + } + + .at-Row--instances .CapacityAdjuster { + padding-bottom: 5px; + } +} + +@media screen and (max-width: 600px) { + .at-Row--instanceGroups .at-Row-itemHeaderGroup, + .at-Row--instanceGroups .at-Row-itemGroup { + max-width: 270px; + } +} diff --git a/awx/ui/client/src/instance-groups/instance-groups.strings.js b/awx/ui/client/src/instance-groups/instance-groups.strings.js index 4821b72065..6e1e118f08 100644 --- a/awx/ui/client/src/instance-groups/instance-groups.strings.js +++ b/awx/ui/client/src/instance-groups/instance-groups.strings.js @@ -72,8 +72,9 @@ function InstanceGroupsStrings(BaseString) { CREDENTIAL_PLACEHOLDER: t.s('SELECT A CREDENTIAL'), POD_SPEC_LABEL: t.s('Pod Spec Override'), BADGE_TEXT: t.s('Container Group'), - POD_SPEC_TOGGLE: t.s('Customize Pod Spec') - + POD_SPEC_TOGGLE: t.s('Customize Pod Spec'), + CREDENTIAL_HELP_TEXT: t.s('Credential to authenticate with Kubernetes or OpenShift.  Must be of type \"Kubernetes/OpenShift API Bearer Token\”.'), + EXTRA_VARS_HELP_TEXT: t.s('Field for passing a custom Kubernetes or OpenShift Pod specification.') }; } diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html index e540d45b5a..08d2e28dc3 100644 --- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html +++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html @@ -43,35 +43,45 @@ + ng-class="{'at-Row--active': (instance.id === vm.activeId)}" + class="at-Row--instances">
- -
- - - - - - -
- -
- - +
+
+ + +
+ + + + +
+
+
+ + + + +
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html index b8d5fdfbc3..892d0874c9 100644 --- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html +++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html @@ -41,10 +41,11 @@ -
-
-
+ ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}" + class="at-Row--instanceGroups"> +
+
+
-
-
- {{vm.strings.get('instance.BADGE_TEXT') }} -
+
+
+ {{vm.strings.get('instance.BADGE_TEXT') }}
+
-
-
- - +
-
-
- - - -
+ + +
+
+
+ + +
+
+
+
+
+ +