From df0208759a8de45c1fd39cad036e74d36632abd1 Mon Sep 17 00:00:00 2001
From: Sebastian Krah <skrah@suse.com>
Date: Tue, 29 Jan 2019 16:30:03 +0100
Subject: [PATCH] mgr/dashboard: Add description to menu items on mobile
 navigation

Adds the title of the icons as description right next to it if the resolution
of the browser is below 768px.
Adds a couple of scss variable which define the different breakpoints of
bootstrap. Those variables should be used in media query expressions.

Fixes: https://tracker.ceph.com/issues/37789
Signed-off-by: Sebastian Krah <skrah@suse.com>
---
 .../administration.component.html             |  4 ++-
 .../dashboard-help.component.html             |  4 ++-
 .../identity/identity.component.html          |  4 ++-
 .../navigation/navigation.component.scss      | 12 +++++--
 .../notifications.component.html              |  4 ++-
 .../task-manager/task-manager.component.html  |  2 ++
 .../mgr/dashboard/frontend/src/defaults.scss  |  8 +++++
 .../frontend/src/locale/messages.xlf          | 32 +++++++++++++++----
 8 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
index 1eacdae1f7c3c..1dd555563f38c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@@ -5,7 +5,9 @@
      data-toggle="dropdown"
      i18n-title
      title="Dashboard Settings">
-    <i class="fa fa-cog"></i>
+    <i class="fa fa-fw fa-cog"></i>
+    <span i18n
+          class="visible-xs-inline-block">Dashboard Settings</span>
     <span class="caret"></span>
   </a>
   <ul *dropdownMenu
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
index 5eac6e3c7a02c..02c7ad9c82707 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -8,7 +8,9 @@
      data-toggle="dropdown"
      i18n-title
      title="Help">
-    <i class="fa fa-question-circle-o"></i>
+    <i class="fa fa-fw fa-question-circle-o"></i>
+    <span i18n
+          class="visible-xs-inline-block">Help</span>
     <span class="caret"></span>
   </a>
   <ul *dropdownMenu
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
index 678a4f87f39f5..ad62aaf386847 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
@@ -4,7 +4,9 @@
      data-toggle="dropdown"
      i18n-title
      title="Logged in user">
-    <i class="fa fa-user fa-fw"></i>
+    <i class="fa fa-fw fa-user"></i>
+    <span i18n
+          class="visible-xs-inline-block">Logged in user</span>
     <span class="caret"></span>
   </a>
   <ul *dropdownMenu
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 831014545ca5f..fcb4b0b5f5e81 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -131,7 +131,7 @@
     border-color: transparent;
     background-color: transparent;
   }
-  @media (min-width: 768px) {
+  @media (min-width: $screen-sm-min) {
     .navbar-primary > li > a {
       border-bottom: 4px solid transparent;
     }
@@ -151,9 +151,13 @@
       top: 0;
     }
   }
