✨ Site > Add project hub

site/src/components/application/script.js

@@ -1,5 +1,5 @@
 import Connexion from '@/components/connexion'
-import Projects from '@/components/projects'
+import ProjectsHub from '@/components/projects-hub'
 import Project from '@/components/project'
 
 export default
@@ -9,7 +9,7 @@ export default
     components:
     {
         Connexion,
-        Projects,
+        ProjectsHub,
         Project
     },
 
@@ -51,7 +51,6 @@ export default
 
         onHeaderClick()
         {
-            console.log('click')
             this.$store.commit('setFile', null)
         }
     }

site/src/components/application/template.html

@@ -12,7 +12,7 @@
     </a>
 
     <!-- Projects -->
-    <projects></projects>
+    <projects-hub></projects-hub>
 
     <!-- Project -->
     <project v-if="project"></project>

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

@@ -1,7 +1,8 @@
 .file-tree
     position absolute
-    top 80px
+    top 120px
     bottom 0px
     left 0
-    width 25%
+    width 290px
     overflow-y scroll
+    background #26283B

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

@@ -0,0 +1,41 @@
+export default
+{
+    name: 'projects-hub',
+
+    computed:
+    {
+        projects()
+        {
+            return this.$store.state.projects.all
+        },
+
+        currentProject()
+        {
+            return this.$store.state.projects.current
+        },
+
+        projectsCount()
+        {
+            const keys = Object.keys(this.projects)
+            return keys.length
+        },
+
+        downloadUrl()
+        {
+            return `${this.$store.state.url}/${this.currentProject.slug}/download`
+        }
+    },
+
+    created()
+    {
+
+    },
+
+    methods:
+    {
+        onProjectClick(projectSlug)
+        {
+            this.$store.commit('setProject', projectSlug)
+        }
+    }
+}

site/src/components/projects-hub/style.styl

@@ -0,0 +1,81 @@
+.projects-hub
+    position absolute
+    top 80px
+    left 0
+    width 290px
+    height 40px
+    font-size 14px
+    background #2F2E4B
+    color #ffffff
+    z-index 1
+
+    .single-project
+        padding-left 20px
+        line-height 40px
+        opacity 0.6
+
+    .select-projects
+        line-height 40px
+        cursor pointer
+
+        .arrow-down
+            position absolute
+            top 15px
+            right 60px
+
+            &.default
+                display inline-block
+                opacity 0.6
+
+            &.hover
+                display none
+
+        .current
+            padding-left 20px
+
+        .others
+            display none
+            top 100%
+            background #393855
+
+            .other-project
+                display block
+                padding-left 20px
+
+                &:hover
+                    color #4bd1c5
+
+        &:hover
+            .others
+                display block
+
+            .arrow-down
+                &.default
+                    display none
+
+                &.hover
+                    display inline-block
+
+    a.download
+        position absolute
+        top 0
+        right 0
+        width 56px
+        height 40px
+        padding-top 9px
+        padding-left 22px
+
+        .icon
+            &.default
+                display inline-block
+
+            &.hover
+                display none
+
+        &:hover
+            .icon
+                &.default
+                    display none
+
+                &.hover
+                    display inline-block

site/src/components/projects-hub/template.html

@@ -0,0 +1,26 @@
+<div class="projects-hub">
+    <div v-if="projectsCount === 1" class="single-project">
+        {{ currentProject.name }}
+    </div>
+
+    <div v-if="projectsCount > 1" class="select-projects">
+        <div class="current">
+            {{ currentProject.name }}
+        </div>
+
+        <img class="icon arrow-down default" src="../../../static/svg/arrow-down.svg" alt="">
+        <img class="icon arrow-down hover" src="../../../static/svg/arrow-down-hover.svg" alt="">
+
+        <div class="others">
+            <a class="other-project" v-if="currentProject.slug !== project.slug" href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
+                {{ project.name }}
+            </a>
+        </div>
+    </div>
+
+    <a class="download" :href="downloadUrl" download>
+        <img class="icon default" src="../../../static/svg/download.svg" alt="">
+        <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+    </a>
+
+</div>

site/src/components/projects/script.js

@@ -1,25 +0,0 @@
-export default
-{
-    name: 'projects',
-
-    computed:
-    {
-        projects()
-        {
-            return this.$store.state.projects.all
-        }
-    },
-
-    created()
-    {
-
-    },
-
-    methods:
-    {
-        onProjectClick(projectSlug)
-        {
-            this.$store.commit('setProject', projectSlug)
-        }
-    }
-}

site/src/components/projects/template.html

@@ -1,5 +0,0 @@
-<div>
-    <a href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
-        {{ project.name }}
-    </a>
-</div>

site/static/svg/arrow-down-hover.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="8px" viewBox="0 0 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Triangle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
+        <g id="01.1---Hover-styles.cc-+-Rencent-changes-+-btn-dl-project-+-btn-Mark-all-+-btn-liste" transform="translate(-207.000000, -97.000000)" fill="#4BD1C5">
+            <g id="logo/nom-du-projet" transform="translate(-25.000000, -18.000000)">
+                <polygon id="Triangle" points="237 123 232 115 242 115"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/arrow-down.svg

@@ -4,7 +4,7 @@
     <title>Triangle</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.599999964">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
         <g id="01.1---Hover-styles.cc-+-Rencent-changes-+-btn-dl-project-+-btn-Mark-all-+-btn-liste" transform="translate(-207.000000, -97.000000)" fill="#F6F6F6">
             <g id="logo/nom-du-projet" transform="translate(-25.000000, -18.000000)">
                 <polygon id="Triangle" points="237 123 232 115 242 115"></polygon>

test/demo-folder/empty.txt

@@ -1,3 +1,5 @@
 dsfsdf
 dfiuhsdifuhdsfiuh
 dsfsdf
+dsfsdf
+dsfsdf

test/demo-folder/soidjf

@@ -1 +1,2 @@
 dfsdf
+dsfsdfsdf