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

Added i18n support

Browse Source
This commit is contained in:
MakingCG
2020-04-01 18:44:47 +02:00
parent 182091c21a
commit 8633650f82
52 changed files with 861 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,23 +4,23 @@
<!--Log In by Email-->
<AuthContent name="log-in" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Welcome Back!</h1>
<h2>Please type your email to log in:</h2>
<h1>{{ $t('page_login.title') }}</h1>
<h2>{{ $t('page_login.subtitle') }}</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"
<input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" 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"/>
<AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span v-if="config.userRegistration" class="additional-link">Don’t have an account? <b
@click="goToAuthPage('sign-up')">Register account.</b></span>
<span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
@click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
</AuthContent>
<!--Log in By Password-->
@@ -28,166 +28,166 @@
<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>
<h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
<h2>{{ $t('page_sign_in.subtitle') }}</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"
<input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_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"/>
<AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Forgotten your password? <b @click="goToAuthPage('forgotten-password')">Reset Password.</b></span>
<span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
</AuthContent>
<!--Forgotten your password?-->
<AuthContent name="forgotten-password" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Forgotten Password?</h1>
<h2>Get reset link with your email:</h2>
<h1>{{ $t('page_forgotten_password.title') }}</h1>
<h2>{{ $t('page_forgotten_password.subtitle') }}</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"
<input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" 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"/>
<AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Create new password-->
<AuthContent name="create-new-password" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Only One Step to Log In</h1>
<h2>Create your new password here:</h2>
<h1>{{ $t('page_create_password.title') }}</h1>
<h2>{{ $t('page_create_password.subtitle') }}</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>
<label>{{ $t('page_create_password.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"
<input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" 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>
<label>{{ $t('page_create_password.label_new_pass') }}:</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"
<input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" 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 new password:</label>
<label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm new password"
<input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
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"/>
<AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Registration-->
<AuthContent name="sign-up" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Create New Account</h1>
<h2>Please fill registration to create account:</h2>
<h1>{{ $t('page_registration.title') }}</h1>
<h2>{{ $t('page_registration.subtitle') }}</h2>
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
class="form block-form">
<div class="block-wrapper">
<label>Email:</label>
<label>{{ $t('page_registration.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"
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" 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>
<label>{{ $t('page_registration.label_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"
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_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>
<label>{{ $t('page_registration.label_pass') }}</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"
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" 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>
<label>{{ $t('page_registration.label_confirm_pass') }}</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"
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
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"/>
<AuthButton icon="chevron-right" :text="$t('page_registration.button_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>
<span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Password reset link sended-->
<AuthContent name="password-reset-link-sended" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Thank you!</h1>
<h2>We have e-mailed your password reset link!</h2>
<h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
<h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
<span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Password reset successfully-->
<AuthContent name="password-reset-successfully" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Awesome!</h1>
<h2>Your password was reset successfully.</h2>
<h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
<h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
<AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" text="Sign In"/>
<AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
</AuthContent>
</AuthContentWrapper>
</template>
@@ -320,7 +320,7 @@
if (error.response.status == 400) {
this.$refs.sign_in.setErrors({
'User Password': ['Sorry, you passed incorrect password :(']
'User Password': [this.$t('validation_errors.incorrect_password')]
});
}
@@ -460,7 +460,7 @@
let pathname = location.pathname.split('/')[1]
let token = location.search.split('token=')[1]
if (pathname === 'create-new-password') {
if (pathname === this.$t('routes.create_new_password')) {
this.recoverPassword.token = token
this.goToAuthPage('create-new-password')
} else {

4
resources/js/components/VueFileManagerComponents/Auth/AuthContentWrapper.vue
View File

@@ -5,7 +5,6 @@
</template>
<script>
export default {
name: 'AuthContentWrapper',
}
@@ -18,8 +17,5 @@
height: 100%;
width: 100%;
display: table;
//display: flex;
//align-items: center;
//justify-content: center;
}
</style>

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

@@ -54,7 +54,7 @@
this.title = args.title
this.message = args.message
this.button = 'That’s horrible!'
this.button = this.$t('alerts.error_confirm')
this.emoji = '😢😢😢'
this.buttonStyle = 'danger'
@@ -70,7 +70,7 @@
this.title = args.title
this.message = args.message
this.button = 'Awesome!'
this.button = this.$t('alerts.success_confirm')
this.emoji = '🥳🥳🥳'
this.buttonStyle = 'theme'

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

@@ -35,7 +35,7 @@
.button-base {
@include font-size(16);
font-weight: 600;
font-weight: 700;
cursor: pointer;
transition: 0.15s all ease;
border-radius: 8px;

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

@@ -8,20 +8,20 @@
<ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">
<!--View-->
<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="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
<li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}</li>
<li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">{{ $t('context_menu.create_folder') }}</li>
<!--Edits-->
<li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">Delete</li>
<li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">Move</li>
<li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.delete') }}</li>
<li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.move') }}</li>
<!--Trash-->
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">{{ $t('context_menu.restore') }}</li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">{{ $t('context_menu.empty_trash') }}</li>
<!--Others-->
<li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
<li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</li>
<li class="menu-option" @click="ItemDetail" v-if="item">{{ $t('context_menu.detail') }}</li>
<li class="menu-option" @click="downloadItem" v-if="isFile || isImage">{{ $t('context_menu.download') }}</li>
</ul>
</div>
</template>
@@ -84,7 +84,7 @@
},
createFolder() {
// Create folder
this.$createFolder('New Folder')
this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
},
closeAndResetContextMenu() {
// Close context menu
@@ -141,8 +141,7 @@
@import "@assets/app.scss";
.contextmenu {
max-width: 190px;
width: 190px;
min-width: 190px;
position: absolute;
z-index: 99;
box-shadow: $shadow;
@@ -161,6 +160,7 @@
padding: 0;
.menu-option {
white-space: nowrap;
font-weight: 700;
@include font-size(15);
padding: 15px 30px;

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

@@ -2,16 +2,16 @@
<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>
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="! isTrash" class="description">
Upload some files here easily via upload button
{{ $t('empty_page.description') }}
</p>
<ButtonUpload
v-if="! isTrash"
@input.native="$uploadFiles(files)"
v-model="files"
button-style="theme"
>Upload File
>{{ $t('empty_page.call_to_action') }}
</ButtonUpload
>
</div>
@@ -78,7 +78,7 @@
.title {
@include font-size(24);
color: $text;
font-weight: 600;
font-weight: 700;
margin: 0;
}

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

@@ -41,22 +41,23 @@
<ul class="list-info">
<!--Filesize-->
<li v-if="fileInfoDetail.filesize" class="list-info-item">
<b>Size</b>
<b>{{ $t('file_detail.size') }}</b>
<span>{{ fileInfoDetail.filesize }}</span>
</li>
<!--Latest change-->
<li v-if="fileInfoDetail.created_at" class="list-info-item">
<b>Created at</b>
<b>{{ $t('file_detail.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>
<b>{{ $t('file_detail.where') }}</b>
<div class="action-button" @click="moveItem">
<FontAwesomeIcon class="icon" icon="pencil-alt" />
<span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
</div>
</li>
</ul>
</div>
@@ -65,6 +66,7 @@
<script>
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from "@/bus"
export default {
name: 'FilesInfoPanel',
@@ -72,6 +74,10 @@
...mapGetters(['fileInfoDetail'])
},
methods: {
moveItem() {
// Move item fire popup
events.$emit('popup:move-item', this.fileInfoDetail);
},
getItemAction() {
// Open image on new tab
if (this.fileInfoDetail.type == 'image') {
@@ -91,7 +97,6 @@
// Open folder
if (this.fileInfoDetail.type == 'folder') {
// Todo: open folder
console.log('Open folder')
}
},
changeItemName: debounce(function (e) {
@@ -197,6 +202,16 @@
padding-top: 0;
}
.action-button {
cursor: pointer;
.icon {
@include font-size(11);
display: inline-block;
margin-right: 2px;
}
}
b {
display: block;
@include font-size(13);
@@ -204,7 +219,7 @@
}
span {
display: block;
display: inline-block;
@include font-size(14);
font-weight: bold;
color: $text;

11
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
View File

@@ -7,7 +7,7 @@
>
<!--Grid preview-->
<div
draggable="true"
:draggable="! isDeleted"
@dragstart="$emit('dragstart')"
@drop="
$emit('drop')
@@ -57,7 +57,7 @@
}}</span>
<span v-if="isFolder" class="item-length">
{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}
</span>
</div>
@@ -88,7 +88,7 @@
return this.data.type === 'image'
},
timeStamp() {
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
},
folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,11 +97,6 @@
return this.data.deleted_at ? true : false
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
}
},
data() {
return {
isClicked: false,

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

@@ -6,7 +6,7 @@
>
<!--List preview-->
<div
draggable="true"
:draggable="! isDeleted"
@dragstart="$emit('dragstart')"
@drop="
$emit('drop')
@@ -53,7 +53,7 @@
<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 }}
{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
</span>
</div>
@@ -87,7 +87,7 @@
return this.data.type === 'image'
},
timeStamp() {
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
},
folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,9 +97,6 @@
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
},
limitCharacters(str) {
if (str.length > 3) {

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

@@ -63,7 +63,7 @@
<!--Show empty page if no search results-->
<EmptyMessage
v-if="isSearching && isEmpty"
message="Nothing was found."
:message="$t('messages.nothing_was_found')"
icon="eye-slash"
/>
</div>
@@ -79,7 +79,7 @@
<!--If file info panel empty show message-->
<EmptyMessage
v-if="!fileInfoDetail"
message="There is nothing to preview."
:message="$t('messages.nothing_to_preview')"
icon="eye-slash"
/>
</div>

13
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
View File

@@ -1,10 +1,10 @@
<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 v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" :text="$t('context_menu.add_folder')"></MobileActionButton>
<MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" :text="$t('context_menu.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>
<MobileActionButton v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" :text="$t('context_menu.empty_trash')"></MobileActionButton>
</div>
<UploadProgress />
</div>
@@ -31,7 +31,7 @@
return this.preview_type === 'list' ? 'th' : 'th-list'
},
previewText() {
return this.preview_type === 'list' ? 'Grid' : 'List'
return this.preview_type === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
}
},
methods: {
@@ -40,13 +40,14 @@
},
createFolder() {
if (this.$isMobile()) {
let folderName = prompt('Please enter your new folder name')
// Get folder name
let folderName = prompt(this.$t('popup_create_folder.title'))
// Create folder
if (folderName) this.$createFolder(folderName)
} else {
// Create folder
this.$createFolder('New Folder')
this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
}
},
}

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

@@ -13,42 +13,42 @@
@click="addToFavourites"
v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
>
{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
<li class="menu-option"
@click="$store.dispatch('restoreItem', fileInfoDetail)"
v-if="fileInfoDetail && $isTrashLocation()"
>
Restore
{{ $t('context_menu.restore') }}
</li>
<li
class="menu-option"
@click="renameItem"
v-if="fileInfoDetail"
>
Rename
{{ $t('context_menu.rename') }}
</li>
<li
class="menu-option"
@click="moveItem"
v-if="fileInfoDetail"
>
Move
{{ $t('context_menu.move') }}
</li>
<li
class="menu-option"
@click="downloadItem"
v-if="isFile || isImage"
>
Download
{{ $t('context_menu.download') }}
</li>
<li
class="menu-option delete"
@click="removeItem"
v-if="fileInfoDetail"
>
Delete
{{ $t('context_menu.delete') }}
</li>
</ul>
</div>
@@ -121,7 +121,7 @@
},
renameItem() {
let itemName = prompt(
'Change your item name',
this.$t('popup_rename.title'),
this.fileInfoDetail.name
)

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

@@ -5,7 +5,7 @@
class="query"
type="text"
name="query"
placeholder="Search files…"
:placeholder="$t('inputs.placeholder_search_files')"
/>
<div class="icon" v-if="!isQuery">
<FontAwesomeIcon icon="search"></FontAwesomeIcon>

6
resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue
View File

@@ -2,11 +2,7 @@
<transition name="info-panel">
<div v-if="uploadingFilesCount" class="upload-progress">
<div class="progress-title">
<span
>Uploading files {{ uploadingFilesCount.current }}/{{
uploadingFilesCount.total
}}</span
>
<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total}) }}</span>
</div>
<ProgressBar :progress="uploadingFileProgress"/>
</div>

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

@@ -5,7 +5,7 @@
<!--Title-->
<div class="popup-header">
<h1 class="title">Move Item</h1>
<h1 class="title">{{ $t('popup_move_item.title') }}</h1>
<!--<p v-if="message" class="message">{{ message }}</p>-->
</div>
@@ -24,13 +24,13 @@
class="popup-button"
@click.native="closePopup"
button-style="secondary"
>Cancel
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
>Move
>{{ $t('popup_move_item.submit') }}
</ButtonBase>
</div>
</div>

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

@@ -15,7 +15,7 @@
.text-label {
@include font-size(10);
color: $light_text;
color: $theme;
text-transform: uppercase;
font-weight: 900;
display: block;

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

@@ -24,7 +24,7 @@
<span class="name">{{ file.name }}</span>
<!--Other attributes-->
<span class="subtitle">Original Location: {{ currentFolder.name }}</span>
<span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span>
</div>
</div>
</template>
@@ -47,11 +47,6 @@
return this.file.type === 'image'
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
}
},
}
</script>

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

@@ -48,7 +48,7 @@
// Update user avatar
this.$updateImage('/user/profile', 'avatar', event.target.files[0])
} else {
alert('You may have uploaded the wrong file, try again!')
alert( this.$t('validation_errors.wrong_image') )
}
}
},

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

@@ -9,11 +9,11 @@
<!--Locations-->
<div class="menu-list-wrapper">
<TextLabel>Locations</TextLabel>
<TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
<ul class="menu-list">
<li class="menu-list-item" @click="goHome">
<FontAwesomeIcon class="icon" icon="hdd"/>
<span class="label">Home</span>
<span class="label">{{ $t('locations.home') }}</span>
</li>
<!--<li class="menu-list-item">
<FontAwesomeIcon class="icon" icon="share"/>
@@ -21,7 +21,7 @@
</li>-->
<li class="menu-list-item" @click="getTrash">
<FontAwesomeIcon class="icon" icon="trash-alt"/>
<span class="label">Trash</span>
<span class="label">{{ $t('locations.trash') }}</span>
</li>
</ul>
</div>
@@ -33,10 +33,10 @@
@drop="dragFinish($event)"
:class="{ 'is-dragenter': area }"
>
<TextLabel>Favourites</TextLabel>
<TextLabel>{{ $t('sidebar.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 class="empty-list" v-if="app.favourites.length == 0" :key="0">
{{ $t('sidebar.favourites_empty') }}
</li>
<li @click.stop="openFolder(folder)" class="menu-list-item" v-for="folder in app.favourites"
@@ -52,9 +52,9 @@
<!--Last Uploads-->
<div class="menu-list-wrapper">
<TextLabel>Last Uploads</TextLabel>
<TextLabel>{{ $t('sidebar.latest') }}</TextLabel>
<p class="empty-list" v-if="app.latest_uploads.length == 0">You don't have any latest uploads.</p>
<p class="empty-list" v-if="app.latest_uploads.length == 0">{{ $t('sidebar.latest_empty') }}</p>
<FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)" :file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
</div>
@@ -64,7 +64,7 @@
<StorageSize v-if="config.storageLimit"/>
<div v-if="isSmallAppSize" class="log-out-button">
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">Log Out</ButtonBase>
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
</div>
</div>
</transition>
@@ -176,8 +176,8 @@
#sidebar {
position: relative;
flex: 0 0 295px;
border-right: 1px solid $light_mode_border;
flex: 0 0 265px;
background: $light_background;
}
.content-scroller {
@@ -287,7 +287,7 @@
width: 20px;
path {
fill: $text;
fill: $theme;
}
}
@@ -377,8 +377,9 @@
}
@media (prefers-color-scheme: dark) {
#sidebar {
border-color: $dark_mode_border_color;
background: $dark_mode_foreground;
}
.menu-list-wrapper {
@@ -400,26 +401,11 @@
background: rgba($theme, .1);
}
}
&.favourites {
.menu-list .menu-list-item {
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
}
}
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
#sidebar {
border-color: $dark_mode_background;
background: $dark_mode_background;
}
}

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

@@ -26,7 +26,7 @@
<!--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 >
<span v-if="isFolder" class="item-length">{{ file.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ file.created_at }}</span>
</div>
</div>
</template>
@@ -47,11 +47,6 @@ export default {
return this.file.type === 'image'
}
},
filters: {
pluralize(word, amount) {
return amount > 1 ? word + 's' : word
}
},
}
</script>

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

