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

emoji picker refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-19 14:04:29 +01:00
parent ea59624091
commit 1342dfa20f
9 changed files with 575 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
</AppInputText>
</ValidationProvider>
<SetFolderIcon v-if="isMoreOptions"/>
<ActionButton @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
</ValidationObserver>
@@ -49,7 +49,6 @@
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 SetFolderIcon from '/resources/js/components/Others/SetFolderIcon'
import ActionButton from '/resources/js/components/Others/ActionButton'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import {required} from 'vee-validate/dist/rules'
@@ -62,7 +61,6 @@
ValidationProvider,
ValidationObserver,
ThumbnailItem,
SetFolderIcon,
ActionButton,
PopupWrapper,
PopupActions,
@@ -111,10 +109,6 @@
if (name === 'create-folder' && ! this.$isMobile())
this.$nextTick(() => this.$refs.input.focus())
})
events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = icon
})
}
}
</script>

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

@@ -1,119 +1,112 @@
<template>
<div class="select-emoji-wrapper">
<label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
<div>
<!-- Search field -->
<div class="mb-3 relative">
<!-- Selected Emoji input -->
<div @click.stop="openList" class="select-input-wrapper focus-border-theme" :class="{'active-menu' : selectOpen}">
<!-- Selected emoji preview -->
<div v-if="defaultEmoji" class="absolute left-3 top-2 select-none">
<Emoji :emoji="defaultEmoji" location="emoji-picker" />
</div>
<!-- If is emoji selected -->
<div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
<div @click.stop="resetEmoji" class="select-input-icon-wrapper">
<x-icon size="14" class="select-input-icon" />
</div>
<Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
<span>{{ selectedEmoji.name }}</span>
</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...')">
</div>
<!-- If is emoji not selected -->
<div class="not-selected" v-if="! selectedEmoji || selectedEmoji === 'default'">
<span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
</div>
<chevron-down-icon class="row-icon" size="19" />
</div>
<!-- Spinner -->
<div v-if="isOpen && !isLoaded" class="relative h-20 select-none">
<Spinner />
</div>
<!-- Emojis List -->
<transition name="slide-in">
<div v-if="selectOpen">
<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">
<!-- Spinner -->
<div v-if="!isLoadedEmojis" class="emoji-wrapper">
<Spinner />
</div>
<!-- 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}">
<Emoji :emoji="group.emoji" location="emoji-picker" />
</li>
</ul>
<!-- List -->
<div v-if="isLoadedEmojis && emojis" class="emoji-wrapper">
<!-- All Emojis -->
<div v-if="! query" v-for="(group, name) in allEmoji" :key="name" :id="`group-${name}`">
<label class="font-bold text-sm mt-4 mb-2 block">
{{ name }}
</label>
<ul class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="flex items-center justify-center cursor-pointer">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
</div>
<!-- Search input -->
<input @click.stop @input="searchEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
<!-- Searched emojis -->
<ul v-if="query" class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="flex items-center justify-center cursor-pointer">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
<!-- Navigation of Emojis Groups -->
<ul v-show="searchInput.length < 1" class="groups-list">
<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
<Emoji :emoji="group.emoji" location="emoji-picker" />
</li>
</ul>
<!-- All Emojis -->
<div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
<div v-for="(group, name) in allEmoji()" :key="name" class="options-wrapper" :id="`group-${name}`">
<label class="group-name-label">{{ name }}</label>
<ul class="options-list">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="option">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
</div>
</div>
<!-- Searched emojis -->
<div v-if="searchInput.length > 0" class="group-wrapper">
<div class="options-wrapper">
<ul class="options-list">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
<span class="not-found" v-if="filteredEmojis.length === 0 && filteredEmojisLoaded"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
<Spinner v-if=" ! filteredEmojisLoaded " />
</div>
</div>
</div>
</div>
</transition>
<!-- Not found -->
<span class="font-bold text-sm ml-2" v-if="filteredEmojis.length === 0 && query !== undefined">
{{ $t('There is nothing :(') }}
</span>
</div>
</div>
</template>
<script>
import {ChevronDownIcon, XIcon} from 'vue-feather-icons'
import Spinner from '/resources/js/components/FilesView/Spinner'
import Emoji from '/resources/js/components/Others/Emoji'
import {debounce, groupBy} from 'lodash'
import {XIcon} from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {groupBy} from 'lodash'
import {events} from '/resources/js/bus'
export default {
name: 'EmojiPicker',
props: ['pickedEmoji'],
props: [
'defaultEmoji',
],
components: {
ChevronDownIcon,
Spinner,
Emoji,
XIcon,
},
computed: {
...mapGetters(['emojis']),
...mapGetters([
'emojis',
]),
allEmoji() {
return groupBy(this.emojis.list, 'group')
},
},
data() {
return {
selectedEmoji: this.pickedEmoji,
searchInput: '',
query: undefined,
filteredEmojis: [],
selectOpen: false,
isLoadedEmojis: false,
filteredEmojisLoaded: true,
isOpen: false,
isLoaded: false,
groupInView: 'Smileys & Emotion',
}
},
watch: {
query: debounce(function (val) {
// Clear search results
this.filteredEmojis = []
// Reset query
if (val === '' || val === undefined) return
// Filter emojis by query
this.filteredEmojis = this.emojis.list.filter(emoji => emoji.name.includes(val.toLowerCase()))
if (this.filteredEmojis.length === 0) {
console.log('empty');
}
}, 200),
},
methods: {
allEmoji() {
return groupBy(this.emojis.emojisList, 'group')
},
checkGroupInView: _.debounce(function () {
this.emojis.emojisGroups.forEach(group => {
this.emojis.groups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
@@ -122,368 +115,52 @@ export default {
this.groupInView = group.name
}
})
}, 200),
}, 300),
scrollToGroup(name) {
let groupBar = document.getElementById('group-bar')
let groupBox = document.getElementById('group-box')
let group = document.getElementById(`group-${name}`)
group.scrollIntoView({behavior: 'smooth'})
groupBox.scrollTo({
top: group.offsetTop - groupBar.clientHeight - 5,
left: 0,
behavior: 'smooth'
});
this.groupInView = name
},
searchEmojis() {
// Turn on spinner until filteredEmojis will loaded
this.filteredEmojisLoaded = false
this.filteredEmojis = [],
this.filterEmojis()
},
filterEmojis: _.debounce(function () {
this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput.toLowerCase()))
this.filteredEmojisLoaded = true
}, 800),
openList() {
this.isLoadedEmojis = false
this.selectOpen = !this.selectOpen
// Open list if it's not opened
if (! this.isOpen) this.isOpen = true
// Load emojis from server just if not loaded already
if (this.selectOpen && !this.emojis) {
if (this.isOpen && !this.emojis) {
axios.get('/assets/emojis.json')
.then(response => {
this.$store.commit('LOAD_EMOJIS_LIST', response.data)
})
.finally(() => this.isLoadedEmojis = true)
.finally(() => this.isLoaded = true)
}
// Simulate loading for the emojisList processing
// Simulate loading for the list processing
if (this.emojis) {
setTimeout(() => {
this.isLoadedEmojis = true
this.isLoaded = true
}, 20);
}
this.searchInput = ''
this.groupInView = 'Smileys & Emotion'
},
setEmoji(value) {
// Set emoji
this.selectedEmoji = value
this.query = undefined
this.isOpen = false
this.$emit('input', value)
this.selectOpen = false
},
resetEmoji() {
this.selectedEmoji = undefined
this.$emit('input', 'default')
}
},
mounted() {
this.selectOpen = false
// Open list of there isn't set any emoji
if (! this.defaultEmoji) this.openList()
}
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import '/resources/sass/vuefilemanager/_forms';
.select-emoji-wrapper {
margin-bottom: 20px;
}
.main-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.emoji-wrapper {
height: 400px;
width: 100%;
position: absolute;
border: 1px solid transparent;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 8px;
background: white;
display: flex;
flex-direction: column;
padding: 10px;
z-index: 10;
top: 152px;
.groups-list {
display: grid;
grid-template-columns: repeat(9, auto);
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
height: 90px;
.active {
background: $light_background;
border-radius: 8px;
}
.group-option {
width: 45px;
height: 45px;
list-style: none;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
}
.emoji-input {
width: 100%;
border-radius: 8px;
margin-bottom: 20px;
background: $light_background;
border: none;
padding: 13px 20px;
font-weight: 700;
&::placeholder {
font-weight: 700;
color: $light_text;
}
}
.group-wrapper {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
padding: 0px;
.options-wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0px;
}
.options-list {
display: grid;
grid-template-columns: repeat(auto-fill, 45px);
justify-content: space-between;
width: 100%;
}
.group-name-label {
width: 100%;
@include font-size(14);
font-weight: 700;
margin-bottom: 10px;
}
.option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
.not-found {
align-self: center;
margin: auto;
font-weight: 700;
padding: 10px;
border-radius: 8px;
background: $light_background;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
}
}
}
.select-input-wrapper {
height: 50px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid transparent;
@include transition(150ms);
.row-icon {
@include transition(150ms);
}
&.active-menu {
//box-shadow: 0 0 7px rgba($theme, 0.3);
.row-icon {
transform: rotate(180deg);
}
}
.select-input {
@include font-size(16);
font-weight: 700;
display: flex;
flex-direction: row;
align-items: center;
.emoji-preview {
margin-left: 5px;
margin-right: 10px;
width: 22px;
height: 22px;
}
.select-input-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
margin-left: -7px;
&:hover {
.select-input-icon {
line {
stroke: $theme;
}
}
}
.select-input-icon {
line {
stroke: $text;
}
}
}
}
.not-selected {
span {
color: rgba($text, 0.5);
@include font-size(15);
font-weight: 700
}
}
}
.slide-in-enter-active {
transition: all 150ms ease;
}
.slide-in-enter {
opacity: 0;
transform: translateY(-210px);
}
.slide-in-enter-to {
transform: translateY(-134px);
}
@media (max-width: 690px) {
.emoji-wrapper {
height: 300px;
}
}
@media (max-width: 336px) {
.emoji-wrapper {
top: 173px;
}
}
.dark {
.emoji-wrapper {
background: lighten($dark_mode_foreground, 2%);
.emoji-input {
background: $dark_mode_foreground;
}
.groups-list {
.active {
background: $dark_mode_foreground !important;
}
.group-option {
&:hover {
background: $dark_mode_foreground !important;
}
}
}
.options-wrapper {
.option {
&:hover {
background: $dark_mode_foreground !important;
}
}
.not-found {
background: $dark_mode_foreground !important;
}
}
}
.select-input-wrapper {
background: lighten($dark_mode_foreground, 3%);
.not-selected {
span {
color: $dark_mode_text_secondary;
}
}
.select-input-icon-wrapper {
&:hover {
.select-input-icon {
line {
stroke: $theme !important;
}
}
}
.select-input-icon {
line {
stroke: $dark_mode_text_primary !important;
}
}
}
}
}
</style>
</script>

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

