Add separate setting menu

minahlee · minahlee · commit dd857e5d6cd1 · 2016-06-21T22:05:16.000-07:00
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
@@ -272,20 +272,29 @@ a.navbar-brand:hover {
   margin-top: 8px;
 }
 
-.nav-config-btn {
+.nav-btn {
   color: #fff;
   background-color: #3071a9;
   border-color: #3071a9;
 }
 
-.nav-config-btn:hover,
-.nav-config-btn:focus,
-.nav-config-btn:active, .open > .dropdown-toggle.nav-config-btn {
+.nav-btn:hover,
+.nav-btn:focus,
+.nav-btn:active, .open > .dropdown-toggle.nav-btn {
   color: #fff;
   background-color: #428bca;
   border-color: #357ebd;
 }
 
+.nav-status-btn,
+.nav-status-btn:hover,
+.nav-status-btn:focus {
+  color: #fff;
+  background-color: #3071a9;
+  border-color: #3071a9;
+  cursor: default;
+}
+
 .nav-login-btn,
 .nav-login-btn:hover,
 .nav-login-btn:focus {
diff --git a/zeppelin-web/src/components/navbar/navbar.controller.js b/zeppelin-web/src/components/navbar/navbar.controller.js
@@ -76,7 +76,7 @@ angular.module('zeppelinWebApp')
     $rootScope.truncatedUsername = $rootScope.ticket.principal;
   }
 
-  var MAX_USERNAME_LENGTH=20;
+  var MAX_USERNAME_LENGTH=16;
 
   angular.element('#notebook-list').perfectScrollbar({suppressScrollX: true});
 
@@ -92,8 +92,7 @@ angular.module('zeppelinWebApp')
     if ($rootScope.ticket) {
       if ($rootScope.ticket.principal.length <= MAX_USERNAME_LENGTH) {
         $rootScope.truncatedUsername = $rootScope.ticket.principal;
-      }
-      else {
+      } else {
         $rootScope.truncatedUsername = $rootScope.ticket.principal.substr(0, MAX_USERNAME_LENGTH) + '..';
       }
     }
@@ -146,7 +145,6 @@ angular.module('zeppelinWebApp')
   };
 
   function getZeppelinVersion() {
-    console.log('version');
     $http.get(baseUrlSrv.getRestApiBase() + '/version').success(
       function(data, status, headers, config) {
         $rootScope.zeppelinVersion = data.body;
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
@@ -82,29 +82,21 @@
           </form>
         <li class="nav-component">
           <div class="dropdown">
-            <button class="btn nav-config-btn dropdown-toggle" type="button" data-toggle="dropdown" style="margin-right: 5px;">
+            <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" style="margin-right: 5px;"
+                    ng-class="{'nav-status-btn': !ticket.principal || ticket.principal === 'anonymous',
+                             'nav-btn': ticket.principal && ticket.principal !== 'anonymous'}">
               <i class="fa fa-circle" ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
               <span ng-show="navbar.connected" ng-if="ticket.principal === 'anonymous'">Connected</span>
               <span ng-show="navbar.connected" ng-if="ticket.principal !== 'anonymous'">{{truncatedUsername}}</span>
               <span ng-show="!navbar.connected">Disconnected</span>
-              <span class="caret"></span>
+              <span class="caret" ng-if="ticket.principal && ticket.principal !== 'anonymous'"></span>
             </button>
-            <ul class="dropdown-menu">
-              <li><a href="" data-toggle="modal" data-target="#aboutModal">
-                <i class="fa fa-info"></i>&nbsp;&nbsp;About</a>
-              </li>
-              <li ng-if="ticket">
-                <a href="#/interpreter">Interpreter</a>
-              </li>
-              <li ng-if="ticket">
-                <a href="#/credential">Credential</a>
-              </li>
-              <li ng-if="ticket">
-                <a href="#/configuration">Configuration</a>
-              </li>
-              <li ng-show="ticket.principal && ticket.principal!='anonymous'">
-                <a ng-click="logout()">Logout</a>
+            <ul class="dropdown-menu" ng-if="ticket.principal && ticket.principal !== 'anonymous'">
+              <li class="dropdown-header">
+                <strong>{{ticket.principal}}</strong>
               </li>
+              <li role="separator" class="divider"></li>
+              <li><a ng-click="logout()">Logout</a></li>
             </ul>
           </div>
         </li>
@@ -113,6 +105,20 @@
                   ng-click="showLoginWindow()">Login
           </button>
         </li>
+        <li class="nav-component" ng-if="ticket">
+          <div class="dropdown">
+            <button class="btn nav-btn dropdown-toggle" type="button" data-toggle="dropdown" style="margin-right: 5px;">
+              <i class="fa fa-cog"></i>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="#/interpreter">Interpreter</a></li>
+              <li><a href="#/credential">Credential</a></li>
+              <li><a href="#/configuration">Configuration</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="" data-toggle="modal" data-target="#aboutModal">About</a>
+            </ul>
+          </div>
+        </li>
       </ul>
     </div>
   </div>
