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

add emojis groups navigation, add X icon to select input for reset emoji

Browse Source
This commit is contained in:
Milos Holba
2021-02-06 16:12:21 +01:00
parent ed2d008f4b
commit 847bcec22f
4 changed files with 257 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/mix-manifest.json
View File

@@ -75,13 +75,47 @@
"/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
"/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
"/js/main.54f937bc27802b0b6645.hot-update.js": "/js/main.54f937bc27802b0b6645.hot-update.js",
"/js/main.9d3bf7841cb200c6ba91.hot-update.js": "/js/main.9d3bf7841cb200c6ba91.hot-update.js",
"/js/main.6edd3eea0698ea9f3ca6.hot-update.js": "/js/main.6edd3eea0698ea9f3ca6.hot-update.js",
"/js/main.6af8617e3072c622e2e8.hot-update.js": "/js/main.6af8617e3072c622e2e8.hot-update.js",
"/js/main.9c881698e404ca3e8bc3.hot-update.js": "/js/main.9c881698e404ca3e8bc3.hot-update.js",
"/js/main.a3580d40229cde81108d.hot-update.js": "/js/main.a3580d40229cde81108d.hot-update.js",
"/js/main.4871c6b7e7141afe7f8a.hot-update.js": "/js/main.4871c6b7e7141afe7f8a.hot-update.js",
"/js/main.a7187aa96510d512e70c.hot-update.js": "/js/main.a7187aa96510d512e70c.hot-update.js",
"/js/main.c493681d78252428ae34.hot-update.js": "/js/main.c493681d78252428ae34.hot-update.js"
"/js/main.4e29a386090b114584ea.hot-update.js": "/js/main.4e29a386090b114584ea.hot-update.js",
"/js/main.2fdefb69f54e4b8c00e6.hot-update.js": "/js/main.2fdefb69f54e4b8c00e6.hot-update.js",
"/js/main.271588bda7c0940a4033.hot-update.js": "/js/main.271588bda7c0940a4033.hot-update.js",
"/js/main.8e3b6cf5a0d361f1b845.hot-update.js": "/js/main.8e3b6cf5a0d361f1b845.hot-update.js",
"/js/main.b8522fe8b5cab05205f4.hot-update.js": "/js/main.b8522fe8b5cab05205f4.hot-update.js",
"/js/main.8e67e210f52f898100c2.hot-update.js": "/js/main.8e67e210f52f898100c2.hot-update.js",
"/js/main.8471decdbdcd43cd398d.hot-update.js": "/js/main.8471decdbdcd43cd398d.hot-update.js",
"/js/main.a358c3d297609a98eac2.hot-update.js": "/js/main.a358c3d297609a98eac2.hot-update.js",
"/js/main.9e31f51ba6b5c6a365e1.hot-update.js": "/js/main.9e31f51ba6b5c6a365e1.hot-update.js",
"/js/main.842b53f7b7ceff459f4c.hot-update.js": "/js/main.842b53f7b7ceff459f4c.hot-update.js",
"/js/main.19c7adbbf0f219e6e254.hot-update.js": "/js/main.19c7adbbf0f219e6e254.hot-update.js",
"/js/main.6dfda574e47791c34f14.hot-update.js": "/js/main.6dfda574e47791c34f14.hot-update.js",
"/js/main.a56035dd2c712e1131bb.hot-update.js": "/js/main.a56035dd2c712e1131bb.hot-update.js",
"/js/main.61571eb2fa8385232639.hot-update.js": "/js/main.61571eb2fa8385232639.hot-update.js",
"/js/main.ceef7c69e12ee366591c.hot-update.js": "/js/main.ceef7c69e12ee366591c.hot-update.js",
"/js/main.a14fa7b4d5eb18432fe9.hot-update.js": "/js/main.a14fa7b4d5eb18432fe9.hot-update.js",
"/js/main.dce1cbc02573395e84a5.hot-update.js": "/js/main.dce1cbc02573395e84a5.hot-update.js",
"/js/main.fefb1a0a3b3c24a23785.hot-update.js": "/js/main.fefb1a0a3b3c24a23785.hot-update.js",
"/js/main.c3dafff76cd8bb437e12.hot-update.js": "/js/main.c3dafff76cd8bb437e12.hot-update.js",
"/js/main.0a6e85fd56ce3c4d96d4.hot-update.js": "/js/main.0a6e85fd56ce3c4d96d4.hot-update.js",
"/js/main.8b7b19418ef42d51c267.hot-update.js": "/js/main.8b7b19418ef42d51c267.hot-update.js",
"/js/main.a3e8447618aad63432f7.hot-update.js": "/js/main.a3e8447618aad63432f7.hot-update.js",
"/js/main.273bb322dc0a3fac4efb.hot-update.js": "/js/main.273bb322dc0a3fac4efb.hot-update.js",
"/js/main.cd83ad023a8887e21b43.hot-update.js": "/js/main.cd83ad023a8887e21b43.hot-update.js",
"/js/main.6119137c47b0b6b7d1ca.hot-update.js": "/js/main.6119137c47b0b6b7d1ca.hot-update.js",
"/js/main.42f5fc1356c297eac494.hot-update.js": "/js/main.42f5fc1356c297eac494.hot-update.js",
"/js/main.ed009554f42acc7059fb.hot-update.js": "/js/main.ed009554f42acc7059fb.hot-update.js",
"/js/main.8af6aed088cce9d2503a.hot-update.js": "/js/main.8af6aed088cce9d2503a.hot-update.js",
"/js/main.b4e7551d1a7f420c8f0e.hot-update.js": "/js/main.b4e7551d1a7f420c8f0e.hot-update.js",
"/js/main.145b9cc816f7a7d1b022.hot-update.js": "/js/main.145b9cc816f7a7d1b022.hot-update.js",
"/js/main.214f22daa6757ca9f68f.hot-update.js": "/js/main.214f22daa6757ca9f68f.hot-update.js",
"/js/main.fe0320b4f10ad980f85e.hot-update.js": "/js/main.fe0320b4f10ad980f85e.hot-update.js",
"/js/main.a2572a909190641e2778.hot-update.js": "/js/main.a2572a909190641e2778.hot-update.js",
"/js/main.05f2d326ed98de34d1f5.hot-update.js": "/js/main.05f2d326ed98de34d1f5.hot-update.js",
"/js/main.fba9ee79f2a35d48634d.hot-update.js": "/js/main.fba9ee79f2a35d48634d.hot-update.js",
"/js/main.233edbc80eb26071c8bd.hot-update.js": "/js/main.233edbc80eb26071c8bd.hot-update.js",
"/js/main.6a8993c29429334b8bed.hot-update.js": "/js/main.6a8993c29429334b8bed.hot-update.js",
"/js/main.c8936cee582db6351854.hot-update.js": "/js/main.c8936cee582db6351854.hot-update.js",
"/js/main.7327a6d5abc5e53338b6.hot-update.js": "/js/main.7327a6d5abc5e53338b6.hot-update.js",
"/js/main.94786b794f722913db2f.hot-update.js": "/js/main.94786b794f722913db2f.hot-update.js",
"/js/main.5b97e99de82c004b7040.hot-update.js": "/js/main.5b97e99de82c004b7040.hot-update.js",
"/js/main.0994c3cbbe38c708be78.hot-update.js": "/js/main.0994c3cbbe38c708be78.hot-update.js",
"/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js"
}

