Merge pull request #537 from metabase/nav_changes

Nav changes

resources/frontend_client/app/card/card.controllers.js

@@ -608,13 +608,16 @@ CardControllers.controller('CardDetail', [
                         if (databases[i].id === databaseId) {
                             card.dataset_query.database = databaseId;
 
-                            // load metadata
-                            editorModel.loadDatabaseInfoFn(card.dataset_query.database);
                         }
                     }
+                }
+
+                if (card.dataset_query.database != null) {
+                    // load metadata
+                    editorModel.loadDatabaseInfoFn(card.dataset_query.database);
 
                     // if we initialized our database safely and we have a table, lets handle that now
-                    if (card.dataset_query.database !== null && $routeParams.table !== undefined) {
+                    if ($routeParams.table != null) {
                         // TODO: do we need a security check here?  seems that if they have access to the db just use the table
                         card.dataset_query.query.source_table = parseInt($routeParams.table);
 

resources/frontend_client/app/css/admin.css

@@ -19,11 +19,6 @@
 }
 
 .AdminNav .NavItem {
-    /* cancel out padding as .AdminNav + flex will allow for proper centering */
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
     color: var(--admin-nav-item-text-color);
 }
 
@@ -38,6 +33,16 @@
     display: none;
 }
 
+
+.AdminNav .NavDropdown.open .NavDropdown-button,
+.AdminNav .NavDropdown .NavDropdown-content-layer {
+    background-color: #8993A1;
+}
+
+.AdminNav .Dropdown-item:hover {
+    background-color: #6F7A8B;
+}
+
 /* utility to get a simple common hover state for admin items */
 .HoverItem:hover,
 .AdminHoverItem:hover {

resources/frontend_client/app/css/core/bordered.css

@@ -34,6 +34,10 @@
   border-left: var(--border-size) var(--border-style) var(--border-color);
 }
 
+.border-light {
+    border-color: rgba(255,255,255,0.2) !important;
+}
+
 /* BORDERLESS IS THE DEFAULT */
 /* ONLY USE IF needing to override an existing border! */
 /* ensure there is no border via important */

resources/frontend_client/app/css/core/colors.css

 :root {
   --brand-color: #509EE3;
+  --brand-light-color: #CDE3F8;
 
   --base-grey: #f8f8f8;
   --alt-bg-color: #F4F6F8;
@@ -29,6 +30,11 @@
     color: color(var(--brand-color) shade(20%));
 }
 
+.text-brand-light,
+.text-brand-light-hover:hover {
+    color: var(--brand-light-color);
+}
+
 .bg-brand,
 .bg-brand-hover:hover { background-color: var(--brand-color); }
 

resources/frontend_client/app/css/home.css

@@ -18,10 +18,6 @@
     }
 }
 
-.Greeting-subtitle {
-    opacity: 0.575;
-}
-
 /* on the homepage, the wrapper should only be as wide as our largest size */
 .Home .wrapper {
     max-width: var(--xl-width);
@@ -45,8 +41,93 @@
     transition: background .3s linear;
 }
 
