AMBARI-1579. Admin page side nav does not use the correct style and does not highlight selection. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1454161 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -431,6 +431,9 @@ Trunk (unreleased changes):
 
  BUG FIXES
 
+ AMBARI-1579. Admin page side nav does not use the correct style and does
+ not highlight selection. (yusaku)
+
  AMBARI-1552. Missing translations on Dashboard. (Xi Wang via yusaku)
 
  AMBARI-1549. Cluster name displayed incorrectly in the top nav. (Xi Wang

ambari-web/app/messages.js

@@ -88,6 +88,7 @@ Em.I18n.translations = {
   'common.servers':'Servers',
   'common.clients':'Clients',
   'common.user': 'User',
+  'common.users': 'Users',
   'common.os':'OS',
   'common.memory':'Memory',
   'common.maximum':'Maximum',
@@ -108,7 +109,8 @@ Em.I18n.translations = {
   'common.search': 'Search',
   'common.confirm': 'Confirm',
   'common.upgrade': 'Upgrade',
-  'common.done': 'Done',
+  'common.security':'Security',
+  'common.cluster':'Cluster',
 
   'question.sure':'Are you sure {0}?',
 

ambari-web/app/routes/main.js

@@ -366,9 +366,9 @@ module.exports = Em.Route.extend({
     },
 
     //events
-    goToAdminUser: Em.Router.transitionTo('adminUser'),
-    goToAdminSecurity: Em.Router.transitionTo('adminSecurity.index'),
-    goToAdminCluster: Em.Router.transitionTo('adminCluster')
+    goToAdmin: function(router, event) {
+      router.transitionTo(event.context);
+    }
 
   }),
   stackUpgrade: require('routes/stack_upgrade'),

ambari-web/app/styles/application.less

@@ -235,6 +235,7 @@ h1 {
 }
 
 .arrow-right {
+  cursor: pointer;
   display: inline-block;
   margin: 0 0 20px 70px;
   border-top: 70px solid transparent;
@@ -243,6 +244,7 @@ h1 {
 }
 
 .arrow-left {
+  cursor: pointer;
   display: inline-block;
   margin: 0 -10px 20px 3px;
   border-top: 70px solid transparent;
@@ -357,9 +359,11 @@ h1 {
       margin-bottom: 0;
     }
   }
-  #step4, #step6 {
+  #step4, #step5, #step6 {
     a.selected {
       color: #333;
+      cursor: default;
+      text-decoration: none !important;
     }
     a.deselected {
     }
@@ -411,17 +415,6 @@ h1 {
   .btn-area {
     margin-top: 30px;
   }
-  .service {
-    .item {
-      line-height: 30px;
-      i {
-        font-size: 20px;
-      }
-    }
-    .row {
-      margin-left: 0;
-    }
-  }
 }
 
 #host-log {
@@ -645,7 +638,8 @@ a:focus {
 /*90% width modal window start*/
 .full-width-modal {
   .modal {
-
+    width: 90%;
+    margin: -350px 0 0 -45%;
   }
 
   .clear {
@@ -675,7 +669,6 @@ a:focus {
 
 /*60% width modal window start*/
 .sixty-percent-width-modal {
-
   .modal {
     width: 60%;
     margin: 0 0 0 -30%;
@@ -1461,23 +1454,28 @@ table.graphs {
 
   .health-status-HEALTHY{
     background-image: @status-live-marker;
-    .status-dot-position;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-LIVE {
     background-image: @status-live-marker;
-    .status-dot-position;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-DEAD-RED {
     background-image: @status-dead-red-marker;
-    .status-dot-position;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-DEAD-ORANGE {
     background-image: @status-dead-orange-marker;
-    .status-dot-position;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .health-status-DEAD-YELLOW {
     background-image: @status-dead-yellow-marker;
-    .status-dot-position;
+    background-repeat:no-repeat;
+    background-position:center;
   }
   .host-name-search {
     position: relative;
@@ -1500,14 +1498,16 @@ table.graphs {
       float: right;
     }
     .health-status-bar {
-      font-size: 14px;
-      margin-left: 0;
-      width: 650px;
-      .active a {
+      float: left;
+      font-size: 13px;
+      height: 45px;
+      position: relative;
+      top: 10px;
+      left: 10px;
+      .active a{
         text-decoration: none;
         color: #000000;
       }
-
     }
   }
   .progress {
@@ -1532,9 +1532,9 @@ table.graphs {
     }
     td.first span {
       display: block;
-      float: right;
+      float: left;
       height: 13px;
-      margin: 5px 0 0 0;
+      margin: 4px 5px 0 0;
       width: 13px;
     }
     ul.filter-components {
@@ -2010,10 +2010,21 @@ ul.filter {
 
 #main-admin-menu {
   padding: 8px 0;
-  ul {
-    margin-bottom: 0;
+  .nav-list {
+    .tab-marker-position {
+      background-position: 6px 5px;
+      background-repeat: no-repeat;
+      list-style: none;
+      float: left;
+      height: 20px;
+      width: 20px;
+      margin-left: 0;
+    }
     li {
       line-height: 24px;
+      a {
+        padding: 3px 20px;
+      }
     }
   }
 }
@@ -2680,15 +2691,6 @@ i.icon-asterisks {
 
 //styles for screen width more than 1200px
 @media (min-width: 1200px) {
-
-  //when screen is wide, the modal width is fixed
-  .full-width-modal {
-    .modal{
-      width: 1170px;
-      margin: -350px 0 0 -583px;
-    }
-  }
-
   .row {
     margin-left: -30px;
     *zoom: 1;

ambari-web/app/templates/main/admin.hbs

@@ -18,16 +18,12 @@
 
 <div class="row-fluid">
   <div id="main-admin-menu" class="well span2">
-      <ul>
-        {{#view view.NavItemView item="user" }}
-            <a class="text-center" href="javascript:void(null);" {{action goToAdminUser}} > Users</a>
-        {{/view}}
-        {{#view view.NavItemView item="security" }}
-            <a class="text-center" href="javascript:void(null);" {{action goToAdminSecurity}} > Security</a>
-        {{/view}}
-        {{#view view.NavItemView item="cluster" }}
-          <a class="text-center" href="javascript:void(null);" {{action goToAdminCluster}} > Cluster</a>
-        {{/view}}
+      <ul class="nav nav-list">
+        {{#each category in view.categories}}
+          {{#view view.NavItemView itemBinding="category.name" }}
+              <a href="#" {{action "goToAdmin" category.url}} >{{category.label}}</a>
+          {{/view}}
+        {{/each}}
       </ul>
   </div>
   <div class="span10">

ambari-web/app/views/main/admin.js

@@ -20,13 +20,30 @@ var App = require('app');
 
 App.MainAdminView = Em.View.extend({
   templateName: require('templates/main/admin'),
-  selectedBinding: 'controller.selected',
+  selectedBinding: 'controller.category',
+  categories: [
+    {
+      name: 'user',
+      url: 'adminUser',
+      label: Em.I18n.t('common.users')
+    },
+    {
+      name: 'security',
+      url: 'adminSecurity.index',
+      label: Em.I18n.t('common.security')
+    },
+    {
+      name: 'cluster',
+      url: 'adminCluster',
+      label: Em.I18n.t('common.cluster')
+    }
+  ],
   NavItemView: Ember.View.extend({
     tagName: 'li',
     classNameBindings: 'isActive:active'.w(),
     isActive: function () {
       return this.get('item') === this.get('parentView.selected');
-    }.property('item', 'parentView.selected').cacheable()
+    }.property('item', 'parentView.selected')
   })
 });