MainMenu: updated visuals

vispa/static/js/vue/mainmenu.js

@@ -27,23 +27,23 @@ define([
   var wsExtra = {
     divider: {
       divider: true,
-      position: -1,
+      position: 10,
     },
     configure: {
       iconClass: "fa-wrench fa-fw",
       label: "Configure",
-      position: 10,
+      position: 30,
     },
     add: {
       iconClass: "fa-plus fa-fw",
       label: "Add",
       hidden: false,
-      position: 20,
+      position: 0,
     },
     disconnectAll: {
       iconClass: "fa-eject fa-fw",
       label: "Disconnect all",
-      position: 30,
+      position: 20,
       disabled: function() {
         return !this.$root.wsAnyConnected;
       },
@@ -53,17 +53,6 @@ define([
     },
   };
 
-  var state2Icon = function(state) {
-    switch (state) {
-      case "connected":
-        return "fa-check";
-      case "disconnected":
-        return "";
-      default:
-        return "fa-refresh fa-spin";
-    }
-  };
-
   var MainMenuItem = Menu.item.extend({
     computed: {
       disabled: {
@@ -98,9 +87,14 @@ define([
           (this.hasSubmenu ? " dropdown-submenu" : "");
       },
       iconClass: function() {
-        if (this.current && this.data.state == "connected")
-          return "fa-fw fa-chevron-right";
-        return "fa-fw " + state2Icon(this.data.state);
+        switch (this.data.state) {
+          case "connected":
+            return "fa-fw " + (this.current ? "fa-circle" : "fa-circle-o");
+          case "disconnected":
+            return "fa-fw";
+          default:
+            return "fa-fw fa-refresh fa-spin";
+        }
       },
     },
     methods: {
@@ -139,7 +133,14 @@ define([
         return this.wsData.current ? this.wsData.workspaces[this.wsData.current].state : "";
       },
       wsStateIcon: function() {
-        return state2Icon(this.currentState) || "fa-bolt";
+        switch (this.currentState) {
+          case "connected":
+            return "fa-fw fa-check";
+          case "disconnected":
+            return "fa-fw fa-bolt";
+          default:
+            return "fa-fw fa-server";
+        }
       },
       wsClass: function() {
         return "dropdown-submenu ws-menu state-" + (this.currentState || "none");