diff options
author | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
commit | ed64b5edff15e702493df21aa3230b81593e6133 (patch) | |
tree | a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/directives/utils/sdc-tags | |
parent | 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff) |
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/directives/utils/sdc-tags')
3 files changed, 163 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html new file mode 100644 index 0000000000..fb1ada69c3 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html @@ -0,0 +1,27 @@ +<div class="tags-box" > + <input type="text" + name="{{elementName}}" + class="new-tag-input" + data-ng-class="{'view-mode':sdcDisabled}" + data-ng-change="validateName()" + data-ng-model="newTag" + data-ng-maxlength="50" + data-ng-pattern="pattern" + data-tests-id="i-sdc-tag-input" + maxlength="50" + sdc-keyboard-events + key-enter="addTag" + + /> + <perfect-scrollbar class="perfect-scrollbar tags-wrapper" data-ng-class="{'view-mode':sdcDisabled}" include-padding="true"> + <div data-tests-id="i-sdc-tags-wrapper" > + <div class="group-tag" data-ng-show="specialTag"> + <sdc-tag data-hide-tooltip="true" data-hide-delete="true" + data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag> + </div> + <div class="group-tag" ng-repeat="tag in tags track by $index"> + <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag> + </div> + </div> + </perfect-scrollbar> +</div> diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less new file mode 100644 index 0000000000..942196e663 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less @@ -0,0 +1,61 @@ +.tags-box { + + height: 297px; + .bg_c; + + .perfect-scrollbar { + height: 265px; + } + + .new-tag-input { + display: block; + + -webkit-border-bottom-left-radius: 0 !important; + -moz-border-radius-bottomleft: 0 !important; + -khtml-border-bottom-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + + -webkit-border-bottom-right-radius: 0 !important; + -moz-border-radius-bottomright: 0 !important; + -khtml-border-bottom-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + + border: solid 1px #d8d8d8; + width: 100%; + height: 30px; + line-height: 30px; + padding: 2px 10px; + outline: none; + } + + .tags-wrapper { + padding: 10px; + .border-radius-bottom-left(2px); + .border-radius-bottom-right(2px); + border: solid 1px #d8d8d8; + border-top: none; + + .group-tag { + display: inline-block; + + .sdc-tag { + border: solid 1px @main_color_n; + background-color: @main_color_p; + min-width: auto; + .tag { + margin-right: 10px; + } + } + } + &.view-mode .group-tag { + opacity: 1; + background-color: #f8f8f8 !important; + .sdc-tag { + background: none; + border-color: @main_color_o; + } + } + } + +} + diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts new file mode 100644 index 0000000000..082a77dd9f --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts @@ -0,0 +1,75 @@ +'use strict'; + +export interface ISdcTagsScope extends ng.IScope { + tags:Array<string>; + specialTag:string; + newTag:string; + formElement:ng.IFormController; + elementName:string; + pattern:any; + sdcDisabled:boolean; + maxTags:number; + deleteTag(tag:string):void; + addTag(tag:string):void; + validateName():void; +} + +export class SdcTagsDirective implements ng.IDirective { + + constructor() { + } + + scope = { + tags: '=', + specialTag: '=', + pattern: '=', + sdcDisabled: '=', + formElement: '=', + elementName: '@', + maxTags: '@' + }; + + public replace = false; + public restrict = 'E'; + public transclude = false; + + template = ():string => { + return require('./sdc-tags.html'); + }; + + link = (scope:ISdcTagsScope, element:ng.INgModelController) => { + + scope.deleteTag = (tag:string):void => { + scope.tags.splice(scope.tags.indexOf(tag), 1); + }; + + scope.addTag = ():void => { + let valid = scope.formElement[scope.elementName].$valid; + if (valid && + scope.tags.length < scope.maxTags && + scope.newTag && + scope.newTag !== '' && + scope.tags.indexOf(scope.newTag) === -1 && + scope.newTag !== scope.specialTag) { + scope.tags.push(scope.newTag); + scope.newTag = ''; + } + }; + + scope.validateName = ():void => { + if (scope.tags.indexOf(scope.newTag) > -1) { + scope.formElement[scope.elementName].$setValidity('nameExist', false); + } else { + scope.formElement[scope.elementName].$setValidity('nameExist', true); + } + } + + }; + + public static factory = ()=> { + return new SdcTagsDirective(); + }; + +} + +SdcTagsDirective.factory.$inject = []; |