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

create folder emoji picker refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-19 15:45:59 +01:00
parent 24edb85b24
commit 34fcbdc55c
5 changed files with 63 additions and 1438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1373
public/mix-manifest.json
View File

File diff suppressed because it is too large Load Diff

50
resources/js/components/Others/CreateFolderPopup.vue
View File

@@ -8,7 +8,7 @@
<PopupContent> <PopupContent>
<!--Form to set sharing--> <!--Form to set sharing-->
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="px-4"> <ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form">
<!--Set folder name--> <!--Set folder name-->
<ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }">
@@ -17,9 +17,12 @@
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<AppInputSwitch :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="! isEmoji">
<SwitchInput v-model="isEmoji" :state="isEmoji" />
</AppInputSwitch>
<!--Set emoji-->
<ActionButton @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton> <EmojiPicker v-if="isEmoji" v-model="emoji" :default-emoji="emoji"/>
</ValidationObserver> </ValidationObserver>
</PopupContent> </PopupContent>
@@ -42,26 +45,30 @@
</template> </template>
<script> <script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper' import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions' import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent' import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader' import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem' import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ActionButton from '/resources/js/components/Others/ActionButton'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import {required} from 'vee-validate/dist/rules' import {required} from 'vee-validate/dist/rules'
import AppInputSwitch from "../Admin/AppInputSwitch"
import AppInputText from "../Admin/AppInputText"
import SwitchInput from "./Forms/SwitchInput"
import {events} from '/resources/js/bus' import {events} from '/resources/js/bus'
import EmojiPicker from "./EmojiPicker"
export default { export default {
name: 'CreateFolderPopup', name: 'CreateFolderPopup',
components: { components: {
AppInputSwitch,
SwitchInput,
EmojiPicker,
AppInputText, AppInputText,
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
ThumbnailItem, ThumbnailItem,
ActionButton,
PopupWrapper, PopupWrapper,
PopupActions, PopupActions,
PopupContent, PopupContent,
@@ -69,41 +76,34 @@
ButtonBase, ButtonBase,
required, required,
}, },
computed: {
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
}
},
data() { data() {
return { return {
name: undefined, name: undefined,
isMoreOptions: false, isEmoji: false,
folderIcon: undefined emoji: undefined,
} }
}, },
methods: { methods: {
moreOptions() {
this.isMoreOptions = !this.isMoreOptions
},
async createFolder() { async createFolder() {
// Validate fields // Validate fields
const isValid = await this.$refs.createForm.validate(); const isValid = await this.$refs.createForm.validate();
if (isValid) { if (!isValid) return;
this.$store.dispatch('createFolder', {'name':this.name, 'icon': this.folderIcon})
this.$closePopup() await this.$store.dispatch('createFolder', {
name: this.name,
emoji: this.emoji
})
this.name = undefined this.$closePopup()
}
this.name = undefined
this.isEmoji = false
this.emoji = undefined
}, },
}, },
mounted() { mounted() {
events.$on('setFolderIcon', (icon) => {
this.folderIcon = icon
})
events.$on('popup:open', ({name}) => { events.$on('popup:open', ({name}) => {
if (name === 'create-folder' && ! this.$isMobile()) if (name === 'create-folder' && ! this.$isMobile())

10
resources/js/components/Others/EmojiPicker.vue
View File

@@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<!-- Search field --> <!-- Search field -->
<div class="mb-3 relative"> <div class="mb-3 relative flex items-center">
<!-- Selected emoji preview --> <!-- Selected emoji preview -->
<div v-if="defaultEmoji" class="absolute left-3 top-2 select-none"> <div v-if="defaultEmoji" class="select-none mr-3">
<Emoji :emoji="defaultEmoji" location="emoji-picker" /> <Emoji :emoji="defaultEmoji" location="emoji-picker" />
</div> </div>
<!-- Search input --> <!-- Search input -->
<input @click="openList" v-model="query" :class="{'pl-14': defaultEmoji}" class="focus-border-theme input-dark" type="text" :placeholder="$t('Select or search emoji icon...')"> <input @click="openList" v-model="query" class="focus-border-theme input-dark" type="text" :placeholder="$t('Select or search emoji icon...')">
</div> </div>
<!-- Spinner --> <!-- Spinner -->
@@ -21,8 +21,8 @@
<div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="2xl:h-96 lg:h-60 h-96 overflow-y-auto select-none relative"> <div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="2xl:h-96 lg:h-60 h-96 overflow-y-auto select-none relative">
<!-- Navigation of Emojis Groups --> <!-- Navigation of Emojis Groups -->
<ul v-if="! query" class="flex items-center justify-between space-x-1 sticky top-0 dark:bg-dark-background bg-white" id="group-bar"> <ul v-if="! query" class="flex items-center justify-between space-x-1 sticky top-0 sm:dark:bg-4x-dark-foreground dark:bg-dark-background bg-white" id="group-bar">
<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.groups" :key="i" class="w-14 h-14 flex items-center justify-center rounded-xl cursor-pointer hover:bg-light-background" :class="{'dark:bg-2x-dark-foreground bg-light-background': group.name === groupInView}"> <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.groups" :key="i" class="w-14 h-14 flex items-center justify-center rounded-xl cursor-pointer dark:hover:bg-2x-dark-foreground hover:bg-light-background" :class="{'dark:bg-2x-dark-foreground bg-light-background': group.name === groupInView}">
<Emoji :emoji="group.emoji" location="emoji-picker" /> <Emoji :emoji="group.emoji" location="emoji-picker" />
</li> </li>
</ul> </ul>

62
resources/js/components/Others/RenameItemPopup.vue
View File

@@ -7,7 +7,7 @@
<PopupContent> <PopupContent>
<!--Item Thumbnail--> <!--Item Thumbnail-->
<ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" :setFolderIcon="folderIcon" /> <ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" :setFolderIcon="{emoji: emoji, color: null}" />
<!--Form to set sharing--> <!--Form to set sharing-->
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form"> <ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
@@ -47,20 +47,19 @@
</template> </template>
<script> <script>
import EmojiPicker from "./EmojiPicker";
import AppInputSwitch from "../Admin/AppInputSwitch"
import AppInputText from "../Admin/AppInputText"
import SwitchInput from "./Forms/SwitchInput"
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper' import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions' import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent' import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader' import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem' import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ActionButton from '/resources/js/components/Others/ActionButton'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import {XIcon} from 'vue-feather-icons' import AppInputSwitch from "../Admin/AppInputSwitch"
import AppInputText from "../Admin/AppInputText"
import {required} from 'vee-validate/dist/rules' import {required} from 'vee-validate/dist/rules'
import SwitchInput from "./Forms/SwitchInput"
import EmojiPicker from "./EmojiPicker"
import {XIcon} from 'vue-feather-icons'
import {events} from '/resources/js/bus' import {events} from '/resources/js/bus'
export default { export default {
@@ -73,7 +72,6 @@ export default {
SwitchInput, SwitchInput,
AppInputText, AppInputText,
ThumbnailItem, ThumbnailItem,
ActionButton,
PopupWrapper, PopupWrapper,
PopupActions, PopupActions,
PopupContent, PopupContent,
@@ -84,48 +82,34 @@ export default {
}, },
computed: { computed: {
itemTypeTitle() { itemTypeTitle() {
return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file') return this.pickedItem && this.pickedItem.data.type === 'folder'
}, ? this.$t('types.folder')
moreOptionsTitle() { : this.$t('types.file')
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
}, },
}, },
watch: { watch: {
isEmoji(val) { isEmoji(val) {
if (! val) { if (! val) {
events.$emit('setFolderIcon', {emoji: undefined}) events.$emit('setFolderIcon', {emoji: undefined})
this.emoji = undefined
this.folderIcon.emoji = undefined
} else { } else {
events.$emit('setFolderIcon', {emoji: this.emoji}) events.$emit('setFolderIcon', {emoji: this.emoji})
this.folderIcon.emoji = this.emoji
} }
}, },
emoji(val) { emoji(val) {
events.$emit('setFolderIcon', { events.$emit('setFolderIcon', {
emoji: val emoji: val
}) })
this.folderIcon.emoji = val
}, },
}, },
data() { data() {
return { return {
pickedItem: undefined, pickedItem: undefined,
isMoreOptions: false,
folderIcon: {
emoji: undefined,
color: undefined,
},
isEmoji: false, isEmoji: false,
emoji: undefined, emoji: undefined,
} }
}, },
methods: { methods: {
moreOptions() {
this.isMoreOptions = !this.isMoreOptions
},
changeName() { changeName() {
if (this.pickedItem.data.attributes.name && this.pickedItem.data.attributes.name !== '') { if (this.pickedItem.data.attributes.name && this.pickedItem.data.attributes.name !== '') {
@@ -135,12 +119,10 @@ export default {
name: this.pickedItem.data.attributes.name, name: this.pickedItem.data.attributes.name,
} }
item['emoji'] = this.folderIcon.emoji || null item['emoji'] = this.emoji || null
item['color'] = this.folderIcon.color || null
if (! this.folderIcon.emoji && ! this.folderIcon.color) if (! this.isEmoji)
item['emoji'] = null item['emoji'] = null
item['color'] = null
// Rename item request // Rename item request
this.$store.dispatch('renameItem', item) this.$store.dispatch('renameItem', item)
@@ -163,26 +145,14 @@ export default {
this.$nextTick(() => this.$refs.input.focus()) this.$nextTick(() => this.$refs.input.focus())
} }
this.isMoreOptions = false // Set default emoji if exist
if (args.item.data.attributes.emoji) {
this.folderIcon = { this.isEmoji = true
emoji: undefined, this.emoji = args.item.data.attributes.emoji
color: undefined,
} }
// Store picked item // Store picked item
this.pickedItem = args.item this.pickedItem = args.item
// Set default emoji if is set
if (args.item.data.attributes.emoji) {
this.isEmoji = true
this.folderIcon.emoji = args.item.data.attributes.emoji
this.emoji = args.item.data.attributes.emoji
}
})
events.$on('setFolderIcon', icon => {
this.folderIcon = icon
}) })
} }
} }

6
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -99,7 +99,7 @@ const actions = {
.post(route, { .post(route, {
parent_id: parent_id, parent_id: parent_id,
name: folder.name, name: folder.name,
icon: folder.icon emoji: folder.emoji
}) })
.then(response => { .then(response => {
commit('ADD_NEW_FOLDER', response.data) commit('ADD_NEW_FOLDER', response.data)
@@ -108,7 +108,9 @@ const actions = {
// Set focus on new folder name // Set focus on new folder name
setTimeout(() => { setTimeout(() => {
events.$emit('newFolder:focus', response.data.data.id) if (! Vue.prototype.$isMobile()) {
events.$emit('newFolder:focus', response.data.data.id)
}
}, 10) }, 10)
if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))