2
resources/js/components/Others/RenameItem.vue
View File

@@ -144,7 +144,7 @@
})
events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = icon.value
this.setFolderIcon = ! icon ? undefined : icon.value
})
}
}

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

@@ -2,11 +2,14 @@
<div class="set-folder-icon">
<TabWrapper >
<!-- Emojis -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<div class="select-emoji-wrapper">
<label class="main-label">Pick Yout Emoji Icon:</label>
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
<!-- Selected Emoji input -->
<div @click.stop="openMenu" class="select-input-wrapper">
<div class="select-input" v-if="selectedEmoji">
<Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
@@ -17,16 +20,28 @@
<span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
</div>
<chevron-down-icon size="19" class="chevron-icon"/>
<chevron-down-icon v-if="!selectOpen" size="19"/>
<div v-if="selectOpen" @click="resetEmoji" class="select-input-icon-wrapper">
<x-icon size="14" class="select-input-icon"/>
</div>
</div>
<!-- Emojis List -->
<transition v-if="selectOpen" name="slide-in">
<div class="emoji-wrapper">
<input @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
<input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
<!-- Navigation of Emojis Groups -->
<ul v-show="searchInput.length < 1" class="groups-list">
<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojiGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
<Emoji :emoji="group.emoji" size="33"/>
</li>
</ul>
<!-- All Emojis -->
<div v-show="searchInput.length < 1" class="group-wrapper">
<div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper">
<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="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
@@ -53,6 +68,7 @@
</div>
</TabOption>
<!-- Colors -->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<div class="color-pick-wrapper">
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
@@ -71,7 +87,7 @@
</template>
<script>
import {SmileIcon, FolderIcon, ChevronDownIcon } from 'vue-feather-icons'
import {SmileIcon, FolderIcon, ChevronDownIcon, XIcon} from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import Emoji from '@/components/Others/Emoji'
@@ -88,13 +104,11 @@
TabOption,
FolderIcon,
SmileIcon,
XIcon,
Emoji
},
computed: {
...mapGetters(['emojis']),
setEmoji(){
return this.selectedEmoji, false
},
...mapGetters(['emojis', 'emojiGroups']),
allEmoji() {
return _.groupBy(this.emojis,'group')
},
@@ -106,12 +120,34 @@
searchInput: '',
filteredEmojis: [],
selectOpen: false,
groupInView: 'Smileys & Emotion',
colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3']
}
},
methods: {
checkGroupInView: _.debounce(function() {
this.emojiGroups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
// Check if the group is in the viewport of group-box
if(element.top < groupBox.top && element.bottom > groupBox.top){
this.groupInView = group.name
}
})
}, 200),
scrollToGroup(name) {
let group = document.getElementById(`group-${name}`)
group.scrollIntoView({behavior: "smooth"})
this.groupInView = name
},
filterEmojis: _.debounce(function(emoji){
this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
@@ -121,6 +157,8 @@
this.selectOpen = ! this.selectOpen
this.searchInput = ''
this.groupInView = 'Smileys & Emotion'
},
setIcon(value) {
if(value.emoji){
@@ -137,9 +175,18 @@
this.selectOpen = false
},
resetEmoji(){
this.selectedEmoji = undefined
events.$emit('setFolderIcon', undefined)
}
},
mounted () {
this.selectOpen = false
events.$on('unClick', () => {
this.selectOpen = false
})
}
}
@@ -196,13 +243,38 @@
display: flex;
flex-direction: column;
padding: 10px;
top: 89px;
top: 152px;
.loader {
width: 100%;
height: 100%;
position: relative;
}
}
.groups-list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20px;
.active {
background: $light_background;
border-radius: 8px;
}
.group-option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
}
.emoji-input {
width: 100%;
@@ -278,7 +350,6 @@
}
}
.select-input-wrapper{
height: 50px;
padding: 13px 20px;
@@ -290,6 +361,30 @@
justify-content: space-between;
align-items: center;
.select-input-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: $light_background !important;
.select-input-icon {
line {
stroke: $theme;
}
}
}
.select-input-icon {
line {
stroke: $text;
}
}
}
.select-input {
@include font-size(16);
font-weight: 700;
@@ -349,6 +444,16 @@
.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 {
@@ -368,6 +473,21 @@
color:$dark_mode_text_secondary;
}
}
.select-input-icon-wrapper {
&:hover {
background: rgba($theme, 0.1) !important;
.select-input-icon {
line {
stroke: $theme !important;
}
}
}
.select-input-icon {
line {
stroke:$dark_mode_text_primary !important;
}
}
}
}
}

