solved issues: FullFilePreview menu , MultiSelected move action ; refactoring contextMenu

2026-04-28 02:50:39 +00:00 · 2020-12-20 16:41:30 +01:00
parent 00213824f1
commit e6ff90f6fc
13 changed files with 529 additions and 556 deletions
@@ -0,0 +1,107 @@
+<template>
+    <li class="menu-option">
+        <div class="icon">
+            <trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
+            <life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
+            <trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
+            <eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
+            <download-cloud-icon v-if="icon === 'download'" size="17"></download-cloud-icon>
+            <edit2-icon v-if="icon === 'rename'" size="17"></edit2-icon>
+            <corner-down-right-icon v-if="icon === 'move-item'" size="17"></corner-down-right-icon>
+            <link-icon v-if="icon === 'share'" size="17"></link-icon>
+            <star-icon v-if="icon === 'favourites'" size="17"></star-icon>
+            <folder-plus-icon v-if="icon === 'create-folder'" size="17"></folder-plus-icon>
+            <smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
+        </div>
+        <div class="text-label">
+            {{ title }}
+        </div>
+    </li>
+</template>
+
+<script>
+import {
+    CornerDownRightIcon,
+    DownloadCloudIcon,
+    FolderPlusIcon,
+    LifeBuoyIcon,
+    Trash2Icon,
+    Edit2Icon,
+    TrashIcon,
+    StarIcon,
+    LinkIcon,
+    EyeIcon,
+    SmileIcon
+} from 'vue-feather-icons'
+
+    export default {
+        name: 'Option',
+        props:['title' , 'icon'],
+        components: {
+            CornerDownRightIcon,
+            DownloadCloudIcon,
+            FolderPlusIcon,
+            LifeBuoyIcon,
+            Trash2Icon,
+            SmileIcon,
+            Edit2Icon,
+            TrashIcon,
+            LinkIcon,
+            StarIcon,
+            EyeIcon,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.menu-option {
+    white-space: nowrap;
+    font-weight: 700;
+    @include font-size(14);
+    padding: 15px 20px;
+    cursor: pointer;
+    width: 100%;
+    color: $text;
+    display: flex;
+    align-items: center;
+
+    .icon {
+        margin-right: 20px;
+        line-height: 0;
+    }
+
+    .text-label {
+        @include font-size(16);
+    }
+
+    &:hover {
+        background: $light_background;
+
+        .text-label {
+            color: $theme;
+        }
+
+        path,
+        line,
+        polyline,
+        rect,
+        circle,
+        polygon {
+            stroke: $theme;
+        }
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .menu-option {
+        color: $dark_mode_text_primary;
+
+        &:hover {
+            background: rgba($theme, 0.1);
+        }
+    } 
+}
+
+</style>