@@ -1,8 +1,8 @@
<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>
<span class="title">{{ $t('storage.title') }}</span>
<span class="size">{{ $t('storage.used', {used: app.storage.used, capacity: app.storage.capacity}) }}</span>
</div>
<ProgressBar :progress="app.storage.percentage" :class="{'is-exceeded': app.storage.percentage > 100}"/>
</div>

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

@@ -12,8 +12,8 @@
<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>
<li class="menu-option" @click="$goToView('user-settings')">{{ $t('context_menu.profile_settings') }}</li>
<li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
</ul>
</div>
</transition>
@@ -70,12 +70,14 @@
left: 0;
right: 0;
margin: 15px;
padding: 5px;
user-select: none;
border-radius: 8px;
display: flex;
align-items: center;
cursor: pointer;
@include transition(150ms);
background: darken($light_background, 3%);
&:active {
transform: scale(0.95);
@@ -138,7 +140,7 @@
border-radius: 8px;
.menu-option {
font-weight: 600;
font-weight: 700;
@include font-size(15);
padding: 15px 30px;
cursor: pointer;
@@ -157,17 +159,15 @@
.user-headline {
position: relative;
margin-bottom: 40px;
background: transparent;
padding: 0;
}
}
@media (prefers-color-scheme: dark) {
#sidebar {
background: $dark_mode_background;
}
.user-headline {
background: transparent;
background: $dark_mode_background;
&:hover {
background: transparent;

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

@@ -1,7 +1,7 @@
<template>
<div id="user-settings">
<PageHeader title="User Profile" />
<PageHeader :title="$t('profile.page_title')" />
<div class="content-page">
<div class="avatar-upload">
@@ -10,27 +10,27 @@
: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>
<span class="description">{{ $t('profile.photo_description') }}</span>
<span class="supported">{{ $t('profile.photo_supported') }}</span>
</div>
</div>
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
<ThemeLabel>Profile Information</ThemeLabel>
<ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
<div class="block-wrapper">
<label>Email:</label>
<label>{{ $t('page_registration.label_email') }}</label>
<div class="input-wrapper">
<input :value="app.user.email" placeholder="Type your E-mail" type="email" disabled/>
<input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
</div>
</div>
<div class="block-wrapper">
<label>Full Name:</label>
<label>{{ $t('page_registration.label_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"
:placeholder="$t('page_registration.placeholder_name')" type="text"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -40,23 +40,23 @@
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
class="form block-form">
<ThemeLabel>Change Password</ThemeLabel>
<ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>
<div class="block-wrapper">
<label>Your Password:</label>
<label>{{ $t('page_create_password.label_new_pass') }}:</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"
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')" 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>
<label>{{ $t('page_create_password.label_confirm_pass') }}:</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"
<input v-model="newPasswordConfirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -64,7 +64,7 @@
<div class="block-wrapper">
<ButtonBase type="submit" button-style="theme" class="confirm-form">
Store New Password
{{ $t('profile.store_pass') }}
</ButtonBase>
</div>
</ValidationObserver>
@@ -138,8 +138,8 @@
// Show error message
events.$emit('success:open', {
title: 'Your password was changed!',
message: 'So now, you have awesome new password.',
title: this.$t('popup_pass_changed.title'),
message: this.$t('popup_pass_changed.message'),
})
})
.catch(error => {