nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-27 06:54:41 +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
public/assets/images/app-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

public/css/app.css
Vendored
+1 -1
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);
public/js/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
+2 -2
View File
@@ -110,7 +110,7 @@
transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1);
margin: 0 auto; margin: 0 auto;
padding: 40px; padding: 40px;
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2); box-shadow: $light_mode_popup_shadow;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
background: white; background: white;
@@ -160,7 +160,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.popup-wrapper { .popup-wrapper {
background: $dark_mode_foreground; background: $dark_mode_background;
} }
.popup-content { .popup-content {
resources/js/components/VueFileManagerComponents/FilesView/ButtonBase.vue
+1 -1
View File
@@ -16,7 +16,7 @@
.button-base { .button-base {
@include font-size(16); @include font-size(16);
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: 0.15s all ease; transition: 0.15s all ease;
border-radius: 8px; border-radius: 8px;
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+1 -1
View File
@@ -161,7 +161,7 @@
padding: 0; padding: 0;
.menu-option { .menu-option {
font-weight: 600; font-weight: 700;
@include font-size(15); @include font-size(15);
padding: 15px 30px; padding: 15px 30px;
cursor: pointer; cursor: pointer;
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+2 -2
View File
@@ -150,7 +150,7 @@
vertical-align: middle; vertical-align: middle;
@include font-size(17); @include font-size(17);
color: $text; color: $text;
font-weight: 600; font-weight: 700;
max-width: 220px; max-width: 220px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -168,7 +168,7 @@
.back-directory-title { .back-directory-title {
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 700;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
+3 -3
View File
@@ -172,8 +172,8 @@
word-break: break-all; word-break: break-all;
.name { .name {
@include font-size(16); @include font-size(14);
font-weight: 600; font-weight: 700;
color: $text; color: $text;
} }
@@ -205,7 +205,7 @@
span { span {
display: block; display: block;
@include font-size(16); @include font-size(14);
font-weight: bold; font-weight: bold;
color: $text; color: $text;
} }
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
+2 -2
View File
@@ -229,7 +229,7 @@
.item-size, .item-size,
.item-length { .item-length {
@include font-size(12); @include font-size(12);
font-weight: 100; font-weight: 400;
color: $text-muted; color: $text-muted;
display: block; display: block;
} }
@@ -244,7 +244,7 @@
.name { .name {
color: $text; color: $text;
@include font-size(15); @include font-size(14);
font-weight: 700; font-weight: 700;
max-height: 40px; max-height: 40px;
overflow: hidden; overflow: hidden;
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+2 -2
View File
@@ -244,7 +244,7 @@
.item-size, .item-size,
.item-length { .item-length {
@include font-size(12); @include font-size(12);
font-weight: 100; font-weight: 400;
color: $text-muted; color: $text-muted;
display: block; display: block;
} }
@@ -260,7 +260,7 @@
.name { .name {
color: $text; color: $text;
@include font-size(15); @include font-size(14);
font-weight: 700; font-weight: 700;
max-height: 40px; max-height: 40px;
overflow: hidden; overflow: hidden;
resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
+84 -66
View File
@@ -1,58 +1,67 @@
<template> <template>
<transition name="context-menu"> <div class="options-wrapper">
<div <transition name="context-menu">
v-show="isVisible" <div
ref="contextmenu" v-if="isVisible"
class="options" ref="contextmenu"
@click="closeAndResetContextMenu" class="options"
> @click="closeAndResetContextMenu"
<div class="menu-wrapper"> >
<ul class="menu-options"> <div class="menu-wrapper">
<li class="menu-option" <ul class="menu-options">
@click="addToFavourites" <li class="menu-option"
v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'" @click="addToFavourites"
> v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }} >
</li> {{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
</li>
<li class="menu-option" <li class="menu-option"
@click="$store.dispatch('restoreItem', fileInfoDetail)" @click="$store.dispatch('restoreItem', fileInfoDetail)"
v-if="fileInfoDetail && $isTrashLocation()" v-if="fileInfoDetail && $isTrashLocation()"
> >
Restore Restore
</li> </li>
<li <li
class="menu-option" class="menu-option"
@click="renameItem" @click="renameItem"
v-if="fileInfoDetail" v-if="fileInfoDetail"
> >
Rename Rename
</li> </li>
<li <li
class="menu-option" class="menu-option"
@click="moveItem" @click="moveItem"
v-if="fileInfoDetail" v-if="fileInfoDetail"
> >
Move Move
</li> </li>
<li <li
class="menu-option" class="menu-option"
@click="downloadItem" @click="downloadItem"
v-if="isFile || isImage" v-if="isFile || isImage"
> >
Download Download
</li> </li>
<li <li
class="menu-option delete" class="menu-option delete"
@click="removeItem" @click="removeItem"
v-if="fileInfoDetail" v-if="fileInfoDetail"
> >
Delete Delete
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </transition>
</transition> <transition name="fade">
<div
v-show="isVisible"
class="vignette"
@click="closeAndResetContextMenu"
></div>
</transition>
</div>
</template> </template>
<script> <script>
@@ -158,7 +167,7 @@
@import "@assets/app.scss"; @import "@assets/app.scss";
.vignette { .vignette {
background: rgba(17, 20, 29, 0.5); background: rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -181,26 +190,24 @@
display: block; display: block;
} }
.menu-wrapper {
margin: 15px;
}
.menu-options { .menu-options {
margin-top: 10px; margin-top: 10px;
box-shadow: $shadow; box-shadow: $shadow;
background: white; background: white;
border-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px;
list-style: none; list-style: none;
width: 100%; width: 100%;
.menu-option { .menu-option {
font-weight: 600; font-weight: 700;
letter-spacing: 0.15px;
@include font-size(15); @include font-size(15);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
padding: 20px 10px; padding: 20px 10px;
text-align: center; text-align: center;
border-bottom: 1px solid $light_background; border-bottom: 1px solid $light_mode_border;
&:last-child { &:last-child {
border: none; border: none;
@@ -218,10 +225,10 @@
.options { .options {
.menu-options { .menu-options {
background: $dark_mode_foreground; background: $dark_mode_background;
.menu-option { .menu-option {
border-color: rgba($dark_mode_background, .5); border-color: $dark_mode_border_color;
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
} }
@@ -229,12 +236,19 @@
} }
// Transition // Transition
.context-menu-enter-active { .context-menu-enter-active,
transition: all 350ms ease; .fade-enter-active {
transition: all 200ms;
} }
.context-menu-leave-active { .context-menu-leave-active,
transition: all 150ms ease; .fade-leave-active {
transition: all 200ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
} }
.context-menu-enter, .context-menu-enter,
@@ -242,4 +256,8 @@
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(100%);
} }
.context-menu-leave-active {
position: absolute;
}
</style> </style>
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+2 -2
View File
@@ -130,9 +130,9 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
@include font-size(17); @include font-size(16);
color: $text; color: $text;
font-weight: 600; font-weight: 700;
max-width: 220px; max-width: 220px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
resources/js/components/VueFileManagerComponents/FilesView/ProgressBar.vue
+1 -1
View File
@@ -40,7 +40,7 @@ export default {
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) { @media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
.progress-bar { .progress-bar {
background: $dark_mode_background; background: $dark_mode_foreground;
} }
} }
</style> </style>
resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
+1
View File
@@ -88,6 +88,7 @@
&::placeholder { &::placeholder {
color: $text; color: $text;
@include font-size(14); @include font-size(14);
font-weight: 400;
} }
&:focus { &:focus {
resources/js/components/VueFileManagerComponents/Others/PopupMoveItem.vue
+11 -4
View File
@@ -142,7 +142,7 @@
} }
.popup-wrapper { .popup-wrapper {
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2); box-shadow: $light_mode_popup_shadow;
border-radius: 8px; border-radius: 8px;
background: white; background: white;
margin: auto; margin: auto;
@@ -154,8 +154,8 @@
padding: 20px; padding: 20px;
.title { .title {
@include font-size(20); @include font-size(18);
font-weight: 900; font-weight: 700;
color: $text; color: $text;
} }
@@ -276,7 +276,8 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.popup-wrapper { .popup-wrapper {
background: $dark_mode_foreground; background: $dark_mode_background;
box-shadow: $dark_mode_popup_shadow;
} }
.popup-header { .popup-header {
@@ -289,4 +290,10 @@
} }
} }
} }
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.popup-wrapper {
background: $dark_mode_background;
}
}
</style> </style>
resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
+6
View File
@@ -21,4 +21,10 @@
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
@media (prefers-color-scheme: dark) {
.text-label {
color: rgba($dark_mode_text_secondary, .4);
}
}
</style> </style>
resources/js/components/VueFileManagerComponents/Others/ThumbnailItem.vue
+1 -1
View File
@@ -73,7 +73,7 @@
.subtitle { .subtitle {
@include font-size(11); @include font-size(11);
font-weight: 100; font-weight: 400;
color: $text-muted; color: $text-muted;
display: block; display: block;
} }
resources/js/components/VueFileManagerComponents/Others/TreeMenu.vue
+25 -2
View File
@@ -70,11 +70,12 @@
.folder-item { .folder-item {
display: block; display: block;
padding: 10px 20px; padding: 15px 20px;
@include transition(150ms); @include transition(150ms);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid $light_mode_border;
.icon { .icon {
@include font-size(18); @include font-size(18);
@@ -140,13 +141,25 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.folder-item { .folder-item {
border-bottom: 1px solid $dark_mode_border_color;
.label { .label {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
&:hover { &: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 { .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> </style>
resources/js/components/VueFileManagerComponents/Others/Vignette.vue
+4 -5
View File
@@ -22,14 +22,13 @@
}, },
created() { created() {
// Hide vignette
events.$on('popup:close', () => this.isVisibleVignette = false)
// Show vignette // Show vignette
events.$on('popup:move-item', () => this.isVisibleVignette = true) events.$on('popup:move-item', () => this.isVisibleVignette = true)
events.$on('alert:open', () => this.isVisibleVignette = true) events.$on('alert:open', () => this.isVisibleVignette = true)
events.$on('success: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> </script>
@@ -44,7 +43,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 19; z-index: 19;
background: rgba(17, 20, 29, 0.5); background: $light_mode_vignette;
} }
// Dark mode // Dark mode
resources/js/components/VueFileManagerComponents/Sidebar.vue
+58 -30
View File
@@ -177,7 +177,7 @@
#sidebar { #sidebar {
position: relative; position: relative;
flex: 0 0 295px; flex: 0 0 295px;
border-right: 1px solid $light_background; border-right: 1px solid $light_mode_border;
} }
.content-scroller { .content-scroller {
@@ -198,37 +198,18 @@
} }
.menu-list-wrapper { .menu-list-wrapper {
margin-bottom: 25px; margin-bottom: 20px;
.menu-list { .menu-list {
.menu-list-item { .menu-list-item {
display: block; display: block;
padding: 10px 15px 10px 25px; padding: 8px 15px 8px 25px;
@include transition(150ms); @include transition(150ms);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
&:hover {
background: rgba($theme, .1);
//background: $light_background;
.icon {
path {
fill: $theme;
}
}
.label {
color: $theme;
}
.delete-icon {
display: block;
}
}
.icon { .icon {
@include font-size(13); @include font-size(13);
width: 15px; width: 15px;
@@ -254,7 +235,7 @@
} }
.label { .label {
@include font-size(15); @include font-size(14);
font-weight: 700; font-weight: 700;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
@@ -263,6 +244,24 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; 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; border: 2px dashed transparent;
.menu-list-item { .menu-list-item {
padding: 10px 13px 10 23px; padding: 8px 23px;
.icon { .icon {
@include font-size(20); margin-right: 5px;
@include font-size(14);
width: 20px; width: 20px;
path { path {
fill: $theme; fill: $text;
}
}
&:hover {
background: rgba($theme, .1);
.icon {
path {
fill: $theme;
}
} }
} }
} }
@@ -356,7 +366,7 @@
padding: 10px 26px; padding: 10px 26px;
.label { .label {
@include font-size(16); @include font-size(14);
} }
} }
} }
@@ -368,8 +378,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#sidebar { #sidebar {
border-color: $dark_mode_foreground; border-color: $dark_mode_border_color;
background: $dark_mode_foreground;
} }
.menu-list-wrapper { .menu-list-wrapper {
@@ -380,16 +389,35 @@
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
&:hover { &:hover {
background: rgba($theme, .1); 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 { #sidebar {
border-color: $dark_mode_background; border-color: $dark_mode_background;
background: $dark_mode_background; background: $dark_mode_background;
resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue
+2 -3
View File
@@ -58,11 +58,10 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "@assets/app.scss"; @import "@assets/app.scss";
.file-item { .file-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 15px; padding: 10px 15px;
@include transition(150ms); @include transition(150ms);
cursor: pointer; cursor: pointer;
@@ -85,7 +84,7 @@ export default {
.item-size, .item-size,
.item-length { .item-length {
@include font-size(11); @include font-size(11);
font-weight: 100; font-weight: 400;
color: $text-muted; color: $text-muted;
display: block; display: block;
} }
resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
+6 -1
View File
@@ -74,8 +74,13 @@
.size { .size {
@include font-size(10); @include font-size(10);
} }
}
}
.title { @media (prefers-color-scheme: dark) {
.storage-size {
.storage-info .title {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
} }
resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
+1
View File
@@ -103,6 +103,7 @@
color: $theme; color: $theme;
display: block; display: block;
margin-top: 2px; margin-top: 2px;
font-weight: 600;
} }
} }
resources/sass/app.scss
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
// Fonts // 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 // Variables
@import 'vue-file-manager/_variables'; @import 'vue-file-manager/_variables';
resources/sass/vue-file-manager/_variables.scss
Vendored
+9 -4
View File
@@ -1,18 +1,23 @@
// Colors // Colors
$text: #35495d; $text: #1b2539;
$text-muted: lighten($text, 25%); $text-muted: #667b90;
$border: #F8F8FC; $light_mode_border: rgba(0, 0, 0, 0.02);
$theme: #00BC7E; $theme: #00BC7E;
$danger: #d22323; $danger: #d22323;
$light_text: #A4ADB6; $light_text: #A4ADB6;
$light_background: #f6f6f6; $light_background: #f6f6f6;
$dark_background: #EBEBEB; $dark_background: #EBEBEB;
$shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12); $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
$dark_mode_vignette: rgba(0, 0, 0, 0.3); $dark_mode_vignette: rgba(0, 0, 0, 0.3);
$dark_mode_background: #1a1f25; $dark_mode_background: #1a1f25;
$dark_mode_foreground: #202733; $dark_mode_foreground: #202733;
$dark_mode_text_primary: #B8C4D0; $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);
resources/views/index.blade.php
+7
View File
@@ -10,6 +10,13 @@
<link rel="icon" href="{{ asset('favicon.ico') }}"> <link rel="icon" href="{{ asset('favicon.ico') }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>