diff options
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/asset-popover')
3 files changed, 130 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html new file mode 100644 index 0000000000..659ff7014f --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html @@ -0,0 +1,11 @@ +<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}"> + <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div> + + <div class="assetMenu"> + <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>--> + <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less new file mode 100644 index 0000000000..44de4dfed1 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less @@ -0,0 +1,64 @@ +.assetPopover { + font-family: omnes-regular,sans-serif; + font-size: 13px; + width:230px; + padding:0 15px; + position:absolute; + display:flex; + flex-direction:column; + align-items:flex-start; + + &.left { + align-items:flex-end; + + .uib-custom-tooltip { + margin-left:-10px; + } + } + + .display-name-tooltip { + + border:solid 1px @main_color_p; + color: @main_color_p; + padding:5px 10px; + width:200px; + margin-bottom:10px; + border-radius: 2px; + background-color: rgba(80, 99, 113, 0.8); + box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); + } + + .uib-custom-tooltip { + margin-left:20px; + font-family: omnes-regular,sans-serif; + font-size: 13px; + } + + .assetMenu { + + border-radius: 2px; + border: solid 1px @main_color_p; + background-color: rgba(234, 234, 234, 0.7); + box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); + display:flex; + flex-direction: column; + justify-content: center; + align-items:center; + + .sprite-new { + border-bottom:solid 1px #CCC; + &:hover:not(.disabled-icon) { + .hand; + } + &:active:not(.disabled-icon) { + background-color: @main_color_a; + border-bottom-color: @main_color_a; + } + &.trash-icon { + border-bottom: none; + } + } + + + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts new file mode 100644 index 0000000000..c560161d6e --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts @@ -0,0 +1,55 @@ +/*- + * ============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========================================================= + */ + +'use strict'; +import {AssetPopoverObj} from "app/models"; + +export interface IAssetPopoverScope extends ng.IScope { + assetPopoverObj:AssetPopoverObj; + deleteAsset:Function; +} + +export class AssetPopoverDirective implements ng.IDirective { + + constructor() { + } + + scope = { + assetPopoverObj: '=', + deleteAsset: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('app/directives/graphs-v2/asset-popover/asset-popover.html'); + }; + + link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => { + + }; + + public static factory = ()=> { + return new AssetPopoverDirective(); + }; +} + +AssetPopoverDirective.factory.$inject = []; + |