@@ -12,9 +12,9 @@
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
<!--Set password-->
<!--Update item name-->
<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_rename.label')" :error="errors[0]">
<AppInputText :title="$t('popup_rename.label')" :error="errors[0]" :is-last="pickedItem.data.type !== 'folder'">
<div class="flex items-center relative">
<input v-model="pickedItem.data.attributes.name" :class="{'border-red': errors[0]}" ref="input" type="text" class="focus-border-theme input-dark" :placeholder="$t('popup_rename.placeholder')">
<div @click="pickedItem.data.attributes.name = ''" class="absolute right-4">
@@ -24,11 +24,13 @@
</AppInputText>
</ValidationProvider>
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
<!--Emoji-->
<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 v-if="pickedItem.data.type === 'folder'" @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>
@@ -45,13 +47,15 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
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 SetFolderIcon from '/resources/js/components/Others/SetFolderIcon'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ActionButton from '/resources/js/components/Others/ActionButton'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
@@ -64,8 +68,10 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
EmojiPicker,
AppInputSwitch,
SwitchInput,
AppInputText,
SetFolderIcon,
ThumbnailItem,
ActionButton,
PopupWrapper,
@@ -82,13 +88,38 @@ export default {
},
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
}
},
},
watch: {
isEmoji(val) {
if (! val) {
events.$emit('setFolderIcon', {emoji: undefined})
this.folderIcon.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: undefined
folderIcon: {
emoji: undefined,
color: undefined,
},
isEmoji: false,
emoji: undefined,
}
},
methods: {
@@ -104,11 +135,12 @@ export default {
name: this.pickedItem.data.attributes.name,
}
if (this.folderIcon && this.folderIcon.emoji)
item['emoji'] = this.folderIcon.emoji
item['emoji'] = this.folderIcon.emoji || null
item['color'] = this.folderIcon.color || null
if (this.folderIcon && this.folderIcon.color)
item['color'] = this.folderIcon.color
if (! this.folderIcon.emoji && ! this.folderIcon.color)
item['emoji'] = null
item['color'] = null
// Rename item request
this.$store.dispatch('renameItem', item)
@@ -133,13 +165,23 @@ export default {
this.isMoreOptions = false
this.folderIcon = undefined
this.folderIcon = {
emoji: undefined,
color: undefined,
}
// 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) => {
events.$on('setFolderIcon', icon => {
this.folderIcon = icon
})
}

99
resources/js/components/Others/SetFolderIcon.vue
View File

@@ -1,99 +0,0 @@
<template>
<TabWrapper class="set-folder-icon">
<!-- Emojis Picker -->
<TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<EmojiPicker :picked-emoji="pickedEmoji" v-model="selectedEmoji" />
</TabOption>
<!-- Colors Picker-->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<ColorPicker :picked-color="pickedColor" v-model="selectedColor" />
</TabOption>
</TabWrapper>
</template>
<script>
import EmojiPicker from '/resources/js/components/Others/EmojiPicker'
import ColorPicker from '/resources/js/components/Others/ColorPicker'
import TabWrapper from '/resources/js/components/Others/TabWrapper'
import TabOption from '/resources/js/components/Others/TabOption'
import {events} from '/resources/js/bus'
export default {
name: 'SetFolderIcon',
props: ['folderData'],
components: {
EmojiPicker,
ColorPicker,
TabWrapper,
TabOption,
},
computed: {
pickedEmoji() {
// If is color not selected and emoji is selected, push picked emoji to EmojiPicker for the EmojiSelected input
return !this.selectedColor && this.selectedEmoji ? this.selectedEmoji : undefined
},
pickedColor() {
// If is emoji not selected and color is selected, push picked color to ColorPicker
return !this.selectedEmoji && this.selectedColor ? this.selectedColor : undefined
}
},
data() {
return {
selectedColor: undefined,
selectedEmoji: undefined,
}
},
watch: {
selectedColor() {
let color = {'color': this.selectedColor}
if (this.selectedColor) {
this.selectedEmoji = undefined
events.$emit('setFolderIcon', color)
}
},
selectedEmoji() {
let emoji = {'emoji': this.selectedEmoji}
if (this.selectedEmoji) {
this.selectedColor = undefined
events.$emit('setFolderIcon', this.selectedEmoji === 'default' ? 'default' : emoji)
}
},
},
created() {
if (this.folderData) {
// If folder have already set some color set this color to selected color
this.folderData.color ? this.selectedColor = this.folderData.color : ''
// If folder have already set some emojit set this emoji to selected emoji
this.folderData.emoji ? this.selectedEmoji = this.folderData.emoji : ''
}
},
destroyed() {
if (this.folderData) {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.color}
let emoji = {'emoji': this.folderData.emoji}
events.$emit('setFolderIcon', this.folderData.emoji ? emoji : color)
}
}
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import '/resources/sass/vuefilemanager/_forms';
.set-folder-icon {
position: relative;
}
</style>

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

@@ -157,13 +157,6 @@
}
}
@media only screen and (max-width: 690px) {
.file-item {
padding: 0 15px;
margin-bottom: 20px;
}
}
.dark {
.file-item {
.icon-item .file-icon {