From 7292e0015896b2a0aa027217d2fa6b3f17a7c79f Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 24 May 2018 17:27:03 -0400 Subject: [PATCH 1/6] create componentized tags --- .../features/output/search.partial.html | 7 +-- awx/ui/client/lib/components/_index.less | 1 + awx/ui/client/lib/components/index.js | 2 + awx/ui/client/lib/components/tag/_index.less | 53 +++++++++++++++++++ .../lib/components/tag/tag.directive.js | 16 ++++++ .../lib/components/tag/tag.partial.html | 6 +++ 6 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 awx/ui/client/lib/components/tag/_index.less create mode 100644 awx/ui/client/lib/components/tag/tag.directive.js create mode 100644 awx/ui/client/lib/components/tag/tag.partial.html diff --git a/awx/ui/client/features/output/search.partial.html b/awx/ui/client/features/output/search.partial.html index b3937b17ee..4ef70a4ffb 100644 --- a/awx/ui/client/features/output/search.partial.html +++ b/awx/ui/client/features/output/search.partial.html @@ -37,11 +37,8 @@
-
-
{{ tag }}
-
- -
+
+
{{:: vm.strings.get('search.CLEAR_ALL') }} diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index 72c14fe4b5..7d661e8122 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -8,6 +8,7 @@ @import 'popover/_index'; @import 'relaunchButton/_index'; @import 'tabs/_index'; +@import 'tag/_index'; @import 'truncate/_index'; @import 'utility/_index'; @import 'code-mirror/_index'; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index 35b0e0193d..bea2f38ce6 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -32,6 +32,7 @@ import sideNav from '~components/layout/side-nav.directive'; import sideNavItem from '~components/layout/side-nav-item.directive'; import tab from '~components/tabs/tab.directive'; import tabGroup from '~components/tabs/group.directive'; +import tag from '~components/tag/tag.directive'; import topNavItem from '~components/layout/top-nav-item.directive'; import truncate from '~components/truncate/truncate.directive'; import atCodeMirror from '~components/code-mirror'; @@ -78,6 +79,7 @@ angular .directive('atSideNavItem', sideNavItem) .directive('atTab', tab) .directive('atTabGroup', tabGroup) + .directive('atTag', tag) .directive('atTopNavItem', topNavItem) .directive('atTruncate', truncate) .service('BaseInputController', BaseInputController) diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less new file mode 100644 index 0000000000..28ff8ecc82 --- /dev/null +++ b/awx/ui/client/lib/components/tag/_index.less @@ -0,0 +1,53 @@ +.TagComponentWrapper { + padding: 5px; +} +.TagComponent { + color: white; + background: #337AB7; + border-radius: @at-space; + font-size: 12px; + display: flex; + flex-direction: row; + align-content: center; + min-height: @at-space-4x; + overflow: hidden; + max-width: 200px; +} + +.TagComponent-name { + margin: @at-space @at-space-2x; + align-self: center; + word-break: break-word; + text-transform: lowercase; +} + +.TagComponent--cloud { + &:before { + content: '\f0c2'; + color: white; + height: 20px; + width: @at-space-4x; + } +} + +.TagComponent--key { + &:before { + content: '\f084'; + color: white; + height: @at-space-4x; + width: @at-space-4x; + } +} + +.TagComponent-button { + padding: 0 @at-space; + display: flex; + flex-direction: column; + justify-content: center; +} + +.TagComponent-button:hover { + cursor: pointer; + border-color: @default-err; + background-color: @default-err; +} diff --git a/awx/ui/client/lib/components/tag/tag.directive.js b/awx/ui/client/lib/components/tag/tag.directive.js new file mode 100644 index 0000000000..0616bb5e0d --- /dev/null +++ b/awx/ui/client/lib/components/tag/tag.directive.js @@ -0,0 +1,16 @@ +const templateUrl = require('~components/tag/tag.partial.html'); + +function atTag () { + return { + restrict: 'E', + replace: true, + transclude: true, + templateUrl, + scope: { + tag: '=', + removeTag: '&?', + }, + }; +} + +export default atTag; diff --git a/awx/ui/client/lib/components/tag/tag.partial.html b/awx/ui/client/lib/components/tag/tag.partial.html new file mode 100644 index 0000000000..ba7fbada4f --- /dev/null +++ b/awx/ui/client/lib/components/tag/tag.partial.html @@ -0,0 +1,6 @@ +
+
{{ tag }}
+
+ +
+
\ No newline at end of file From d83fa5a03103415c2a0787899ccb3093d2a3772e Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 24 May 2018 17:35:11 -0400 Subject: [PATCH 2/6] change 5px down to 3px per design feedback. --- awx/ui/client/lib/components/tag/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index 28ff8ecc82..996a6f681b 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -15,7 +15,7 @@ } .TagComponent-name { - margin: @at-space @at-space-2x; + margin: 3px @at-space-2x; align-self: center; word-break: break-word; text-transform: lowercase; From edada760504ed8e301dfad909adc273b4ac4be49 Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 24 May 2018 17:40:24 -0400 Subject: [PATCH 3/6] Pixel pushing --- awx/ui/client/lib/components/tag/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index 996a6f681b..11309a17fd 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -15,7 +15,7 @@ } .TagComponent-name { - margin: 3px @at-space-2x; + margin: 2px @at-space-2x; align-self: center; word-break: break-word; text-transform: lowercase; From d8dcac9158f52baab55acc204661f540ddc80bb4 Mon Sep 17 00:00:00 2001 From: kialam Date: Fri, 25 May 2018 10:00:42 -0400 Subject: [PATCH 4/6] small cleanup --- awx/ui/client/lib/components/tag/_index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index 11309a17fd..f4bc366012 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -1,5 +1,5 @@ .TagComponentWrapper { - padding: 5px; + padding: @at-space; } .TagComponent { color: white; @@ -25,7 +25,7 @@ &:before { content: '\f0c2'; color: white; - height: 20px; + height: @at-space-4x; width: @at-space-4x; } } From a9bdac0d53a9209cd4c6fc3fc89a95004b95f050 Mon Sep 17 00:00:00 2001 From: kialam Date: Fri, 25 May 2018 10:25:16 -0400 Subject: [PATCH 5/6] use newer variables --- awx/ui/client/lib/components/tag/_index.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index f4bc366012..98381154d8 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -3,7 +3,7 @@ } .TagComponent { color: white; - background: #337AB7; + background: @at-blue; border-radius: @at-space; font-size: 12px; display: flex; @@ -48,6 +48,6 @@ .TagComponent-button:hover { cursor: pointer; - border-color: @default-err; - background-color: @default-err; + border-color: @at-color-error; + background-color: @at-color-error; } From 376a763cc09ea084bf8542a879e1e7a39d5cfb28 Mon Sep 17 00:00:00 2001 From: kialam Date: Fri, 25 May 2018 10:34:03 -0400 Subject: [PATCH 6/6] vertically center `CLEAR ALL` "button" using newly created mixin and resolve merge conflict --- awx/ui/client/features/output/_index.less | 4 ++++ awx/ui/client/features/output/search.partial.html | 6 +++--- awx/ui/client/lib/components/tag/_index.less | 4 +--- awx/ui/client/lib/theme/_mixins.less | 6 ++++++ 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less index cb8e2940fd..a41721dd37 100644 --- a/awx/ui/client/features/output/_index.less +++ b/awx/ui/client/features/output/_index.less @@ -178,6 +178,10 @@ padding: 6px @at-padding-input 6px @at-padding-input; } +.jobz-searchClearAllContainer { + .at-mixin-VerticallyCenter(); +} + .jobz-searchClearAll { font-size: 10px; padding-bottom: @at-space; diff --git a/awx/ui/client/features/output/search.partial.html b/awx/ui/client/features/output/search.partial.html index 4ef70a4ffb..ff2a49e73a 100644 --- a/awx/ui/client/features/output/search.partial.html +++ b/awx/ui/client/features/output/search.partial.html @@ -40,9 +40,9 @@
-
- {{:: vm.strings.get('search.CLEAR_ALL') }} -
+
+ {{:: vm.strings.get('search.CLEAR_ALL') }} +
diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index 98381154d8..1fa4f5ace5 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -41,9 +41,7 @@ .TagComponent-button { padding: 0 @at-space; - display: flex; - flex-direction: column; - justify-content: center; + .at-mixin-VerticallyCenter(); } .TagComponent-button:hover { diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less index 701613a2ec..a3aa4ef1df 100644 --- a/awx/ui/client/lib/theme/_mixins.less +++ b/awx/ui/client/lib/theme/_mixins.less @@ -102,4 +102,10 @@ .at-mixin-FontFixedWidth () { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} + +.at-mixin-VerticallyCenter () { + display: flex; + flex-direction: column; + justify-content: center; } \ No newline at end of file