diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/tag')
3 files changed, 132 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/tag/tag-directive.html b/catalog-ui/app/scripts/directives/tag/tag-directive.html new file mode 100644 index 0000000000..28c22a7978 --- /dev/null +++ b/catalog-ui/app/scripts/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/app/scripts/directives/tag/tag-directive.less b/catalog-ui/app/scripts/directives/tag/tag-directive.less new file mode 100644 index 0000000000..f72e366ac6 --- /dev/null +++ b/catalog-ui/app/scripts/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/app/scripts/directives/tag/tag-directive.ts b/catalog-ui/app/scripts/directives/tag/tag-directive.ts new file mode 100644 index 0000000000..64d245e242 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tag/tag-directive.ts @@ -0,0 +1,71 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../references"/> +module Sdc.Directives { + '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(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + tagData: '=', + onDelete: '&', + hideTooltip: '=', + hideDelete: '=', + sdcDisable: '=' + }; + + replace = true; + restrict = 'EA'; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/tag/tag-directive.html'); + }; + + link = (scope:ITagScope) => { + scope.delete = ()=>{ + scope.onDelete({'uniqueId':scope.tagData.id}); + } + }; + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new TagDirective($templateCache); + }; + + } + + TagDirective.factory.$inject = ['$templateCache']; +} |