This commit is contained in:
MakingCG
2020-03-29 11:42:32 +02:00
parent 7bed9ad7b8
commit 182091c21a
26 changed files with 234 additions and 135 deletions

View File

@@ -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 {

View File

@@ -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;

View File

@@ -161,7 +161,7 @@
padding: 0;
.menu-option {
font-weight: 600;
font-weight: 700;
@include font-size(15);
padding: 15px 30px;
cursor: pointer;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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>

View File

@@ -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;

View File

@@ -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>

View File

@@ -88,6 +88,7 @@
&::placeholder {
color: $text;
@include font-size(14);
font-weight: 400;
}
&:focus {