From 6bcf75ba013e8daec0c6b47e5dcf0fb49fde6a7f Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Wed, 6 Sep 2017 23:26:54 +0200
Subject: [PATCH] :lipstick: Site > File tree > Add style

---
 site/src/components/connexion/index.vue           |  2 +-
 site/src/components/file-icon/index.vue           |  2 +-
 site/src/components/file-icon/style.styl          |  9 +++++++++
 site/src/components/files-tree-file/style.styl    | 12 +++---------
 site/src/components/files-tree-folder/style.styl  | 15 +++------------
 .../components/files-tree-folder/template.html    |  4 ++--
 site/src/components/files-tree/index.vue          |  2 +-
 site/src/components/files-tree/script.js          |  5 +++++
 site/src/components/files-tree/style.styl         |  8 ++++++--
 site/src/components/files-tree/template.html      |  4 ++--
 site/src/components/project/index.vue             |  2 +-
 site/src/components/projects-hub/index.vue        |  2 +-
 site/src/components/projects-hub/script.js        |  5 +++++
 site/src/components/viewer/index.vue              |  2 +-
 14 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/site/src/components/connexion/index.vue b/site/src/components/connexion/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/connexion/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/file-icon/index.vue b/site/src/components/file-icon/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/file-icon/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/file-icon/style.styl b/site/src/components/file-icon/style.styl
index e69de29..c650010 100644
--- a/site/src/components/file-icon/style.styl
+++ b/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%
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/style.styl b/site/src/components/files-tree-file/style.styl
index c650010..79c1915 100644
--- a/site/src/components/files-tree-file/style.styl
+++ b/site/src/components/files-tree-file/style.styl
@@ -1,9 +1,3 @@
-.icon
-    display inline-block
-    width 12px
-    height 12px
-
-    img
-        display inline-block
-        width 100%
-        height 100%
\ No newline at end of file
+.text
+    padding-left 12px
+    opacity 0.6
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/style.styl b/site/src/components/files-tree-folder/style.styl
index 37b4cf2..99804d9 100644
--- a/site/src/components/files-tree-folder/style.styl
+++ b/site/src/components/files-tree-folder/style.styl
@@ -1,12 +1,3 @@
-.name
-    cursor pointer
-
-.icon
-    display inline-block
-    width 12px
-    height 12px
-
-    img
-        display inline-block
-        width 100%
-        height 100%
\ No newline at end of file
+.text
+    padding-left 12px
+    opacity 0.6
diff --git a/site/src/components/files-tree-folder/template.html b/site/src/components/files-tree-folder/template.html
index 0ff3d87..ca9bd02 100644
--- a/site/src/components/files-tree-folder/template.html
+++ b/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>
\ No newline at end of file
diff --git a/site/src/components/files-tree/index.vue b/site/src/components/files-tree/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/files-tree/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/files-tree/script.js b/site/src/components/files-tree/script.js
index d8b3005..522ab5d 100644
--- a/site/src/components/files-tree/script.js
+++ b/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
         }
     },
 
diff --git a/site/src/components/files-tree/style.styl b/site/src/components/files-tree/style.styl
index 7aa4499..94f2db2 100644
--- a/site/src/components/files-tree/style.styl
+++ b/site/src/components/files-tree/style.styl
@@ -3,6 +3,10 @@
     top 120px
     bottom 0px
     left 0
-    width 290px
     overflow-y scroll
-    background #26283B
\ No newline at end of file
+    background #26283B
+    color #ffffff
+
+.content
+    line-height 28px
+    font-size 14px
\ No newline at end of file
diff --git a/site/src/components/files-tree/template.html b/site/src/components/files-tree/template.html
index 02e70d7..2a69616 100644
--- a/site/src/components/files-tree/template.html
+++ b/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>
diff --git a/site/src/components/project/index.vue b/site/src/components/project/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/project/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/projects-hub/index.vue b/site/src/components/projects-hub/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/projects-hub/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/projects-hub/script.js b/site/src/components/projects-hub/script.js
index 1d4787c..09dbfcf 100644
--- a/site/src/components/projects-hub/script.js
+++ b/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`
         }
     },
diff --git a/site/src/components/viewer/index.vue b/site/src/components/viewer/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/viewer/index.vue
+++ b/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>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file