81
resources/js/store/modules/emojisList.js vendored
View File

@@ -13946,11 +13946,90 @@ const defaultState = {
"group": "Flags",
"subgroup": "subdivision-flag"
}
],
emojiGroups : [
{
"name": "Smileys & Emotion",
"emoji": {
"codes": "1F600",
"char": "😀",
"name": "grinning face",
}
},
{
"name": "People & Body",
"emoji": {
"codes": "1F91A",
"char": "🤚",
"name": "raised back of hand",
}
},
{
"name": "Animals & Nature",
"emoji": {
"codes": "1F435",
"char": "🐵",
"name": "monkey face",
}
},
{
"name": "Food & Drink",
"emoji": {
"codes": "1F34F",
"char": "🍏",
"name": "green apple",
}
},
{
"name": "Travel & Places",
"emoji": {
"codes": "1F697",
"char": "🚗",
"name": "automobile",
}
},
{
"name": "Activities",
"emoji": {
"codes": "26BD",
"char": "⚽",
"name": "soccer ball",
}
},
{
"name": "Objects",
"emoji": {
"codes": "231A",
"char": "⌚",
"name": "watch",
}
},
{
"name": "Symbols",
"emoji": {
"codes": "2764",
"char": "❤",
"name": "red heart",
}
},
{
"name": "Flags",
"emoji": {
"codes": "1F3F3",
"char": "🏳",
"name": "white flag",
}
},
]
}
const getters = {
emojis: state=> state.emojis,
emojis: state => state.emojis,
emojiGroups: state => state.emojiGroups
}
export default {