🎨 Add site and rename app

2017-12-27 15:52:29 +01:00
parent 0e491b0660
commit 657fa4546d
224 changed files with 206 additions and 42 deletions
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
@@ -0,0 +1,76 @@
+import FileIcon from '@/components/file-icon/'
+
+export default
+{
+    name: 'files-tree-file',
+
+    components:
+    {
+        FileIcon
+    },
+
+    props:
+    {
+        depth: { type: Number, default: 0 },
+        content: { type: Object }
+    },
+
+    data()
+    {
+        return {
+            matchingPositions: []
+        }
+    },
+
+    computed:
+    {
+        visible()
+        {
+            let visible = true
+
+            // Get and clean search
+            const search = this.$store.state.files.search.replace(/ /g, '').toLowerCase()
+
+            // If no search value, return true
+            if(search !== '')
+            {
+                // Set up fuzzy search
+                const text = this.content.path.full.replace(/^\.\//, '')
+                let searchPosition = 0
+                this.matchingPositions = []
+
+                // Go through each character in the text
+                for(let n = 0; n < text.length; n++)
+                {
+                    // If match a character in the search, highlight it
+                    if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                    {
+                        searchPosition += 1
+                        this.matchingPositions.push(n - this.content.path.directory.length + 1)
+                    }
+                }
+
+                if(searchPosition !== search.length)
+                {
+                    visible = false
+                }
+            }
+
+            return visible
+        },
+
+        currentFile()
+        {
+            return this.$store.state.files.currentFile
+        }
+    },
+
+    methods:
+    {
+        onNameClick()
+        {
+            this.$store.commit('setFile', this.content.path.full)
+            this.$store.commit('setLine', null)
+        }
+    }
+}
@@ -0,0 +1,43 @@
+.name
+    display block
+    white-space nowrap
+
+    .text
+        padding-left 12px
+        padding-right 6px
+
+        .letter
+            opacity 0.6
+
+            &.highlight
+                opacity 1
+                font-weight bold
+
+    .notif
+        display inline-block
+        position relative
+        top -1px
+        padding-left 3px
+        padding-right 3px
+        margin-left 0px
+        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
+            color #4bd1c5
+
+            .letter
+                opacity 1
@@ -0,0 +1,12 @@
+<div v-show="visible">
+    <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 class="letter" :class="[matchingPositions.indexOf(key) !== -1 ? 'highlight' : '']">{{ letter }}</span>
+            </template>
+        </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>