✨ Add viewer

site/src/components/file/script.js

@@ -1,4 +1,5 @@
 import Versions from '@/components/versions'
+import Viewer from '@/components/viewer'
 
 export default
 {
@@ -6,7 +7,8 @@ export default
 
     components:
     {
-        Versions
+        Versions,
+        Viewer
     },
 
     props:

site/src/components/file/template.html

@@ -4,4 +4,5 @@
         {{ content.path.directory }} {{ content.name }}
     </header>
     <versions :content="content.versions"></versions>
+    <viewer></viewer>
 </div>

site/src/components/files-tree-file/template.html

@@ -1,5 +1,5 @@
 <div>
-    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
-    </div>
+    </a>
 </div>

site/src/components/files-tree-folder/template.html

@@ -1,7 +1,7 @@
 <div>
-    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
-    </div>
+    </a>
     <div v-show="open">
         <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>
         <files-tree-file v-for="file of content.files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>

site/src/components/version/script.js

@@ -5,5 +5,13 @@ export default
     props:
     {
         content: { type: Object }
+    },
+
+    methods:
+    {
+        onClick()
+        {
+            this.$store.commit('setVersion', this.content)
+        }
     }
 }

site/src/components/version/template.html

@@ -1,3 +1,3 @@
-<div class="version">
-    {{ content }}
-</div>
+<a href="#" class="version" @click.prevent="onClick">
+    {{ content.date }}
+</a>

site/src/components/viewer/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/viewer/script.js

@@ -0,0 +1,16 @@
+export default
+{
+    name: 'viewer',
+
+    components:
+    {
+    },
+
+    computed:
+    {
+        version()
+        {
+            return this.$store.state.version
+        }
+    }
+}

site/src/components/viewer/style.styl

@@ -0,0 +1,7 @@
+.viewer
+    position absolute
+    top 30px
+    right 0
+    width 75%
+    height 100%
+    background rgba(0, 0, 255, 0.3)

site/src/components/viewer/template.html

@@ -0,0 +1,3 @@
+<div class="viewer" v-if="version">
+    <pre><code>{{ version.content }}</code></pre>
+</div>

site/src/store.js

@@ -10,7 +10,8 @@ export default new Vuex.Store({
         projects: {},
         project: null,
         files: new FileTree({ autoWash: true }),
-        file: null
+        file: null,
+        version: null
     },
 
     mutations:
@@ -90,6 +91,11 @@ export default new Vuex.Store({
             {
                 state.file = file
             }
+        },
+
+        setVersion(state, data)
+        {
+            state.version = data
         }
     }
 })