nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +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>
<!--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-->
<ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }">
@@ -17,9 +17,12 @@
</AppInputText>
</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>
<ActionButton @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
<!--Set emoji-->
<EmojiPicker v-if="isEmoji" v-model="emoji" :default-emoji="emoji"/>
</ValidationObserver>
</PopupContent>
@@ -42,26 +45,30 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
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 {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 EmojiPicker from "./EmojiPicker"
export default {
name: 'CreateFolderPopup',
components: {
AppInputSwitch,
SwitchInput,
EmojiPicker,
AppInputText,
ValidationProvider,
ValidationObserver,
ThumbnailItem,
ActionButton,
PopupWrapper,
PopupActions,
PopupContent,
@@ -69,41 +76,34 @@
ButtonBase,
required,
},
computed: {
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
}
},
data() {
return {
name: undefined,
isMoreOptions: false,
folderIcon: undefined
isEmoji: false,
emoji: undefined,
}
},
methods: {
moreOptions() {
this.isMoreOptions = !this.isMoreOptions
},
async createFolder() {
// Validate fields
const isValid = await this.$refs.createForm.validate();
if (isValid) {
this.$store.dispatch('createFolder', {'name':this.name, 'icon': this.folderIcon})
if (!isValid) return;
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() {
events.$on('setFolderIcon', (icon) => {
this.folderIcon = icon
})
events.$on('popup:open', ({name}) => {
if (name === 'create-folder' && ! this.$isMobile())

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

@@ -1,15 +1,15 @@
<template>
<div>
<!-- Search field -->
<div class="mb-3 relative">
<div class="mb-3 relative flex items-center">
<!-- 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" />
</div>
<!-- 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>
<!-- 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">
<!-- 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">
<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}">
<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 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" />
</li>
</ul>

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

@@ -7,7 +7,7 @@
<PopupContent>
<!--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-->
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
@@ -47,20 +47,19 @@
</template>
<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 PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
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 {XIcon} from 'vue-feather-icons'
import AppInputSwitch from "../Admin/AppInputSwitch"
import AppInputText from "../Admin/AppInputText"
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'
export default {
@@ -73,7 +72,6 @@ export default {
SwitchInput,
AppInputText,
ThumbnailItem,
ActionButton,
PopupWrapper,
PopupActions,
PopupContent,
@@ -84,48 +82,34 @@ export default {
},
computed: {
itemTypeTitle() {
return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
},
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
return this.pickedItem && this.pickedItem.data.type === 'folder'
? this.$t('types.folder')
: this.$t('types.file')
},
},
watch: {
isEmoji(val) {
if (! val) {
events.$emit('setFolderIcon', {emoji: undefined})
this.folderIcon.emoji = undefined
this.emoji = undefined
} else {
events.$emit('setFolderIcon', {emoji: this.emoji})
this.folderIcon.emoji = this.emoji
}
},
emoji(val) {
events.$emit('setFolderIcon', {
emoji: val
})
this.folderIcon.emoji = val
},
},
data() {
return {
pickedItem: undefined,
isMoreOptions: false,
folderIcon: {
emoji: undefined,
color: undefined,
},
isEmoji: false,
emoji: undefined,
}
},
methods: {
moreOptions() {
this.isMoreOptions = !this.isMoreOptions
},
changeName() {
if (this.pickedItem.data.attributes.name && this.pickedItem.data.attributes.name !== '') {
@@ -135,12 +119,10 @@ export default {
name: this.pickedItem.data.attributes.name,
}
item['emoji'] = this.folderIcon.emoji || null
item['color'] = this.folderIcon.color || null
item['emoji'] = this.emoji || null
if (! this.folderIcon.emoji && ! this.folderIcon.color)
if (! this.isEmoji)
item['emoji'] = null
item['color'] = null
// Rename item request
this.$store.dispatch('renameItem', item)
@@ -163,26 +145,14 @@ export default {
this.$nextTick(() => this.$refs.input.focus())
}
this.isMoreOptions = false
this.folderIcon = {
emoji: undefined,
color: undefined,
// Set default emoji if exist
if (args.item.data.attributes.emoji) {
this.isEmoji = true
this.emoji = args.item.data.attributes.emoji
}
// Store picked 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, {
parent_id: parent_id,
name: folder.name,
icon: folder.icon
emoji: folder.emoji
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
@@ -108,7 +108,9 @@ const actions = {
// Set focus on new folder name
setTimeout(() => {
events.$emit('newFolder:focus', response.data.data.id)
if (! Vue.prototype.$isMobile()) {
events.$emit('newFolder:focus', response.data.data.id)
}
}, 10)
if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))