Merge pull request #1954 from kialam/fix/1880-tag-component

Create Tag Component for Job Search

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;

awx/ui/client/features/output/search.partial.html

@@ -37,15 +37,12 @@
 </form>
 
 <div class="jobz-tagz">
-    <div class="LabelList-tagContainer" ng-repeat="tag in vm.tags track by $index">
-        <div class="LabelList-tag LabelList-tag--deletable"><span class="LabelList-name">{{ tag }}</span></div>
-        <div class="LabelList-deleteContainer" ng-click="vm.removeSearchTag($index)">
-            <i class="fa fa-times LabelList-tagDelete"></i>
-        </div>
+    <div class="TagComponentWrapper" ng-repeat="tag in vm.tags track by $index">
+        <at-tag tag="tag" remove-tag="vm.removeSearchTag($index)"></at-tag>
+    </div>
+    <div class="jobz-searchClearAllContainer">
+        <a href class="jobz-searchClearAll" ng-click="vm.clearSearch()" ng-show="!(vm.tags | isEmpty)">{{:: vm.strings.get('search.CLEAR_ALL') }}</a>
     </div>
-    <div><a href class="jobz-searchClearAll" ng-click="vm.clearSearch()" ng-show="!(vm.tags | isEmpty)">
-        {{:: vm.strings.get('search.CLEAR_ALL') }}
-    </a></div>
 </div>
 
 <div class="jobz-searchKeyPaneContainer" ng-show="vm.key">

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';

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)

awx/ui/client/lib/components/tag/_index.less

@@ -0,0 +1,51 @@
+.TagComponentWrapper {
+    padding: @at-space;
+}
+.TagComponent {
+    color: white;
+    background: @at-blue;
+    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: 2px @at-space-2x;
+    align-self: center;
+    word-break: break-word;
+    text-transform: lowercase;
+}
+
+.TagComponent--cloud {
+    &:before {
+        content: '\f0c2';
+        color: white;
+        height: @at-space-4x;
+        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;
+    .at-mixin-VerticallyCenter();
+}
+
+.TagComponent-button:hover {
+    cursor: pointer;
+    border-color: @at-color-error;
+    background-color: @at-color-error;
+}

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;

awx/ui/client/lib/components/tag/tag.partial.html

@@ -0,0 +1,6 @@
+<div class="TagComponent" ng-transclude>
+    <div class="TagComponent-name">{{ tag }}</div>
+    <div ng-if="removeTag" class="TagComponent-button" ng-click="removeTag(index)">
+        <i class="fa fa-times TagComponent-button__delete"></i>
+    </div>
+</div>

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;
 }