summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/utils/expand-collapse-menu-box
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/directives/utils/expand-collapse-menu-box
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (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/expand-collapse-menu-box')
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts47
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html17
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less67
3 files changed, 131 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
new file mode 100644
index 0000000000..2a2432fcea
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
@@ -0,0 +1,47 @@
+'use strict';
+import {MenuItem, MenuItemGroup} from "app/utils";
+
+export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope {
+ menuItemsGroup:MenuItemGroup;
+ menuTitle:string;
+ parentScope:ng.IScope;
+ onMenuItemClick(menuItem:MenuItem):void;
+}
+
+export class ExpandCollapseMenuBoxDirective implements ng.IDirective {
+
+ constructor() {
+ }
+
+ scope = {
+ menuTitle: '@',
+ menuItemsGroup: '=',
+ parentScope: '='
+ };
+
+ public replace = false;
+ public restrict = 'AE';
+ public transclude = true;
+
+ template = ():string => {
+ return require('./expand-collapse-menu-box.html');
+ };
+
+ link = (scope:IExpandCollapseMenuBoxDirectiveScope) => {
+ scope.onMenuItemClick = (menuItem:MenuItem):void => {
+ let onSuccess = ():void => {
+ scope.menuItemsGroup.selectedIndex = scope.menuItemsGroup.menuItems.indexOf(menuItem);
+ };
+ let onFailed = ():void => {
+ };
+ scope.parentScope[menuItem.action](menuItem.state).then(onSuccess, onFailed);
+ }
+ };
+
+ public static factory = ()=> {
+ return new ExpandCollapseMenuBoxDirective();
+ };
+
+}
+
+ExpandCollapseMenuBoxDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
new file mode 100644
index 0000000000..f90f00f230
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
@@ -0,0 +1,17 @@
+<div class="expand-collapse-menu-box">
+ <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="expand-collapse-menu-box-title">
+ <div class="expand-collapse-header">
+ <div class="expand-collapse-menu-box-title-icon"></div>
+ <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span>
+ </div>
+ </expand-collapse>
+
+ <div class="w-sdc-designer-sidebar-section-content" >
+ <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item second-level"
+ ng-class="{'selected': $index == menuItemsGroup.selectedIndex}" ng-repeat="(key, menuItem) in menuItemsGroup.menuItems track by $index">
+ <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemClick(menuItem)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}step" >{{menuItem.text}}</div>
+ </div>
+ </div>
+
+</div>
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
new file mode 100644
index 0000000000..13ec1c99be
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
@@ -0,0 +1,67 @@
+.expand-collapse-menu-box {
+ line-height: 20px;
+ //padding: 13px 0px 5px 10px;
+ background-color: @tlv_color_t;
+ //margin: 3px 3px 5px 0px;
+
+ .expand-collapse-header{
+ border-bottom: 1px solid @main_color_o;
+ height: @action_nav_height;
+ background-color:@main_color_p;
+ display:flex;
+ align-items:center;
+ }
+
+ .expand-collapse-menu-box-title {
+ .f-type._18_m;
+ color: @main_color_a;
+ //font-weight: bold;
+ .hand;
+ .w-sdc-designer-sidebar-section-title-text{
+ max-width: 185px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
+ white-space: nowrap;
+ padding: 8px 0;
+ }
+
+ &.expanded {
+ .expand-collapse-menu-box-title-icon {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ .expand-collapse-menu-box-title-icon {
+ .hand;
+ .sprite-new;
+ .arrow-up;
+ margin-right: 6px;
+ transition: .3s all;
+ position: relative;
+ vertical-align: text-top;
+ margin-left: 14px;
+ vertical-align: 14px;
+ }
+ .w-sdc-designer-sidebar-section-content {
+ overflow: hidden;
+ //padding-top: 13px;
+ .expand-collapse-menu-box-item {
+ .hand;
+ padding-left: 14px;
+ //margin: 0px 0px 10px 10px;
+ font-family: @font-omnes-medium;
+ color: @main_color_m;
+
+ line-height: 18px;
+ &.selected {
+ //padding-left: 10px;
+ //font-weight: bold;
+ //border-left: 4px solid @main_color_a;
+ background-color: #009fdb;
+ color: #ffffff;
+ }
+
+ }
+ }
+}