Yangman - refactor yang-form-menu directive

Removed md-menu directive and created a simple directive that behaves the
same. This should boost performance.

Change-Id: Ic8320a4933946d0a3daba8e754f27649d1c74fa8
Signed-off-by: Martin Péter Lakatoš <martin.lakatos@pantheon.tech>

diff --git a/modules/yangman-resources/src/main/resources/yangman/directives/yang-form-menu.directive.js b/modules/yangman-resources/src/main/resources/yangman/directives/yang-form-menu.directive.js
index 0cc28d1e779f8f956e33d6c26cdf8d7f0a674bdb..7b09b06c52eca96fe9bcdfe572b9a70a66d29343 100644 (file)
--- a/modules/yangman-resources/src/main/resources/yangman/directives/yang-form-menu.directive.js
+++ b/modules/yangman-resources/src/main/resources/yangman/directives/yang-form-menu.directive.js
@@ -55,6 +55,28 @@ define(['angular'], function (angular) {
                     $scope.infoBox = false;
                 }
             },
+            link: function (scope, element, attrs) {
+                scope.isActive = false;
+
+                // methods
+                scope.closeMenu = closeMenu;
+                scope.openMenu = openMenu;
+
+                /**
+                 * Close Yang menu
+                 */
+                function closeMenu(){
+                    scope.isActive = false;
+                }
+
+                /**
+                 * Open Yang menu
+                 */
+                function openMenu(){
+                    scope.isActive = true;
+                }
+
+            },
         };
     }
 });

diff --git a/modules/yangman-resources/src/main/resources/yangman/views/directives/yang-form-menu.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/directives/yang-form-menu.tpl.html
index 5a3a7c8caafe3eaabd61a2a48e27edf9bec0740e..536e79e5f3d83e474b4b8d37e9f933ab1f1b2a78 100644 (file)
--- a/modules/yangman-resources/src/main/resources/yangman/views/directives/yang-form-menu.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/directives/yang-form-menu.tpl.html
@@ -1,39 +1,44 @@
-<md-menu ng-if="isActionMenu()" class="menu-container">
+<div ng-if="isActionMenu()" class="menu-container md-menu">
+    <!-- Close menu (click catcher) -->
+    <div ng-show="isActive">
+        <md-backdrop ng-click="closeMenu()" class="md-menu-backdrop md-click-catcher" style="position: fixed;"></md-backdrop>
+    </div>
     <!-- open menu button -->
-    <md-button class="md-icon-button" ng-click="$mdOpenMenu($event); hideInfoBox();">
+    <md-button class="md-icon-button" ng-click="openMenu(); hideInfoBox();">
         <md-icon md-font-set="material-icons">reorder</md-icon>
     </md-button>
 
-    <md-menu-content>
+    <!-- Menu content -->
+    <div class="yang-menu-content md-menu-content" ng-show="isActive">
         <h5 class="title">
             {{ 'YANGMAN_YANG_MENU' | translate }}
             <md-icon md-font-set="material-icons">reorder</md-icon>
         </h5>
-        <md-menu-divider></md-menu-divider>
+        <md-divider></md-divider>
 
         <!-- add list item -->
-        <md-menu-item ng-if="addListItem">
-            <md-button ng-click="addListItemFunc()">
+        <div class="yang-menu-item md-menu-item" ng-if="addListItem">
+            <md-button ng-click="addListItemFunc(); closeMenu();">
                 <md-icon md-font-set="material-icons">library_add</md-icon>
                 <span md-menu-align-target>{{'YANGMAN_ADD_LIST_ITEM' | translate}}</span>
             </md-button>
-        </md-menu-item>
+        </div>
 
         <!-- show items list -->
-        <md-menu-item ng-if="yangList && node.actElemStructure">
-            <md-button ng-click="switchSection('items'); setItemList();" md-prevent-menu-close>
+        <div class="yang-menu-item md-menu-item" ng-if="yangList && node.actElemStructure">
+            <md-button ng-click="switchSection('items'); setItemList();">
                 <md-icon md-font-set="material-icons">list</md-icon>
                 <span md-menu-align-target>{{'YANGMAN_SHOW_LIST_ITEM' | translate}}</span>
             </md-button>
