Return-Path: <commits-return-48174-archive-asf-public=cust-asf.ponee.io@ambari.apache.org>
X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io
Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io
Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183])
	by cust-asf2.ponee.io (Postfix) with ESMTP id B1A50200D1F
	for <archive-asf-public-internal@cust-asf2.ponee.io>; Fri, 13 Oct 2017 17:10:24 +0200 (CEST)
Received: by cust-asf.ponee.io (Postfix)
	id B048B160BEE; Fri, 13 Oct 2017 15:10:24 +0000 (UTC)
Delivered-To: archive-asf-public@cust-asf.ponee.io
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by cust-asf.ponee.io (Postfix) with SMTP id 34B52160BF2
	for <archive-asf-public@cust-asf.ponee.io>; Fri, 13 Oct 2017 17:10:23 +0200 (CEST)
Received: (qmail 93479 invoked by uid 500); 13 Oct 2017 15:10:21 -0000
Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@ambari.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@ambari.apache.org>
List-Post: <mailto:commits@ambari.apache.org>
List-Id: <commits.ambari.apache.org>
Reply-To: ambari-dev@ambari.apache.org
Delivered-To: mailing list commits@ambari.apache.org
Received: (qmail 92927 invoked by uid 99); 13 Oct 2017 15:10:21 -0000
Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23)
    by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 13 Oct 2017 15:10:21 +0000
Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33)
	id D2295DFF08; Fri, 13 Oct 2017 15:10:20 +0000 (UTC)
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: rlevas@apache.org
To: commits@ambari.apache.org
Date: Fri, 13 Oct 2017 15:10:38 -0000
Message-Id: <ba72f7831ba4406ca381990eb8d2db63@git.apache.org>
In-Reply-To: <4b47cef5153a4588bbb490321801b249@git.apache.org>
References: <4b47cef5153a4588bbb490321801b249@git.apache.org>
X-Mailer: ASF-Git Admin Mailer
Subject: [19/50] [abbrv] ambari git commit: AMBARI-22186 Navigation style
 changes. (atkach)
archived-at: Fri, 13 Oct 2017 15:10:24 -0000

AMBARI-22186 Navigation style changes. (atkach)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2d23e123
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2d23e123
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2d23e123

Branch: refs/heads/branch-feature-AMBARI-20859
Commit: 2d23e123fd9b514b8c21d973cb0237e8c3dd6b42
Parents: 5768294
Author: Andrii Tkach <atkach@apache.org>
Authored: Tue Oct 10 16:44:35 2017 +0300
Committer: Andrii Tkach <atkach@apache.org>
Committed: Tue Oct 10 18:00:24 2017 +0300

----------------------------------------------------------------------
 ambari-web/app/styles/common.less               |  1 +
 .../app/styles/theme/bootstrap-ambari.css       | 64 ++++++++++++++------
 ambari-web/app/styles/top-nav.less              | 22 +++++++
 ambari-web/app/templates/application.hbs        | 39 ++++++++----
 ambari-web/app/templates/main/service/item.hbs  |  2 +-
 5 files changed, 96 insertions(+), 32 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/common.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less
index ddd4f3a..7753a59 100644
--- a/ambari-web/app/styles/common.less
+++ b/ambari-web/app/styles/common.less
@@ -71,6 +71,7 @@
 @top-nav-menu-dropdown-border-color: #c3c3c3;
 @top-nav-menu-dropdown-bg-color: #fff;
 @top-nav-menu-dropdown-text-color: #333;
