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

V1.1

Browse Source 
User Authentication
- Login to user account
- Register new user account
- Reset user password

Functionality
- Added locations to menu
- Added trash for deleted folders & files
- Restore files or folders from trash
- Empty trash function
- Favourites folders
- List of 5 latest uploads
- Profile settings page
- Storage info and upload limits

Design
- Night Mode
- Navigation sidebar
- Quick action buttons in mobile version
- Improved mobile UX
- Other small design improvements

Settings
- Enable/Disable user account registration
- Set storage limitation
- Set storage capacity for all users
This commit is contained in:
MakingCG
2020-03-14 18:56:35 +01:00
parent 2deca027cd
commit 515e8ef5ef
42 changed files with 1107 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/VueFileManager.vue
View File

@@ -89,33 +89,20 @@
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: $text;
font-size: 16px;
}
body, html {
overflow: hidden;
}
// Dark mode support
@media (prefers-color-scheme: dark) {
* {
color: $dark_mode_text_primary;
}
img {
opacity: .8;
}
body, html {
background: darken($dark_mode_background, 10%);
}
#vue-file-manager {
background: $dark_mode_background;
}
color: $dark_mode_text_primary;
img {
opacity: .8;
}
}
}
#auth {

27
resources/js/components/VueFileManagerComponents/Auth.vue
View File

@@ -472,6 +472,7 @@
<style scoped lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_forms';
.auth-form {
text-align: center;
@@ -499,12 +500,14 @@
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
color: $text;
}
h2 {
@include font-size(23);
font-weight: 500;
margin-bottom: 50px;
color: $text;
}
.block-form {
@@ -515,21 +518,6 @@
text-align: right;
}
}
.additional-link {
@include font-size(16);
margin-top: 50px;
display: block;
b {
color: $theme;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}
@media only screen and (min-width: 690px) and (max-width: 960px) {
@@ -555,4 +543,13 @@
}
}
@media (prefers-color-scheme: dark) {
.auth-form {
h1, h2, .additional-link {
color: $dark_mode_text_primary;
}
}
}
</style>

17
resources/js/components/VueFileManagerComponents/FilesView.vue
View File

@@ -141,11 +141,12 @@
.files-container {
padding-left: 15px;
padding-right: 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow-y: auto;
.file-list {
//height: 100%;
@@ -243,7 +244,7 @@
}
.toolbar-go-back span {
max-width: 140px;
max-width: 120px;
}
.grid .file-wrapper {
@@ -273,16 +274,4 @@
}
}
@media only screen and (max-width: 960px) {
#files-view .files-container {
left: 265px !important;
}
}
@media only screen and (max-width: 690px) {
#files-view .files-container {
left: 0 !important;
}
}
</style>

8
resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
View File

@@ -67,6 +67,10 @@
this.button = 'That’s horrible!'
this.emoji = '😢😢😢'
this.buttonStyle = 'danger'
if (args.emoji) {
this.emoji = args.emoji
}
})
// Show alert
@@ -80,6 +84,10 @@
this.button = 'Awesome!'
this.emoji = '🥳🥳🥳'
this.buttonStyle = 'theme'
if (args.emoji) {
this.emoji = args.emoji
}
})
// Close popup

18
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
View File

