v1.5-alpha.1

2026-04-23 17:50:38 +00:00 · 2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
@@ -0,0 +1,115 @@
+<template>
+    <ul class="link-group">
+        <router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
+            <div class="menu-icon">
+                <hard-drive-icon v-if="link.icon === 'hard-drive'" size="17"></hard-drive-icon>
+                <share-icon v-if="link.icon === 'share'" size="17"></share-icon>
+                <trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
+                <power-icon v-if="link.icon === 'power'" size="17"></power-icon>
+                <settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
+                <upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
+            </div>
+            <b class="menu-link">
+                <span>{{ link.title }}</span>
+                <chevron-right-icon size="15" class="arrow-right"></chevron-right-icon>
+            </b>
+        </router-link>
+    </ul>
+</template>
+
+<script>
+    import {
+        ChevronRightIcon,
+        UploadCloudIcon,
+        HardDriveIcon,
+        SettingsIcon,
+        Trash2Icon,
+        PowerIcon,
+        ShareIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'MenuBar',
+        components: {
+            ChevronRightIcon,
+            UploadCloudIcon,
+            HardDriveIcon,
+            SettingsIcon,
+            Trash2Icon,
+            PowerIcon,
+            ShareIcon,
+        },
+        props: [
+            'navigation'
+        ],
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .link-item {
+        display: flex;
+        text-decoration: none;
+        padding: 17px 0;
+        width: 100%;
+
+        &.power {
+
+            .menu-icon {
+
+                path, line, polyline, rect, circle {
+                    stroke: $red;
+                }
+            }
+
+            .menu-link {
+                color: $red;
+            }
+        }
+
+        .menu-icon {
+            display: block;
+            margin-right: 20px;
+
+            svg {
+                margin-top: -1px;
+                vertical-align: middle;
+            }
+
+            path, line, polyline, rect, circle {
+                stroke: $text;
+            }
+        }
+
+        .menu-link {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: $text;
+
+            span {
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .link-item {
+
+            .menu-icon {
+
+                path, line, polyline, rect, circle {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+
+            .menu-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>
@@ -0,0 +1,108 @@
+<template>
+    <header class="mobile-header">
+
+        <!-- Go back-->
+        <div @click="goBack" class="go-back">
+            <chevron-left-icon size="17" class="icon"></chevron-left-icon>
+        </div>
+
+        <!--Folder Title-->
+        <div class="location-name">{{ $router.currentRoute.meta.title }}</div>
+
+        <!--More Actions-->
+        <div @click="showMobileNavigation" class="mobile-menu">
+            <menu-icon size="17" class="icon"></menu-icon>
+        </div>
+    </header>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    import {
+        ChevronLeftIcon,
+        MenuIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'MenuBar',
+        components: {
+            ChevronLeftIcon,
+            MenuIcon,
+        },
+        methods: {
+            showMobileNavigation() {
+                events.$emit('show:mobile-navigation')
+            },
+            goBack() {
+                this.$router.back();
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-header {
+        padding: 10px 15px;
+        text-align: center;
+        background: white;
+        position: sticky;
+        display: none;
+        z-index: 6;
+        top: 0;
+
+        > div {
+            flex-grow: 1;
+            align-self: center;
+            white-space: nowrap;
+        }
+
+        .go-back {
+            text-align: left;
+        }
+
+        .location-name {
+            line-height: 1;
+            text-align: center;
+            width: 100%;
+            vertical-align: middle;
+            @include font-size(15);
+            color: $text;
+            font-weight: 700;
+            max-width: 220px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
+        .mobile-menu {
+            text-align: right;
+        }
+
+        .icon {
+            vertical-align: middle;
+            margin-top: -4px;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .mobile-header {
+            display: flex;
+            margin-bottom: 25px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-header {
+            background: $dark_mode_background;
+
+            .location-name {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>