Improve display of workflow toolbar on narrow viewports

src/components/cylc/Toolbar.vue

@@ -15,8 +15,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!-- Cylc UI Toolbar. Used to display the page title in responsive mode, and
-     to display a burger button to hide the drawer component. -->
+<!-- Cylc UI Toolbar. Used to display the type of view in responsive mode
+(narrow viewports), and to display a burger button to hide the drawer
+component. Note: this is not used for the workflow view, see
+./workflow/Toolbar.vue instead. -->
+
 <template>
   <v-app-bar
     app
@@ -27,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-if="responsive"
   >
     <v-toolbar-title
-      class="tertiary--text font-weight-light"
+      class="tertiary--text"
     >
       <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
       <!-- burger button for mobile -->

src/components/cylc/cylcObject/Menu.vue

@@ -210,8 +210,10 @@ export default {
         // TODO: better way of checking if a 'task' is actually a family?
         ret = 'family'
       }
-      if (ret !== 'workflow') {
-        ret += ' - '
+      ret += ' - '
+      if (this.type === 'workflow') {
+        ret += this.node.statusMsg || 'state unknown'
+      } else {
         ret += this.node.state || 'state unknown'
         if (this.node.isHeld) {
           ret += ' (held)'

src/components/cylc/workflow/Toolbar.vue

@@ -15,6 +15,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
+<!-- Toolbar for the workflow view -->
+
 <template>
   <v-app-bar
     app
@@ -36,52 +38,54 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-btn>
     <!-- title -->
     <v-toolbar-title
-      class="font-weight-light"
+      class="text-md-h6 text-subtitle-1"
     >
       <span class="c-toolbar-title">{{ title }}</span>
     </v-toolbar-title>
 
     <!-- control bar elements displayed only when there is a current workflow in the store -->
     <template v-if="currentWorkflow">
-      <v-icon
-        id="workflow-mutate-button"
-        color="#5E5E5E"
-        v-cylc-object="currentWorkflow"
-      >
-        {{ svgPaths.menu }}
-      </v-icon>
+      <div class="c-workflow-controls flex-shrink-0">
+        <v-icon
+          id="workflow-mutate-button"
+          color="#5E5E5E"
+          v-cylc-object="currentWorkflow"
+        >
+          {{ svgPaths.menu }}
+        </v-icon>
 
-      <v-icon
-        id="workflow-play-button"
-        color="#5E5E5E"
-        :disabled="!enabled.playToggle"
-        v-if="!isRunning"
-        @click="onClickPlay"
-      >
-        {{ svgPaths.run }}
-      </v-icon>
+        <v-icon
+          id="workflow-play-button"
+          color="#5E5E5E"
+          :disabled="!enabled.playToggle"
+          v-if="!isRunning"
+          @click="onClickPlay"
+        >
+          {{ svgPaths.run }}
+        </v-icon>
 
-      <v-icon
-        id="workflow-play-pause-button"
-        color="#5E5E5E"
-        :disabled="!enabled.pauseToggle"
-        v-if="isRunning"
-        @click="onClickReleaseHold"
-      >
-        {{ isPaused ? svgPaths.run : svgPaths.hold }}
-      </v-icon>
+        <v-icon
+          id="workflow-play-pause-button"
+          color="#5E5E5E"
+          :disabled="!enabled.pauseToggle"
+          v-if="isRunning"
+          @click="onClickReleaseHold"
+        >
+          {{ isPaused ? svgPaths.run : svgPaths.hold }}
+        </v-icon>
 
-      <v-icon
-        id="workflow-stop-button"
-        color="#5E5E5E"
-        :disabled="!enabled.stopToggle"
-        @click="onClickStop"
-      >
-        {{ svgPaths.stop }}
-      </v-icon>
+        <v-icon
+          id="workflow-stop-button"
+          color="#5E5E5E"
+          :disabled="!enabled.stopToggle"
+          @click="onClickStop"
+        >
+          {{ svgPaths.stop }}
+        </v-icon>
+      </div>
 
       <!-- workflow status message -->
-      <span class="status-msg">
+      <span class="status-msg text-md-body-1 text-body-2">
         {{ statusMsg }}
       </span>
 
@@ -92,7 +96,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="$route.name === 'workflow'"
       >
         <template v-slot:activator="{ on }">
-          <a class="add-view" v-on="on">
+          <a
+            class="add-view d-flex flex-row-reverse align-items-center"
+            v-on="on">
             <v-icon class="icon" color="#5995EB">{{ svgPaths.add }}</v-icon>
             <span class="label">
               {{ $t('Toolbar.addView') }}

src/styles/cylc/_toolbar.scss

@@ -17,12 +17,14 @@
 
 @import 'variables';
 @import '~vuetify/src/styles/styles';
+@import '~vuetify/src/components/VIcon/_variables.scss';
 
 .v-toolbar {
   min-height: inherit !important;
 
   .v-toolbar__content {
     min-height: inherit !important;
+    column-gap: 0.5rem;
   }
 }
 
@@ -39,30 +41,33 @@
     font-weight: map-get($font-weights, medium);
   }
 
-  .c-toolbar-title {
-    font-size: 1.4rem;
-    // put some space between the title and the icons that follow
-    padding-right: 0.5rem;
-  }
-
   .status-msg {
     color: $font-dimished-color;
-    padding-left: 1rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    // make this shrink more than title (can see status in mutation menu if needed):
+    flex-shrink: 10;
+    // override vuetify .text-* class letter spacing:
+    letter-spacing: normal !important;
   }
 
   .add-view {
-    // force overflow onto a new line where we can hide it
-    height: 1.1em;
+    column-gap: 0.5rem;
+    // force overflow onto a new line where we can hide it:
+    max-height: $icon-size;
+    min-width: $icon-size;
+    flex-wrap: wrap;
     overflow: hidden;
+    row-gap: 30px;
+    // make this shrink before anything else in the toolbar:
+    flex-shrink: 100000;
 
     .label {
-      float: left;
       font-size: 1rem;
-      margin-right: 0.5em;
-    }
-
-    .icon {
-      float: right;
+      // this only gets clipped after getting hidden (forced to overflow on new line)
+      white-space: nowrap;
+      text-overflow: clip;
     }
   }
 }

src/styles/index.scss

@@ -35,6 +35,11 @@
 @import "cylc/mutation_form";
 @import "cylc/menu";
 
+html {
+  // Only show scrollbar when needed:
+  overflow-y: auto;
+}
+
 .theme--light.v-application {
   background-color: transparent;
   .content {