diff options
Diffstat (limited to 'catalog-ui/src/app/directives/tag')
-rw-r--r-- | catalog-ui/src/app/directives/tag/tag-directive.html | 10 | ||||
-rw-r--r-- | catalog-ui/src/app/directives/tag/tag-directive.less | 51 | ||||
-rw-r--r-- | catalog-ui/src/app/directives/tag/tag-directive.ts | 49 |
3 files changed, 110 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.html b/catalog-ui/src/app/directives/tag/tag-directive.html new file mode 100644 index 0000000000..28c22a7978 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.html @@ -0,0 +1,10 @@ +<div class="sdc-tag"> + <div class="tag" data-tests-id="i-sdc-tag-text" sdc-smart-tooltip data-ng-bind="tagData.tag"></div> + <div class="category" data-ng-hide="hideTooltip===true"> + <span class="relation-categoty-icon" data-tooltips data-tooltip-side="bottom" data-tooltip="'<span class='tag-tooltip-wrap'>{{tagData.tooltip}}</span>'" data-tooltip-enable="false"></span> + </div> + + <div class="delete" data-ng-if="!hideDelete && !sdcDisable" data-ng-click="delete()" data-tests-id="i-sdc-tag-delete"> + <span class="delete-icon"></span> + </div> +</div> diff --git a/catalog-ui/src/app/directives/tag/tag-directive.less b/catalog-ui/src/app/directives/tag/tag-directive.less new file mode 100644 index 0000000000..f72e366ac6 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.less @@ -0,0 +1,51 @@ +.sdc-tag{ + + background-color:#F2F2F2 ; + .border-radius(4px); + min-width:150px; + height:30px; + display: flex; + align-items: center; + padding: 0 10px; + margin: 2px; + + .tag{ + display: inline-block; + } + + .category{ + margin-right: 4px; + margin-left: 25px; + width: 25px; + + } + .relation-categoty-icon{ + .sprite; + .sprite.relation-icon; + .hand; + vertical-align: middle; + + } + + .relation-categoty-icon:hover{ + .sprite; + .sprite.relation-icon-hover; + } + + .delete{ + + } + .delete-icon{ + .sprite; + .sprite.x-btn-black; + .hand; + vertical-align: middle; + } +} + +.tag-tooltip-wrap { + background-color: rgba(80, 99, 113, 0.9); + position: relative; + display: inline-block; + margin: -5px -14px 0px -14px; +} diff --git a/catalog-ui/src/app/directives/tag/tag-directive.ts b/catalog-ui/src/app/directives/tag/tag-directive.ts new file mode 100644 index 0000000000..77a26fc6f7 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.ts @@ -0,0 +1,49 @@ +'use strict'; + +export class TagData { + tag:string; + tooltip:string; + id:string; +} + +export interface ITagScope extends ng.IScope { + tagData:TagData; + onDelete:Function; + delete:Function; + hideTooltip:boolean; + hideDelete:boolean; + sdcDisable:boolean; +} + +export class TagDirective implements ng.IDirective { + + constructor() { + } + + scope = { + tagData: '=', + onDelete: '&', + hideTooltip: '=', + hideDelete: '=', + sdcDisable: '=' + }; + + replace = true; + restrict = 'EA'; + template = ():string => { + return require('./tag-directive.html'); + }; + + link = (scope:ITagScope) => { + scope.delete = ()=> { + scope.onDelete({'uniqueId': scope.tagData.id}); + } + }; + + public static factory = ()=> { + return new TagDirective(); + }; + +} + +TagDirective.factory.$inject = []; |