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

maked separated ColorPicker component

Browse Source
This commit is contained in:
Milos Holba
2021-02-24 16:00:05 +01:00
parent 595bce60eb
commit 725a34b7d0
4 changed files with 190 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/ColorPicker.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<div class="color-pick-wrapper">
<label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
<ul class="color-wrapper">
<li v-for="(color, i) in colors" :key="i" @click="setColor( color )" class="single-color">
<check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
<span :style="{background:color}" class="color-box"></span>
</li>
</ul>
</div>
</template>
<script>
import { CheckIcon } from 'vue-feather-icons'
export default {
name: 'ColorPicker',
props: [ 'pickedColor' ],
components: { CheckIcon },
data () {
return {
selectedColor: this.pickedColor,
colors: [
'#41B883',
'#FE6F6F',
'#FE6F91',
'#FE6FC0',
'#FE6FF0',
'#DD6FFE',
'#AD6FFE',
'#7D6FFE',
'#6F90FE',
'#6FC0FE',
'#6FF0FE',
'#6FFEDD',
'#6FFEAD',
'#6FFE7D',
'#90FE6F',
'#C0FE6F',
'#F0FE6F',
'#FEDD6F',
'#FEAD6F',
'#FE7D6F',
'#4c4c4c',
'#06070B',
]
}
},
methods: {
setColor (value) {
this.selectedColor = value
this.$emit('input', value)
}
}
}
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.color-pick-wrapper {
.color-wrapper {
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, 32px);
justify-content: space-between;
gap: 7px;
.single-color {
height: 31px;
list-style: none;
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.color-icon {
z-index: 2;
polyline {
stroke: white;
}
}
.color-box {
width: 100%;
height: 100%;
position: absolute;
display: block;
}
}
}
}
.main-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.set-folder-icon {
position: relative;
}
@media (prefers-color-scheme: dark) {
.color-pick-wrapper {
.color-wrapper {
.single-color {
&.active-color {
border: 2px solid;
}
&:hover {
border: 2px solid $dark_mode_text_primary;
}
}
}
}
}
</style>
resources/js/components/Others/EmojiPicker.vue
+14 -14
View File
@@ -3,10 +3,10 @@
<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}">
<div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
<!-- If is emoji selected -->
<div class="select-input" v-if="selectedEmoji">
<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>
@@ -15,7 +15,7 @@
</div>
<!-- If is emoji not selected -->
<div class="not-selected" v-if="! selectedEmoji">
<div class="not-selected" v-if="! selectedEmoji || selectedEmoji === 'default'">
<span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
</div>
@@ -45,10 +45,10 @@
<!-- 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}`">
<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">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="option">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
@@ -59,7 +59,7 @@
<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">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
<Emoji :emoji="emoji" location="emoji-picker" />
</li>
</ul>
@@ -93,9 +93,6 @@ export default {
},
computed: {
...mapGetters([ 'emojis' ]),
allEmoji() {
return groupBy(this.emojis.emojisList, 'group')
}
},
data () {
return {
@@ -109,6 +106,9 @@ export default {
}
},
methods: {
allEmoji() {
return groupBy(this.emojis.emojisList, 'group')
},
checkGroupInView: _.debounce( function() {
this.emojis.emojisGroups.forEach(group => {
@@ -149,7 +149,7 @@ export default {
this.filteredEmojisLoaded = true
}, 800),
openMenu() {
openList() {
this.loadedList = false
@@ -173,12 +173,12 @@ export default {
this.groupInView = 'Smileys & Emotion'
},
setIcon(value) {
setEmoji(value) {
// Set emoji
this.selectedEmoji = value.emoji
this.selectedEmoji = value
events.$emit('setFolderIcon', { 'value': value })
this.$emit('input', value)
this.selectOpen = false
},
@@ -186,7 +186,7 @@ export default {
this.selectedEmoji = undefined
events.$emit('setFolderIcon', { 'value': 'default' })
this.$emit('input', 'default')
}
},
mounted() {
resources/js/components/Others/SetFolderIcon.vue
+36 -117
View File
@@ -3,27 +3,19 @@
<!-- Emojis Picker -->
<TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<EmojiPicker :picked-emoji="pickedEmoji"/>
<EmojiPicker :picked-emoji="pickedEmoji" v-model="selectedEmoji" />
</TabOption>
<!-- 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>
<ul class="color-wrapper">
<li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
<check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
<span :style="{background:color}" class="color-box"></span>
</li>
</ul>
</div>
<ColorPicker :picked-color="pickedColor" v-model="selectedColor"/>
</TabOption>
</TabWrapper>
</template>
<script>
import { CheckIcon } from 'vue-feather-icons'
import EmojiPicker from '@/components/Others/EmojiPicker'
import ColorPicker from '@/components/Others/ColorPicker'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import { events } from '@/bus'
@@ -33,77 +25,64 @@ export default {
props: [ 'folderData' ],
components: {
EmojiPicker,
ColorPicker,
TabWrapper,
CheckIcon,
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 : ''
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,
colors: [
'#41B883',
'#FE6F6F',
'#FE6F91',
'#FE6FC0',
'#FE6FF0',
'#DD6FFE',
'#AD6FFE',
'#7D6FFE',
'#6F90FE',
'#6FC0FE',
'#6FF0FE',
'#6FFEDD',
'#6FFEAD',
'#6FFE7D',
'#90FE6F',
'#C0FE6F',
'#F0FE6F',
'#FEDD6F',
'#FEAD6F',
'#FE7D6F',
'#4c4c4c',
'#06070B',
]
}
},
methods: {
setIcon(value) {
watch: {
selectedColor () {
// Set color
this.selectedColor = value.color
let color = {'color': this.selectedColor}
this.selectedEmoji = undefined
events.$emit('setFolderIcon', { 'value': value })
if( this.selectedColor ) {
}
},
mounted() {
// Reset color after set emoji
events.$on('setFolderIcon', (icon) => {
if(icon.value.emoji) {
this.selectedEmoji = icon.value.emoji
this.selectedColor = undefined
this.selectedEmoji = undefined
events.$emit('setFolderIcon', { 'value': color })
}
},
selectedEmoji () {
// If want to set default folder icon from emoji, set selectedEmoji to undefined
icon.value === 'default' ? this.selectedEmoji = undefined : ''
})
let emoji = { 'emoji': this.selectedEmoji }
if( this.selectedEmoji ) {
this.selectedColor = undefined
events.$emit('setFolderIcon', { 'value': this.selectedEmoji ==='default' ? 'default' : emoji })
}
},
},
created() {
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
// If folder have already set some emojit set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
},
destroyed () {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.icon_color }
let emoji = {'emoji': this.folderData.icon_emoji }
events.$emit('setFolderIcon', { 'value': this.folderData.icon_emoji ? emoji : color })
}
}
</script>
@@ -112,67 +91,7 @@ export default {
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.color-pick-wrapper {
.color-wrapper {
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, 32px);
justify-content: space-between;
gap: 7px;
.single-color {
height: 31px;
list-style: none;
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.color-icon {
z-index: 2;
polyline {
stroke: white;
}
}
.color-box {
width: 100%;
height: 100%;
position: absolute;
display: block;
}
}
}
}
.main-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.set-folder-icon {
position: relative;
}
@media (prefers-color-scheme: dark) {
.color-pick-wrapper {
.color-wrapper {
.single-color {
&.active-color {
border: 2px solid;
}
&:hover {
border: 2px solid $dark_mode_text_primary;
}
}
}
}
}
</style>