@@ -9,7 +9,7 @@
<li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}</li>
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
<li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
<li class="menu-option" @click="removeItem" v-if="! $isTrashLocation()">Delete</li>
<li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">Delete</li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
<li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
<li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</li>
@@ -46,9 +46,9 @@
methods: {
addToFavourites() {
if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
this.$store.dispatch('addToFavourites', this.item.unique_id)
this.$store.dispatch('addToFavourites', this.item)
} else {
this.$store.dispatch('removeFromFavourites', this.item.unique_id)
this.$store.dispatch('removeFromFavourites', this.item)
}
},
downloadItem() {
@@ -82,12 +82,14 @@
},
showContextMenu(event, item) {
let VerticalOffsetArea = item ? this.$refs.list.children.length * 50 : 50
let HorizontalOffsetArea = 150
let HorizontalOffsetArea = 190
let container = document.getElementById('files-view')
let x = event.pageX - container.getBoundingClientRect().x
let y = event.pageY - container.getBoundingClientRect().y
var offset = container.getClientRects()[0];
let x = event.clientX - offset.left
let y = event.clientY - offset.top
// Set position Y
if ((container.offsetHeight - y) < VerticalOffsetArea) {
@@ -127,6 +129,7 @@
.contextmenu {
max-width: 190px;
width: 190px;
position: absolute;
z-index: 99;
box-shadow: $shadow;
@@ -150,6 +153,7 @@
padding: 15px 30px;
cursor: pointer;
width: 100%;
color: $text;
&:hover {
background: $light_background;
@@ -165,6 +169,8 @@
background: $dark_mode_foreground;
.menu-options .menu-option {
color: $dark_mode_text_primary;
&:hover {
background: $dark_mode_background;
}

8
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
View File

@@ -170,6 +170,7 @@
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
}
@@ -208,5 +209,12 @@
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
.toolbar-go-back {
.back-directory-title {
color: $dark_mode_text_primary;
}
}
}
</style>

19
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
View File

@@ -174,6 +174,7 @@
.name {
@include font-size(16);
font-weight: 600;
color: $text;
}
.mimetype {
@@ -206,6 +207,7 @@
display: block;
@include font-size(16);
font-weight: bold;
color: $text;
}
}
}
@@ -218,6 +220,23 @@
.icon-preview {
background: $dark_mode_background;
}
.file-info {
.name {
color: $dark_mode_text_primary;
}
}
}
.list-info {
.list-info-item {
span {
color: $dark_mode_text_primary
}
}
}
}
</style>

2
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
View File

@@ -45,7 +45,7 @@
<span
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile()"
:contenteditable="!$isMobile() && !$isTrashLocation()"
class="name"
>{{ item.name }}</span
>

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

@@ -226,7 +226,6 @@
}
.file-content {
position: relative;
display: flex;
flex-wrap: nowrap;
}

7
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue
View File

@@ -34,6 +34,7 @@
.label {
@include font-size(14);
font-weight: 700;
color: $text;
}
}
@@ -42,7 +43,11 @@
background: $dark_mode_foreground;
.icon path {
color: $theme;
fill: $theme;
}
.label {
color: $dark_mode_text_primary;
}
}
}

7
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue
View File

@@ -55,6 +55,7 @@
.label {
@include font-size(14);
font-weight: 700;
color: $text;
}
}
@@ -63,7 +64,11 @@
background: $dark_mode_foreground;
.icon path {
color: $theme;
fill: $theme;
}
.label {
color: $dark_mode_text_primary;
}
}
}

5
resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
View File

@@ -92,9 +92,9 @@
methods: {
addToFavourites() {
if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
this.$store.dispatch('addToFavourites', this.fileInfoDetail.unique_id)
this.$store.dispatch('addToFavourites', this.fileInfoDetail)
} else {
this.$store.dispatch('removeFromFavourites', this.fileInfoDetail.unique_id)
this.$store.dispatch('removeFromFavourites', this.fileInfoDetail)
}
},
downloadItem() {
@@ -214,6 +214,7 @@
.menu-option {
border-color: rgba($dark_mode_background, .5);
color: $dark_mode_text_primary;
}
}
}

17
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
View File

@@ -15,7 +15,9 @@
<!--More Actions-->
<div class="more-actions-button" @click="showSidebarMenu">
<FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
<div class="tap-area">
<FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
</div>
</div>
</div>
</template>
@@ -140,6 +142,15 @@
.more-actions-button {
flex: 1;
text-align: right;
position: relative;
.tap-area {
display: inline-block;
padding: 10px;
position: absolute;
right: -10px;
top: -20px;
}
}
}
@@ -151,6 +162,10 @@
.directory-name {
color: $dark_mode_text_primary;
}
.more-actions-button svg path {
fill: $dark_mode_text_primary;
}
}
}
</style>

