MainMenu: fixed placement when on the right side of the screen

vispa/static/css/common.css

@@ -5,6 +5,8 @@ ul.dropdown-menu>li.divider:first-child{display:none}
 .fa-none:before{content:"\2122";color:transparent!important}
 .dropdown-submenu{position:relative}
 .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px}
+.dropdown-menu-left .dropdown-submenu>.dropdown-menu{left:100%;margin-left:-1px}
+.dropdown-menu-right .dropdown-submenu>.dropdown-menu{right:100%;margin-right:1px}
 .dropdown-submenu:hover>.dropdown-menu{display:block}
 .dropup .dropdown-submenu>.dropdown-menu{margin-bottom:auto;bottom:-6px;top:auto}
 .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}

vispa/static/css/common.less

@@ -49,6 +49,15 @@ nav > .navbar-nav > li.active > a > b.caret {
     margin-top: -6px;
     margin-left: -1px;
 }
+.dropdown-menu-left .dropdown-submenu > .dropdown-menu {
+    left: 100%;
+    margin-left: -1px;
+}
+.dropdown-menu-right .dropdown-submenu > .dropdown-menu {
+    left: initial;
+    right: 100%;
+    margin-right: 1px;
+}
 .dropdown-submenu:hover > .dropdown-menu {
     display: block;
 }

vispa/static/css/index.css

@@ -5,6 +5,8 @@ ul.dropdown-menu>li.divider:first-child{display:none}
 .fa-none:before{content:"\2122";color:transparent!important}
 .dropdown-submenu{position:relative}
 .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px}
+.dropdown-menu-left .dropdown-submenu>.dropdown-menu{left:100%;margin-left:-1px}
+.dropdown-menu-right .dropdown-submenu>.dropdown-menu{left:initial;right:100%;margin-right:1px}
 .dropdown-submenu:hover>.dropdown-menu{display:block}
 .dropup .dropdown-submenu>.dropdown-menu{margin-bottom:auto;bottom:-6px;top:auto}
 .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}

vispa/static/html/index/vue/menu-main.html

-<ul class="dropdown-menu">
+<ul :class="['dropdown-menu', 'dropdown-menu-' + direction]">
   <li :class="wsClass">
     <a v-if="wsData.current" @click.stop>
       <i :class="wsStateIcon | iconPrefix"></i>

vispa/static/js/ui/tabber.js

@@ -218,6 +218,10 @@ define([
       // initialize spaner
       this._nodes.$spawner.children().click(function() {
         // $(this).toggleClass("open", true);
+        var r = this.parentNode.getBoundingClientRect();
+        var l = r.left + window.pageXOffset;
+        var w = window.innerWidth;
+        vispa.mainMenu.direction = 2*l > w ? "right" : "left";
         vispa.mainMenu.$appendTo(this.parentNode);
         vispa.mainMenu.$options.tabber = self;
       });

vispa/static/js/vue/mainmenu.js

@@ -114,6 +114,11 @@ define([
   });
 
   var MainMenu = Menu.headless.extend({
+    data: function () {
+      return {
+        direction: "left",
+      };
+    },
     template: tMainMenu.trim(),
     created: function() {
       this.wsExtra = $.extend(true, {}, wsExtra);