Graph view style improvements

- Reduce size of toolbar icons & fix alignment
- Hide pointless scrollbar on graph view

Author: MetRonnie

cypress/component/viewToolbar.cy.js

@@ -76,7 +76,7 @@ describe('View Toolbar Component', () => {
     cy
       // the toggle should be blue because it's active (default true)
       .get('.control.toggle .v-btn')
-      .should('have.class', 'bg-blue')
+      .should('have.class', 'text-blue')
       // clicking the toggle should emit a "setOption" event with the
       // controls key (toggle) and new value (false)
       .click({ force: true })
@@ -87,7 +87,7 @@ describe('View Toolbar Component', () => {
       })
       // it should not be grey because it's inactive (false)
       .get('.control.toggle .v-btn')
-      .not('.bg-blue')
+      .not('.text-blue')
       // click it again and it should become active again
       .click({ force: true })
       .get('@wrapper').then(({ wrapper }) => {
@@ -96,7 +96,7 @@ describe('View Toolbar Component', () => {
         ).to.deep.equal(['toggle', true])
       })
       .get('.control.toggle .v-btn')
-      .should('have.class', 'bg-blue')
+      .should('have.class', 'text-blue')
 
     // test action=callback
     expect(callbacks).to.have.length(0)

src/components/cylc/ViewToolbar.vue

@@ -32,12 +32,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-btn
           :class="iControl.title"
           icon
-          variant="flat"
+          variant="text"
           :disabled="iControl.disabled"
           :color="iControl.color"
           @click="iControl.callback"
         >
-          <v-icon size="x-large">{{ iControl.icon }}</v-icon>
+          <v-icon size="large">{{ iControl.icon }}</v-icon>
           <v-tooltip
             activator="parent"
             location="bottom"
@@ -130,6 +130,7 @@ export default {
               break
             case 'callback':
               callback = (e) => this.call(control, e)
+              break
           }
 
           // set disabled
@@ -192,31 +193,23 @@ export default {
 <style lang="scss">
   .c-view-toolbar {
     // give the toolbar a little respect space
-    padding: 0.5rem 0 0.5rem 0;
+    padding: 0.5rem;
+    display: flex;
 
     .group {
-      // put a bit of space between the groups
-      padding-right: 0.5rem;
-      display: inline-block;
+      display: flex;
+      align-items: center;
+
+      $spacing: 0.5rem;
 
-      &:before {
+      &:not(:first-child):before {
         // place a divider between groups
-        content: '|';
-        font-size: 2rem;
-        position: relative;
-        top: 0.5rem; // because the font is x2 nudge it down 1/2
-        color: rgb(200, 200, 200);
-      }
-      &:first-child:before {
-        // don't add a divider on the first group
         content: '';
-      }
-
-      .control {
-        // put a bit of space between the controls
-        padding: 0 0 0 0.5rem;
-        // make them sit side-by-side
-        display: inline-block;
+        height: 70%;
+        width: 2px;
+        background: rgb(0, 0, 0, 0.22);
+        // put a bit of space between the groups
+        margin: 0 $spacing;
       }
     }
   }

src/views/Graph.vue

@@ -678,12 +678,14 @@ export default {
 
 <style lang="scss">
   .c-graph {
+    overflow: hidden;
+
     .c-view-toolbar {
       // turn the view toolbar into a floating component
       position: fixed;
       background-color: rgba(240,240,240,0.9);
       border-radius: 0.75em;
-      margin: 0.25em;
+      margin: 0.5em;
       padding: 0.4em;
     }
   }