nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-27 23:04:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

folder color picker

Browse Source
This commit is contained in:
Peter Papp
2021-02-13 10:30:54 +01:00
parent 39681bc48a
commit 86090b5870
2 changed files with 211 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
resources/js/components/Others/SetFolderIcon.vue
+210 -178
View File
@@ -1,122 +1,116 @@
<template> <template>
<div class="set-folder-icon"> <TabWrapper 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">{{ $t('popup_rename.select_emoji_label') }}:</label>
<!-- Emojis --> <!-- Selected Emoji input -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji"> <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
<div class="select-emoji-wrapper">
<label class="main-label">{{$t('popup_rename.select_emoji_label')}}:</label>
<!-- Selected Emoji input --> <!-- If is emoji selected -->
<div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}"> <div class="select-input" v-if="selectedEmoji">
<div @click.stop="resetEmoji" class="select-input-icon-wrapper">
<!-- If is emoji selected --> <x-icon size="14" class="select-input-icon"/>
<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" size="25"></Emoji>
<span>{{selectedEmoji.name}}</span>
</div> </div>
<Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
<!-- If is emoji not selected --> <span>{{ selectedEmoji.name }}</span>
<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> </div>
<!-- Emojis List --> <!-- If is emoji not selected -->
<transition name="slide-in"> <div class="not-selected" v-if="! selectedEmoji">
<div v-if="selectOpen"> <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
<!-- Spinner --> </div>
<div v-if="!loadedList" class="emoji-wrapper">
<Spinner /> <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" size="33"/>
</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" size="33"/>
</li>
</ul>
</div>
</div> </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" size="33"/>
</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" size="33"/>
</li>
</ul>
</div>
</div>
<!-- Searched emojis --> <!-- Searched emojis -->
<div v-if="searchInput.length > 0" class="group-wrapper"> <div v-if="searchInput.length > 0" class="group-wrapper">
<div class="options-wrapper"> <div class="options-wrapper">
<ul class="options-list"> <ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" > <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
<Emoji :emoji="emoji" size="33"/> <Emoji :emoji="emoji" size="33" />
</li> </li>
</ul> </ul>
<span class="not-found" v-if="filteredEmojis.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span> <span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</transition> </div>
</div> </transition>
</TabOption> </div>
</TabOption>
<!-- Colors --> <!-- Colors -->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder"> <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<div class="color-pick-wrapper"> <div class="color-pick-wrapper">
<label class="main-label">{{$t('popup_rename.color_pick_label')}}:</label> <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
<ul class="color-wrapper"> <ul class="color-wrapper">
<li v-for="(color, index) in colors" <li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
:key="index" <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
@click="setIcon({'color': color})" <span :style="{background:color}" class="color-box"></span>
class="single-color" </li>
:class="{'active-color': color === selectedColor }" </ul>
:style="{background:color}" /> </div>
</ul> </TabOption>
</div> </TabWrapper>
</TabOption>
</TabWrapper>
</div>
</template> </template>
<script> <script>
import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon } from 'vue-feather-icons' import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon, CheckIcon } from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper' import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption' import TabOption from '@/components/Others/TabOption'
import Spinner from '@/components/FilesView/Spinner' import Spinner from '@/components/FilesView/Spinner'
import Emoji from '@/components/Others/Emoji' import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash' import { groupBy } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name: "SetFolderIcon", name: 'SetFolderIcon',
props: ['folderData', 'unique_id'], props: ['folderData', 'unique_id'],
components: { components: {
ChevronDownIcon , ChevronDownIcon,
TabWrapper, TabWrapper,
TabOption,
FolderIcon, FolderIcon,
SmileIcon, SmileIcon,
CheckIcon,
TabOption,
Spinner, Spinner,
XIcon, XIcon,
Emoji Emoji
@@ -124,10 +118,10 @@ export default {
computed: { computed: {
...mapGetters(['emojis']), ...mapGetters(['emojis']),
allEmoji() { allEmoji() {
return _.groupBy(this.emojis.emojisList, 'group') return groupBy(this.emojis.emojisList, 'group')
}, }
}, },
data () { data() {
return { return {
selectedEmoji: undefined, selectedEmoji: undefined,
selectedColor: undefined, selectedColor: undefined,
@@ -136,84 +130,105 @@ export default {
selectOpen: false, selectOpen: false,
loadedList: false, loadedList: false,
groupInView: 'Smileys & Emotion', groupInView: 'Smileys & Emotion',
colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', colors: [
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#41B883',
'#80B300', '#809900', '#E6B3B3', '#6680B3' ] '#FE6F6F',
'#FE6F91',
'#FE6FC0',
'#FE6FF0',
'#DD6FFE',
'#AD6FFE',
'#7D6FFE',
'#6F90FE',
'#6FC0FE',
'#6FF0FE',
'#6FFEDD',
'#6FFEAD',
'#6FFE7D',
'#90FE6F',
'#C0FE6F',
'#F0FE6F',
'#FEDD6F',
'#FEAD6F',
'#FE7D6F',
'#FE6F6F',
'#06070B',
]
} }
}, },
methods: { methods: {
checkGroupInView: _.debounce( function() { checkGroupInView: _.debounce(function() {
this.emojis.emojisGroups.forEach( group => { this.emojis.emojisGroups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect() let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect() let groupBox = document.getElementById('group-box').getBoundingClientRect()
// Check if the group is in the viewport of group-box // Check if the group is in the viewport of group-box
if(element.top < groupBox.top && element.bottom > groupBox.top){ if (element.top < groupBox.top && element.bottom > groupBox.top) {
this.groupInView = group.name this.groupInView = group.name
} }
}) })
}, 200), }, 200),
scrollToGroup( name ) { scrollToGroup(name) {
let group = document.getElementById( `group-${name}` ) let group = document.getElementById(`group-${name}`)
group.scrollIntoView({ behavior: "smooth" }) group.scrollIntoView({ behavior: 'smooth' })
this.groupInView = name this.groupInView = name
}, },
filterEmojis: _.debounce(function( emoji ){ filterEmojis: _.debounce(function(emoji) {
this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput)) this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
}, 800), }, 800),
openMenu() { openMenu() {
this.selectOpen = ! this.selectOpen this.selectOpen = !this.selectOpen
//Load emojis //Load emojis
if( this.selectOpen ){ if (this.selectOpen) {
this.$store.dispatch('getEmojisList').then(( loaded ) => { this.$store.dispatch('getEmojisList').then((loaded) => {
this.loadedList = loaded this.loadedList = loaded
}) })
} }
if( ! this.selectOpen ) if (!this.selectOpen)
this.loadedList = false this.loadedList = false
this.searchInput = '' this.searchInput = ''
this.groupInView = 'Smileys & Emotion' this.groupInView = 'Smileys & Emotion'
}, },
setIcon( value ) { setIcon(value) {
// Set emoji // Set emoji
if( value.emoji ){ if (value.emoji) {
this.selectedEmoji = value.emoji this.selectedEmoji = value.emoji
this.selectedColor = undefined this.selectedColor = undefined
} }
// Set color // Set color
if( value.color ) { if (value.color) {
this.selectedColor = value.color this.selectedColor = value.color
this.selectedEmoji = undefined this.selectedEmoji = undefined
} }
events.$emit('setFolderIcon', { 'value':value }) events.$emit('setFolderIcon', { 'value': value })
this.selectOpen = false this.selectOpen = false
}, },
resetEmoji(){ resetEmoji() {
this.selectedEmoji = undefined this.selectedEmoji = undefined
events.$emit('setFolderIcon', { 'value': 'default' }) events.$emit('setFolderIcon', { 'value': 'default' })
} }
}, },
mounted () { mounted() {
this.selectOpen = false this.selectOpen = false
// If folder have already set some emoji set this emoji to selected emoji // If folder have already set some emoji set this emoji to selected emoji
@@ -223,7 +238,7 @@ export default {
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : '' this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
events.$on('unClick', () => { events.$on('unClick', () => {
this.selectOpen = false this.selectOpen = false
this.loadedList = false this.loadedList = false
@@ -238,30 +253,41 @@ export default {
.color-pick-wrapper { .color-pick-wrapper {
.color-wrapper { .color-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 10px;
.single-color { .single-color {
width: 40px; height: 31px;
height: 40px;
list-style: none; list-style: none;
margin: 8px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
&.active-color { .color-icon {
border: 2px solid $text; z-index: 2;
polyline {
stroke: white;
}
} }
&:hover { .color-box {
border: 2px solid $text; width: 100%;
height: 100%;
position: absolute;
display: block;
} }
} }
} }
} }
.select-emoji-wrapper{ .select-emoji-wrapper {
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -288,29 +314,29 @@ export default {
.groups-list { .groups-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: 20px;
.active { .active {
background: $light_background;
border-radius: 8px;
}
.group-option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background; background: $light_background;
border-radius: 8px; 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 { .emoji-input {
width: 100%; width: 100%;
@@ -343,14 +369,14 @@ export default {
&:last-child { &:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
.options-list { .options-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.group-name-label { .group-name-label {
width: 100%; width: 100%;
@include font-size(14); @include font-size(14);
@@ -359,11 +385,11 @@ export default {
} }
.option { .option {
list-style: none; list-style: none;
width: 45px; width: 45px;
height: 45px; height: 45px;
padding: 6px; padding: 6px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $light_background; background: $light_background;
@@ -373,11 +399,11 @@ export default {
.not-found { .not-found {
align-self: center; align-self: center;
margin:auto; margin: auto;
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
background:$light_background ; background: $light_background;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
} }
} }
@@ -436,14 +462,14 @@ export default {
.select-input-icon { .select-input-icon {
line { line {
stroke: $theme; stroke: $theme;
} }
} }
} }
.select-input-icon { .select-input-icon {
line { line {
stroke: $text; stroke: $text;
} }
} }
} }
@@ -462,19 +488,16 @@ export default {
position: relative; position: relative;
} }
.slide-in-enter-active .slide-in-enter-active {
{
transition: all 150ms ease; transition: all 150ms ease;
} }
.slide-in-enter .slide-in-enter {
{
opacity: 0; opacity: 0;
transform: translateY(-210px); transform: translateY(-210px);
} }
.slide-in-enter-to .slide-in-enter-to {
{
transform: translateY(-134px); transform: translateY(-134px);
} }
@@ -485,40 +508,46 @@ export default {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.color-pick-wrapper{ .color-pick-wrapper {
.color-wrapper{ .color-wrapper {
.single-color { .single-color {
&.active-color { &.active-color {
border: 2px solid ; border: 2px solid;
} }
&:hover { &:hover {
border: 2px solid $dark_mode_text_primary; border: 2px solid $dark_mode_text_primary;
} }
} }
} }
} }
.emoji-wrapper { .emoji-wrapper {
background: $dark_mode_background; background: $dark_mode_background;
.emoji-input { .emoji-input {
background: $dark_mode_foreground ; background: $dark_mode_foreground;
} }
.groups-list{
.active{ .groups-list {
.active {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
.group-option { .group-option {
&:hover { &:hover {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
} }
} }
.options-wrapper { .options-wrapper {
.option { .option {
&:hover { &:hover {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
} }
.not-found { .not-found {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
@@ -527,11 +556,13 @@ export default {
.select-input-wrapper { .select-input-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
.not-selected { .not-selected {
span { span {
color:$dark_mode_text_secondary; color: $dark_mode_text_secondary;
} }
} }
.select-input-icon-wrapper { .select-input-icon-wrapper {
&:hover { &:hover {
.select-input-icon { .select-input-icon {
@@ -540,11 +571,12 @@ export default {
} }
} }
} }
.select-input-icon { .select-input-icon {
line { line {
stroke:$dark_mode_text_primary !important; stroke: $dark_mode_text_primary !important;
} }
} }
} }
} }
} }