From 62d0eb31ffbf68ae4332f9a4445a4273ff8a61c5 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Thu, 7 Sep 2017 01:35:17 +0200
Subject: [PATCH] :lipstick: Site > File tree > Improve style

---
 site/src/components/files-tree-file/script.js |  5 +++
 .../src/components/files-tree-file/style.styl | 36 +++++++++++++++++--
 .../components/files-tree-file/template.html  |  6 ++--
 .../components/files-tree-folder/style.styl   | 20 +++++++++--
 site/src/components/viewer/index.vue          |  2 +-
 site/src/components/viewer/script.js          |  2 +-
 site/src/store/modules/files.js               | 14 +++++++-
 7 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/site/src/components/files-tree-file/script.js b/site/src/components/files-tree-file/script.js
index b0e2d4f..90fc40a 100644
--- a/site/src/components/files-tree-file/script.js
+++ b/site/src/components/files-tree-file/script.js
@@ -57,6 +57,11 @@ export default
             }
 
             return visible
+        },
+
+        currentFile()
+        {
+            return this.$store.state.files.currentFile
         }
     },
 
diff --git a/site/src/components/files-tree-file/style.styl b/site/src/components/files-tree-file/style.styl
index 79c1915..2bdda9a 100644
--- a/site/src/components/files-tree-file/style.styl
+++ b/site/src/components/files-tree-file/style.styl
@@ -1,3 +1,33 @@
-.text
-    padding-left 12px
-    opacity 0.6
\ No newline at end of file
+.name
+    display block
+
+    .text
+        padding-left 12px
+        opacity 0.6
+
+    .notif
+        display inline-block
+        position relative
+        top -1px
+        padding-left 3px
+        padding-right 3px
+        margin-left 4px
+        border-radius: 6px;
+        color #fff
+        font-size 8px
+        height 11px
+        line-height 11px
+
+        &.new
+            background-image linear-gradient(-90deg, #6E67FD 0%, #9B52F5 100%)
+
+        &.changed
+            background-image linear-gradient(-90deg, #FF708F 0%, #FE846F 100%)
+
+    &.active
+        background #2D2D49
+
+    &:hover
+        .text
+            opacity 1
+            color #4bd1c5
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/template.html b/site/src/components/files-tree-file/template.html
index 994895f..b818afe 100644
--- a/site/src/components/files-tree-file/template.html
+++ b/site/src/components/files-tree-file/template.html
@@ -1,12 +1,12 @@
 <div v-show="visible">
-    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :class="[ currentFile && currentFile.id === content.id ? 'active' : '' ]" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" :extension="content.extension"></file-icon>
         <span class="text">
             <template v-for="(letter, key) in content.name">
                 <span :style="matchingPositions.indexOf(key) !== -1 ? 'font-weight:bold;' : ''">{{ letter }}</span>
             </template>
         </span>
-        <span v-if="content.isNew" class="new">(new)</span>
-        <span v-if="content.isChanged && !content.isNew" class="changed">(changed)</span>
+        <span v-if="content.isNew" class="notif new">new</span>
+        <span v-if="content.isChanged && !content.isNew" class="notif changed">changed</span>
     </a>
 </div>
\ 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 99804d9..4e8ac08 100644
--- a/site/src/components/files-tree-folder/style.styl
+++ b/site/src/components/files-tree-folder/style.styl
@@ -1,3 +1,17 @@
-.text
-    padding-left 12px
-    opacity 0.6
+.name
+    display block
+
+    .icon
+        opacity 0.6
+
+    .text
+        padding-left 12px
+        opacity 0.6
+
+    &:hover
+        .icon
+            opacity 1
+
+        .text
+            opacity 1
+            color #4bd1c5
\ No newline at end of file
diff --git a/site/src/components/viewer/index.vue b/site/src/components/viewer/index.vue
index 246515d..a6fe49a 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" scoped></style>
\ No newline at end of file
+<style src="./style.styl" lang="stylus"></style>
\ No newline at end of file
diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js
index 1dd0ce6..5a279aa 100644
--- a/site/src/components/viewer/script.js
+++ b/site/src/components/viewer/script.js
@@ -75,7 +75,7 @@ export default
             const question = {}
             question.line = index
             question.version = this.version.date
-            question.file = this.$store.state.files.current.path.full
+            question.file = this.$store.state.files.currentFile.path.full
             this.$store.commit('setQuestion', question)
             this.$store.commit('openChat')
         }
diff --git a/site/src/store/modules/files.js b/site/src/store/modules/files.js
index 98b0612..cc85bec 100644
--- a/site/src/store/modules/files.js
+++ b/site/src/store/modules/files.js
@@ -28,6 +28,7 @@ export default {
         {
             data.isNew = true
             data.isChanged = false
+            data.isActive = false
             state.tree.addFile(data.path.full, data)
         },
 
@@ -41,7 +42,12 @@ export default {
             // Null file
             if(!data)
             {
-                state.currentFile = data
+                if(state.currentFile)
+                {
+                    state.currentFile.isActive = false
+                }
+
+                state.currentFile = null
             }
 
             // File path
@@ -53,7 +59,13 @@ export default {
                 // No current file or file different than current
                 if(!state.currentFile || state.currentFile.id !== file.id)
                 {
+                    if(state.currentFile)
+                    {
+                        state.currentFile.isActive = false
+                    }
+
                     state.currentFile = file
+                    state.currentFile.isActive = true
                     state.currentFile.isNew = false
                     state.currentFile.isChanged = false
                 }