mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
make separated EmojiPicker component, add Spinner to search emojis
This commit is contained in:
Milos Holba
@@ -1,65 +1,82 @@
|
||||
{
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=3063523dc4a3aee7ac59",
|
||||
"/js/main.js": "/js/main.js?id=0229401b7e8985e5572a",
|
||||
"/css/app.css": "/css/app.css?id=dfd52fc997b919cd3686",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=7672646537b5813becf0",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=3f5a34aa8341af8d2b4c",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=9ec9a42482cb302a05f6",
|
||||
"/chunks/app-billings.js": "/chunks/app-billings.js?id=92903bd1d316b3db1dfa",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js?id=9d646578982ba61813b6",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=4623bd961647897a5b81",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=b19a701cdfa06e4817ff",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=11c86d822269f1a1577e",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=6784314933372fb1adf0",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=d304bcf7d4157e81f3e2",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b73a5b6f7d2a448cc5ab",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=81906d205ba0107c5105",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=004908727045abd0852e",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=cdfd468f0d0f98b9f081",
|
||||
"/chunks/database.js": "/chunks/database.js?id=b8d8269f77c52f78c784",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=106f81cefe76c62d476e",
|
||||
"/chunks/files.js": "/chunks/files.js?id=b213d4fe15c2a9933f32",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=95ce5e5685dc9315f515",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=6db12008aa646ad5fb6f",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=83389adf0760820af6f5",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js?id=546ed735edf0d80c8a7e",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=848666d6c49c613f7f99",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=bd41ae13951c2a5025c3",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=df7245abef9e3b77a218",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=cfd7b4ee7e21639a837d",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=9bb62af36193ee9648d3",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=7b7601f044e0ef47720b",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=8d3e75ff9adb22a25d57",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=3b4a29497fc878f503db",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=feb924949bffcdf3d9fb",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=f990697f8d4ff45df434",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=5d7406ecd84c676db8fb",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=d16d9e2cda6aa3a3f6dc",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=b05e24dd8be60f62ee27",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=72d317b39264987e6ed0",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=014597c63c94d3ac9f60",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2a0ea9cf661deba6fc13",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b3f25de02dd4ef072df0",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=aa3d963f578d7bc5ff88",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=ba10fd3f52a7b62d3092",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=4489cb4cfa33fb249bea",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=c52ce81c3dad56d7a7d8",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=2f12850d320b2413cf54",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6622381f1d96e8319999",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=f1b093a3bcfebd5bc8a5",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=e0e2f821aac16b32da34",
|
||||
"/chunks/upgrade.js": "/chunks/upgrade.js?id=0c8d40bed72e86359529",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=a8db2246f9326e5c5957",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=f050f10627424b730dc2",
|
||||
"/chunks/user.js": "/chunks/user.js?id=6f2ab796211a3ac8670f",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=0d630acda4552c315417",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=db041eae3aef3e45197a",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=8cf2fe554e8d67ac8677",
|
||||
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a0613909cb0c21817804",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=653bba3eb8d117c3a043",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=630b0ff649e16d3627af",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=0b4226ba77f10b83de4a",
|
||||
"/chunks/users.js": "/chunks/users.js?id=04ca09662595fae56488"
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=03478fff46fc7903ecc4",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=d687d4a3e71881044040",
|
||||
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=07b0ad73181498d46930",
|
||||
"/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6cb8c3f7a9aed769ec61",
|
||||
"/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=ff7684a6d7dbd9518d8b",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=b99a5c881b7f15a7e8c5",
|
||||
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=9e50edacd8630aa6fc22",
|
||||
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=2e6c6594ea5506c30ba4",
|
||||
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=d066e2c40f4c0ca68bf1",
|
||||
"/chunks/app-billings.js": "/chunks/app-billings.js?id=aac5bd51067578358164",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js?id=9d1631b19f6492b8cae4",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=2dcbe307133d780b6472",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=44efcfb317747ff3b508",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=187ecc16f9f7fbc4ccac",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=b6b0eba13665133c0a19",
|
||||
"/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=52e8a931f975c4e03a3c",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=65857e375e79bbaca9c8",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e84968ddf7a1a0e0381d",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=cc28795de7e668d5919b",
|
||||
"/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=a4b8a7017c82de28296b",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=108dcc4b5af4c973be56",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=ee57c44ceca0e7202363",
|
||||
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=cc1b4cbd4aa7f70151f7",
|
||||
"/chunks/database.js": "/chunks/database.js?id=1fc78cfeb3befbd92423",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
|
||||
"/chunks/files.js": "/chunks/files.js?id=b738eb9054e663cc32b7",
|
||||
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=f61085447efd33a6ebbb",
|
||||
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=0dddc007dba47ac5785e",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js?id=6c1137fd4f4d6e03b685",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=8c8ee101f3445e086040",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=0952cc3fb3aa4797a679",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=313adabcad5dafb0f932",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=41d7a74e57ac07ce3619",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=75b5346c75513e821097",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=4da54a76628aef67ea3e",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=e608674e1719be65fe6f",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=26fbcc2472b65a745366",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=d6d92de642403caa999b",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=015a2fcbaf2946f7eb11",
|
||||
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=f9e2ea1515204b5c63b6",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=9c4a9daae2237285f35b",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=2638798e697164161f7c",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=4b2742e154eba9a7022a",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=ed9e52bea6e3a1f892ad",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=0229d51aca95ffc75902",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2841bc16a6028d8d315c",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=0ec77e47b2622ee5e253",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=3fde45b386de89651a24",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=b13068f12911fbf79f74",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=67672752eb26f92e2973",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=7b6565f5df2060b45bc0",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=39de7293c26fb3cef1a3",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=57235ac99a66b55fbf7c",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=51a2856dd0631053b42e",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=7176521fbf0047110ae1",
|
||||
"/chunks/upgrade.js": "/chunks/upgrade.js?id=ee2f061bc040513f1d0d",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=ce929dd655322c11151c",
|
||||
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=a589c99d29f03bc71487",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=8bf12e8b93c7eaee4171",
|
||||
"/chunks/user.js": "/chunks/user.js?id=bdb8a51693952859f5e1",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=d0056a5db2089bc05508",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=91d17d44835dd32ec36f",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=b5b474dd8fea7b99c766",
|
||||
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=04b8c39ed83dc89f739a",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=ac51d17a4aa7ae50bc88",
|
||||
"/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.fec7012ae1f34893589d.hot-update.js": "/js/main.fec7012ae1f34893589d.hot-update.js",
|
||||
"/js/main.2ee91a6dae14a1cadc9b.hot-update.js": "/js/main.2ee91a6dae14a1cadc9b.hot-update.js",
|
||||
"/js/main.9eae7983f12897789247.hot-update.js": "/js/main.9eae7983f12897789247.hot-update.js",
|
||||
"/js/main.2d64c86de0df943928b2.hot-update.js": "/js/main.2d64c86de0df943928b2.hot-update.js"
|
||||
}
|
||||
|
||||
491
resources/js/components/Others/EmojiPicker.vue
Normal file
491
resources/js/components/Others/EmojiPicker.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<div class="select-emoji-wrapper">
|
||||
<label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
|
||||
|
||||
<!-- Selected Emoji input -->
|
||||
<div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
|
||||
|
||||
<!-- If is emoji selected -->
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<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>
|
||||
|
||||
<!-- If is emoji not selected -->
|
||||
<div class="not-selected" v-if="! selectedEmoji">
|
||||
<span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
|
||||
</div>
|
||||
|
||||
<chevron-down-icon class="row-icon" size="19"/>
|
||||
</div>
|
||||
|
||||
<!-- Emojis List -->
|
||||
<transition name="slide-in">
|
||||
<div v-if="selectOpen">
|
||||
<!-- Spinner -->
|
||||
<div v-if="!loadedList" class="emoji-wrapper">
|
||||
<Spinner/>
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<div v-if="loadedList && emojis" class="emoji-wrapper">
|
||||
|
||||
<!-- Search input -->
|
||||
<input @click.stop @input="searchEmojis" 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 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="setIcon({'emoji':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="setIcon({'emoji':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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ChevronDownIcon, XIcon } from 'vue-feather-icons'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { groupBy } from 'lodash'
|
||||
import { events } from '@/bus'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EmojiPicker',
|
||||
props: [ 'pickedEmoji' ],
|
||||
components: {
|
||||
ChevronDownIcon,
|
||||
Spinner,
|
||||
Emoji,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([ 'emojis' ]),
|
||||
allEmoji() {
|
||||
return groupBy(this.emojis.emojisList, 'group')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedEmoji: this.pickedEmoji,
|
||||
searchInput: '',
|
||||
filteredEmojis: [],
|
||||
selectOpen: false,
|
||||
loadedList: false,
|
||||
filteredEmojisLoaded: true,
|
||||
groupInView: 'Smileys & Emotion',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkGroupInView: _.debounce( function() {
|
||||
|
||||
this.emojis.emojisGroups.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
|
||||
},
|
||||
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),
|
||||
openMenu() {
|
||||
|
||||
this.selectOpen = !this.selectOpen
|
||||
|
||||
//Load emojis
|
||||
if (this.selectOpen) {
|
||||
this.$store.dispatch('getEmojisList').then((loaded) => {
|
||||
this.loadedList = loaded
|
||||
})
|
||||
}
|
||||
|
||||
if ( ! this.selectOpen )
|
||||
this.loadedList = false
|
||||
|
||||
this.searchInput = ''
|
||||
|
||||
this.groupInView = 'Smileys & Emotion'
|
||||
},
|
||||
setIcon(value) {
|
||||
|
||||
// Set emoji
|
||||
this.selectedEmoji = value.emoji
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': value })
|
||||
|
||||
this.selectOpen = false
|
||||
},
|
||||
resetEmoji() {
|
||||
|
||||
this.selectedEmoji = undefined
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': 'default' })
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
events.$on('unClick', () => {
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
this.loadedList = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_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;
|
||||
padding: 4px;
|
||||
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 {
|
||||
border-color: $theme;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.emoji-wrapper {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.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: $dark_mode_foreground;
|
||||
|
||||
.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>
|
||||
@@ -24,7 +24,7 @@
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" :unique_id="pickedItem.unique_id" />
|
||||
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem"/>
|
||||
|
||||
<ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
|
||||
|
||||
|
||||
@@ -1,82 +1,12 @@
|
||||
<template>
|
||||
<TabWrapper class="set-folder-icon">
|
||||
|
||||
<!-- 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">{{ $t('popup_rename.select_emoji_label') }}:</label>
|
||||
|
||||
<!-- Selected Emoji input -->
|
||||
<div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
|
||||
|
||||
<!-- If is emoji selected -->
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<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>
|
||||
|
||||
<!-- If is emoji not selected -->
|
||||
<div class="not-selected" v-if="! selectedEmoji">
|
||||
<span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
|
||||
</div>
|
||||
|
||||
<chevron-down-icon class="row-icon" size="19"/>
|
||||
</div>
|
||||
|
||||
<!-- Emojis List -->
|
||||
<transition name="slide-in">
|
||||
<div v-if="selectOpen">
|
||||
<!-- Spinner -->
|
||||
<div v-if="!loadedList" class="emoji-wrapper">
|
||||
<Spinner/>
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<div v-if="loadedList && emojis" class="emoji-wrapper">
|
||||
|
||||
<!-- Search input -->
|
||||
<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 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="setIcon({'emoji':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="setIcon({'emoji':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"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- Emojis Picker -->
|
||||
<TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
|
||||
<EmojiPicker :picked-emoji="pickedEmoji"/>
|
||||
</TabOption>
|
||||
|
||||
<!-- Colors -->
|
||||
<!-- Colors Picker-->
|
||||
<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>
|
||||
@@ -92,44 +22,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import { CheckIcon } from 'vue-feather-icons'
|
||||
import EmojiPicker from '@/components/Others/EmojiPicker'
|
||||
import TabWrapper from '@/components/Others/TabWrapper'
|
||||
import TabOption from '@/components/Others/TabOption'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import { groupBy } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'SetFolderIcon',
|
||||
props: ['folderData', 'unique_id'],
|
||||
props: [ 'folderData' ],
|
||||
components: {
|
||||
ChevronDownIcon,
|
||||
EmojiPicker,
|
||||
TabWrapper,
|
||||
FolderIcon,
|
||||
SmileIcon,
|
||||
CheckIcon,
|
||||
TabOption,
|
||||
Spinner,
|
||||
XIcon,
|
||||
Emoji
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['emojis']),
|
||||
allEmoji() {
|
||||
return groupBy(this.emojis.emojisList, 'group')
|
||||
pickedEmoji () {
|
||||
// If is color not seted send picked emoji via props to EmojiPicker for the EmojiSelected input
|
||||
return !this.selectedColor ? this.selectedEmoji : ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedEmoji: undefined,
|
||||
selectedColor: undefined,
|
||||
searchInput: '',
|
||||
filteredEmojis: [],
|
||||
selectOpen: false,
|
||||
loadedList: false,
|
||||
groupInView: 'Smileys & Emotion',
|
||||
selectedEmoji: undefined,
|
||||
colors: [
|
||||
'#41B883',
|
||||
'#FE6F6F',
|
||||
@@ -157,97 +74,38 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkGroupInView: _.debounce(function() {
|
||||
|
||||
this.emojis.emojisGroups.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.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
|
||||
|
||||
}, 800),
|
||||
openMenu() {
|
||||
|
||||
this.selectOpen = !this.selectOpen
|
||||
|
||||
//Load emojis
|
||||
if (this.selectOpen) {
|
||||
this.$store.dispatch('getEmojisList').then((loaded) => {
|
||||
this.loadedList = loaded
|
||||
})
|
||||
}
|
||||
|
||||
if (!this.selectOpen)
|
||||
this.loadedList = false
|
||||
|
||||
this.searchInput = ''
|
||||
|
||||
this.groupInView = 'Smileys & Emotion'
|
||||
},
|
||||
setIcon(value) {
|
||||
|
||||
// Set emoji
|
||||
if (value.emoji) {
|
||||
this.selectedEmoji = value.emoji
|
||||
this.selectedColor = undefined
|
||||
}
|
||||
|
||||
// Set color
|
||||
if (value.color) {
|
||||
this.selectedColor = value.color
|
||||
this.selectedEmoji = undefined
|
||||
}
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': value })
|
||||
|
||||
this.selectOpen = false
|
||||
},
|
||||
resetEmoji() {
|
||||
this.selectedColor = value.color
|
||||
|
||||
this.selectedEmoji = undefined
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': value })
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': 'default' })
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
// If folder have already set some emoji set this emoji to selected emoji
|
||||
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
|
||||
// Reset color after set emoji
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
|
||||
if(icon.value.emoji) {
|
||||
this.selectedEmoji = icon.value.emoji
|
||||
this.selectedColor = undefined
|
||||
}
|
||||
})
|
||||
|
||||
// If folder have already set some color set this color to selected color
|
||||
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
|
||||
|
||||
events.$on('unClick', () => {
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
this.loadedList = false
|
||||
})
|
||||
// If folder have already set some emojit set this emoji to selected emoji
|
||||
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
@@ -288,10 +146,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.select-emoji-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.main-label {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
@@ -299,225 +153,10 @@ export default {
|
||||
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;
|
||||
padding: 4px;
|
||||
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 {
|
||||
border-color: $theme;
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.set-folder-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-pick-wrapper {
|
||||
.color-wrapper {
|
||||
@@ -532,64 +171,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-wrapper {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.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: $dark_mode_foreground;
|
||||
|
||||
.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>
|
||||
|
||||
7
resources/sass/app.scss
vendored
7
resources/sass/app.scss
vendored
@@ -459,21 +459,22 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 6px solid white;
|
||||
border: 6px solid transparent;
|
||||
background: #7f7f7f;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box ;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.windows {
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 6px solid $dark_mode_background;
|
||||
border: 6px solid transparent;
|
||||
background: $dark_mode_foreground !important;
|
||||
background-clip: padding-box !important ;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user