4
resources/js/components/VueFileManagerComponents/FilesView/ToolbarButton.vue
View File

@@ -56,8 +56,8 @@
background: $dark_mode_foreground;
}
.icon svg path {
fill: $dark_mode_text_secondary;
.icon path {
fill: $dark_mode_text_primary;
}
}
</style>

5
resources/js/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload.vue
View File

@@ -8,6 +8,7 @@
type="file"
name="files[]"
multiple
:disabled="$isTrashLocation() ? true : false"
/>
</label>
</template>
@@ -61,8 +62,8 @@
background: $dark_mode_foreground;
}
.icon svg path {
fill: $dark_mode_text_secondary;
.icon path {
fill: $dark_mode_text_primary;
}
}
</style>

5
resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
View File

@@ -47,6 +47,7 @@
.title {
@include font-size(22);
font-weight: 700;
color: $text;
}
.icon {
@@ -72,6 +73,10 @@
.page-header {
background: $dark_mode_background;
.title {
color: $dark_mode_text_primary;
}
.icon path {
fill: $theme;
}

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

@@ -14,7 +14,7 @@
@import "@assets/app.scss";
.text-label {
@include font-size(11);
@include font-size(10);
color: $light_text;
text-transform: uppercase;
font-weight: 900;

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

@@ -143,13 +143,13 @@
if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return
// Store favourites folder
this.$store.dispatch('addToFavourites', this.draggedItem.unique_id)
this.$store.dispatch('addToFavourites', this.draggedItem)
},
removeFavourite(folder) {
// Remove favourites folder
this.$store.dispatch('removeFromFavourites', folder.unique_id)
this.$store.dispatch('removeFromFavourites', folder)
}
},
mounted() {
@@ -204,7 +204,7 @@
.menu-list-item {
display: block;
padding: 10px 15px;
padding: 10px 15px 10px 25px;
@include transition(150ms);
cursor: pointer;
position: relative;
@@ -236,7 +236,7 @@
vertical-align: middle;
path {
fill: $theme;
fill: $text;
}
}
@@ -280,7 +280,7 @@
border: 2px dashed transparent;
.menu-list-item {
padding: 10px 13px;
padding: 10px 13px 10 23px;
.icon {
@include font-size(20);
@@ -332,7 +332,7 @@
}
#sidebar {
position: fixed;
position: absolute;
overflow-y: auto;
top: 0;
left: 0;
@@ -374,9 +374,18 @@
.menu-list-wrapper {
.menu-list .menu-list-item:hover {
background: rgba($theme, .1);
.menu-list .menu-list-item {
.label {
color: $dark_mode_text_primary;
}
&:hover {
background: rgba($theme, .1);
}
}
}
}

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

@@ -47,6 +47,7 @@
.title {
@include font-size(14);
font-weight: 700;
color: $text;
}
.size {
@@ -73,6 +74,10 @@
.size {
@include font-size(10);
}
.title {
color: $dark_mode_text_primary;
}
}
}
</style>

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

@@ -77,10 +77,6 @@
cursor: pointer;
@include transition(150ms);
&:hover {
//background: rgba($theme, .1);
}
&:active {
transform: scale(0.95);
}
@@ -99,6 +95,7 @@
display: block;
@include font-size(17);
line-height: 1;
color: $text;
}
.email {
@@ -145,6 +142,7 @@
padding: 15px 30px;
cursor: pointer;
width: 100%;
color: $text;
&:hover {
background: $light_background;
@@ -177,8 +175,8 @@
.user-name {
.email {
color: $dark_mode_text_secondary;
.name {
color: $dark_mode_text_primary;
}
}
@@ -186,6 +184,8 @@
background: $dark_mode_background;
.menu-option {
color: $dark_mode_text_primary;
&:hover {
background: $dark_mode_foreground;
}

6
resources/js/components/VueFileManagerComponents/UserSettings.vue
View File

@@ -165,6 +165,7 @@
<style lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_forms';
.avatar-upload {
display: flex;
@@ -177,6 +178,7 @@
.description {
@include font-size(18);
font-weight: 700;
color: $text;
}
.supported {
@@ -256,6 +258,10 @@
.avatar-upload .info {
.description {
color: $dark_mode_text_primary;
}
.supported {
color: $dark_mode_text_secondary;
}

246
resources/js/components/router.js vendored
View File

@@ -1,246 +0,0 @@
import Router from 'vue-router'
import Vue from 'vue'
import ProfileSettings from './views/ProfileSettings'
import store from './store/index'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/finish-your-registration',
name: 'finish-your-registration',
component: FinishRegistration,
meta: {
requiresAuth: true,
}
},
{
path: '/admin/login',
name: 'LogIn',
component: Login,
meta: {
requiresVisitor: true,
}
},
{
path: '/admin/logout',
name: 'LogOut',
component: LogOut,
meta: {
requiresAuth: false
}
},
{
path: '/admin/services',
name: 'Ads',
component: Services,
meta: {
requiresAuth: true
}
},
{
path: '/admin/add-service',
name: 'Add Service',
component: ThumbnailPicker,
meta: {
requiresAuth: true
}
},
{
path: '/admin/edit-service/:id',
name: 'Edit Service',
component: EditService,
meta: {
requiresAuth: true
}
},
{
path: '/admin/trips',
name: 'Trips',
component: Trips,
meta: {
requiresAuth: true
}
},
{
path: '/admin/add-trip',
name: 'Add Trip',
component: AddTrip,
meta: {
requiresAuth: true
}
},
{
path: '/admin/edit-trip/:id',
name: 'Edit Trip',
component: EditTrip,
meta: {
requiresAuth: true
}
},
{
path: '/admin/hotels',
name: 'Hotels',
component: Hotels,
meta: {
requiresAuth: true
}
},
{
path: '/admin/add-hotel',
name: 'Add Hotel',
component: AddHotel,
meta: {
requiresAuth: true
}
},
{
path: '/admin/edit-hotel/:id',
name: 'Edit Hotel',
component: EditHotel,
meta: {
requiresAuth: true
}
},
{
path: '/admin/gallery',
name: 'Gallery',
component: Gallery,
meta: {
requiresAuth: true
}
},
{
path: '/admin/add-gallery/',
name: 'Add Gallery',
component: AddGallery,
meta: {
requiresAuth: true
}
},
{
path: '/admin/edit-gallery/:id',
name: 'Edit Gallery',
component: EditGallery,
meta: {
requiresAuth: true
}
},
{
path: '/admin/team',
name: 'Team',
component: Team,
meta: {
requiresAuth: true
}
},
{
path: '/admin/add-member',
name: 'Add Team Member',
component: AddTeamMember,
meta: {
requiresAuth: true
}
},
{
path: '/admin/edit-member/:id',
name: 'Edit Team Member',
component: EditTeamMember,
meta: {
requiresAuth: true
}
},
{
path: '/admin/references',
name: 'References',
component: References,
meta: {
requiresAuth: true
}
},
{
path: '/admin/orders',
name: 'Orders',
component: Orders,
meta: {
requiresAuth: true
}
},
{
path: '/admin/order/:id',
name: 'Order',
component: Order,
meta: {
requiresAuth: true
}
},
{
path: '/admin/payouts',
name: 'Payouts',
component: Payouts,
meta: {
requiresAuth: true
}
},
{
path: '/admin/settings',
name: 'Settings',
component: Settings,
meta: {
requiresAuth: true
}
},
{
path: '/admin/profile-settings',
name: 'Profile Settings',
component: ProfileSettings,
meta: {
requiresAuth: true
}
},
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters.isLogged) {
next({
path: '/admin/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (store.getters.isLogged) {
next({
path: '/admin/services',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
export default router