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

Initial commit

Browse Source
This commit is contained in:
MakingCG
2020-03-10 19:00:32 +01:00
commit 3285a7e1c2
165 changed files with 31472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
resources/js/components/VueFileManagerComponents/Auth.vue Normal file
View File

@@ -0,0 +1,551 @@
<template>
<AuthContentWrapper ref="auth">
<!--Log In by Email-->
<AuthContent name="log-in" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Welcome Back!</h1>
<h2>Please type your email to log in:</h2>
<ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="loginEmail" placeholder="Type your E-mail" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Next Step" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Don’t have an account? <b
@click="goToAuthPage('sign-up')">Register account.</b></span>
</AuthContent>
<!--Log in By Password-->
<AuthContent name="sign-in" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<h1>Are You {{ checkedAccount.name }}?</h1>
<h2>Confirm you by your password:</h2>
</div>
<ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
v-slot="{ errors }">
<input v-model="loginPassword" placeholder="Type your password" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Log In" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Forgotten your password? <b @click="goToAuthPage('forgotten-password')">Reset Password.</b></span>
</AuthContent>
<!--Forgotten your password?-->
<AuthContent name="forgotten-password" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Forgotten Password?</h1>
<h2>Get reset link with your email:</h2>
<ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverEmail" placeholder="Type your E-mail" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Get Link" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
</AuthContent>
<!--Create new password-->
<AuthContent name="create-new-password" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Only One Step to Log In</h1>
<h2>Create your new password here:</h2>
<ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
tag="form" class="form block-form create-new-password">
<div class="block-wrapper">
<label>Email:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverPassword.email" placeholder="Type your E-mail" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Your new password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPassword" placeholder="Your new password" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Confirm your new password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm your new password"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton icon="chevron-right" text="Update Password" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
</AuthContent>
<!--Registration-->
<AuthContent name="sign-up" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Create New Account</h1>
<h2>Please fill registration to create account:</h2>
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
class="form block-form">
<div class="block-wrapper">
<label>Email:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="register.email" placeholder="Type your E-mail" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Full Name:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
v-slot="{ errors }">
<input v-model="register.name" placeholder="Type your full name" type="text"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Create password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password" placeholder="Your new password" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Confirm password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password_confirmation" placeholder="Confirm your new password"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton icon="chevron-right" text="Create Account" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">Do you have an account? <b @click="goToAuthPage('log-in')">Log In.</b></span>
</AuthContent>
<!--Password reset link sended-->
<AuthContent name="password-reset-link-sended" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Thank you!</h1>
<h2>We have e-mailed your password reset link!</h2>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
</AuthContent>
<!--Password reset successfully-->
<AuthContent name="password-reset-successfully" :visible="false">
<img class="logo" src="/assets/images/hero.svg" alt="Vue File Manager logo">
<h1>Awesome!</h1>
<h2>Your password was reset successfully.</h2>
<AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" text="Sign In"/>
</AuthContent>
</AuthContentWrapper>
</template>
<script>
import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'Auth',
components: {
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AuthContent,
AuthButton,
required,
},
data() {
return {
isLoading: false,
checkedAccount: undefined,
loginPassword: 'vuefilemanager',
loginEmail: 'peterpapp@makingcg.com',
recoverEmail: 'peterpapp@makingcg.com',
recoverPassword: {
token: undefined,
email: 'peterpapp@makingcg.com',
newPassword: 'vuefilemanager',
newPasswordConfirm: 'vuefilemanager',
},
register: {
name: 'Hi5Ve Digital',
email: 'peterpapp@makingcg.com',
password: 'vuefilemanager',
password_confirmation: 'vuefilemanager',
},
}
},
methods: {
goToAuthPage(slug) {
this.$refs.auth.$children.forEach(page => {
// Hide current step
page.isVisible = false
if (page.$props.name === slug) {
// Go to next step
page.isVisible = true
}
})
},
async logIn() {
// Validate fields
const isValid = await this.$refs.log_in.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get verify account
axios
.post(this.$store.getters.api + '/user/check', {
email: this.loginEmail,
})
.then(response => {
// End loading
this.isLoading = false
this.checkedAccount = response.data
this.goToAuthPage('sign-in')
})
.catch(error => {
if (error.response.status == 404) {
this.$refs.log_in.setErrors({
'E-Mail': [error.response.data.message]
});
}
// End loading
this.isLoading = false
})
},
async singIn() {
// Validate fields
const isValid = await this.$refs.sign_in.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user token
axios
.post(this.$store.getters.api + '/user/login', {
email: this.loginEmail,
password: this.loginPassword,
})
.then(response => {
// End loading
this.isLoading = false
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
})
.catch(error => {
if (error.response.status == 400) {
this.$refs.sign_in.setErrors({
'User Password': ['Sorry, you passed incorrect password :(']
});
}
// End loading
this.isLoading = false
})
},
async forgottenPassword() {
// Validate fields
const isValid = await this.$refs.forgotten_password.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/password/email', {
email: this.recoverEmail
})
.then(response => {
// End loading
this.isLoading = false
this.goToAuthPage('password-reset-link-sended')
}).catch(error => {
if (error.response.status == 422) {
this.$refs.forgotten_password.setErrors({
'E-Mail': error.response.data.message
});
}
// End loading
this.isLoading = false
})
},
async createNewPassword() {
// Validate fields
const isValid = await this.$refs.create_new_password.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/password/reset', {
email: this.recoverPassword.email,
token: this.recoverPassword.token,
password: this.recoverPassword.newPassword,
password_confirmation: this.recoverPassword.newPasswordConfirm,
})
.then(response => {
// End loading
this.isLoading = false
this.goToAuthPage('password-reset-successfully')
})
.catch(error => {
if (error.response.status == 422) {
if (error.response.data.error) {
this.$refs.create_new_password.setErrors({
'E-Mail': error.response.data.error
});
}
if (error.response.data.errors['password']) {
this.$refs.create_new_password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
})
},
async signUp() {
// Validate fields
const isValid = await this.$refs.sign_up.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user token
axios
.post(this.$store.getters.api + '/user/register', this.register)
.then(response => {
// End loading
this.isLoading = false
// Store token to localstorage
localStorage.setItem('access_token', response.data.access_token)
// Store token to vuex
this.$store.commit('RETRIEVE_TOKEN', response.data.access_token)
})
.catch(error => {
if (error.response.status == 422) {
if (error.response.data.errors['email']) {
this.$refs.sign_up.setErrors({
'E-Mail': error.response.data.errors['email']
});
}
if (error.response.data.errors['password']) {
this.$refs.sign_up.setErrors({
'Your New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
})
}
},
mounted() {
// Check if user try to get reset page
let pathname = location.pathname.split('/')[1]
let token = location.search.split('token=')[1]
if (pathname === 'create-new-password') {
this.recoverPassword.token = token
this.goToAuthPage('create-new-password')
} else {
this.goToAuthPage('log-in')
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
//@import "@/assets/scss/_forms.scss";
.auth-form {
text-align: center;
max-width: 600px;
padding: 25px 20px;
display: table-cell;
vertical-align: middle;
.user-avatar {
width: 100px;
height: 100px;
object-fit: cover;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
}
.logo {
width: 120px;
margin-bottom: 20px;
}
h1 {
@include font-size(34);
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
}
h2 {
@include font-size(23);
font-weight: 500;
margin-bottom: 50px;
}
.block-form {
margin-left: auto;
margin-right: auto;
}
.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) {
.auth-form {
padding-left: 20%;
padding-right: 20%;
}
}
@media only screen and (max-width: 690px) {
.auth-form {
//font-size: 90%;
width: 100%;
h1 {
@include font-size(30);
}
h2 {
@include font-size(21);
}
}
}
</style>

117
resources/js/components/VueFileManagerComponents/Auth/AuthButton.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<button class="button outline">
<span class="text-label">{{ text }}</span>
<span v-if="loading" class="icon">
<FontAwesomeIcon icon="sync-alt" class="sync-alt"/>
</span>
<span v-if="! loading && icon" class="icon">
<FontAwesomeIcon :icon="icon"/>
</span>
</button>
</template>
<script>
export default {
name: 'AuthContent',
props: ['loading', 'icon', 'text'],
data() {
return {
isVisible: false,
}
},
created() {
this.isVisible = this.visible
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button {
cursor: pointer;
border-radius: 8px;
text-decoration: none;
padding: 12px 32px;
display: inline-block;
margin-left: 15px;
margin-right: 15px;
white-space: nowrap;
@include transition(150ms);
background: transparent;
.text-label {
@include transition(150ms);
@include font-size(17);
font-weight: 800;
line-height: 0;
}
.icon {
margin-left: 12px;
@include font-size(16);
}
&.solid {
background: $theme;
border: 2px solid $theme;
.text-label {
color: white;
}
}
&.outline {
border: 2px solid $text;
.text-label {
color: $text;
}
.icon {
path {
fill: $theme;
}
}
&:hover {
border-color: $theme;
.text-label {
color: $theme;
}
}
}
}
@media (prefers-color-scheme: dark) {
.button {
&.outline {
background: $dark_mode_background;
border-color: $dark_mode_text_primary;
.text-label {
color: $dark_mode_text_primary;
}
}
}
}
.sync-alt {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>

26
resources/js/components/VueFileManagerComponents/Auth/AuthContent.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="auth-form" v-if="isVisible">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'AuthContent',
props: ['visible', 'name'],
data() {
return {
isVisible: false,
}
},
created() {
this.isVisible = this.visible
}
}
</script>
<style scoped lang="scss">
</style>

25
resources/js/components/VueFileManagerComponents/Auth/AuthContentWrapper.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div id="auth">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'AuthContentWrapper',
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
#auth {
height: 100%;
width: 100%;
display: table;
//display: flex;
//align-items: center;
//justify-content: center;
}
</style>

288
resources/js/components/VueFileManagerComponents/FilesView.vue Normal file
View File

@@ -0,0 +1,288 @@
<template>
<div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
<ContextMenu/>
<MobileOptionList/>
<DesktopToolbar v-if="! $isMinimalScale()"/>
<FilesContainer/>
</div>
</template>
<script>
import MobileOptionList from '@/components/VueFileManagerComponents/FilesView/MobileOptionList'
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import FilesContainer from '@/components/VueFileManagerComponents/FilesView/FilesContainer'
import DesktopToolbar from '@/components/VueFileManagerComponents/FilesView/DesktopToolbar'
import ContextMenu from '@/components/VueFileManagerComponents/FilesView/ContextMenu'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FilesView',
components: {
MobileOptionList,
UploadProgress,
FilesContainer,
DesktopToolbar,
ContextMenu,
},
computed: {
...mapGetters(['config', 'filesViewWidth']),
},
methods: {
fileViewClick() {
events.$emit('contextMenu:hide')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
handleContentResize() {
let filesView = document.getElementById('files-view')
.clientWidth
if (filesView >= 0 && filesView <= 690)
this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
else if (filesView >= 690 && filesView <= 960)
this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
else if (filesView >= 960)
this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
},
},
mounted() {
// Set default directory
if (this.config.directory) {
// Set start directory
this.$store.commit('SET_START_DIRECTORY', this.config.directory)
// Load folder
this.$store.dispatch('goToFolder', [
{
unique_id: this.config.directory.unique_id,
name: this.config.directory.name,
location: 'base',
},
false,
true
])
} else {
let homeDirectory = {
unique_id: 0,
name: 'Home',
location: 'base',
}
// Set start directory
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
// Load folder
this.$store.dispatch('goToFolder', [homeDirectory, false, true])
}
var filesView = document.getElementById('files-view');
new ResizeSensor(filesView, this.handleContentResize);
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
//overflow: hidden;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
&.minimal-scale {
padding: 0;
.mobile-toolbar {
padding: 10px 0 5px;
}
.popup-wrapper {
left: 15px;
right: 15px;
padding: 25px 15px;
}
.toolbar {
display: block;
position: sticky;
top: 0;
}
.toolbar-go-back {
padding-top: 15px;
}
.toolbar-tools {
text-align: left;
display: flex;
.toolbar-button-wrapper {
width: 100%;
&:last-child {
text-align: right;
}
}
}
.files-container {
padding-left: 15px;
padding-right: 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.file-list {
//height: 100%;
&.grid {
grid-template-columns: repeat(auto-fill, 120px);
.file-wrapper {
.file-item {
width: 120px;
}
.icon-item {
margin-bottom: 10px;
height: 90px;
&.file {
.file-icon {
@include font-size(75);
}
.file-icon-text {
@include font-size(12);
}
}
&.folder {
@include font-size(14);
.folder-icon {
margin-top: 0;
margin-bottom: 0;
}
}
&.image img {
width: 90px;
height: 90px;
}
}
.item-name .name {
@include font-size(13);
line-height: 1.2;
max-height: 30px;
}
}
}
}
}
.file-wrapper {
.item-name .name {
max-width: 220px;
}
}
.search-bar {
input {
min-width: initial;
width: 100%;
}
}
}
&.compact-scale {
padding-left: 15px;
padding-right: 15px;
.file-content {
position: absolute;
top: 72px;
left: 15px;
right: 15px;
bottom: 0;
@include transition;
&.is-offset {
margin-top: 50px;
}
}
.toolbar-tools {
.toolbar-button-wrapper {
margin-left: 35px;
}
}
.search-bar input {
min-width: 190px;
}
.toolbar-go-back span {
max-width: 140px;
}
.grid .file-wrapper {
.icon-item {
margin-bottom: 15px;
}
}
}
&.full-scale {
padding-left: 15px;
padding-right: 15px;
.file-content {
position: absolute;
top: 72px;
left: 15px;
right: 15px;
bottom: 0;
@include transition;
&.is-offset {
margin-top: 50px;
}
}
}
}
@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>

230
resources/js/components/VueFileManagerComponents/FilesView/Alert.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<transition name="vignette">
<div class="popup" v-show="isVisibleWrapper">
<transition name="popup">
<div v-show="isVisiblePopup" class="popup-wrapper">
<div class="popup-image">
<span class="emoji">{{ emoji }}</span>
</div>
<div class="popup-content">
<h1 v-if="title" class="title">{{ title }}</h1>
<p v-if="message" class="message">{{ message }}</p>
</div>
<div class="popup-actions">
<ButtonBase
@click.native="closePopup"
:button-style="buttonStyle"
class="action-confirm"
>{{ button }}
</ButtonBase>
</div>
</div>
</transition>
<div class="popup-vignette" @click="closePopup"></div>
</div>
</transition>
</template>
<script>
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import {events} from '@/bus'
export default {
name: 'AlertPopup',
components: {
ButtonBase
},
data() {
return {
isVisibleWrapper: false,
buttonStyle: undefined,
isVisiblePopup: false,
message: undefined,
title: undefined,
button: undefined,
emoji: undefined,
}
},
methods: {
closePopup() {
// Emit event
events.$emit('alert:close')
// Hide popup wrapper
this.isVisibleWrapper = false
this.isVisiblePopup = false
}
},
mounted() {
// Show alert
events.$on('alert:open', args => {
this.isVisibleWrapper = true
this.isVisiblePopup = true
this.title = args.title
this.message = args.message
this.button = 'That’s horrible!'
this.emoji = '😢😢😢'
this.buttonStyle = 'danger'
})
// Show alert
events.$on('success:open', args => {
this.isVisibleWrapper = true
this.isVisiblePopup = true
this.title = args.title
this.message = args.message
this.button = 'Awesome!'
this.emoji = '🥳🥳🥳'
this.buttonStyle = 'theme'
})
// Close popup
events.$on('popup:close', () => {
this.isVisiblePopup = false
this.isVisibleWrapper = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
overflow: auto;
.popup-vignette {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5);
}
}
.popup-wrapper {
z-index: 12;
position: absolute;
left: 0;
right: 0;
max-width: 480px;
top: 50%;
transform: translateY(-50%) scale(1);
margin: 0 auto;
padding: 40px;
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
border-radius: 8px;
text-align: center;
background: white;
}
.popup-image {
margin-bottom: 30px;
.emoji {
@include font-size(56);
line-height: 1;
}
}
.popup-content {
.title {
@include font-size(22);
text-transform: uppercase;
font-weight: 800;
color: $text;
}
.message {
@include font-size(16);
color: #8b8f9a;
margin-top: 5px;
}
}
.popup-actions {
margin-top: 30px;
.action-confirm {
width: 100%;
}
}
// Small screen size
.small {
.popup-wrapper {
padding: 40px 20px 20px;
left: 15px;
right: 15px;
}
}
@media (prefers-color-scheme: dark) {
.popup .popup-vignette {
background: $dark_mode_vignette;
}
.popup-wrapper {
background: $dark_mode_foreground;
}
.popup-content {
.title {
color: $dark_mode_text_primary;
}
.message {
color: $dark_mode_text_secondary;
}
}
}
// Animations
.popup-enter-active {
animation: popup-in 0.35s 0.15s ease both;
}
.popup-leave-active {
animation: popup-in 0.15s ease reverse;
}
@keyframes popup-in {
0% {
opacity: 0;
transform: translateY(-50%) scale(0.7);
}
100% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
.vignette-enter-active {
animation: vignette-in 0.15s ease;
}
.vignette-leave-active {
animation: vignette-in 0.15s 0.15s ease reverse;
}
@keyframes vignette-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

57
resources/js/components/VueFileManagerComponents/FilesView/ButtonBase.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<button class="button-base" :class="buttonStyle" type="button">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'ButtonBase',
props: ['buttonStyle']
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button-base {
@include font-size(16);
font-weight: 600;
cursor: pointer;
transition: 0.15s all ease;
border-radius: 8px;
border: 0;
padding: 10px 28px;
display: inline-block;
&:active {
transform: scale(0.95);
}
&.theme {
color: $theme;
background: rgba($theme, .1);
}
&.danger {
color: $danger;
background: rgba($danger, .1);
}
&.secondary {
color: $text;
background: $light_background;
}
}
@media (prefers-color-scheme: dark) {
.button-base {
&.secondary {
color: $dark_mode_text_primary;
background: $dark_mode_foreground;
}
}
}
</style>

60
resources/js/components/VueFileManagerComponents/FilesView/ButtonUpload.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<label :class="buttonStyle" label="file" class="button file-input button-base">
<slot></slot>
<input
accept="*"
v-show="false"
@change="emmitFiles"
id="file"
type="file"
name="files[]"
multiple
/>
</label>
</template>
<script>
export default {
name: 'ButtonBase',
props: ['buttonStyle'],
data() {
return {
files: undefined
}
},
methods: {
emmitFiles(e) {
this.$uploadFiles(e.target.files)
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button-base {
@include font-size(16);
font-weight: 600;
cursor: pointer;
transition: 0.15s all ease;
border-radius: 8px;
border: 0;
padding: 10px 28px;
display: inline-block;
&:active {
transform: scale(0.95);
}
&.theme {
color: $theme;
background: rgba($theme, .1);
}
&.secondary {
color: $text;
background: $light_background;
}
}
</style>

174
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<div
ref="contextmenu"
class="contextmenu"
:style="{ top: positionY + 'px', left: positionX + 'px' }"
v-show="isVisible"
>
<ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">
<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="$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>
</ul>
</div>
</template>
<script>
import {events} from '@/bus'
import {mapGetters} from 'vuex'
export default {
name: 'ContextMenu',
computed: {
...mapGetters(['app']),
isFile() {
return this.item && this.item.type === 'file' ? true : false
},
isImage() {
return this.item && this.item.type === 'image' ? true : false
},
isInFavourites() {
return this.app.favourites.find(el => el.unique_id == this.item.unique_id)
},
},
data() {
return {
item: undefined,
isVisible: false,
positionX: 0,
positionY: 0
}
},
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)
} else {
this.$store.dispatch('removeFromFavourites', this.item.unique_id)
}
},
downloadItem() {
// Download file
this.$downloadFile(
this.item.file_url,
this.item.name + '.' + this.item.mimetype
)
},
ItemDetail() {
// Dispatch load file info detail
this.$store.dispatch('loadFileInfoDetail', this.item)
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
},
removeItem() {
// Dispatch remove item
this.$store.dispatch('removeItem', this.item)
},
createFolder() {
// Create folder
this.$createFolder('New Folder')
},
closeAndResetContextMenu() {
// Close context menu
this.isVisible = false
// Reset item container
this.item = undefined
},
showContextMenu(event, item) {
let VerticalOffsetArea = item ? this.$refs.list.children.length * 50 : 50
let HorizontalOffsetArea = 150
let container = document.getElementById('files-view')
let x = event.pageX - container.getBoundingClientRect().x
let y = event.pageY - container.getBoundingClientRect().y
// Set position Y
if ((container.offsetHeight - y) < VerticalOffsetArea) {
this.positionY = y - VerticalOffsetArea
} else {
this.positionY = y
}
// Set position X
if ((container.offsetWidth - x) < HorizontalOffsetArea) {
this.positionX = x - HorizontalOffsetArea
} else {
this.positionX = x
}
// Show context menu
this.isVisible = true
}
},
created() {
events.$on('contextMenu:show', (event, item) => {
// Store item
this.item = item
// Show context menu
setTimeout(() => this.showContextMenu(event, item), 10)
})
events.$on('contextMenu:hide', () => (this.closeAndResetContextMenu()))
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.contextmenu {
max-width: 190px;
position: absolute;
z-index: 99;
box-shadow: $shadow;
background: white;
border-radius: 8px;
overflow: hidden;
&.showed {
display: block;
}
.menu-options {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
.menu-option {
font-weight: 600;
@include font-size(15);
padding: 15px 30px;
cursor: pointer;
width: 100%;
&:hover {
background: $light_background;
color: $theme;
}
}
}
}
@media (prefers-color-scheme: dark) {
.contextmenu {
background: $dark_mode_foreground;
.menu-options .menu-option {
&:hover {
background: $dark_mode_background;
}
}
}
}
</style>

212
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div id="desktop-toolbar">
<div class="toolbar-wrapper">
<!-- Go back-->
<div class="toolbar-go-back" v-if="homeDirectory">
<div @click="goBack" class="go-back-button">
<FontAwesomeIcon
v-if="browseHistory.length > 0"
class="icon-back"
icon="chevron-left"
></FontAwesomeIcon>
<span class="back-directory-title">{{
directoryName
}}</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButtonUpload source="upload" action="Upload file"/>
<ToolbarButton
source="trash-alt"
action="Delete"
@click.native="deleteItems"
/>
<ToolbarButton
@click.native="createFolder"
source="folder-plus"
action="Create folder"
/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"
action=""
@click.native="$store.dispatch('changePreviewType')"
/>
<ToolbarButton
:class="{ active: fileInfoVisible }"
@click.native="$store.dispatch('fileInfoToggle')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
</div>
</template>
<script>
import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'ToolBar',
components: {
ToolbarButtonUpload,
UploadProgress,
ToolbarButton,
SearchBar
},
computed: {
...mapGetters([
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
'preview_type',
]),
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
},
previousFolder() {
const length = this.browseHistory.length - 2
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
},
preview() {
return this.preview_type === 'list' ? 'th' : 'th-list'
}
},
data() {
return {
isSidebarMenu: false,
}
},
methods: {
showSidebarMenu() {
this.isSidebarMenu = ! this.isSidebarMenu
events.$emit('show:sidebar')
},
goBack() {
if (this.previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
}
},
deleteItems() {
events.$emit('items:delete')
},
createFolder() {
this.$createFolder()
}
},
created() {
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.toolbar-wrapper {
padding-top: 15px;
padding-bottom: 15px;
display: flex;
position: relative;
z-index: 2;
> div {
width: 100%;
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
}
.directory-name {
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 600;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 12px;
}
.toolbar-go-back {
cursor: pointer;
.back-directory-title {
line-height: 1;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}
}
.toolbar-position {
text-align: center;
span {
@include font-size(17);
font-weight: 600;
}
}
.toolbar-tools {
text-align: right;
.toolbar-button-wrapper {
margin-left: 75px;
display: inline-block;
vertical-align: middle;
&:first-child {
margin-left: 0 !important;
}
}
button {
margin-left: 20px;
&:first-child {
margin-left: 0;
}
}
}
@media (prefers-color-scheme: dark) {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
}
</style>

47
resources/js/components/VueFileManagerComponents/FilesView/EmptyMessage.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="empty-message">
<div class="message">
<FontAwesomeIcon class="icon" :icon="icon" />
<p>{{ message }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'EmptyMessage',
props: ['icon', 'message']
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.empty-message {
text-align: center;
display: flex;
align-items: center;
height: 100%;
.message {
margin: 0 auto;
p {
margin-top: 10px;
max-width: 130px;
@include font-size(14);
font-weight: 500;
color: $text-muted;
}
.icon {
@include font-size(36);
color: $text;
path {
color: $text;
}
}
}
}
</style>

105
resources/js/components/VueFileManagerComponents/FilesView/EmptyPage.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div class="empty-page" v-if="isLoading || isEmpty">
<div class="empty-state">
<div class="text-content" v-if="isEmpty && !isLoading">
<h1 class="title">There is Nothing</h1>
<p v-if="! isTrash" class="description">
Upload some files here easily via upload button
</p>
<ButtonUpload
v-if="! isTrash"
@input.native="$uploadFiles(files)"
v-model="files"
button-style="theme"
>Upload File
</ButtonUpload
>
</div>
<div class="text-content" v-if="isLoading">
<Spinner/>
</div>
</div>
</div>
</template>
<script>
import ButtonUpload from '@/components/VueFileManagerComponents/FilesView/ButtonUpload'
import Spinner from '@/components/VueFileManagerComponents/FilesView/Spinner'
import {mapGetters} from 'vuex'
export default {
name: 'EmptyPage',
props: ['title', 'description'],
components: {
ButtonUpload,
Spinner
},
computed: {
...mapGetters(['data', 'isLoading', 'currentFolder']),
isEmpty() {
return this.data.length == 0
},
isTrash() {
return typeof this.currentFolder.unique_id === 'undefined'
}
},
data() {
return {
files: undefined
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.empty-page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin-top: 85px;
display: flex;
align-items: center;
.empty-state {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
}
.text-content {
text-align: center;
margin: 30px 0;
.title {
@include font-size(24);
color: $text;
font-weight: 600;
margin: 0;
}
.description {
@include font-size(15);
color: $text-muted;
margin-bottom: 20px;
display: block;
}
}
@media (prefers-color-scheme: dark) {
.text-content {
.title {
color: $dark_mode_text_primary;
}
.description {
color: $dark_mode_text_secondary;
}
}
}
</style>

223
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<div v-if="fileInfoDetail">
<div class="file-headline" spellcheck="false">
<!--Image thumbnail-->
<div v-if="fileInfoDetail.type == 'image'" class="image-preview">
<img
@dblclick="$openImageOnNewTab(fileInfoDetail.file_url)"
:src="fileInfoDetail.thumbnail"
:alt="fileInfoDetail.name"
/>
</div>
<!--File info-->
<div class="flex">
<div class="icon">
<div class="icon-preview" @dblclick="getItemAction">
<FontAwesomeIcon
v-if="fileInfoDetail.type == 'folder'"
icon="folder"
></FontAwesomeIcon>
<FontAwesomeIcon
v-if="fileInfoDetail.type == 'file'"
icon="file"
></FontAwesomeIcon>
<FontAwesomeIcon
v-if="fileInfoDetail.type == 'image'"
icon="file-image"
></FontAwesomeIcon>
</div>
</div>
<div class="file-info">
<span ref="name" contenteditable="false" class="name">{{
fileInfoDetail.name
}}</span>
<span class="mimetype">{{ fileInfoDetail.mimetype }}</span>
</div>
</div>
</div>
<!--Info list-->
<ul class="list-info">
<!--Filesize-->
<li v-if="fileInfoDetail.filesize" class="list-info-item">
<b>Size</b>
<span>{{ fileInfoDetail.filesize }}</span>
</li>
<!--Latest change-->
<li v-if="fileInfoDetail.created_at" class="list-info-item">
<b>Created at</b>
<span>{{ fileInfoDetail.created_at }}</span>
</li>
<!--Parent-->
<li class="list-info-item">
<b>Where</b>
<span>{{
fileInfoDetail.parent ? fileInfoDetail.parent.name : 'Home'
}}</span>
</li>
</ul>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
export default {
name: 'FilesInfoPanel',
computed: {
...mapGetters(['fileInfoDetail'])
},
methods: {
getItemAction() {
// Open image on new tab
if (this.fileInfoDetail.type == 'image') {
this.$openImageOnNewTab(this.fileInfoDetail.file_url)
}
// Download file
if (this.fileInfoDetail.type == 'file') {
this.$downloadFile(
this.fileInfoDetail.file_url,
this.fileInfoDetail.name +
'.' +
this.fileInfoDetail.mimetype
)
}
// Open folder
if (this.fileInfoDetail.type == 'folder') {
// Todo: open folder
console.log('Open folder')
}
},
changeItemName: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText === '') return
this.$store.dispatch('changeItemName', {
unique_id: this.fileInfoDetail.unique_id,
type: this.fileInfoDetail.type,
name: e.target.innerText
})
}, 300)
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.file-headline {
background: $light_background;
padding: 12px;
margin-bottom: 20px;
border-radius: 8px;
.image-preview {
width: 100%;
display: block;
margin-bottom: 7px;
img {
border-radius: 4px;
overflow: hidden;
width: 100%;
object-fit: cover;
cursor: pointer;
}
}
.flex {
display: flex;
align-items: top;
}
.icon-preview {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: white;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
/deep/ svg {
@include font-size(22);
path {
fill: $theme;
}
}
&:hover {
.icon path {
fill: $theme;
}
}
}
.file-info {
padding-left: 12px;
width: 100%;
word-break: break-all;
.name {
@include font-size(16);
font-weight: 600;
}
.mimetype {
@include font-size(14);
font-weight: 600;
color: $theme;
display: block;
}
}
}
.list-info {
padding-left: 12px;
.list-info-item {
display: block;
padding-top: 20px;
&:first-child {
padding-top: 0;
}
b {
display: block;
@include font-size(13);
color: $theme;
}
span {
display: block;
@include font-size(16);
font-weight: bold;
}
}
}
@media (prefers-color-scheme: dark) {
.file-headline {
background: $dark_mode_foreground;
.icon-preview {
background: $dark_mode_background;
}
}
}
</style>

391
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue Normal file
View File

@@ -0,0 +1,391 @@
<template>
<div
class="file-wrapper"
@click.stop="clickedItem"
@dblclick="goToItem"
spellcheck="false"
>
<!--Grid preview-->
<div
draggable="true"
@dragstart="$emit('dragstart')"
@drop="
$emit('drop')
area = false
"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
>
<!--Thumbnail for item-->
<div class="icon-item" :class="data.type">
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">{{
data.mimetype
}}</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
<!--Image thumbnail-->
<img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon
v-if="isFolder"
:class="{'is-deleted': isDeleted}"
class="folder-icon"
icon="folder"
/>
</div>
<!--Name-->
<div class="item-name">
<!--Name-->
<span
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile()"
class="name"
>{{ item.name }}</span
>
<!--Other attributes-->
<span v-if="isFile || isImage" class="item-size">{{
data.filesize
}}</span>
<span v-if="isFolder" class="item-length">
{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
</span>
</div>
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile()">
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
</span>
</div>
</div>
</template>
<script>
import {debounce} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FileItem',
props: ['data'],
computed: {
...mapGetters(['preview_type']),
isFolder() {
return this.data.type === 'folder'
},
isFile() {
return this.data.type === 'file'
},
isImage() {
return this.data.type === 'image'
},
timeStamp() {
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
},
folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items
},
isDeleted() {
return this.data.deleted_at ? true : false
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
}
},
data() {
return {
isClicked: false,
area: false,
item: undefined
}
},
methods: {
showItemActions() {
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
events.$emit('mobileMenu:show')
},
dragEnter() {
if (this.data.type !== 'folder') return
this.area = true
},
dragLeave() {
this.area = false
},
clickedItem(e) {
events.$emit('contextMenu:hide')
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
}
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
// Get target classname
let itemClass = e.target.className
if (
['name', 'icon', 'file-link', 'file-icon-text'].includes(
itemClass
)
)
return
},
goToItem() {
if (this.isImage) {
this.$openImageOnNewTab(this.data.file_url)
}
if (this.isFile) {
this.$downloadFile(
this.data.file_url,
this.data.name + '.' + this.data.mimetype
)
}
if (this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
}
},
changeItemName: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText === '') return
this.$store.dispatch('changeItemName', {
unique_id: this.data.unique_id,
type: this.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.item = this.data
events.$on('fileItem:clicked', unique_id => {
if (this.data.unique_id == unique_id) {
this.isClicked = true
} else {
this.isClicked = false
}
})
events.$on('fileItem:deselect', () => {
// Deselect file
this.isClicked = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.show-actions {
cursor: pointer;
padding: 4px 26px;
.icon-action {
@include font-size(12);
}
path {
fill: $theme;
}
}
.file-wrapper {
position: relative;
text-align: center;
display: inline-block;
vertical-align: text-top;
width: 100%;
.item-name {
display: block;
padding-left: 10px;
padding-right: 10px;
line-height: 20px;
.item-size,
.item-length {
@include font-size(12);
font-weight: 100;
color: $text-muted;
display: block;
}
.name {
display: block;
&[contenteditable='true']:hover {
text-decoration: underline;
}
}
.name {
color: $text;
@include font-size(15);
font-weight: 700;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
&.actived {
max-height: initial;
}
}
}
&.selected {
.file-item {
background: $light_background;
}
}
.file-item {
border: 2px dashed transparent;
width: 165px;
margin: 0 auto;
cursor: pointer;
position: relative;
padding: 15px 0;
&.is-dragenter {
border: 2px dashed $theme;
border-radius: 8px;
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background;
.item-name .name {
color: $theme;
}
}
}
.icon-item {
position: relative;
height: 110px;
margin-bottom: 20px;
display: flex;
align-items: center;
.file-link {
display: block;
}
.file-icon {
@include font-size(100);
margin: 0 auto;
path {
fill: #fafafc;
stroke: #dfe0e8;
stroke-width: 1;
}
}
&.file {
.file-icon-text {
margin: 5px auto 0;
position: absolute;
text-align: center;
left: 0;
right: 0;
color: $theme;
font-weight: 600;
user-select: none;
max-width: 65px;
max-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.image {
img {
max-width: 95%;
object-fit: cover;
user-select: none;
height: 110px;
border-radius: 5px;
margin: 0 auto;
}
}
&.folder {
align-items: flex-end;
}
.folder-icon {
@include font-size(80);
margin: 0 auto;
path {
fill: $theme;
}
&.is-deleted {
path {
fill: $dark_background;
}
}
}
}
}
@media (prefers-color-scheme: dark) {
.file-wrapper {
.icon-item .file-icon {
path {
fill: $dark_mode_foreground;
stroke: #2F3C54;
}
}
.file-item {
&:hover,
&.is-clicked {
background: $dark_mode_foreground;
.file-icon {
path {
fill: $dark_mode_background;
}
}
}
}
.item-name .name {
color: $dark_mode_text_primary;
}
}
}
</style>

400
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue Normal file
View File

@@ -0,0 +1,400 @@
<template>
<div
@click.stop="clickedItem" @dblclick="goToItem"
class="file-wrapper"
spellcheck="false"
>
<!--List preview-->
<div
draggable="true"
@dragstart="$emit('dragstart')"
@drop="
$emit('drop')
area = false
"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
>
<!--Thumbnail for item-->
<div class="icon-item" :class="data.type">
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">{{
data.mimetype | limitCharacters
}}</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
<!--Image thumbnail-->
<img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon
v-if="isFolder"
:class="{'is-deleted': isDeleted}"
class="folder-icon"
icon="folder"
/>
</div>
<!--Name-->
<div class="item-name">
<!--Name-->
<span
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile()"
class="name"
>{{ item.name }}</span
>
<!--Other attributes-->
<span v-if="isFile || isImage" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
<span v-if="isFolder" class="item-length">
{{ folderItems == 0 ? 'Empty' : (folderItems + ' Item') | pluralize(folderItems) }}, {{ timeStamp }}
</span>
</div>
<!--Go Next icon-->
<div class="actions" v-if="$isMobile()">
<span @click.stop="showItemActions" class="show-actions">
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span>
</div>
</div>
</div>
</template>
<script>
import {debounce} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FileItem',
props: ['data'],
computed: {
...mapGetters(['preview_type']),
isFolder() {
return this.data.type === 'folder'
},
isFile() {
return this.data.type === 'file'
},
isImage() {
return this.data.type === 'image'
},
timeStamp() {
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
},
folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items
},
isDeleted() {
return this.data.deleted_at ? true : false
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
},
limitCharacters(str) {
if (str.length > 3) {
return str.substring(0, 3) + '...';
} else {
return str.substring(0, 3);
}
}
},
data() {
return {
isClicked: false,
area: false,
item: undefined,
}
},
methods: {
showItemActions() {
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
//this.isClicked = true
events.$emit('mobileMenu:show')
},
dragEnter() {
if (this.data.type !== 'folder') return
this.area = true
},
dragLeave() {
this.area = false
},
clickedItem(e) {
events.$emit('contextMenu:hide')
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
}
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
// Get target classname
let itemClass = e.target.className
if (
['name', 'icon', 'file-link', 'file-icon-text'].includes(
itemClass
)
)
return
},
goToItem() {
if (this.isImage) {
this.$openImageOnNewTab(this.data.file_url)
}
if (this.isFile) {
this.$downloadFile(
this.data.file_url,
this.data.name + '.' + this.data.mimetype
)
}
if (this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
}
},
changeItemName: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText === '') return
this.$store.dispatch('changeItemName', {
unique_id: this.data.unique_id,
type: this.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.item = this.data
events.$on('fileItem:clicked', unique_id => {
if (this.data.unique_id == unique_id) {
this.isClicked = true
} else {
this.isClicked = false
}
})
events.$on('fileItem:deselect', () => {
// Deselect file
this.isClicked = false
})
},
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.file-wrapper {
position: relative;
&:hover {
border-color: transparent;
}
.actions {
text-align: right;
width: 50px;
.show-actions {
cursor: pointer;
padding: 12px 6px 12px;
.icon-action {
@include font-size(14);
path {
fill: $theme;
}
}
}
}
.item-name {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.item-size,
.item-length {
@include font-size(12);
font-weight: 100;
color: $text-muted;
display: block;
}
.name {
white-space: nowrap;
//display: inline-block;
&[contenteditable='true']:hover {
text-decoration: underline;
}
}
.name {
color: $text;
@include font-size(15);
font-weight: 700;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
&.actived {
max-height: initial;
}
}
}
&.selected {
.file-item {
background: $light_background;
}
}
.icon-item {
position: relative;
flex: 0 0 50px;
line-height: 0;
margin-right: 20px;
.folder-icon {
@include font-size(52);
path {
fill: $theme;
}
&.is-deleted {
path {
fill: $dark_background;
}
}
}
.file-icon {
@include font-size(45);
path {
fill: #fafafc;
stroke: #dfe0e8;
stroke-width: 1;
}
}
&.file {
text-align: center;
.file-icon-text {
line-height: 1;
top: 40%;
@include font-size(11);
margin: 0 auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
color: $theme;
font-weight: 600;
user-select: none;
max-width: 50px;
max-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.image {
img {
object-fit: cover;
user-select: none;
max-width: 100%;
border-radius: 5px;
width: 50px;
height: 50px;
}
}
}
.file-item {
border: 2px dashed transparent;
width: 100%;
display: flex;
align-items: center;
padding: 7px;
&.is-dragenter {
border: 2px dashed $theme;
border-radius: 8px;
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background;
.item-name .name {
color: $theme;
}
}
}
}
@media (prefers-color-scheme: dark) {
.file-wrapper {
.icon-item .file-icon {
path {
fill: $dark_mode_foreground;
stroke: #2F3C54;
}
}
.file-item {
&:hover,
&.is-clicked {
background: $dark_mode_foreground;
.file-icon {
path {
fill: $dark_mode_background;
}
}
}
}
.item-name .name {
color: $dark_mode_text_primary;
}
}
}
</style>

282
resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<div class="file-content" :class="{ 'is-offset': uploadingFilesCount }">
<div
class="files-container"
ref="fileContainer"
:class="{
'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale()
}"
@click.self="filesContainerClick"
>
<!--MobileToolbar-->
<MobileToolbar v-if="$isMinimalScale()"/>
<!--Searchbar-->
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
<!--Mobile Actions-->
<MobileActions v-if="$isMinimalScale()" />
<!--Item previews list-->
<div v-if="isList" class="file-list-wrapper">
<transition-group
name="file"
tag="section"
class="file-list"
:class="preview_type"
>
<FileItemList
@dragstart="dragStart(item)"
@drop="dragFinish(item)"
@click.native="clickedFileItem(item.unique_id)"
@contextmenu.native.prevent="contextMenu($event, item)"
:data="item"
v-for="item in data"
:key="item.unique_id"
class="file-item"
/>
</transition-group>
</div>
<!--Item previews grid-->
<div v-if="isGrid" class="file-grid-wrapper">
<transition-group
name="file"
tag="section"
class="file-list"
:class="preview_type"
>
<FileItemGrid
@dragstart="dragStart(item)"
@drop="dragFinish(item)"
@click.native="clickedFileItem(item.unique_id)"
@contextmenu.native.prevent="contextMenu($event, item)"
:data="item"
v-for="item in data"
:key="item.unique_id"
class="file-item"
/>
</transition-group>
</div>
<!--Show empty page if folder is empty-->
<EmptyPage v-if="!isSearching"/>
<!--Show empty page if no search results-->
<EmptyMessage
v-if="isSearching && isEmpty"
message="Nothing was found."
icon="eye-slash"
/>
</div>
<div
v-if="!$isMinimalScale()"
class="file-info-container"
:class="{ 'is-fileinfo-visible': fileInfoVisible }"
>
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail"/>
<!--If file info panel empty show message-->
<EmptyMessage
v-if="!fileInfoDetail"
message="There is nothing to preview."
icon="eye-slash"
/>
</div>
</div>
</template>
<script>
import MobileToolbar from '@/components/VueFileManagerComponents/FilesView/MobileToolbar'
import MobileActions from '@/components/VueFileManagerComponents/FilesView/MobileActions'
import FileInfoPanel from '@/components/VueFileManagerComponents/FilesView/FileInfoPanel'
import FileItemList from '@/components/VueFileManagerComponents/FilesView/FileItemList'
import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
import EmptyMessage from '@/components/VueFileManagerComponents/FilesView/EmptyMessage'
import EmptyPage from '@/components/VueFileManagerComponents/FilesView/EmptyPage'
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FilesContainer',
components: {
MobileToolbar,
MobileActions,
FileInfoPanel,
FileItemList,
FileItemGrid,
EmptyMessage,
SearchBar,
EmptyPage
},
computed: {
...mapGetters([
'uploadingFilesCount',
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'preview_type',
'isSearching',
'isLoading',
'data'
]),
isGrid() {
return this.preview_type === 'grid'
},
isList() {
return this.preview_type === 'list'
},
isEmpty() {
return this.data.length == 0
},
},
data() {
return {
draggingId: undefined
}
},
methods: {
dragStart(data) {
events.$emit('dragstart', data)
// Store dragged folder
this.draggingId = data
},
dragFinish(data) {
// Prevent to drop on file or image
if (data.type !== 'folder' || this.draggingId === data) return
// Move folder to new parent
this.moveTo(this.draggingId, data)
},
moveTo(from_item, to_item) {
this.$store.dispatch('moveItem', [from_item, to_item])
},
clickedFileItem(unique_id) {
events.$emit('fileItem:clicked', unique_id)
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
filesContainerClick(e) {
if (e.target.className === 'file-list grid') {
events.$emit('fileItem:deselect')
}
events.$emit('contextMenu:hide')
}
},
created() {
events.$on('fileItem:deselect', () =>
this.$store.commit('CLEAR_FILEINFO_DETAIL')
)
events.$on('scrollTop', () => {
// Scroll top
var container = document.getElementsByClassName(
'files-container'
)[0]
if (container) container.scrollTop = 0
})
// On items delete
events.$on('items:delete', () => {
this.$store.dispatch('removeItem', this.fileInfoDetail)
//let ids = []
//let items = []
// Get ids
/*this.$children[0].$children.filter(item => {
if (item.isClicked) {
ids.push(item.data.unique_id)
items.push({
unique_id: item.data.unique_id,
type: item.data.type,
})
}
})*/
// Dispatch action
/*this.$store.dispatch('removeItems', [ids, items])*/
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button-upload {
display: block;
text-align: center;
margin: 20px 0;
}
.mobile-search {
margin-bottom: 10px;
margin-top: 10px;
}
.file-content {
position: relative;
display: flex;
flex-wrap: nowrap;
}
.files-container {
overflow-y: auto;
flex: 0 0 100%;
@include transition(150ms);
position: relative;
&.is-fileinfo-visible {
flex: 0 1 100%;
}
.file-list {
&.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 180px);
justify-content: space-evenly;
}
}
}
.file-info-container {
flex: 0 0 300px;
padding-left: 20px;
overflow: auto;
}
// Transition
.file-move {
transition: transform 0.6s;
}
.file-enter-active {
transition: all 300ms ease;
}
.file-leave-active {
transition: all 0ms;
}
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
{
opacity: 0;
transform: translateX(-20px);
}
.file-leave-active {
position: absolute;
}
</style>

49
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<span class="label">{{ text }}</span>
</button>
</template>
<script>
export default {
name: 'MobileActionButton',
props: [
'icon', 'text'
],
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.mobile-action-button {
background: $light_background;
margin-right: 15px;
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
border: none;
.icon {
margin-right: 10px;
@include font-size(14);
}
.label {
@include font-size(14);
font-weight: 700;
}
}
@media (prefers-color-scheme: dark) {
.mobile-action-button {
background: $dark_mode_foreground;
.icon path {
color: $theme;
}
}
}
</style>

70
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<label label="file" class="label button file-input button-base">
{{ text }}
<input
accept="*"
v-show="false"
@change="emmitFiles"
id="file"
type="file"
name="files[]"
multiple
/>
</label>
</button>
</template>
<script>
export default {
name: 'MobileActionButtonUpload',
props: [
'icon', 'text'
],
data() {
return {
files: undefined
}
},
methods: {
emmitFiles(e) {
this.$uploadFiles(e.target.files)
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.mobile-action-button {
background: $light_background;
margin-right: 15px;
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
border: none;
.icon {
margin-right: 8px;
@include font-size(14);
}
.label {
@include font-size(14);
font-weight: 700;
}
}
@media (prefers-color-scheme: dark) {
.mobile-action-button {
background: $dark_mode_foreground;
.icon path {
color: $theme;
}
}
}
</style>

79
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div id="mobile-actions-wrapper">
<div class="mobile-actions">
<MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" text="Add Folder"></MobileActionButton>
<MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" text="Upload"></MobileActionButtonUpload>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
<MobileActionButton v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" text="Empty Trash"></MobileActionButton>
</div>
<UploadProgress />
</div>
</template>
<script>
import MobileActionButtonUpload from '@/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload'
import MobileActionButton from '@/components/VueFileManagerComponents/FilesView/MobileActionButton'
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from '@/bus'
export default {
name: 'MobileActions',
components: {
MobileActionButtonUpload,
MobileActionButton,
UploadProgress,
},
computed: {
...mapGetters(['preview_type']),
previewIcon() {
return this.preview_type === 'list' ? 'th' : 'th-list'
},
previewText() {
return this.preview_type === 'list' ? 'Grid' : 'List'
}
},
methods: {
switchPreview() {
this.$store.dispatch('changePreviewType')
},
createFolder() {
if (this.$isMobile()) {
let folderName = prompt('Please enter your new folder name')
// Create folder
if (folderName) this.$createFolder(folderName)
} else {
// Create folder
this.$createFolder('New Folder')
}
},
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
#mobile-actions-wrapper {
background: white;
position: sticky;
top: 35px;
z-index: 3;
}
.mobile-actions {
padding-top: 10px;
padding-bottom: 10px;
white-space: nowrap;
overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
#mobile-actions-wrapper {
background: $dark_mode_background;
}
}
</style>

247
resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue Normal file
View File

@@ -0,0 +1,247 @@
<template>
<div class="options-wrapper">
<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>
<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="downloadItem"
v-if="isFile || isImage"
>
Download
</li>
<li
class="menu-option delete"
@click="removeItem"
v-if="fileInfoDetail"
>
Delete
</li>
</ul>
</div>
</div>
</transition>
<transition name="fade">
<div
v-show="isVisible"
class="vignette"
@click="closeAndResetContextMenu"
></div>
</transition>
</div>
</template>
<script>
import {events} from '@/bus'
import {mapGetters} from 'vuex'
export default {
name: 'MobileOptionList',
computed: {
...mapGetters(['fileInfoDetail', 'app']),
isInFavourites() {
return this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)
},
isFile() {
return this.fileInfoDetail && this.fileInfoDetail.type === 'file'
? true
: false
},
isImage() {
return this.fileInfoDetail && this.fileInfoDetail.type === 'image'
? true
: false
},
isFolder() {
return this.fileInfoDetail && this.fileInfoDetail.type === 'folder'
? true
: false
}
},
data() {
return {
isVisible: false
}
},
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)
} else {
this.$store.dispatch('removeFromFavourites', this.fileInfoDetail.unique_id)
}
},
downloadItem() {
// Download file
this.$downloadFile(
this.fileInfoDetail.file_url,
this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
)
},
removeItem() {
// Dispatch remove item
this.$store.dispatch('removeItem', this.fileInfoDetail)
},
renameItem() {
let itemName = prompt(
'Change your item name',
this.fileInfoDetail.name
)
if (itemName && itemName !== '') {
this.$store.dispatch('changeItemName', {
unique_id: this.fileInfoDetail.unique_id,
type: this.fileInfoDetail.type,
name: itemName
})
}
},
closeAndResetContextMenu() {
events.$emit('fileItem:deselect')
// Close context menu
this.isVisible = false
}
},
created() {
events.$on('mobileMenu:show', () => {
// Show context menu
this.isVisible = !this.isVisible
})
events.$on('mobileMenu:hide', () => {
this.isVisible = false
})
events.$on('mobileMenu:hide', () => {
this.isVisible = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.vignette {
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
cursor: pointer;
opacity: 1;
}
.options {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
overflow: hidden;
&.showed {
display: block;
}
.menu-wrapper {
margin: 15px;
}
.menu-options {
margin-top: 10px;
box-shadow: $shadow;
background: white;
border-radius: 8px;
list-style: none;
width: 100%;
.menu-option {
font-weight: 600;
@include font-size(15);
cursor: pointer;
width: 100%;
padding: 20px 10px;
text-align: center;
border-bottom: 1px solid $light_background;
&:last-child {
border: none;
}
}
}
}
@media (prefers-color-scheme: dark) {
.vignette {
background: $dark_mode_vignette;
}
.options {
.menu-options {
background: $dark_mode_foreground;
.menu-option {
border-color: rgba($dark_mode_background, .5);
}
}
}
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 300ms ease;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 300ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-leave-active {
position: absolute;
}
</style>

156
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<div class="mobile-toolbar">
<!-- Go back-->
<div @click="goBack" class="go-back-button">
<FontAwesomeIcon
:class="{'is-visible': browseHistory.length > 0}"
class="icon-back"
icon="chevron-left"
></FontAwesomeIcon>
</div>
<!--Folder Title-->
<div class="directory-name">{{ directoryName }}</div>
<!--More Actions-->
<div class="more-actions-button" @click="showSidebarMenu">
<FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
</div>
</div>
</template>
<script>
import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'MobileToolBar',
components: {
ToolbarButtonUpload,
ToolbarButton,
SearchBar
},
computed: {
...mapGetters([
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
'preview_type',
'appSize',
]),
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
},
previousFolder() {
const length = this.browseHistory.length - 2
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
},
isSmallAppSize() {
return this.appSize === 'small'
}
},
data() {
return {
isSidebarMenu: false,
}
},
methods: {
showSidebarMenu() {
this.isSidebarMenu = ! this.isSidebarMenu
events.$emit('show:sidebar')
},
goBack() {
if (this.previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
}
},
},
created() {
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.mobile-toolbar {
background: white;
text-align: center;
display: flex;
padding: 10px 0;
position: sticky;
top: 0;
z-index: 6;
> div {
width: 100%;
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
.go-back-button {
text-align: left;
flex: 1;
.icon-back {
vertical-align: middle;
cursor: pointer;
opacity: 0;
visibility: hidden;
&.is-visible {
opacity: 1;
visibility: visible;
}
}
}
.directory-name {
line-height: 1;
text-align: center;
width: 100%;
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 600;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.more-actions-button {
flex: 1;
text-align: right;
}
}
@media (prefers-color-scheme: dark) {
.mobile-toolbar {
background: $dark_mode_background;
.directory-name {
color: $dark_mode_text_primary;
}
}
}
</style>

46
resources/js/components/VueFileManagerComponents/FilesView/ProgressBar.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="progress-bar">
<span :style="{ width: progress + '%' }"></span>
</div>
</template>
<script>
export default {
name: 'ProgressBar',
props: ['progress']
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.progress-bar {
width: 100%;
height: 5px;
background: $dark_background;
margin-top: 5px;
border-radius: 10px;
span {
background: $theme;
display: block;
height: 100%;
border-radius: 10px;
max-width: 100%;
}
}
@media (prefers-color-scheme: dark) {
.progress-bar {
background: $dark_mode_foreground;
}
}
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
.progress-bar {
background: $dark_mode_background;
}
}
</style>

133
resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<div class="search-bar">
<input
v-model="query"
class="query"
type="text"
name="query"
placeholder="Search files…"
/>
<div class="icon" v-if="!isQuery">
<FontAwesomeIcon icon="search"></FontAwesomeIcon>
</div>
<div class="icon" v-if="isQuery" @click="resetQuery">
<FontAwesomeIcon icon="times" class="pointer"></FontAwesomeIcon>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from '@/bus'
export default {
name: 'SearchBar',
computed: {
...mapGetters(['currentFolder']),
isQuery() {
return this.query !== '' && typeof this.query !== 'undefined'
}
},
data() {
return {
query: ''
}
},
watch: {
query(val) {
return this.getResult(val)
}
},
methods: {
resetQuery() {
this.query = ''
},
getResult: debounce(function (value) {
if (this.isQuery) {
// Get search result if query is not empty
this.$store.dispatch('getSearchResult', value)
} else if (typeof value !== 'undefined') {
if (this.currentFolder) {
// Get back after delete query to previosly folder
this.$store.dispatch('goToFolder', [
this.currentFolder,
true
])
}
this.$store.commit('CHANGE_SEARCHING_STATE', false)
}
}, 300)
},
created() {
events.$on('clear-query', () => (this.query = undefined))
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.search-bar {
position: relative;
input {
//width: 100%;
background: $light_background;
border-radius: 8px;
outline: 0;
padding: 9px 20px;
font-weight: 100;
@include font-size(16);
min-width: 380px;
transition: 0.15s all ease;
border: 1px solid white;
-webkit-appearance: none;
&::placeholder {
color: $text;
@include font-size(14);
}
&:focus {
border: 1px solid $theme;
box-shadow: 0 0 7px rgba($theme, 0.3);
}
&:focus + .icon {
path {
fill: $theme;
}
}
}
.icon {
position: absolute;
top: 0;
right: 0;
padding: 10px 15px;
.pointer {
cursor: pointer;
}
}
}
@media (prefers-color-scheme: dark) {
.search-bar {
input {
background: $dark_mode_foreground;
border-color: $dark_mode_foreground;
&::placeholder {
color: $dark_mode_text_secondary;
}
}
.icon svg path {
fill: $dark_mode_text_secondary;
}
}
}
</style>

45
resources/js/components/VueFileManagerComponents/FilesView/Spinner.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
</div>
</template>
<script>
export default {
name: 'Spinner'
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
#loading-bar-spinner.spinner {
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
position: absolute;
z-index: 19 !important;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 40px;
height: 40px;
border: solid 4px transparent;
border-top-color: $theme !important;
border-left-color: $theme !important;
border-radius: 50%;
}
@keyframes loading-bar-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>

63
resources/js/components/VueFileManagerComponents/FilesView/ToolbarButton.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<button class="button" :title="action">
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
</button>
</template>
<script>
export default {
name: 'ToolbarButton',
props: ['source', 'action']
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: $light_background;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
.icon {
@include font-size(16);
}
&:hover {
background: rgba($theme, .1);
/deep/ svg path {
@include transition;
fill: $theme;
}
}
&.active {
background: rgba($theme, .1);
/deep/ svg path {
fill: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.button {
background: $dark_mode_foreground;
}
.icon svg path {
fill: $dark_mode_text_secondary;
}
}
</style>

68
resources/js/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<label label="file" class="button file-input">
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
<input
@change="emmitFiles"
v-show="false"
id="file"
type="file"
name="files[]"
multiple
/>
</label>
</template>
<script>
export default {
name: 'ToolbarButtonUpload',
props: ['source', 'action'],
methods: {
emmitFiles(e) {
this.$uploadFiles(e.target.files)
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.button {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: $light_background;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
&:hover {
background: rgba($theme, .1);
/deep/ svg path {
@include transition;
fill: $theme;
}
}
.icon {
@include font-size(16);
}
}
@media (prefers-color-scheme: dark) {
.button {
background: $dark_mode_foreground;
}
.icon svg path {
fill: $dark_mode_text_secondary;
}
}
</style>

66
resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<transition name="info-panel">
<div v-if="uploadingFilesCount" class="upload-progress">
<div class="progress-title">
<span
>Uploading files {{ uploadingFilesCount.current }}/{{
uploadingFilesCount.total
}}</span
>
</div>
<ProgressBar :progress="uploadingFileProgress"/>
</div>
</transition>
</template>
<script>
import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
import {mapGetters} from 'vuex'
export default {
name: 'UploadProgress',
components: {
ProgressBar,
},
computed: {
...mapGetters(['uploadingFileProgress', 'uploadingFilesCount'])
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.info-panel-enter-active,
.info-panel-leave-active {
transition: all 0.3s ease;
}
.info-panel-enter,
.info-panel-leave-to {
opacity: 0;
transform: translateY(-100%);
}
.upload-progress {
width: 100%;
padding-bottom: 10px;
position: relative;
z-index: 1;
.progress-title {
font-weight: 700;
text-align: center;
span {
@include font-size(14);
}
}
}
@media (prefers-color-scheme: dark) {
.progress-bar {
background: $dark_mode_foreground;
}
}
</style>

80
resources/js/components/VueFileManagerComponents/Others/PageHeader.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="page-header" @click="goHome">
<div class="icon" v-if="isSmallAppSize">
<FontAwesomeIcon icon="chevron-left" />
</div>
<div class="content">
<h1 class="title">{{ title }}</h1>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'PageHeader',
props: [
'title', 'description'
],
computed: {
...mapGetters(['appSize']),
isSmallAppSize() {
return this.appSize === 'small'
}
},
methods: {
goHome() {
if (this.isSmallAppSize) events.$emit('show:sidebar')
}
}
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
.page-header {
display: flex;
align-items: center;
padding: 20px 30px;
background: white;
position: sticky;
top: 0;
z-index: 9;
.title {
@include font-size(22);
font-weight: 700;
}
.icon {
@include font-size(16);
margin-right: 15px;
cursor: pointer;
}
}
@media only screen and (max-width: 960px) {
.page-header {
padding: 20px 15px;
.title {
@include font-size(18);
}
}
}
@media (prefers-color-scheme: dark) {
.page-header {
background: $dark_mode_background;
.icon path {
fill: $theme;
}
}
}
</style>

24
resources/js/components/VueFileManagerComponents/Others/TextLabel.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<b class="text-label">
<slot></slot>
</b>
</template>
<script>
export default {
name: 'TextLabel',
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
.text-label {
@include font-size(11);
color: $light_text;
text-transform: uppercase;
font-weight: 900;
display: block;
margin-bottom: 5px;
}
</style>

24
resources/js/components/VueFileManagerComponents/Others/ThemeLabel.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<b class="theme-label">
<slot></slot>
</b>
</template>
<script>
export default {
name: 'TextLabel',
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
.theme-label {
@include font-size(14);
color: $theme;
text-transform: uppercase;
font-weight: 900;
display: block;
margin-bottom: 5px;
}
</style>

90
resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div class="dropzone" :class="{ 'is-error': error }">
<input
ref="file"
type="file"
@change="showImagePreview($event)"
:name="name"
class="dummy"
/>
<img
ref="image"
:src="imagePreview"
class="image-preview"
v-if="data || imagePreview"
/>
</div>
</template>
<script>
export default {
props: ['label', 'name', 'avatar', 'info', 'error'],
data() {
return {
imagePreview: undefined
}
},
watch: {
imagePreview(val) {
this.$store.commit('UPDATE_AVATAR', val)
}
},
methods: {
showImagePreview(event) {
const imgPath = event.target.files[0].name,
extn = imgPath
.substring(imgPath.lastIndexOf('.') + 1)
.toLowerCase()
if (['png', 'jpg', 'jpeg'].includes(extn)) {
const file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
// Update user avatar
this.$updateImage('/user/profile', 'avatar', event.target.files[0])
} else {
alert('You may have uploaded the wrong file, try again!')
}
}
},
created() {
// If has default image then load
if (this.avatar) this.imagePreview = this.avatar
}
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
.dropzone {
position: relative;
line-height: 0;
input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
cursor: pointer;
}
.image-preview {
width: 75px;
height: 75px;
object-fit: cover;
border-radius: 8px;
border: 1px dashed $theme;
padding: 2px;
}
}
</style>

423
resources/js/components/VueFileManagerComponents/Sidebar.vue Normal file
View File

@@ -0,0 +1,423 @@
<template>
<transition name="sidebar">
<div id="sidebar" v-if="isVisibleSidebar || ! isSmallAppSize">
<!--User Headline-->
<UserHeadline/>
<div v-if="app" class="content-scroller">
<!--Locations-->
<div class="menu-list-wrapper">
<TextLabel>Locations</TextLabel>
<ul class="menu-list">
<li class="menu-list-item" @click="goHome">
<FontAwesomeIcon class="icon" icon="hdd"/>
<span class="label">Home</span>
</li>
<!--<li class="menu-list-item">
<FontAwesomeIcon class="icon" icon="share"/>
<span class="label">Shared</span>
</li>-->
<li class="menu-list-item" @click="getTrash">
<FontAwesomeIcon class="icon" icon="trash-alt"/>
<span class="label">Trash</span>
</li>
</ul>
</div>
<!--Favourites-->
<div class="menu-list-wrapper favourites"
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@drop="dragFinish($event)"
:class="{ 'is-dragenter': area }"
>
<TextLabel>Favourites</TextLabel>
<transition-group tag="ul" class="menu-list" name="folder-item">
<li class="empty-list" v-if="app.favourites.length == 0" :key="0">Drag here your favourite
folder.
</li>
<li @click.stop="openFolder(folder)" class="menu-list-item" v-for="folder in app.favourites"
:key="folder.unique_id">
<div>
<FontAwesomeIcon class="icon" icon="folder"/>
<span class="label">{{ folder.name }}</span>
</div>
<FontAwesomeIcon @click.stop="removeFavourite(folder)" v-if="! $isMobile()" class="delete-icon" icon="times"/>
</li>
</transition-group>
</div>
<!--Last Uploads-->
<div class="menu-list-wrapper">
<TextLabel>Last Uploads</TextLabel>
<p class="empty-list" v-if="app.latest_uploads.length == 0">You don't have any latest uploads.</p>
<FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)"
:file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
</div>
</div>
<!--Storage Size Info-->
<StorageSize/>
<div v-if="isSmallAppSize" class="log-out-button">
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">Log Out</ButtonBase>
</div>
</div>
</transition>
</template>
<script>
import FileListItemThumbnail from '@/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail'
import UserHeadline from '@/components/VueFileManagerComponents/Sidebar/UserHeadline'
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import StorageSize from '@/components/VueFileManagerComponents/Sidebar/StorageSize'
import TextLabel from '@/components/VueFileManagerComponents/Others/TextLabel'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'Sidebar',
components: {
FileListItemThumbnail,
UserHeadline,
StorageSize,
ButtonBase,
TextLabel,
},
computed: {
...mapGetters(['homeDirectory', 'app', 'appSize']),
isSmallAppSize() {
return this.appSize === 'small'
}
},
data() {
return {
area: false,
draggedItem: undefined,
isVisibleSidebar: false,
}
},
methods: {
getTrash() {
this.$store.dispatch('getTrash')
},
goHome() {
this.$store.commit('FLUSH_BROWSER_HISTORY')
this.$store.dispatch('goToFolder', [this.homeDirectory, true])
},
openFolder(folder) {
// Go to folder
this.$store.dispatch('goToFolder', [folder, false])
},
downloadFile(file) {
this.$downloadFile(file.file_url, file.name + '.' + file.mimetype)
},
showFileDetail(file) {
// Dispatch load file info detail
this.$store.dispatch('getLatestUploadDetail', file)
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
this.area = true
},
dragLeave() {
this.area = false
},
dragFinish() {
this.area = false
// Check if draged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// Check if folder exist in favourites
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)
},
removeFavourite(folder) {
// Remove favourites folder
this.$store.dispatch('removeFromFavourites', folder.unique_id)
}
},
mounted() {
this.$store.dispatch('getAppData')
// Listen for dragstart folder items
events.$on('dragstart', (item) => this.draggedItem = item)
// Listen for show sidebar
events.$on('show:sidebar', () => {
this.isVisibleSidebar = !this.isVisibleSidebar
})
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isVisibleSidebar) this.isVisibleSidebar = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
#sidebar {
position: relative;
flex: 0 0 295px;
border-right: 1px solid $light_background;
}
.content-scroller {
bottom: 50px;
position: absolute;
top: 75px;
left: 0;
right: 0;
overflow-x: auto;
.menu-list-wrapper:first-of-type {
margin-top: 20px;
}
.text-label {
margin-left: 15px;
}
}
.menu-list-wrapper {
margin-bottom: 25px;
&.favourites {
&.is-dragenter {
.menu-list {
border: 2px dashed $theme;
border-radius: 8px;
}
}
.menu-list {
border: 2px dashed transparent;
.menu-list-item {
padding: 10px 13px;
.icon {
@include font-size(20);
width: 20px;
path {
fill: $theme;
}
}
}
}
}
.menu-list {
.menu-list-item {
display: block;
padding: 10px 13px;
@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;
margin-right: 15px;
vertical-align: middle;
path {
fill: $theme;
}
}
.delete-icon {
display: none;
position: absolute;
right: 15px;
top: 50%;
@include transform(translateY(-50%));
@include font-size(12);
path {
fill: $text-muted;
}
}
.label {
@include font-size(15);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
max-width: 210px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
}
}
.empty-list {
@include font-size(12);
color: $text-muted;
display: block;
padding: 15px;
}
}
.log-out-button {
margin-top: 15px;
padding: 15px;
button {
width: 100%;
}
}
@media only screen and (max-width: 1024px) {
#sidebar {
flex: 0 0 265px;
}
.menu-list-wrapper .menu-list .menu-list-item .label {
max-width: 190px;
}
}
@media only screen and (max-width: 690px) {
.content-scroller {
bottom: initial;
position: relative;
top: initial;
overflow-x: initial;
}
#sidebar {
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
right: 0;
z-index: 99;
bottom: 0;
background: white;
opacity: 1;
}
.menu-list-wrapper {
&.favourites {
.menu-list .menu-list-item {
padding: 10px 26px;
}
}
.menu-list .menu-list-item {
padding: 10px 26px;
.label {
@include font-size(16);
}
}
}
.log-out-button {
margin-top: 0;
}
}
@media (prefers-color-scheme: dark) {
#sidebar {
border-color: $dark_mode_foreground;
background: $dark_mode_foreground;
}
.menu-list-wrapper {
.menu-list .menu-list-item:hover {
background: rgba($theme, .1);
}
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px){
#sidebar {
border-color: $dark_mode_background;
background: $dark_mode_background;
}
}
.sidebar-enter-active {
transition: all 300ms ease;
}
.sidebar-enter /* .list-leave-active below version 2.1.8 */
{
opacity: 0;
transform: translateX(-100%);
}
// Transition
.folder-item-move {
transition: transform 300s ease;
}
.folder-item-enter-active {
transition: all 300ms ease;
}
.folder-item-leave-active {
transition: all 300ms;
}
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
{
opacity: 0;
transform: translateX(30px);
}
.folder-item-leave-active {
position: absolute;
}
</style>

194
resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="file-item">
<!--Thumbnail for item-->
<div class="icon-item" :class="file.type">
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
<!--Image thumbnail-->
<img v-if="isImage" :src="file.thumbnail" :alt="file.name" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder" class="folder-icon" icon="folder" />
</div>
<!--Name-->
<div class="item-name">
<!--Name-->
<span class="name" >{{ file.name }}</span>
<!--Other attributes-->
<span v-if="isFile || isImage" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>
<span v-if="isFolder" class="item-length">{{ file.items == 0 ? 'Empty' : (file.items + ' item') | pluralize(file.items) }}, {{ file.created_at }}</span >
</div>
</div>
</template>
<script>
export default {
name: 'FileListItemThumbnail',
props: ['file'],
computed: {
isFolder() {
return this.file.type === 'folder'
},
isFile() {
return this.file.type === 'file'
},
isImage() {
return this.file.type === 'image'
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
}
},
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.file-item {
display: flex;
align-items: center;
padding: 8px 15px;
@include transition(150ms);
cursor: pointer;
&:hover {
background: rgba($theme, .1);
.item-name .name {
color: $theme;
}
}
.item-name {
display: block;
margin-left: 10px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.item-size,
.item-length {
@include font-size(11);
font-weight: 100;
color: $text-muted;
display: block;
}
.name {
white-space: nowrap;
}
.name {
color: $text;
@include font-size(14);
font-weight: 700;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.icon-item {
position: relative;
min-width: 40px;
.file-icon {
@include font-size(35);
path {
fill: #fafafc;
stroke: #dfe0e8;
stroke-width: 1;
}
}
&.file {
text-align: center;
.file-icon-text {
top: 40%;
@include font-size(9);
margin: 0 auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
color: $theme;
font-weight: 600;
user-select: none;
max-width: 20px;
max-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.image {
line-height: 0;
img {
object-fit: cover;
user-select: none;
max-width: 100%;
border-radius: 5px;
width: 36px;
height: 36px;
}
}
}
}
@media (prefers-color-scheme: dark) {
.file-item {
.icon-item .file-icon {
path {
fill: $dark_mode_background;
stroke: #2F3C54;
}
}
&:hover,
&.is-clicked {
background: rgba($theme, .1);
}
.item-name .name {
color: $dark_mode_text_primary;
}
}
}
@media (max-width: 690px) and (prefers-color-scheme: dark){
.file-item {
.icon-item .file-icon {
path {
fill: $dark_mode_foreground;
}
}
}
}
</style>

71
resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="storage-size" v-if="app">
<div class="storage-info">
<span class="title">Storage</span>
<span class="size">{{ app.storage.used }} of {{ app.storage.capacity }} Used</span>
</div>
<ProgressBar :progress="app.storage.percentage"/>
</div>
</template>
<script>
import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
import { mapGetters } from 'vuex'
export default {
name: 'StorageSize',
components: {
ProgressBar,
},
computed: {
...mapGetters(['app']),
},
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.storage-size {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 15px;
border-radius: 8px;
.storage-info {
display: flex;
flex-wrap: nowrap;
align-items: center;
span {
width: 100%;
white-space: nowrap;
}
.title {
@include font-size(14);
font-weight: 700;
}
.size {
@include font-size(12);
text-align: right;
color: $text-muted;
}
}
}
@media only screen and (max-width: 690px) {
.storage-size {
position: relative;
margin-bottom: 0;
.size {
@include font-size(10);
}
}
}
</style>

211
resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<div class="user-headline-wrapper" v-if="app">
<div class="user-headline" @click="openMenu">
<div class="user-avatar">
<img :src="app.user.avatar" :alt="app.user.name">
</div>
<div class="user-name">
<b class="name">{{ app.user.name }}</b>
<span class="email">{{ app.user.email }}</span>
</div>
</div>
<transition name="user-menu">
<div class="user-menu" v-if="isOpenedMenu">
<ul class="menu-options" id="menu-options-list" @click="closeMenu">
<li class="menu-option" @click="$goToView('user-settings')">Profile Settings</li>
<li class="menu-option" @click="$store.dispatch('logOut')">Log Out</li>
</ul>
</div>
</transition>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {events} from '@/bus'
export default {
name: 'UserHeadline',
computed: {
...mapGetters(['app', 'appSize']),
isSmallAppSize() {
return this.appSize === 'small'
}
},
data() {
return {
isOpenedMenu: false,
}
},
methods: {
openMenu() {
// If is mobile, then go to user settings page, else, open menu
if ( this.isSmallAppSize ) {
this.$goToView('user-settings')
} else {
this.isOpenedMenu = !this.isOpenedMenu
}
},
closeMenu() {
this.isOpenedMenu = !this.isOpenedMenu
},
},
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.user-headline-wrapper {
position: relative;
}
.user-headline {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 15px;
user-select: none;
border-radius: 8px;
display: flex;
align-items: center;
cursor: pointer;
@include transition(150ms);
&:hover {
//background: rgba($theme, .1);
}
&:active {
transform: scale(0.95);
}
}
.user-name {
.name, .email {
white-space: nowrap;
width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
.name {
display: block;
@include font-size(17);
line-height: 1;
}
.email {
@include font-size(13);
color: $light_text;
display: block;
margin-top: 2px;
}
}
.user-avatar {
line-height: 0;
margin-right: 15px;
img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
}
}
.user-menu {
position: absolute;
top: 75px;
left: 0;
right: 0;
margin: 15px;
z-index: 9;
}
.menu-options {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
box-shadow: $shadow;
background: white;
border-radius: 8px;
.menu-option {
font-weight: 600;
@include font-size(15);
padding: 15px 30px;
cursor: pointer;
width: 100%;
&:hover {
background: $light_background;
color: $theme;
}
}
}
@media only screen and (max-width: 690px) {
.user-headline {
position: relative;
margin-bottom: 40px;
}
}
@media (prefers-color-scheme: dark) {
#sidebar {
background: $dark_mode_background;
}
.user-headline {
background: transparent;
&:hover {
background: transparent;
}
}
.user-name {
.email {
color: $dark_mode_text_secondary;
}
}
.menu-options {
background: $dark_mode_background;
.menu-option {
&:hover {
background: $dark_mode_foreground;
}
}
}
}
// Transition
.user-menu-enter-active {
transition: all 150ms ease;
}
.user-menu-leave-active {
transition: all 150ms ease;
}
.user-menu-enter,
.user-menu-leave-to {
opacity: 0;
transform: translateY(-35%);
}
</style>

278
resources/js/components/VueFileManagerComponents/UserSettings.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<div id="user-settings">
<PageHeader title="User Profile" />
<div class="content-page">
<div class="avatar-upload">
<UserImageInput
v-model="avatar"
:avatar="app.user.avatar"
/>
<div class="info">
<span class="description">Change Your Profile Picture</span>
<span class="supported">Supported formats are .png, .jpg, .jpeg.</span>
</div>
</div>
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
<ThemeLabel>Profile Information</ThemeLabel>
<div class="block-wrapper">
<label>Email:</label>
<div class="input-wrapper">
<input :value="app.user.email" placeholder="Type your E-mail" type="email" disabled/>
</div>
</div>
<div class="block-wrapper">
<label>Full Name:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
v-slot="{ errors }">
<input @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
placeholder="Type your full name" type="text"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</ValidationObserver>
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
class="form block-form">
<ThemeLabel>Change Password</ThemeLabel>
<div class="block-wrapper">
<label>Your Password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
rules="required" v-slot="{ errors }">
<input v-model="newPassword" placeholder="New Password" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Repeat Your Password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
rules="required" v-slot="{ errors }">
<input v-model="newPasswordConfirmation" placeholder="Confirm your new password" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<ButtonBase type="submit" button-style="theme" class="confirm-form">
Store New Password
</ButtonBase>
</div>
</ValidationObserver>
</div>
</div>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import UserImageInput from '@/components/VueFileManagerComponents/Others/UserImageInput'
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import PageHeader from '@/components/VueFileManagerComponents/Others/PageHeader'
import ThemeLabel from '@/components/VueFileManagerComponents/Others/ThemeLabel'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'UserSettings',
components: {
ValidationProvider,
ValidationObserver,
UserImageInput,
PageHeader,
ButtonBase,
ThemeLabel,
required,
},
computed: {
...mapGetters(['app']),
},
watch: {
name: debounce(function (val) {
this.$store.commit('UPDATE_NAME', val)
}, 300),
},
data() {
return {
newPasswordConfirmation: '',
newPassword: '',
avatar: undefined,
name: '',
}
},
methods: {
async resetPassword() {
// Validate fields
const isValid = await this.$refs.password.validate();
if (!isValid) return;
// Start loading
//this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/user/password', {
password: this.newPassword,
password_confirmation: this.newPasswordConfirmation,
},
{
headers: {
'Authorization': 'Bearer ' + this.$store.getters.token
}
})
.then(() => {
// Reset inputs
this.newPassword = ''
this.newPasswordConfirmation = ''
// Reset errors
this.$refs.password.reset()
// Show error message
events.$emit('success:open', {
title: 'Your password was changed!',
message: 'So now, you have awesome new password.',
})
// End loading
//this.isLoading = false
})
.catch(error => {
if (error.response.status == 422) {
if (error.response.data.errors['password']) {
this.$refs.password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
// End loading
//this.isLoading = false
})
}
},
created() {
this.name = this.app.user.name
this.avatar = this.app.user.avatar
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
.avatar-upload {
display: flex;
align-items: center;
margin-top: 20px;
.info {
margin-left: 25px;
.description {
@include font-size(18);
font-weight: 700;
}
.supported {
display: block;
@include font-size(12);
font-weight: 500;
color: $light_text;
}
}
}
.form {
.confirm-form {
margin-top: 30px;
text-align: right;
}
&.block-form {
margin-top: 50px;
max-width: 700px;
.block-wrapper {
justify-content: flex-start;
label {
text-align: left;
flex: 0 0 220px;
}
.input-wrapper, input {
width: 100%;
}
}
}
}
#user-settings {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.content-page {
padding-left: 30px;
padding-right: 30px;
overflow-y: auto;
height: 100%;
padding-bottom: 100px;
}
}
@media only screen and (max-width: 960px) {
#user-settings {
.content-page {
padding-left: 15px;
padding-right: 15px;
}
}
.avatar-upload {
margin-top: 30px;
}
.form {
.button-base {
width: 100%;
margin-top: 0;
text-align: center;
}
}
}
@media (prefers-color-scheme: dark) {
.avatar-upload .info {
.supported {
color: $dark_mode_text_secondary;
}
}
}
</style>