💄 Site > File tree > Improve style

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

@@ -57,6 +57,11 @@ export default
             }
 
             return visible
+        },
+
+        currentFile()
+        {
+            return this.$store.state.files.currentFile
         }
     },
 

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

@@ -1,3 +1,33 @@
-.text
-    padding-left 12px
-    opacity 0.6
+.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

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>

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

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>
+<style src="./style.styl" lang="stylus"></style>

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')
         }

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
                 }