diff options
Diffstat (limited to 'catalog-ui/src/app/directives/info-tooltip')
3 files changed, 89 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html new file mode 100644 index 0000000000..5c2bdcf5f1 --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html @@ -0,0 +1,10 @@ +<div> + <span class="sprite-new info-icon hand" data-ng-click="showMessage=!showMessage"></span> + <div class="info-tooltip" data-ng-show="showMessage"> + <div class="info-tooltip-arrow"></div> + <div class="info-tooltip-content" data-ng-class="direction"> + <span class="close-tooltip sprite-new close-info-tooltip-button" data-ng-click="showMessage=false"></span> + <p class="info-tooltip-message" translate="{{infoMessageTranslate}}"></p> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less new file mode 100644 index 0000000000..cc3e3dc1ec --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less @@ -0,0 +1,42 @@ +.info-tooltip { + position: fixed; + z-index: 1070; + display: block; + width: 250px; + .info-tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + border-width: 0 5px 5px 5px; + border-color: transparent transparent @main_color_a transparent; + position: relative; + left: 2px; + } + .info-tooltip-content { + box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5); + border: 1px solid @main_color_o; + border-radius: 3px; + border-top: 3px solid @main_color_a; + position: relative; + background-color: white; + &.right{ + left: -13px; + } + &.left{ + left: -223px; + } + .close-tooltip{ + float: right; + margin: 5px; + } + + .info-tooltip-message{ + margin: 15px; + word-break: normal; + font-size: 14px; + font-weight: normal; + text-align: left; + line-height: normal; + } + } +} diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts new file mode 100644 index 0000000000..63ecdc6091 --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts @@ -0,0 +1,37 @@ +/** + * Created by rcohen on 9/25/2016. + */ +'use strict'; + +export interface IInfoTooltipScope extends ng.IScope { + infoMessageTranslate:string; + direction:string; +} + + +export class InfoTooltipDirective implements ng.IDirective { + + constructor() { + } + + scope = { + infoMessageTranslate: '@', + direction: '@'//get 'right' or 'left', the default is 'right' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./info-tooltip.html'); + }; + + link = (scope:IInfoTooltipScope, element:any, $attr:any) => { + scope.direction = scope.direction || 'right'; + }; + + public static factory = ()=> { + return new InfoTooltipDirective(); + }; +} + +InfoTooltipDirective.factory.$inject = []; |