🚧 Site > Add file

site/src/components/file/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/file/script.js

@@ -0,0 +1,16 @@
+import Versions from '@/components/versions'
+
+export default
+{
+    name: 'file',
+
+    components:
+    {
+        Versions
+    },
+
+    props:
+    {
+        content: { type: Object }
+    }
+}

site/src/components/file/style.styl

@@ -0,0 +1,12 @@
+.file
+    position absolute
+    top 0
+    right 0
+    width 75%
+    height 100%
+    background rgba(0, 255, 0, 0.3)
+
+header
+    position absolute
+    top 0
+    left 0

site/src/components/file/template.html

@@ -0,0 +1,7 @@
+<div class="file">
+    <header>
+        File
+        {{ content.path.directory }} {{ content.name }}
+    </header>
+    <versions :content="content.versions"></versions>
+</div>

site/src/components/files-tree-file/script.js

@@ -14,5 +14,9 @@ export default
 
     methods:
     {
+        onNameClick()
+        {
+            this.$store.commit('setFile', this.content.data.path.full)
+        }
     }
 }

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

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

site/src/components/project/script.js

@@ -1,4 +1,5 @@
 import FilesTree from '@/components/files-tree'
+import File from '@/components/file'
 
 export default
 {
@@ -6,7 +7,8 @@ export default
 
     components:
     {
-        FilesTree
+        FilesTree,
+        File
     },
 
     computed:
@@ -14,6 +16,10 @@ export default
         project()
         {
             return this.$store.state.project
+        },
+        file()
+        {
+            return this.$store.state.file
         }
     },
 

site/src/components/project/template.html

@@ -1,4 +1,6 @@
 <div>
     {{ project.name }}
+
     <files-tree></files-tree>
+    <file v-if="file" :content="file.data"></file>
 </div>

site/src/components/version/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/version/script.js

@@ -0,0 +1,9 @@
+export default
+{
+    name: 'version',
+
+    props:
+    {
+        content: { type: Object }
+    }
+}

site/src/components/version/template.html

@@ -0,0 +1,3 @@
+<div class="version">
+    {{ content }}
+</div>

site/src/components/versions/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/versions/script.js

@@ -0,0 +1,16 @@
+import Version from '@/components/version'
+
+export default
+{
+    name: 'versions',
+
+    components:
+    {
+        Version
+    },
+
+    props:
+    {
+        content: { type: Array }
+    }
+}

site/src/components/versions/style.styl

@@ -0,0 +1,7 @@
+.versions
+    position absolute
+    top 30px
+    left 0
+    width 25%
+    height 100%
+    background rgba(255, 0, 0, 0.3)

site/src/components/versions/template.html

@@ -0,0 +1,3 @@
+<div class="versions">
+    <version v-for="version of content" :content="version"></version>
+</div>

site/src/store.js

@@ -80,6 +80,16 @@ export default new Vuex.Store({
         deleteFile(state, data)
         {
             state.files.removeFile(data.path.full)
+        },
+
+        setFile(state, data)
+        {
+            const file = state.files.getFile(data)
+
+            if(file)
+            {
+                state.file = file
+            }
         }
     }
 })