mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
bugfixes
This commit is contained in:
@@ -110,7 +110,7 @@
|
||||
transform: translateY(-50%) scale(1);
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
|
||||
box-shadow: $light_mode_popup_shadow;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
@@ -160,7 +160,7 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
.button-base {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.15s all ease;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -161,7 +161,7 @@
|
||||
padding: 0;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
@include font-size(15);
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
.back-directory-title {
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
|
||||
@@ -172,8 +172,8 @@
|
||||
word-break: break-all;
|
||||
|
||||
.name {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
|
||||
span {
|
||||
display: block;
|
||||
@include font-size(16);
|
||||
@include font-size(14);
|
||||
font-weight: bold;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@@ -229,7 +229,7 @@
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
font-weight: 100;
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
@@ -244,7 +244,7 @@
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(15);
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -244,7 +244,7 @@
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
font-weight: 100;
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
@@ -260,7 +260,7 @@
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(15);
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,58 +1,67 @@
|
||||
<template>
|
||||
<transition name="context-menu">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
ref="contextmenu"
|
||||
class="options"
|
||||
@click="closeAndResetContextMenu"
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
<ul class="menu-options">
|
||||
<li class="menu-option"
|
||||
@click="addToFavourites"
|
||||
v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
|
||||
>
|
||||
{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
|
||||
</li>
|
||||
<div class="options-wrapper">
|
||||
<transition name="context-menu">
|
||||
<div
|
||||
v-if="isVisible"
|
||||
ref="contextmenu"
|
||||
class="options"
|
||||
@click="closeAndResetContextMenu"
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
<ul class="menu-options">
|
||||
<li class="menu-option"
|
||||
@click="addToFavourites"
|
||||
v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
|
||||
>
|
||||
{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
|
||||
</li>
|
||||
|
||||
<li class="menu-option"
|
||||
@click="$store.dispatch('restoreItem', fileInfoDetail)"
|
||||
v-if="fileInfoDetail && $isTrashLocation()"
|
||||
>
|
||||
Restore
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="renameItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Rename
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="moveItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Move
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="downloadItem"
|
||||
v-if="isFile || isImage"
|
||||
>
|
||||
Download
|
||||
</li>
|
||||
<li
|
||||
class="menu-option delete"
|
||||
@click="removeItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
<li class="menu-option"
|
||||
@click="$store.dispatch('restoreItem', fileInfoDetail)"
|
||||
v-if="fileInfoDetail && $isTrashLocation()"
|
||||
>
|
||||
Restore
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="renameItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Rename
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="moveItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Move
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="downloadItem"
|
||||
v-if="isFile || isImage"
|
||||
>
|
||||
Download
|
||||
</li>
|
||||
<li
|
||||
class="menu-option delete"
|
||||
@click="removeItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
class="vignette"
|
||||
@click="closeAndResetContextMenu"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -158,7 +167,7 @@
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.vignette {
|
||||
background: rgba(17, 20, 29, 0.5);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -181,26 +190,24 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
margin-top: 10px;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15px;
|
||||
@include font-size(15);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $light_background;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
@@ -218,10 +225,10 @@
|
||||
.options {
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_foreground;
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-option {
|
||||
border-color: rgba($dark_mode_background, .5);
|
||||
border-color: $dark_mode_border_color;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
@@ -229,12 +236,19 @@
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active {
|
||||
transition: all 350ms ease;
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
transition: all 150ms ease;
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
@@ -242,4 +256,8 @@
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -130,9 +130,9 @@
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
@include font-size(16);
|
||||
color: $text;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -40,7 +40,7 @@ export default {
|
||||
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
|
||||
|
||||
.progress-bar {
|
||||
background: $dark_mode_background;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
&::placeholder {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
Reference in New Issue
Block a user