Merge pull request #13 from spasovski/ddown

MOZ specific dropdown fix
mozilla · Nov 30, 2016 · fddd178 · fddd178
2 parents cf74405 + dc507d8
commit fddd178
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
@@ -243,6 +243,10 @@ to add those CSS styles here. */
   display: block;
 }
 
+.dashboards .dropdown-submenu:hover > .dropdown-menu {
+  display: flex;
+}
+
 .dropdown-submenu > a:after {
   display: block;
   content: " ";
@@ -273,6 +277,34 @@ to add those CSS styles here. */
   border-radius: 6px 0 6px 6px;
 }
 
+.dashboards .dropdown-menu {
+  align-items: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  max-height: 500px;
+}
+
+.dashboards.open > .dropdown-menu {
+  display: flex;
+}
+
+.dashboards > .dropdown-menu {
+  width: 80vw;
+  align-items: flex-start;
+}
+
+.dashboards .dropdown-menu > li a {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dashboards .dropdown-menu > li a,
+.dashboards .dropdown-submenu > a {
+  width: 20vw;
+}
+
 .rd-tab .remove {
   cursor: pointer;
   color: #A09797;

diff --git a/rd_ui/app/views/app_header.html b/rd_ui/app/views/app_header.html
@@ -11,7 +11,7 @@
     </div>
     <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
-        <li class="dropdown"
+        <li class="dropdown dashboards"
             ng-show="groupedDashboards.length > 0 || otherDashboards.length > 0 || currentUser.hasPermission('create_dashboard')"
             dropdown>
           <a href="#" class="dropdown-toggle" dropdown-toggle title="Dashboards">
@@ -21,16 +21,16 @@
           <ul class="dropdown-menu" dropdown-menu>
                     <span ng-repeat="(name, group) in groupedDashboards">
                         <li class="dropdown-submenu">
-                          <a href="#" ng-bind="name"></a>
+                          <a href="#" title="{{name}}" ng-bind="name"></a>
                           <ul class="dropdown-menu">
                             <li ng-repeat="dashboard in group" role="presentation">
-                              <a role="menu-item" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
+                              <a role="menu-item" title="{{dashboard.name}}" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
                             </li>
                           </ul>
                         </li>
                     </span>
             <li ng-repeat="dashboard in otherDashboards">
-              <a role="menu-item" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
+              <a role="menu-item" title="{{dashboard.name}}" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
             </li>
             <li class="divider"
                 ng-show="currentUser.hasPermission('create_dashboard') && (groupedDashboards.length > 0 || otherDashboards.length > 0)"></li>