mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 11:00:39 +00:00
split code to components, add arrow functions
This commit is contained in:
Miloš Holba
@@ -1,297 +1,339 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{ top: positionY + 'px', left: positionX + 'px' }"
|
||||
@click="closeAndResetContextMenu"
|
||||
class="contextmenu"
|
||||
v-show="isVisible"
|
||||
ref="contextmenu"
|
||||
>
|
||||
<!--ContextMenu for trash location-->
|
||||
<div>
|
||||
<div
|
||||
v-if="
|
||||
$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')
|
||||
"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
class="contextmenu filePreviewFixed"
|
||||
v-if="showFromPreview"
|
||||
ref="contextmenu"
|
||||
:style="{ top: positionY + 'px', left: positionX + 'px' }"
|
||||
>
|
||||
<ul class="menu-option-group">
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="$store.dispatch('restoreItem', item)"
|
||||
v-if="item"
|
||||
>
|
||||
<div class="icon">
|
||||
<life-buoy-icon size="17"></life-buoy-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.restore") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
|
||||
<div class="icon">
|
||||
<trash-icon size="17"></trash-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.empty_trash") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- ContextMenu for File Preview -->
|
||||
|
||||
<div class="menu-options" id="menu-list">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="renameItem" v-if="item">
|
||||
<div class="icon">
|
||||
<edit-2-icon size="17"></edit-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.rename") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="item">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.move") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div
|
||||
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
:style="{ top: positionY + 'px', left: positionX + 'px' }"
|
||||
@click="closeAndResetContextMenu"
|
||||
class="contextmenu"
|
||||
v-show="isVisible && !showFromPreview"
|
||||
ref="contextmenu"
|
||||
>
|
||||
<ul class="menu-option-group" v-if="item && isFolder">
|
||||
<li class="menu-option" @click="addToFavourites">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
isInFavourites
|
||||
? $t("context_menu.remove_from_favourites")
|
||||
: $t("context_menu.add_to_favourites")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="shareItem">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
item.shared
|
||||
? $t("context_menu.share_edit")
|
||||
: $t("context_menu.share")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div
|
||||
v-if="
|
||||
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
|
||||
$checkPermission('master')
|
||||
"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul
|
||||
class="menu-option-group"
|
||||
v-if="!$isThisLocation(['participant_uploads', 'latest'])"
|
||||
<!--ContextMenu for trash location-->
|
||||
<div
|
||||
v-if="
|
||||
$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')
|
||||
"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="addToFavourites"
|
||||
v-if="item && isFolder"
|
||||
<ul class="menu-option-group">
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="$store.dispatch('restoreItem', item)"
|
||||
v-if="item"
|
||||
>
|
||||
<div class="icon">
|
||||
<life-buoy-icon size="17"></life-buoy-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.restore") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
|
||||
<div class="icon">
|
||||
<trash-icon size="17"></trash-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.empty_trash") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div
|
||||
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul class="menu-option-group" v-if="item && isFolder">
|
||||
<li class="menu-option" @click="addToFavourites">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
isInFavourites
|
||||
? $t("context_menu.remove_from_favourites")
|
||||
: $t("context_menu.add_to_favourites")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="shareItem">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
item.shared
|
||||
? $t("context_menu.share_edit")
|
||||
: $t("context_menu.share")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div
|
||||
v-if="
|
||||
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
|
||||
$checkPermission('master')
|
||||
"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul
|
||||
class="menu-option-group"
|
||||
v-if="!$isThisLocation(['participant_uploads', 'latest'])"
|
||||
>
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
isInFavourites
|
||||
? $t("context_menu.remove_from_favourites")
|
||||
: $t("context_menu.add_to_favourites")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.create_folder") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="moveItem">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.move") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
item.shared
|
||||
? $t("context_menu.share_edit")
|
||||
: $t("context_menu.share")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="addToFavourites"
|
||||
v-if="item && isFolder"
|
||||
>
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
isInFavourites
|
||||
? $t("context_menu.remove_from_favourites")
|
||||
: $t("context_menu.add_to_favourites")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.create_folder") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="moveItem">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.move") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{
|
||||
item.shared
|
||||
? $t("context_menu.share_edit")
|
||||
: $t("context_menu.share")
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with EDITOR permission-->
|
||||
<div
|
||||
v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.create_folder") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="moveItem">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.move") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--ContextMenu for Base location with EDITOR permission-->
|
||||
<div
|
||||
v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.create_folder") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="moveItem">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.move") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.delete") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div
|
||||
v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div
|
||||
v-if="
|
||||
$isThisLocation(['base', 'public']) && $checkPermission('visitor')
|
||||
"
|
||||
id="menu-list"
|
||||
class="menu-options"
|
||||
>
|
||||
<ul class="menu-option-group" v-if="item">
|
||||
<li class="menu-option" @click="ItemDetail">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.detail") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t("context_menu.download") }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -303,6 +345,7 @@ import {
|
||||
FolderPlusIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
StarIcon,
|
||||
LinkIcon,
|
||||
@@ -319,6 +362,7 @@ export default {
|
||||
FolderPlusIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
LinkIcon,
|
||||
StarIcon,
|
||||
@@ -349,13 +393,33 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFromPreview: false,
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
positionY: 0,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
renameItem() {
|
||||
let itemName = prompt(this.$t("popup_rename.title"), this.item.name);
|
||||
|
||||
if (itemName && itemName !== "") {
|
||||
let item = {
|
||||
unique_id: this.item.unique_id,
|
||||
type: this.item.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);
|
||||
}
|
||||
}
|
||||
},
|
||||
moveItem() {
|
||||
// Open move item popup
|
||||
events.$emit("popup:open", { name: "move", item: this.item });
|
||||
@@ -449,8 +513,37 @@ export default {
|
||||
// Show context menu
|
||||
this.isVisible = true;
|
||||
},
|
||||
showFilePreviewMenu() {
|
||||
let container = document.getElementById("fast-preview-menu");
|
||||
if (container) {
|
||||
this.positionX = container.offsetLeft + 16;
|
||||
this.positionY = container.offsetTop + 51;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
item(newValue, oldValue) {
|
||||
if (oldValue != undefined && this.showFromPreview) {
|
||||
this.showFromPreview = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on("actualShowingImage:ContextMenu", (item) => {
|
||||
this.item = item;
|
||||
});
|
||||
},
|
||||
created() {
|
||||
events.$on("showContextMenuPreview:show", (item) => {
|
||||
if (!this.showFromPreview) {
|
||||
this.item = item;
|
||||
this.showFromPreview = !this.showFromPreview;
|
||||
this.showFilePreviewMenu();
|
||||
} else if (this.showFromPreview) {
|
||||
this.showFromPreview = false;
|
||||
this.item = undefined;
|
||||
}
|
||||
});
|
||||
events.$on("contextMenu:show", (event, item) => {
|
||||
// Store item
|
||||
this.item = item;
|
||||
@@ -476,6 +569,10 @@ export default {
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.filePreviewFixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template >
|
||||
<div v-if="showMenu && $checkPermission('master')" 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 { Trash2Icon, Edit2Icon, CornerDownRightIcon } from "vue-feather-icons";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import { events } from "@/bus";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ToolbarButton,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
CornerDownRightIcon,
|
||||
},
|
||||
props: ["fileInfoDetail"],
|
||||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
events.$on("desktopMediaMenu:show", () => {
|
||||
this.showMenu = !this.showMenu;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.showMenu = false;
|
||||
},
|
||||
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>
|
||||
@@ -1,366 +1,411 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon
|
||||
size="17"
|
||||
:class="{ 'is-active': browseHistory.length > 1 }"
|
||||
class="icon-back"
|
||||
></chevron-left-icon>
|
||||
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
|
||||
<span class="back-directory-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
|
||||
<span class="back-directory-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
|
||||
<span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
|
||||
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar/>
|
||||
</div>
|
||||
|
||||
<!--Files controlls-->
|
||||
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButtonUpload
|
||||
:class="{'is-inactive': canUploadInView || ! hasCapacity}"
|
||||
:action="$t('actions.upload')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{'is-inactive': canCreateFolderInView}"
|
||||
@click.native="createFolder"
|
||||
source="folder-plus"
|
||||
:action="$t('actions.create_folder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButton
|
||||
source="move"
|
||||
:class="{'is-inactive': canMoveInView}"
|
||||
:action="$t('actions.move')"
|
||||
@click.native="moveItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="! $isThisLocation(['public'])"
|
||||
source="share"
|
||||
:class="{'is-inactive': canShareInView}"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="trash"
|
||||
:class="{'is-inactive': canDeleteInView}"
|
||||
:action="$t('actions.delete')"
|
||||
@click.native="deleteItem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--View options-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
:action="$t('actions.preview')"
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
@click.stop="folderActions"
|
||||
v-if="
|
||||
browseHistory.length > 1 && $isThisLocation(['base', 'public'])
|
||||
"
|
||||
class="folder-options"
|
||||
id="folder-actions"
|
||||
>
|
||||
<more-horizontal-icon
|
||||
size="14"
|
||||
class="icon-more"
|
||||
></more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar />
|
||||
</div>
|
||||
|
||||
<!--Files controlls-->
|
||||
<div
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<ToolbarButtonUpload
|
||||
:class="{ 'is-inactive': canUploadInView || !hasCapacity }"
|
||||
:action="$t('actions.upload')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ 'is-inactive': canCreateFolderInView }"
|
||||
@click.native="createFolder"
|
||||
source="folder-plus"
|
||||
:action="$t('actions.create_folder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<ToolbarButton
|
||||
source="move"
|
||||
:class="{ 'is-inactive': canMoveInView }"
|
||||
:action="$t('actions.move')"
|
||||
@click.native="moveItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!$isThisLocation(['public'])"
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="trash"
|
||||
:class="{ 'is-inactive': canDeleteInView }"
|
||||
:action="$t('actions.delete')"
|
||||
@click.native="deleteItem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--View options-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
:action="$t('actions.preview')"
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
|
||||
import UploadProgress from '@/components/FilesView/UploadProgress'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import {last} from 'lodash'
|
||||
import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
|
||||
import UploadProgress from "@/components/FilesView/UploadProgress";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import SearchBar from "@/components/FilesView/SearchBar";
|
||||
import { mapGetters } from "vuex";
|
||||
import { events } from "@/bus";
|
||||
import { last } from "lodash";
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory',
|
||||
]),
|
||||
hasCapacity() {
|
||||
export default {
|
||||
name: "ToolBar",
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"FilePreviewType",
|
||||
"fileInfoVisible",
|
||||
"fileInfoDetail",
|
||||
"currentFolder",
|
||||
"browseHistory",
|
||||
"homeDirectory",
|
||||
]),
|
||||
hasCapacity() {
|
||||
// Check if set storage limitation
|
||||
if (!this.$store.getters.config.storageLimit) return true;
|
||||
|
||||
// Check if set storage limitation
|
||||
if (! this.$store.getters.config.storageLimit)
|
||||
return true
|
||||
// Check if is loaded user
|
||||
if (!this.$store.getters.user) return true;
|
||||
|
||||
// Check if is loaded user
|
||||
if (! this.$store.getters.user )
|
||||
return true
|
||||
// Check if user has storage
|
||||
return (
|
||||
this.$store.getters.user.relationships.storage.data.attributes.used <=
|
||||
100
|
||||
);
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: this.homeDirectory.name;
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === "list" ? "th" : "th-list";
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canDeleteInView() {
|
||||
return !this.$isThisLocation([
|
||||
"trash",
|
||||
"trash-root",
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canUploadInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canMoveInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory);
|
||||
|
||||
// Check if user has storage
|
||||
return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return ! this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canDeleteInView() {
|
||||
return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
},
|
||||
canUploadInView() {
|
||||
return ! this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canMoveInView() {
|
||||
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
},
|
||||
canShareInView() {
|
||||
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory)
|
||||
if (!previousFolder) return;
|
||||
|
||||
if (! previousFolder)
|
||||
return
|
||||
|
||||
if (previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
|
||||
} else if (previousFolder.location === 'shared') {
|
||||
this.$store.dispatch('getShared')
|
||||
|
||||
} else {
|
||||
|
||||
if ( this.$isThisLocation('public') ) {
|
||||
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit('folder:actions', this.currentFolder)
|
||||
},
|
||||
deleteItem() {
|
||||
events.$emit('items:delete')
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder()
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
|
||||
} else {
|
||||
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
if (previousFolder.location === "trash-root") {
|
||||
this.$store.dispatch("getTrash");
|
||||
} else if (previousFolder.location === "shared") {
|
||||
this.$store.dispatch("getShared");
|
||||
} else {
|
||||
if (this.$isThisLocation("public")) {
|
||||
this.$store.dispatch("browseShared", [
|
||||
{ folder: previousFolder, back: true, init: false },
|
||||
]);
|
||||
} else {
|
||||
this.$store.dispatch("getFolder", [
|
||||
{ folder: previousFolder, back: true, init: false },
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit("folder:actions", this.currentFolder);
|
||||
},
|
||||
deleteItem() {
|
||||
events.$emit("items:delete");
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder();
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail) {
|
||||
//ADD BY M
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.folder-options {
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
.back-directory-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.folder-options {
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.back-directory-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@media only screen and (max-width: 960px) {
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.toolbar-go-back {
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.folder-options {
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
.folder-options {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,8 +3,15 @@
|
||||
class="file-full-preview-wrapper"
|
||||
v-if="showFullPreview"
|
||||
id="fileFullPreview"
|
||||
ref="filePreview"
|
||||
tabindex="-1"
|
||||
@keydown.esc="showFullPreview = false"
|
||||
@keydown.right="next"
|
||||
@keydown.left="prev"
|
||||
>
|
||||
<FilePreviewNavigationPanel />
|
||||
<MediaFullPreview v-if="isMedia" />
|
||||
<FilePreviewActions />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,21 +20,46 @@ import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
import MediaFullPreview from "@/components/FilesView/MediaFullPreview";
|
||||
import FilePreviewActions from "@/components/FilesView/FilePreviewActions";
|
||||
import FilePreviewNavigationPanel from "@/components/FilesView/FilePreviewNavigationPanel";
|
||||
|
||||
export default {
|
||||
components: { MediaFullPreview },
|
||||
components: {
|
||||
MediaFullPreview,
|
||||
FilePreviewNavigationPanel,
|
||||
FilePreviewActions,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFullPreview: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next: function () {
|
||||
events.$emit("filePreviewAction:next");
|
||||
},
|
||||
prev: function () {
|
||||
events.$emit("filePreviewAction:prev");
|
||||
},
|
||||
},
|
||||
|
||||
updated() {
|
||||
if (this.showFullPreview) {
|
||||
this.$refs.filePreview.focus();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail"]),
|
||||
isMedia() {
|
||||
return this.fileInfoDetail === "image" || "video";
|
||||
return this.fileInfoDetail === "image" || "video" || "audio";
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.showFullPreview) {
|
||||
let preview = document.getElementById("file-wrapper-preview");
|
||||
preview.addEventListener("click", this.hideMenu);
|
||||
}
|
||||
events.$on("fileFullPreview:show", () => {
|
||||
this.showFullPreview = true;
|
||||
});
|
||||
@@ -35,6 +67,12 @@ export default {
|
||||
this.showFullPreview = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
hideMenu() {
|
||||
events.$emit("showContextMenuPreview:hide");
|
||||
console.log("aaaa");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -136,6 +136,9 @@ export default {
|
||||
isVideo() {
|
||||
return this.data.type === "video";
|
||||
},
|
||||
isAudio() {
|
||||
return this.data.type === "audio";
|
||||
},
|
||||
canEditName() {
|
||||
return (
|
||||
!this.$isMobile() &&
|
||||
@@ -229,12 +232,12 @@ export default {
|
||||
return;
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage || this.isVideo) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
// this.$openImageOnNewTab(this.data.file_url)
|
||||
events.$emit("fileFullPreview:show");
|
||||
}
|
||||
|
||||
if (this.isFile && !this.isPdf && !this.isVideo) {
|
||||
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + "." + this.data.mimetype
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<chevron-left-icon
|
||||
class="prev"
|
||||
@click.prevent="prev"
|
||||
size="17"
|
||||
></chevron-left-icon>
|
||||
|
||||
<chevron-right-icon
|
||||
class="next"
|
||||
@click.prevent="next"
|
||||
size="17"
|
||||
></chevron-right-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "vue-feather-icons";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
},
|
||||
|
||||
methods: {
|
||||
next: function () {
|
||||
events.$emit("filePreviewAction:next");
|
||||
},
|
||||
prev: function () {
|
||||
events.$emit("filePreviewAction:prev");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
|
||||
.icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
color: $text;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<!-- <div class="navigation-wrapper"> -->
|
||||
<div class="navigation-panel" v-if="fileInfoDetail">
|
||||
<div class="name-wrapper">
|
||||
<x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon>
|
||||
<div class="name-count-wrapper">
|
||||
<p class="title">{{ formatedName }}</p>
|
||||
|
||||
<span class="file-count">
|
||||
({{
|
||||
showImageIndex +
|
||||
" " +
|
||||
$t("pronouns.of") +
|
||||
" " +
|
||||
filteredFiles.length
|
||||
}})
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
id="fast-preview-menu"
|
||||
class="fast-menu-icon"
|
||||
@click="menuOpen"
|
||||
v-if="$checkPermission('master', 'editor')"
|
||||
>
|
||||
<more-horizontal-icon class="more-icon" size="14">
|
||||
</more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
<div class="created_at-wrapper">
|
||||
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<div class="navigation-tool-wrapper">
|
||||
<ToolbarButton
|
||||
source="download"
|
||||
@click.native="downloadItem"
|
||||
:action="$t('actions.download')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="this.fileInfoDetail.type === 'image'"
|
||||
source="print"
|
||||
:action="$t('actions.print')"
|
||||
@click.native="printMethod()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
import { XIcon, MoreHorizontalIcon } from "vue-feather-icons";
|
||||
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
|
||||
export default {
|
||||
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
|
||||
data() {
|
||||
return {
|
||||
showContextMenu: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail", "data"]),
|
||||
filteredFiles() {
|
||||
let files = [];
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
files.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
return files;
|
||||
},
|
||||
showImageIndex() {
|
||||
let activeIndex = "";
|
||||
this.filteredFiles.filter((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
activeIndex = index + 1;
|
||||
}
|
||||
});
|
||||
return activeIndex;
|
||||
},
|
||||
|
||||
formatedName() {
|
||||
let name = this.fileInfoDetail.name;
|
||||
if (name.lastIndexOf(".") > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
|
||||
length: 20,
|
||||
});
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: 18,
|
||||
});
|
||||
}
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
printMethod() {
|
||||
var tab = document.getElementById("image");
|
||||
var win = window.open("", "", "height=700,width=700");
|
||||
win.document.write(tab.outerHTML);
|
||||
win.document.close();
|
||||
win.print();
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.fileInfoDetail.file_url,
|
||||
this.fileInfoDetail.name + "." + this.fileInfoDetail.mimetype
|
||||
);
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit("mobileMenu:show", "showFromMediaPreview");
|
||||
} else {
|
||||
events.$emit("showContextMenuPreview:show", this.fileInfoDetail);
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit("fileFullPreview:hide");
|
||||
events.$emit("showContextMenuPreview:hide");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.name-wrapper {
|
||||
width: 33%;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
.name-count-wrapper {
|
||||
display: flex;
|
||||
.file-count {
|
||||
@include font-size(15);
|
||||
margin-left: 6px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
.title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
.icon-close {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
color: $text;
|
||||
@include transition(150ms);
|
||||
}
|
||||
.fast-menu-icon {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
&:hover {
|
||||
background: white;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
.more-icon {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
top: 29px;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 890px) {
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 523px) {
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.created_at-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navigation-icons {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
|
||||
.navigation-tool-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@media (max-width: 523px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
height: 6.7%;
|
||||
min-height: 63px;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: $light-background;
|
||||
color: $text;
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_foreground;
|
||||
color: $light-text;
|
||||
.icon-close {
|
||||
color: $light-text;
|
||||
}
|
||||
.fast-menu-icon:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
.title,
|
||||
.file-count {
|
||||
color: $light-text !important;
|
||||
}
|
||||
}
|
||||
.navigation-icons {
|
||||
.button:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +1,20 @@
|
||||
<template>
|
||||
<div class="media-full-preview" @keydown.esc="closeFullPreview">
|
||||
<div class="navigation-panel">
|
||||
<div class="name-wrapper">
|
||||
<div @click="closeFullPreview" class="icon-close">×</div>
|
||||
<div class="name">
|
||||
<p>{{ formatedName }}</p>
|
||||
|
||||
<p class="file-count">
|
||||
({{
|
||||
this.currentIndex +
|
||||
1 +
|
||||
" " +
|
||||
$t("pronouns.of") +
|
||||
" " +
|
||||
this.sliderFile.length
|
||||
}})
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="fast-menu" @click="menuOpen()">
|
||||
<p>...</p>
|
||||
<DesktopMediaPreviewMenu :fileInfoDetail="this.fileInfoDetail" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="created_at-wrapper">
|
||||
<p>{{ currentFile.filesize }}, {{ currentFile.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<ToolbarButton
|
||||
source="download"
|
||||
@click.native="downloadItem"
|
||||
:action="$t('actions.download')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="this.fileInfoDetail.type === 'image'"
|
||||
source="print"
|
||||
:action="$t('actions.print')"
|
||||
@click.native="printMethod()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
|
||||
<div class="file-wrapper">
|
||||
<audio
|
||||
class="file"
|
||||
v-if="fileInfoDetail.type == 'audio'"
|
||||
:src="fileInfoDetail.file_url"
|
||||
controlsList="nodownload"
|
||||
controls
|
||||
></audio>
|
||||
|
||||
<img
|
||||
v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
|
||||
class="file"
|
||||
id="image"
|
||||
:src="currentFile.thumbnail"
|
||||
:src="currentFile.file_url"
|
||||
:style="{ width: sizeWidth, height: sizeHeight }"
|
||||
v-on:load="onLoaded"
|
||||
v-show="loaded"
|
||||
@@ -71,8 +32,6 @@
|
||||
<spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
|
||||
</div>
|
||||
</div>
|
||||
<a class="prev" @click.prevent="prev" href="#">❮ </a>
|
||||
<a class="next" @click.prevent="next" href="#">❯ </a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -80,11 +39,10 @@
|
||||
import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import DesktopMediaPreviewMenu from "@/components/FilesView/DesktopMediaPreviewMenu";
|
||||
import Spinner from "@/components/FilesView/Spinner";
|
||||
|
||||
export default {
|
||||
components: { ToolbarButton, DesktopMediaPreviewMenu, Spinner },
|
||||
components: { ToolbarButton, Spinner },
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 1,
|
||||
@@ -92,7 +50,6 @@ export default {
|
||||
loaded: false,
|
||||
sizeWidth: "",
|
||||
sizeHeight: "",
|
||||
showingFile: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -103,18 +60,6 @@ export default {
|
||||
Math.abs(this.currentIndex) % this.sliderFile.length
|
||||
];
|
||||
},
|
||||
formatedName() {
|
||||
let name = this.currentFile.name;
|
||||
if (name.lastIndexOf(".") > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
|
||||
length: 20,
|
||||
});
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: 20,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
@@ -126,15 +71,32 @@ export default {
|
||||
]);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on("filePreviewAction:next", () => {
|
||||
this.currentIndex += 1;
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
});
|
||||
events.$on("filePreviewAction:prev", () => {
|
||||
this.currentIndex -= 1;
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.filteredFiles();
|
||||
this.imageSizing();
|
||||
},
|
||||
watch: {
|
||||
currentFile() {
|
||||
//HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
|
||||
events.$emit("actualShowingImage:ContextMenu", this.currentFile);
|
||||
},
|
||||
fileInfoDetail() {
|
||||
//FILE DELETE HANDLING
|
||||
if (!this.fileInfoDetail) {
|
||||
if (this.data.length == 0) {
|
||||
events.$emit("fileFullPreview:hide");
|
||||
@@ -143,11 +105,11 @@ export default {
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
|
||||
this.sliderFile = [];
|
||||
this.filteredFiles();
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
data(newValue, oldValue) {
|
||||
//MOVE ITEM HANDLING
|
||||
if (newValue != oldValue) {
|
||||
this.sliderFile = [];
|
||||
this.filteredFiles();
|
||||
@@ -164,23 +126,10 @@ export default {
|
||||
this.sizeHeight = "100%";
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit("mobileMenu:show", "showFromMediaPreview");
|
||||
} else {
|
||||
events.$emit("desktopMediaMenu:show");
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit("fileFullPreview:hide");
|
||||
},
|
||||
printMethod() {
|
||||
var tab = document.getElementById("image");
|
||||
var win = window.open("", "", "height=700,width=700");
|
||||
win.document.write(tab.outerHTML);
|
||||
win.document.close();
|
||||
win.print();
|
||||
},
|
||||
|
||||
filteredFiles() {
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
@@ -199,40 +148,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.currentFile.file_url,
|
||||
this.currentFile.name + "." + this.currentFile.mimetype
|
||||
);
|
||||
},
|
||||
|
||||
next: function () {
|
||||
this.currentIndex += 1;
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
},
|
||||
prev: function () {
|
||||
this.currentIndex -= 1;
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1;
|
||||
}
|
||||
},
|
||||
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.currentFile,
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.currentFile,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -242,84 +157,10 @@ export default {
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.media-full-preview {
|
||||
height: 100%;
|
||||
height: 93%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
.name {
|
||||
display: flex;
|
||||
}
|
||||
.icon-close {
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
color: $text;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fast-menu {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
p {
|
||||
margin-top: -10px;
|
||||
}
|
||||
p:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 750px) {
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.created_at-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-icons {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
& > * {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
@@ -340,7 +181,7 @@ export default {
|
||||
|
||||
.file-wrapper-preview {
|
||||
width: 100%;
|
||||
height: 93%;
|
||||
height: 100%;
|
||||
padding: 30px 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@@ -360,47 +201,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 40px;
|
||||
height: 40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
padding: 8px;
|
||||
color: $text;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
// border-radius: 0 4px 4px 0;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_foreground;
|
||||
color: $light-text;
|
||||
.icon-close {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
.file-wrapper-preview {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user