Add Gallery

resources/js/components/FilesView/DesktopMediaPreviewMenu.vue

@@ -0,0 +1,138 @@
+<template>
+  <div v-if="showMenu" class="menu-wrapper">
+    <div class="item-list">
+      <li @click="renameItem">
+        <p><edit-2-icon class="icon" size="19" /> Rename</p>
+      </li>
+      <li @click="moveItem">
+        <corner-down-right-icon class="icon" size="19" />
+        <p>Move</p>
+      </li>
+      <li @click="deleteItem">
+        <trash-2-icon class="icon" size="19" />
+        <p>Delete</p>
+      </li>
+    </div>
+  </div>
+</template>
+
+<script>
+import { events } from "@/bus";
+import ToolbarButton from "@/components/FilesView/ToolbarButton";
+import { Trash2Icon, Edit2Icon, CornerDownRightIcon } from "vue-feather-icons";
+
+export default {
+  components: {
+    ToolbarButton,
+    Trash2Icon,
+    Edit2Icon,
+    CornerDownRightIcon,
+  },
+  props: ["fileInfoDetail"],
+  data() {
+    return {
+      showMenu: false,
+    };
+  },
+  created() {
+    events.$on("desktopMediaMenu:show", () => {
+      this.showMenu = !this.showMenu;
+    });
+  },
+  methods: {
+    deleteItem() {
+      this.$store.dispatch("deleteItem", this.fileInfoDetail);
+    },
+    moveItem() {
+      // Open move item popup
+      events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
+    },
+    renameItem() {
+      let itemName = prompt(
+        this.$t("popup_rename.title"),
+        this.fileInfoDetail.name
+      );
+
+      if (itemName && itemName !== "") {
+        let item = {
+          unique_id: this.fileInfoDetail.unique_id,
+          type: this.fileInfoDetail.type,
+          name: itemName,
+        };
+
+        this.$store.dispatch("renameItem", item);
+
+        // Change item name if is mobile device or prompted
+        if (this.$isMobile()) {
+          events.$emit("change:name", item);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.menu-wrapper {
+  width: 250px;
+  position: absolute;
+  top: 7%;
+  z-index: 2;
+  @include widget-card();
+  padding: 0px;
+}
+.item-list {
+  list-style: none;
+  color: $text;
+
+  li {
+    width: 100%;
+    height: 49px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    .icon {
+      margin-right: 20px;
+    }
+
+    p {
+      @include font-size(16);
+    }
+    &:hover {
+      background-color: $light_background;
+      color: $theme !important;
+      p,
+      .icon {
+        color: $theme;
+        stroke: $theme !important;
+      }
+    }
+  }
+}
+.item-list {
+  &:first-child() {
+    border-top-left-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .menu-wrapper {
+    background-color: $dark_mode_foreground;
+  }
+  .item-list {
+    color: $dark_mode_text_primary;
+    li:hover {
+      background-color: rgba($theme, 0.1);
+    }
+  }
+}
+</style>