+@top-nav-menu-views-menu-color: #1491c1;
 
 @-webkit-keyframes orangePulse {
   from { background-color: @restart-indicator-color; }

http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/theme/bootstrap-ambari.css
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css
index a223949..70579e7 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -464,7 +464,7 @@ h2.table-title {
 .nav.nav-tabs li a {
   border-width: 0;
   border-radius: 0;
-  border-bottom: 2px solid transparent;
+  border-bottom: 3px solid transparent;
   color: #6B6C6C;
   text-transform: uppercase;
 }
@@ -488,7 +488,7 @@ h2.table-title {
 .nav-tabs-left li,
 .nav-tabs-right li {
   float: none;
-  margin-bottom: 2px;
+  margin-bottom: 3px;
 }
 .nav-tabs-left li a,
 .nav-tabs-right li a {
@@ -498,25 +498,25 @@ h2.table-title {
   margin-right: -1px;
 }
 .nav-tabs-left li a {
-  border: 2px solid transparent !important;
+  border: 3px solid transparent !important;
 }
 .nav-tabs-left li.active a,
 .nav-tabs-left li.active a:hover,
 .nav-tabs-left li.active a:active,
 .nav-tabs-left li.active a:focus {
-  border-right: 2px solid #3FAE2A !important;
+  border-right: 3px solid #3FAE2A !important;
 }
 .nav-tabs-right li {
   margin-left: -1px;
 }
 .nav-tabs-right li a {
-  border: 2px solid transparent !important;
+  border: 3px solid transparent !important;
 }
 .nav-tabs-right li.active a,
 .nav-tabs-right li.active a:hover,
 .nav-tabs-right li.active a:active,
 .nav-tabs-right li.active a:focus {
-  border-left: 2px solid #3FAE2A !important;
+  border-left: 3px solid #3FAE2A !important;
 }
 .wizard {
   border: 2px solid #ebecf1;
@@ -797,8 +797,7 @@ input.radio:checked + label:after {
   cursor: pointer;
   margin-top: 3px;
 }
-.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header,
-.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.toggle-icon {
+.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header {
   color: #fff;
 }
 .navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group span.ambari-header {
@@ -890,7 +889,7 @@ input.radio:checked + label:after {
 .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a .navigation-icon,
 .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a .navigation-icon {
   line-height: 18px;
-  font-size: 14px;
+  font-size: 16px;
   color: #b8bec4;
 }
 .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .toggle-icon,
@@ -904,12 +903,14 @@ input.radio:checked + label:after {
   color: #b8bec4;
   padding: 3px 5px 3px 10px;
 }
-.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a,
-.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a,
 .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a,
 .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a {
   padding: 10px 5px 10px 20px;
 }
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a {
+  padding: 14px 5px 14px 20px;
+}
 .navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a,
 .navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a {
   padding: 10px 5px 10px 25px;
@@ -922,7 +923,7 @@ input.radio:checked + label:after {
 .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer a .navigation-icon,
 .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer a .navigation-icon {
   color: #3fae2a;
-  font-size: 20px;
+  font-size: 19px;
   position: relative;
   padding: 0 15px;
   left: calc(30%);
@@ -1021,7 +1022,7 @@ input.radio:checked + label:after {
   position: absolute;
   pointer-events: none;
   border-color: transparent;
-  border-left-color: #31823a;
+  border-left-color: #3fae2a;
   margin-top: -12px;
 }
 .navigation-bar-container ul.nav.side-nav-menu .more-actions,
@@ -1097,6 +1098,10 @@ input.radio:checked + label:after {
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li a .toggle-icon {
   display: none;
 }
+.navigation-bar-container.collapsed ul.nav.side-nav-menu li a .navigation-icon,
+.navigation-bar-container.collapsed ul.nav.side-nav-footer li a .navigation-icon {
+  font-size: 19px;
+}
 .navigation-bar-container.collapsed ul.nav.side-nav-menu li.navigation-footer a .navigation-icon,
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li.navigation-footer a .navigation-icon {
   padding: 0 5px;
@@ -1147,7 +1152,7 @@ input.radio:checked + label:after {
   position: absolute;
   pointer-events: none;
   border-color: transparent;
-  border-left-color: #31823a;
+  border-left-color: #3fae2a;
   margin-top: -12px;
 }
 .navigation-bar-container.collapsed ul.nav.side-nav-menu .more-actions,
@@ -1189,8 +1194,10 @@ input.radio:checked + label:after {
   position: relative;
   top: 1px;
 }
+.notifications-dropdown,
 #notifications-dropdown.dropdown-menu {
-  width: 400px;
+  min-width: 400px;
+  max-width: 400px;
   min-height: 150px;
   padding: 0px;
   z-index: 1000;
@@ -1202,6 +1209,7 @@ input.radio:checked + label:after {
   -moz-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29);
   box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29);
 }
+.notifications-dropdown .popup-arrow-up,
 #notifications-dropdown.dropdown-menu .popup-arrow-up {
   position: absolute;
   right: 37px;
@@ -1210,6 +1218,7 @@ input.radio:checked + label:after {
   height: 40px;
   overflow: hidden;
 }
+.notifications-dropdown .popup-arrow-up:after,
 #notifications-dropdown.dropdown-menu .popup-arrow-up:after {
   content: "";
   position: absolute;
@@ -1221,10 +1230,12 @@ input.radio:checked + label:after {
   left: 10px;
   box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
 }
+.notifications-dropdown .notifications-header,
 #notifications-dropdown.dropdown-menu .notifications-header {
   border-bottom: 1px solid #eee;
   padding: 15px 20px;
 }
+.notifications-dropdown .notifications-header .notifications-title,
 #notifications-dropdown.dropdown-menu .notifications-header .notifications-title {
   font-family: 'Roboto', sans-serif;
   font-weight: normal;
@@ -1233,19 +1244,23 @@ input.radio:checked + label:after {
   color: #333;
   font-size: 16px;
 }
+.notifications-dropdown .notifications-body,
 #notifications-dropdown.dropdown-menu .notifications-body {
   padding: 0px 15px;
   overflow: auto;
   max-height: 500px;
 }
+.notifications-dropdown .notifications-body .no-alert-text,
 #notifications-dropdown.dropdown-menu .notifications-body .no-alert-text {
   padding: 15px 5px;
 }
+.notifications-dropdown .notifications-body .table-controls,
 #notifications-dropdown.dropdown-menu .notifications-body .table-controls {
   padding: 10px 0px;
   margin: 0px;
   border-bottom: 1px solid #eee;
 }
+.notifications-dropdown .notifications-body .table-controls .state-filter,
 #notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter {
   padding: 0px;
   font-family: 'Roboto', sans-serif;
@@ -1257,36 +1272,45 @@ input.radio:checked + label:after {
   color: #666;
   position: relative;
 }
+.notifications-dropdown .notifications-body .table-controls .state-filter .form-control.filter-select,
 #notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter .form-control.filter-select {
   font-size: 12px;
   color: #666;
   height: 25px;
 }
+.notifications-dropdown .notifications-body .table.alerts-table,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table {
   margin-top: 0px;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr {
   cursor: pointer;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover {
   cursor: default;
   border-color: transparent;
   border-bottom-color: #eee;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td {
   border-color: transparent;
   background-color: white;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status {
   width: 9%;
   padding: 15px 3px;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL {
   color: #EF6162;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING {
   color: #E98A40;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content {
   width: 90%;
   padding: 15px 3px 10px 3px;
@@ -1297,12 +1321,14 @@ input.radio:checked + label:after {
   color: #333;
   line-height: 1.3;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .name,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .name {
   font-weight: bold;
   font-size: 14px;
   color: #333;
   margin-bottom: 5px;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .description,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .description {
   font-size: 12px;
   color: #666;
@@ -1327,11 +1353,13 @@ input.radio:checked + label:after {
   -webkit-hyphens: auto;
   hyphens: auto;
 }
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .timestamp,
 #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .timestamp {
   text-align: right;
   font-size: 11px;
   color: #999;
 }
+.notifications-dropdown .notifications-footer,
 #notifications-dropdown.dropdown-menu .notifications-footer {
   border-top: 1px solid #eee;
   padding: 15px;
@@ -1372,13 +1400,13 @@ input.radio:checked + label:after {
 }
 .accordion .panel-group,
 .wizard .wizard-body .wizard-content .accordion .panel-group {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 .accordion .panel-group .panel,
 .wizard .wizard-body .wizard-content .accordion .panel-group .panel {
-  border-radius: 0px;
+  border-radius: 0;
   border: none;
-  margin-top: 0px;
+  margin-top: 0;
   padding: 0 10px;
 }
 .accordion .panel-group .panel .panel-heading,

http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/top-nav.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/top-nav.less b/ambari-web/app/styles/top-nav.less
index 0644e52..a75d08a 100644
--- a/ambari-web/app/styles/top-nav.less
+++ b/ambari-web/app/styles/top-nav.less
@@ -109,6 +109,28 @@
     .top-nav-user {
       margin-top: 2px;
     }
+    .ambari-views {
+      margin-top: 17px;
+      padding: 0 20px 0 10px;
+      .notifications-dropdown.dropdown-menu {
+        right: -28px;
+        min-width: 200px;
+        max-width: 300px;
+        min-height: 100px;
+        li  {
+          padding: 2px 5px;
+          a {
+            font-size: 12px;
+            color: @top-nav-menu-views-menu-color;
+          }
+        }
+      }
+      i {
+        font-size: 20px;
+        color: @top-nav-menu-views-menu-color;
+        cursor: pointer;
+      }
+    }
   }
 
   #notifications-dropdown.dropdown-menu {

http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs
index 03c47db..5c47406 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/ambari-web/app/templates/application.hbs
@@ -35,19 +35,7 @@
           </a>
         {{/if}}
         <div class="btn-group">
-          <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span>
-            <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span>
-          </div>
-          <ul class="dropdown-menu">
-            {{#if view.views.length}}
-              {{#each item in view.views}}
-                <li><a class="" href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a></li>
-              {{/each}}
-            {{else}}
-              <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li>
-            {{/if}}
-          </ul>
+          <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span>
         </div>
       </li>
     </ul>
@@ -121,6 +109,31 @@
         {{/if}}
         {{! user dropdown end }}
 
+        {{! views menu}}
+        <div class="navbar-nav navbar-right ambari-views notifications-group">
+          {{#if enableLinks}}
+            <i class="icon-th dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
+            <ul class="notifications-dropdown row dropdown-menu">
+              <div class="popup-arrow-up"></div>
+              <div class="notifications-header col-sm-12">
+                <div class="notifications-title">{{t common.views}}</div>
+              </div>
+              <div class="notifications-body col-sm-12">
+                {{#if view.views.length}}
+                  {{#each item in view.views}}
+                    <li>
+                      <a href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a>
+                    </li>
+                  {{/each}}
+                {{else}}
+                  <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li>
+                {{/if}}
+              </div>
+            </ul>
+          {{/if}}
+        </div>
+        {{!views menu end}}
+
         <div class="navbar-nav navbar-right cluster-notifications">
           {{#if enableLinks}}
             {{! bg label }}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/main/service/item.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/item.hbs b/ambari-web/app/templates/main/service/item.hbs
index df26a9d..9abcaf3 100644
--- a/ambari-web/app/templates/main/service/item.hbs
+++ b/ambari-web/app/templates/main/service/item.hbs
@@ -25,7 +25,7 @@
 <div class="service-button">
   {{#if view.isMaintenanceActive}}
     <div class="btn-group display-inline-block">
-      <button class="btn btn-default dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#">
+      <button class="btn btn-success dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#">
         {{t common.actions}}
         <span class="caret"></span>
       </button>