-.DashboardDropdown .Dropdown-content {
-    min-width: 20em;
+.bullet {
+    position: relative;
+    margin-left: 1.2em;
+}
+.bullet:before {
+    content: "\2022";
+    color: #6FB0EB;
+    position: absolute;
+    top: 0;
+    margin-top: 16px;
+    left: -0.85em;
+}
+
+.NavDropdown {
+    position: relative;
+}
+.NavDropdown.open {
+    z-index: 100;
+}
+.NavDropdown .NavDropdown-content {
+    display: none;
+}
+.NavDropdown.open .NavDropdown-content {
+    display: inherit;
+}
+.NavDropdown .NavDropdown-button {
+    position: relative;
+    border-radius: 8px;
+}
+.NavDropdown .NavDropdown-content {
+    position: absolute;
+    border-radius: 4px;
+    top: 38px;
+    min-width: 200px;
+}
+.NavDropdown .NavDropdown-button:before,
+.NavDropdown .NavDropdown-content:before {
+    content:"";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .12);
+    background-clip: padding-box;
+}
+
+.NavDropdown .NavDropdown-content:before {
+    z-index: -2;
+    border-radius: 4px;
+}
+.NavDropdown .NavDropdown-button:before {
+    z-index: -1;
+    border-radius: 8px;
+}
+.NavDropdown .NavDropdown-content-layer {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+}
+.NavDropdown .NavDropdown-button-layer {
+    position: relative;
+    z-index: 2;
+}
+
+.NavDropdown.open .NavDropdown-button,
+.NavDropdown .NavDropdown-content-layer {
+    background-color: #6FB0EB;
+}
+
+.NavDropdown .NavDropdown-content-layer {
+    padding-top: 10px;
+    border-radius: 4px;
+}
+
+.NavDropdown .DashboardList {
+    min-width: 332px;
+}
+
+.QuestionCircle {
+    display: inline-block;
+    font-size: 3.25rem;
+    width: 73px;
+    height: 73px;
+    border-radius: 99px;
+    border: 3px solid white;
+    text-align: center;
 }
 
 .Entity-title {

resources/frontend_client/app/dashboard/dashboard.controllers.js

@@ -25,6 +25,10 @@ DashboardControllers.controller('DashList', ['$scope', '$location', 'Dashboard',
         refreshListing();
     });
 
+    $scope.$on("dashboard:update", function(event, dashboardId) {
+        refreshListing();
+    });
+
     // always initialize with a fresh listing
     refreshListing();
 

resources/frontend_client/app/dashboard/dashboard.directives.js

@@ -29,6 +29,8 @@ DashboardDirectives.directive('mbDashboardSaver', ['CorvusCore', 'Dashboard', '$
                                         scope.callback(result);
                                     }
 
+                                    $rootScope.$broadcast("dashboard:update", scope.dashboard.id);
+
                                     // just close out the modal now that we're done
                                     $modalInstance.close();
 

resources/frontend_client/app/directives.js

@@ -165,20 +165,7 @@ NavbarDirectives.directive('mbProfileLink', [function () {
     return {
         restrict: 'E',
         replace: true,
-        template:  '<ul>' +
-                        '<li class="Dropdown inline-block" dropdown on-toggle="toggled(open)">' +
-                            '<a class="flex align-center" selectable-nav-item="settings" dropdown-toggle>' +
-                                '<span class="UserNick">' +
-                                    '<span class="UserInitials NavItem-text">{{initials}}</span> ' +
-                                '</span>' +
-                                '<mb-icon name="chevrondown" class="Dropdown-chevron ml1" width="8px" height="8px"></mb-icon>' +
-                            '</a>' +
-                            '<ul class="Dropdown-content right">' +
-                                '<li><a class="Dropdown-item link block" href="/user/edit_current">Account Settings</a></li>' +
-                                '<li><a class="Dropdown-item link block" href="/auth/logout">Logout</a></li>' +
-                            '</ul>' +
-                        '</li>' +
-                    '</ul>',
+        templateUrl: '/app/partials/mb_profile_link.html',
         scope: {
             context: '=',
             user: '='

resources/frontend_client/app/home/home.html

@@ -5,7 +5,7 @@
                 <div class="Grid-cell" ng-controller="HomeGreeting">
                     <div class="Greeting">
                         <h1 class="text-light">{{greeting}}</h1>
-                        <h2 class="Greeting-subtitle text-light">{{subheading}}</h2>
+                        <h2 class="text-light text-brand-light">{{subheading}}</h2>
                     </div>
                 </div>
                 <div class="Grid-cell flex">

resources/frontend_client/app/partials/mb_profile_link.html

+<div class="NavDropdown inline-block" dropdown on-toggle="toggled(open)">
+    <a class="NavDropdown-button NavItem flex align-center p2" selectable-nav-item="settings" dropdown-toggle>
+        <div class="NavDropdown-button-layer">
+            <div class="flex align-center">
+                <span class="UserNick">
+                    <span class="UserInitials NavItem-text">{{initials}}</span>
+                </span>
+                <mb-icon name="chevrondown" class="Dropdown-chevron ml1" width="8px" height="8px"></mb-icon>
+            </div>
+        </div>
+    </a>
+    <div class="NavDropdown-content right">
+        <ul class="NavDropdown-content-layer">
+            <li><a class="Dropdown-item block text-white no-decoration" href="/user/edit_current">Account Settings</a></li>
+            <li ng-if="user.is_superuser &amp;&amp; context !== 'admin'"><a class="Dropdown-item block text-white no-decoration" href="/admin/">Admin Panel</a></li>
+            <li ng-if="user.is_superuser &amp;&amp; context === 'admin'"><a class="Dropdown-item block text-white no-decoration" href="/">Exit Admin</a></li>
+            <li class="border-top border-light"><a class="Dropdown-item block text-white no-decoration" href="/auth/logout">Logout</a></li>
+        </ul>
+    </div>
+</div>

resources/frontend_client/index.html

@@ -17,35 +17,52 @@
         <div ng-controller="Nav" ng-if="user" ng-cloak>
             <!-- MAIN NAV -->
             <nav class="py2 sm-py1 xl-py3 relative bg-brand" ng-show="nav === 'main'">
-                <div class="wrapper flex align-center">
-                    <a class="NavItem cursor-pointer text-white flex align-center" href="/">
-                        <mb-logo-icon class="text-white"></mb-logo-icon>
-                    </a>
-                    <div class="DashboardDropdown Dropdown ml1 md-ml3" dropdown on-toggle="toggled(open)">
-                        <a class="NavItem text-white cursor-pointer p2 flex align-center" dropdown-toggle>
-                            Dashboards
-                            <mb-icon class="ml1" name="chevrondown" width="8px" height="8px"></mb-icon>
+                <ul class="wrapper flex align-center">
+                    <li>
+                        <a class="NavItem cursor-pointer text-white flex align-center" href="/">
+                            <mb-logo-icon class="text-white"></mb-logo-icon>
                         </a>
-                        <ul class="Dropdown-content" ng-controller="DashList">
-                            <li ng-repeat="dash in dashboards">
-                                <a class="Dropdown-item link flex align-center text-normal" href="/dash/{{dash.id}}">
-                                    {{dash.name}}
-                                    <mb-icon class="ml1 text-grey-4 flex flex-align-right align-center" name="lock" width="12px" height="12px" ng-if="dash.public_perms === 0"></mb-icon>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="UserDropdown Dropdown flex-align-right" dropdown on-toggle="toggled(open)">
-                        <mb-profile-link class="NavItem text-white" user="user" context="nav"></mb-profile-link>
-                        <ul class="Dropdown-content right">
-                            <li><a class="Dropdown-item link block" href="/user/edit_current">Account Settings</a></li>
-                            <li><a class="Dropdown-item link block" href="/auth/logout">Logout</a></li>
-                        </ul>
-                    </div>
-                    <a class="AdminLink NavItem hide sm-show sm-ml1 md-ml2" ng-if="user.is_superuser" href="/admin/">
-                        <mb-icon class="text-white" name="gear" width="16px" height="16px"></mb-icon>
-                    </a>
-                </div>
+                    </li>
+                    <li>
+                        <div class="NavDropdown ml1 md-ml3" dropdown on-toggle="toggled(open)">
+                            <a class="NavDropdown-button NavItem text-white cursor-pointer p2 flex align-center" dropdown-toggle>
+                                <span class="NavDropdown-button-layer">
+                                    Dashboards
+                                    <mb-icon class="ml1" name="chevrondown" width="8px" height="8px"></mb-icon>
+                                </span>
+                            </a>
+                            <div class="NavDropdown-content DashboardList" ng-controller="DashList">
+                                <div class="NavDropdown-content-layer text-white text-centered" ng-if="dashboards.length === 0">
+                                    <div class="p2"><span class="QuestionCircle">?</span></div>
+                                    <div class="px2 py1 text-bold">You don’t have any dashboards yet.</div>
+                                    <div class="px2 pb2 text-light">Dashboards group visualizations for frequent questions in a single handy place.</div>
+                                    <div class="p2 text-bold text-white border-top border-light">
+                                        To create your first dashboard, <a class="text-white" href="/card/create">
ask a question</a> and save it.
+                                    </div>
+                                </div>
+                                <ul class="NavDropdown-content-layer" ng-if="dashboards.length > 0">
+                                    <li class="Dropdown-item" ng-repeat="dash in dashboards">
+                                        <a class="text-white no-decoration" href="/dash/{{dash.id}}">
+                                            <div class="flex text-bold">
+                                                {{dash.name}}
+                                                <mb-icon class="ml1 flex flex-align-right align-center" name="lock" width="12px" height="12px" ng-if="dash.public_perms === 0"></mb-icon>
+                                            </div>
+                                            <div class="mt1 text-light text-brand-light">
+                                                {{dash.description}}
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="bullet">
+                        <a class="NavItem text-white cursor-pointer p2 flex align-center no-decoration" href="/card/create">Ask a Question</a>
+                    </li>
+                    <li class="flex-align-right">
+                        <mb-profile-link class="text-white" user="user" context="nav"></mb-profile-link>
+                    </li>
+                </ul>
             </nav>
 
             <!-- ADMIN NAV -->
@@ -77,9 +94,6 @@
 
                     <!-- user profile dropdown -->
                     <mb-profile-link user="user" context="nav"></mb-profile-link>
-                    <a class="text-white ml1 md-ml2" href="/">
-                        <mb-icon name="return" width="22px" height="22px"></mb-icon>
-                    </a>
                 </div>
             </nav>
         </div>