💄 Site > File tree > Add style

site/src/components/connexion/index.vue

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

site/src/components/file-icon/index.vue

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

site/src/components/file-icon/style.styl

@@ -0,0 +1,9 @@
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%

site/src/components/files-tree-file/style.styl

@@ -1,9 +1,3 @@
-.icon
+.text
-    display inline-block
+    padding-left 12px
-    width 12px
+    opacity 0.6
-    height 12px
-
-    img
-        display inline-block
-        width 100%
-        height 100%

site/src/components/files-tree-folder/style.styl

@@ -1,12 +1,3 @@
-.name
+.text
-    cursor pointer
+    padding-left 12px
-
+    opacity 0.6
-.icon
-    display inline-block
-    width 12px
-    height 12px
-
-    img
-        display inline-block
-        width 100%
-        height 100%

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

@@ -1,5 +1,5 @@
 <div v-show="visible">
-    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :style="{ paddingLeft:(depth + 1) * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" extension="folder-active" v-show="open"></file-icon>
         <file-icon class="icon" extension="folder" v-show="!open"></file-icon>
         <span class="text">
@@ -10,6 +10,6 @@
     </a>
     <div v-show="open">
         <files-tree-folder class="js-child" v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1" :directory="fullPath + '/'"></files-tree-folder>
-        <files-tree-file class="js-child" v-for="file of files" :key="file.path.full" :content="file" :depth="depth + 1"></files-tree-file>
+        <files-tree-file class="js-child" v-for="file of files" :key="file.path.full" :content="file" :depth="depth + 2"></files-tree-file>
     </div>
 </div>

site/src/components/files-tree/index.vue

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

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

@@ -23,6 +23,11 @@ export default
         files()
         {
             return this.$store.state.files.tree
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 

site/src/components/files-tree/style.styl

@@ -3,6 +3,10 @@
     top 120px
     bottom 0px
     left 0
-    width 290px
     overflow-y scroll
     background #26283B
+    color #ffffff
+
+.content
+    line-height 28px
+    font-size 14px

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

@@ -1,6 +1,6 @@
-<div class="file-tree">
+<div class="file-tree" :style="`right: calc(100vw - 290px - ${scrollbarWidth}px);`">
     <input type="text" v-model="searchValue">
-    <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+    <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
     <div>
          <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
     </div>

site/src/components/project/index.vue

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

site/src/components/projects-hub/index.vue

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

site/src/components/projects-hub/script.js

@@ -22,6 +22,11 @@ export default
 
         downloadUrl()
         {
+            if(!this.currentProject)
+            {
+                return ''
+            }
+
             return `${this.$store.state.url}/${this.currentProject.slug}/download`
         }
     },

site/src/components/viewer/index.vue

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