✨ Site > Add project hub

2017-09-06 23:07:21 +02:00
parent a0d918e2b1
commit 3faa029537
14 changed files with 174 additions and 39 deletions
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus"></style>
@@ -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)
+        }
+    }
+}
@@ -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
@@ -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>