nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-17 15:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

bugfixes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/app-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

2
public/css/app.css vendored
View File

@@ -1 +1 @@
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap);

2
public/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

4
resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
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 {

2
resources/js/components/VueFileManagerComponents/FilesView/ButtonBase.vue
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;

2
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
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;

4
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
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;

6
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
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;
}

4
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
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;

4
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
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;

150
resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
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>

4
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
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;

2
resources/js/components/VueFileManagerComponents/FilesView/ProgressBar.vue
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>

1
resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
View File

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

15
resources/js/components/VueFileManagerComponents/Others/PopupMoveItem.vue
View File

@@ -142,7 +142,7 @@
}
.popup-wrapper {
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
box-shadow: $light_mode_popup_shadow;
border-radius: 8px;
background: white;
margin: auto;
@@ -154,8 +154,8 @@
padding: 20px;
.title {
@include font-size(20);
font-weight: 900;
@include font-size(18);
font-weight: 700;
color: $text;
}
@@ -276,7 +276,8 @@
@media (prefers-color-scheme: dark) {
.popup-wrapper {
background: $dark_mode_foreground;
background: $dark_mode_background;
box-shadow: $dark_mode_popup_shadow;
}
.popup-header {
@@ -289,4 +290,10 @@
}
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.popup-wrapper {
background: $dark_mode_background;
}
}
</style>

6
resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
View File

@@ -21,4 +21,10 @@
display: block;
margin-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
.text-label {
color: rgba($dark_mode_text_secondary, .4);
}
}
</style>

2
resources/js/components/VueFileManagerComponents/Others/ThumbnailItem.vue
View File

@@ -73,7 +73,7 @@
.subtitle {
@include font-size(11);
font-weight: 100;
font-weight: 400;
color: $text-muted;
display: block;
}

27
resources/js/components/VueFileManagerComponents/Others/TreeMenu.vue
View File

