nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 00:02:15 +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

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>