-  @media (max-width: 767px) {
+  @media (max-width: $screen-xs-max) {
     .navbar-nav {
       margin: 0;
+
+      .fa {
+        margin-right: 0.5em;
+      }
     }
 
     .navbar-collapse,
@@ -191,6 +195,10 @@
 
     .navbar-utility {
       border-top: 1px solid $color-nav-border-top-collapse;
+
+      a {
+        font-size: 1em;
+      }
     }
 
     .navbar-primary > .active > a,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
index fe9faa54cf45f..9e73409d99850 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
@@ -51,5 +51,7 @@
    outsideClick="true"
    i18n-title
    title="Recent Notifications">
-  <i class="fa fa-bell fa-fw"></i>
+  <i class="fa fa-fw fa-bell"></i>
+  <span i18n
+        class="visible-xs-inline-block">Recent Notifications</span>
 </a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
index 37941ecd41c50..dae5758080321 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
@@ -79,5 +79,7 @@
    title="Background Tasks">
   <i class="fa fa-fw"
      [ngClass]="icon"></i>
+  <span i18n
+        class="visible-xs-inline-block">Background Tasks</span>
   <span *ngIf="executingTasks.length > 0"> ({{ executingTasks.length }})</span>
 </a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
index a6224e7d341c4..9cf30b3901db2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
@@ -2,6 +2,14 @@
 
 @import 'vendor.variables';
 
+$screen-sm-min: 768px !default;
+$screen-md-min: 992px !default;
+$screen-lg-min: 1200px !default;
+
+$screen-xs-max: calc(#{$screen-sm-min} - 1px);
+$screen-sm-max: calc(#{$screen-md-min} - 1px);
+$screen-md-max: calc(#{$screen-lg-min} - 1px);
+
 $color-solid-red: #ff0000 !default;
 $color-pink: #a94442 !default;
 $color-light-red: #f2dede !default;
diff --git a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
index 416e730353ff4..7997169c0ba2f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
+++ b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
@@ -2326,6 +2326,10 @@
         </context-group>
       </trans-unit><trans-unit id="1d65cc22d5842c06d33b244fc67de9db4003537e" datatype="html">
         <source>Recent Notifications</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/core/navigation/notifications/notifications.component.html</context>
+          <context context-type="linenumber">56</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/notifications/notifications.component.html</context>
           <context context-type="linenumber">53</context>
@@ -2338,12 +2342,20 @@
         </context-group>
       </trans-unit><trans-unit id="ea94e7754983d80af8acb958a5d49d93bacd721c" datatype="html">
         <source>Background Tasks</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/core/navigation/task-manager/task-manager.component.html</context>
+          <context context-type="linenumber">83</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/task-manager/task-manager.component.html</context>
           <context context-type="linenumber">79</context>
         </context-group>
       </trans-unit><trans-unit id="85b79c9064aed1ead31ace985f31aa1363f6bdaf" datatype="html">
         <source>Help</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/core/navigation/dashboard-help/dashboard-help.component.html</context>
+          <context context-type="linenumber">13</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/dashboard-help/dashboard-help.component.html</context>
           <context context-type="linenumber">10</context>
@@ -2352,22 +2364,26 @@
         <source>Documentation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/dashboard-help/dashboard-help.component.html</context>
-          <context context-type="linenumber">21</context>
+          <context context-type="linenumber">23</context>
         </context-group>
       </trans-unit><trans-unit id="e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4" datatype="html">
         <source>API</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/dashboard-help/dashboard-help.component.html</context>
-          <context context-type="linenumber">26</context>
+          <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit><trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
         <source>About</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/dashboard-help/dashboard-help.component.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit><trans-unit id="1481ecd21e760ac919a24e26cf790acd82e40199" datatype="html">
         <source>Dashboard Settings</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/core/navigation/administration/administration.component.html</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/administration/administration.component.html</context>
           <context context-type="linenumber">7</context>
@@ -2376,10 +2392,14 @@
         <source>User management</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/administration/administration.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">18</context>
         </context-group>
       </trans-unit><trans-unit id="049dfd9fe6c78914ad58cf89ac6a631fca28ec74" datatype="html">
         <source>Logged in user</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/core/navigation/identity/identity.component.html</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/identity/identity.component.html</context>
           <context context-type="linenumber">6</context>
@@ -2389,13 +2409,13 @@
       <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/><x id="INTERPOLATION" equiv-text="{{ username }}"/><x id="CLOSE_TAG_STRONG" ctype="x-strong" equiv-text="&lt;/strong&gt;"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/identity/identity.component.html</context>
-          <context context-type="linenumber">17</context>
+          <context context-type="linenumber">19</context>
         </context-group>
       </trans-unit><trans-unit id="5d22c795daf43877a5f708dca2bccd549eb0471d" datatype="html">
         <source>Sign out</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/core/navigation/identity/identity.component.html</context>
-          <context context-type="linenumber">25</context>
+          <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit><trans-unit id="eeba399c4dae8d4890c27b7a2cd2dc28fcf8b5f9" datatype="html">
         <source>Performance Counters</source>
-- 
2.39.5