@@ -70,11 +70,12 @@
.folder-item {
display: block;
padding: 10px 20px;
padding: 15px 20px;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
border-bottom: 1px solid $light_mode_border;
.icon {
@include font-size(18);
@@ -140,13 +141,25 @@
@media (prefers-color-scheme: dark) {
.folder-item {
border-bottom: 1px solid $dark_mode_border_color;
.label {
color: $dark_mode_text_primary;
}
&:hover {
background: $dark_mode_background;
background: $dark_mode_foreground;
}
&.is-selected {
background: rgba($theme, .1);
}
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
.icon-chevron {
@@ -162,4 +175,14 @@
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.folder-item {
&:hover,
&.is-selected {
background: rgba($theme, .1);
}
}
}
</style>

9
resources/js/components/VueFileManagerComponents/Others/Vignette.vue
View File

@@ -22,14 +22,13 @@
},
created() {
// Hide vignette
events.$on('popup:close', () => this.isVisibleVignette = false)
// Show vignette
events.$on('popup:move-item', () => this.isVisibleVignette = true)
events.$on('alert:open', () => this.isVisibleVignette = true)
events.$on('success:open', () => this.isVisibleVignette = true)
events.$on('mobileMenu:show', () => this.isVisibleVignette = true)
// Hide vignette
events.$on('popup:close', () => this.isVisibleVignette = false)
}
}
</script>
@@ -44,7 +43,7 @@
left: 0;
bottom: 0;
z-index: 19;
background: rgba(17, 20, 29, 0.5);
background: $light_mode_vignette;
}
// Dark mode

88
resources/js/components/VueFileManagerComponents/Sidebar.vue
View File

@@ -177,7 +177,7 @@
#sidebar {
position: relative;
flex: 0 0 295px;
border-right: 1px solid $light_background;
border-right: 1px solid $light_mode_border;
}
.content-scroller {
@@ -198,37 +198,18 @@
}
.menu-list-wrapper {
margin-bottom: 25px;
margin-bottom: 20px;
.menu-list {
.menu-list-item {
display: block;
padding: 10px 15px 10px 25px;
padding: 8px 15px 8px 25px;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
&:hover {
background: rgba($theme, .1);
//background: $light_background;
.icon {
path {
fill: $theme;
}
}
.label {
color: $theme;
}
.delete-icon {
display: block;
}
}
.icon {
@include font-size(13);
width: 15px;
@@ -254,7 +235,7 @@
}
.label {
@include font-size(15);
@include font-size(14);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
@@ -263,6 +244,24 @@
text-overflow: ellipsis;
display: inline-block;
}
&:hover {
background: rgba($theme, .1);
.icon {
path {
fill: $theme;
}
}
.label {
color: $theme;
}
.delete-icon {
display: block;
}
}
}
}
@@ -280,14 +279,25 @@
border: 2px dashed transparent;
.menu-list-item {
padding: 10px 13px 10 23px;
padding: 8px 23px;
.icon {
@include font-size(20);
margin-right: 5px;
@include font-size(14);
width: 20px;
path {
fill: $theme;
fill: $text;
}
}
&:hover {
background: rgba($theme, .1);
.icon {
path {
fill: $theme;
}
}
}
}
@@ -356,7 +366,7 @@
padding: 10px 26px;
.label {
@include font-size(16);
@include font-size(14);
}
}
}
@@ -368,8 +378,7 @@
@media (prefers-color-scheme: dark) {
#sidebar {
border-color: $dark_mode_foreground;
background: $dark_mode_foreground;
border-color: $dark_mode_border_color;
}
.menu-list-wrapper {
@@ -380,16 +389,35 @@
color: $dark_mode_text_primary;
}
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
&:hover {
background: rgba($theme, .1);
}
}
&.favourites {
.menu-list .menu-list-item {
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
}
}
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px){
@media (prefers-color-scheme: dark) and (max-width: 690px) {
#sidebar {
border-color: $dark_mode_background;
background: $dark_mode_background;

5
resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue
View File

@@ -58,11 +58,10 @@ export default {
<style scoped lang="scss">
@import "@assets/app.scss";
.file-item {
display: flex;
align-items: center;
padding: 8px 15px;
padding: 10px 15px;
@include transition(150ms);
cursor: pointer;
@@ -85,7 +84,7 @@ export default {
.item-size,
.item-length {
@include font-size(11);
font-weight: 100;
font-weight: 400;
color: $text-muted;
display: block;
}

7
resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
View File

@@ -74,8 +74,13 @@
.size {
@include font-size(10);
}
}
}
.title {
@media (prefers-color-scheme: dark) {
.storage-size {
.storage-info .title {
color: $dark_mode_text_primary;
}
}

1
resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
View File

@@ -103,6 +103,7 @@
color: $theme;
display: block;
margin-top: 2px;
font-weight: 600;
}
}

2
resources/sass/app.scss vendored
View File

@@ -1,5 +1,5 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
// Variables
@import 'vue-file-manager/_variables';

13
resources/sass/vue-file-manager/_variables.scss vendored
View File

@@ -1,18 +1,23 @@
// Colors
$text: #35495d;
$text-muted: lighten($text, 25%);
$text: #1b2539;
$text-muted: #667b90;
$border: #F8F8FC;
$light_mode_border: rgba(0, 0, 0, 0.02);
$theme: #00BC7E;
$danger: #d22323;
$light_text: #A4ADB6;
$light_background: #f6f6f6;
$dark_background: #EBEBEB;
$shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
$light_mode_popup_shadow: 0 10px 50px rgba(0, 0, 0, .10);
$light_mode_vignette: rgba(255, 255, 255, 0.80);
// Dark Mode
$dark_mode_vignette: rgba(0, 0, 0, 0.3);
$dark_mode_background: #1a1f25;
$dark_mode_foreground: #202733;
$dark_mode_text_primary: #B8C4D0;
$dark_mode_text_secondary: #6A8BAD;
$dark_mode_text_secondary: #667b90;
$dark_mode_vignette: rgba(22, 23, 27, 0.70);
$dark_mode_popup_shadow: 0 10px 30px rgba(0, 0, 0, .3);
$dark_mode_border_color: rgba(255, 255, 255, 0.02);

7
resources/views/index.blade.php
View File

@@ -10,6 +10,13 @@
<link rel="icon" href="{{ asset('favicon.ico') }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-title" content="{{ config('vuefilemanager.app_name') }}">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ asset('assets/images/app-icon.png') }}">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
</head>
<body>
<div id="app"></div>