-        </md-menu-item>
+        </div>
 
         <!-- augmentations menu item -->
-        <md-menu-item ng-if="node.augmentionGroups.length">
-            <md-button ng-click="switchSection('augmentations')" md-prevent-menu-close>
+        <div class="yang-menu-item md-menu-item" ng-if="node.augmentionGroups.length">
+            <md-button ng-click="switchSection('augmentations')">
                 <md-icon md-font-set="material-icons">brightness_auto</md-icon>
                 <span md-menu-align-target>{{'YANGMAN_AUGMENTATIONS' | translate}}</span>
             </md-button>
-        </md-menu-item>
+        </div>
 
         <!-- info box -->
         <div class="md-whiteframe-z2 info-box" ng-show="infoBox" ng-switch="infoBoxSection">
@@ -61,7 +66,7 @@
                         <!-- title -->
                         <p ng-class="{'active' : node.actElemIndex === $index}"
                            class="pointer"
-                           ng-click="node.changeActElementData($index)" md-prevent-menu-close>
+                           ng-click="node.changeActElementData($index)">
                             {{yangForm.getNodeName(node.localeLabel, node.label)}}&nbsp;{{node.createListName($index) || '[' + $index + ']'}}
                         </p>
 
@@ -75,7 +80,7 @@
                         <md-icon md-font-set="material-icons"
                                  class="pointer"
                                  ng-if="addListItem"
-                                 ng-click="yangList.removeListElem($index)" md-prevent-menu-close>
+                                 ng-click="yangList.removeListElem($index)">
                             <md-tooltip md-direction="top">{{ 'LIST_DELETE_ITEM' | translate }}</md-tooltip>
                             remove_circle_outline
                         </md-icon>
@@ -85,5 +90,5 @@
                 </md-list>
             </div>
         </div>
-    </md-menu-content>
-</md-menu>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file

diff --git a/modules/yangman-resources/src/main/resources/yangman/yangman.less b/modules/yangman-resources/src/main/resources/yangman/yangman.less
index b2047636fb056c2f1d23823d7f88d3de11a89b5b..bfc55675068a7f5b0f8d376745218a97a03b7a29 100644 (file)
--- a/modules/yangman-resources/src/main/resources/yangman/yangman.less
+++ b/modules/yangman-resources/src/main/resources/yangman/yangman.less
@@ -612,16 +612,83 @@ button{
             }
 
             .md-menu.menu-container{
+                position: relative;
                 padding: 0;
 
+
+
                 .md-button{
-                    height: 22px;
-                    min-height: 22px;
+                    margin: auto 0;
+                    text-transform: none;
+                    text-align: start;
+                    height: 100%;
+                    padding-left: 16px;
+                    padding-right: 16px;
+                    display: inline-block;
+                    width: 100%;
 
                     &.md-icon-button{
                         padding: 0 8px;
                     }
+
+                }
+
+                .yang-menu-content{
+                    box-shadow: 1px 1px 10px #888;
+                    position: absolute;
+                    left: 0;
+                    z-index: 100;
+                    background: #fff;
+                    padding: 8px 0;
+
+                    md-divider{
+                        padding: 4px 0 4px 0;
+                    }
+
+                    .title{
+                        color: #a9a9a9;
+                        margin: 0 16px;
+
+                        md-icon{
+                            font-size: 18px;
+                        }
+                    }
+
+                    .yang-menu-item{
+                        min-height: 48px;
+                        height: 48px;
+
+                        md-icon{
+                            margin: auto 16px auto 0;
+                        }
+                    }
+
                 }
+
+                .info-box{
+                    position: absolute;
+                    left: 100%;
+                    top: 0;
+                    margin-left: 10px;
+                    min-width: 300px;
+                    padding: 0;
+                    z-index: 10;
+                    background: #fff;
+                    transition: all 150ms linear;
+                    opacity: 1;
+                    max-height: 300px;
+                    overflow-y: auto;
+                    overflow-x: hidden;
+
+                    &__padding{
+                        padding: 16px;
+                    }
+
+                    &.ng-hide{
+                        opacity: 0;
+                    }
+                }
+
             }
 
             .menu-placeholder{