Remove icons from drawer (sidebar menu), align nodes, and remove shut…

…down (no link)
cylc · Jul 29, 2019 · 94a3dfb · 94a3dfb
1 parent 267d4e3
commit 94a3dfb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 67 deletions.
diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
@@ -51,35 +51,6 @@
           v-text="link.text"
         />
       </v-list-tile>
-
-      <v-subheader>Other Links</v-subheader>
-      <v-list-tile
-        v-for="(link, index) in nonViewLinks"
-        :key="index+link.text"
-        :to="link.to"
-        :active-class="color"
-        avatar
-        class="v-list-item"
-      >
-        <v-list-tile-action>
-          <v-icon>{{ link.icon }}</v-icon>
-        </v-list-tile-action>
-        <v-list-tile-title
-          v-text="link.text"
-        />
-      <!-- Add Hub route separately as it lives under root not /user/USER/ -->
-      </v-list-tile>
-      <v-list-tile
-              href="/hub/home"
-              :active-class="color"
-              avatar
-              class="v-list-item"
-      >
-        <v-list-tile-action>
-          <v-icon>mdi-server-network</v-icon>
-        </v-list-tile-action>
-        <v-list-tile-title>Hub</v-list-tile-title>
-      </v-list-tile>
     </v-layout>
   </v-navigation-drawer>
 </template>
@@ -109,12 +80,6 @@ export default {
         icon: 'mdi-vector-polyline',
         text: 'Graph',
         view: true
-      },
-      {
-        to: '/user-profile',
-        icon: 'mdi-account',
-        text: 'User Profile',
-        view: false
       }
     ],
     responsive: false

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -37,9 +37,13 @@
     <v-layout row wrap>
       <v-flex xs6 md6 lg2>
         <v-list two-line>
-          <v-list-tile avatar>
+          <v-list-tile
+              avatar
+              to="/user-profile"
+              :active-class="color"
+          >
             <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="succeeded" />
+              <task status="succeeded" id="settings-node" />
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title class="title font-weight-thin">
@@ -50,13 +54,17 @@
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
-          <v-list-tile avatar>
+          <v-list-tile
+              avatar
+              href="https://cylc.github.io/doc/built-sphinx/index.html"
+              :active-class="color"
+          >
             <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="waiting" />
+              <task status="waiting" id="guide-node" />
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title class="title font-weight-thin">
-                Cylc Hub
+                Suite User Guide
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -66,7 +74,7 @@
         <v-list two-line>
           <v-list-tile avatar>
             <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="succeeded" />
+              <task status="succeeded" id="quickstart-node" />
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title class="title font-weight-thin">
@@ -77,9 +85,13 @@
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
-          <v-list-tile avatar>
+          <v-list-tile
+              avatar
+              href="https://cylc.github.io/documentation.html"
+              :active-class="color"
+          >
             <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="running" :progress=25 />
+              <task status="running" :progress=25 id="documentation-node" />
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title class="title font-weight-thin">
@@ -92,42 +104,39 @@
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
-          <v-list-tile avatar>
-            <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="waiting" />
-            </v-list-tile-avatar>
-            <v-list-tile-content>
-              <v-list-tile-title class="title font-weight-thin">
-                Suite Design Guide
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
         </v-list>
       </v-flex>
     </v-layout>
     <v-layout row wrap>
-      <v-flex xs12 md12 lg4>
-        <v-list align-center>
-          <v-list-tile>
-            <v-list-tile-avatar size="80" style="font-size: 2em;">
-              <task status="failed" />
-            </v-list-tile-avatar>
-            <v-list-tile-content>
-              <v-list-tile-title class="title font-weight-thin">
-                Stop Server
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </v-list>
+      <v-flex xs12 md12 lg2 offset-lg1>
+        <v-list-tile
+            avatar
+            href="/hub/home"
+            :active-class="color"
+        >
+          <v-list-tile-avatar size="80" style="font-size: 2em;">
+            <task status="failed" id="hub-node" />
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title class="title font-weight-thin">
+              Cylc Hub
+            </v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
       </v-flex>
     </v-layout>
   </v-container>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import Task from '@/components/cylc/Task'
 import Job from '@/components/cylc/Job'
 
+function connectNodes (fromNode, toNode) {
+  console.log('TODO?')
+}
+
 export default {
   components: {
     task: Task,
@@ -145,6 +154,14 @@ export default {
       { text: 'Stopped', count: 0 }
     ],
     events: []
-  })
+  }),
+  computed: {
+    ...mapState('app', ['color'])
+  },
+  mounted: function () {
+    const settingsNode = document.getElementById('settings-node').children[0]
+    const suiteDesignGuideNode = document.getElementById('guide-node').children[0]
+    connectNodes(settingsNode, suiteDesignGuideNode)
+  }
 }
 </script>