Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable7] enh(emoji-picker): allow unselecting set emoji #4383

Merged
merged 1 commit into from Aug 1, 2023
Merged

[stable7] enh(emoji-picker): allow unselecting set emoji #4383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions l10n/messages.pot
View file
Open in desktop
Expand Up @@ -200,6 +200,9 @@ msgstr ""
msgid "Select provider"
msgstr ""

msgid "Selected"
msgstr ""

msgid "Settings"
msgstr ""

Expand Down
93 changes: 92 additions & 1 deletion src/components/NcEmojiPicker/NcEmojiPicker.vue
View file
Open in desktop
Expand Up @@ -84,6 +84,43 @@ This component allows the user to pick an emoji.
}
</script>
```

* Allow unselecting a previously set emoji.

```vue
<template>
<div>
<NcEmojiPicker
:show-preview="true"
:allow-unselect="true"
:selected-emoji="emoji"
@select="select"
@unselect="unselect"
style="display: inline-block">
<NcButton> Click Me </NcButton>
</NcEmojiPicker>
<span>selected emoji: {{ emoji }}</span>
</div>
</template>
<script>
export default {
data() {
return {
emoji: '',
}
},
methods: {
select(emoji) {
this.emoji = emoji
},
unselect() {
this.emoji = ''
},
},
}
</script>
```

</docs>

<template>
Expand Down Expand Up @@ -123,6 +160,23 @@ This component allows the user to pick an emoji.
@trailing-button-click="clearSearch(); slotProps.onSearch(search);"
@update:value="slotProps.onSearch(search)" />
</template>
<template v-if="allowUnselect && selectedEmoji" #customCategory>
<div class="emoji-mart-category-label">
<h3 class="emoji-mart-category-label">
{{ t('Selected') }}
</h3>
</div>
<Emoji class="emoji-selected"
:data="emojiIndex"
:emoji="selectedEmoji"
:size="32"
@click="unselect" />
<Emoji class="emoji-delete"
:data="emojiIndex"
emoji=":x:"
:size="10"
@click="unselect" />
</template>
</Picker>
</NcPopover>
</template>
Expand All @@ -132,14 +186,15 @@ import NcPopover from '../NcPopover/index.js'
import NcTextField from '../NcTextField/index.js'
import { t } from '../../l10n.js'

import { Picker, EmojiIndex } from 'emoji-mart-vue-fast'
import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
import data from 'emoji-mart-vue-fast/data/all.json'

export default {
name: 'NcEmojiPicker',
components: {
NcPopover,
NcTextField,
Emoji,
Picker,
},
props: {
Expand All @@ -157,6 +212,20 @@ export default {
type: Boolean,
default: false,
},
/**
* Allow unselecting the selected emoji
*/
allowUnselect: {
type: Boolean,
default: false,
},
/**
* Selected emoji to allow unselecting
*/
selectedEmoji: {
type: String,
default: '',
},
/**
* The fallback emoji in the preview section
*/
Expand Down Expand Up @@ -190,6 +259,7 @@ export default {
emits: [
'select',
'select-data',
'unselect',
],
data() {
return {
Expand Down Expand Up @@ -248,6 +318,10 @@ export default {
}
},

unselect() {
this.$emit('unselect')
},

afterShow() {
// add focus trap in modal
const picker = this.$refs.picker
Expand Down Expand Up @@ -403,4 +477,21 @@ export default {
font-weight: 500;
}
}

</style>

<style scoped>
.row-selected span {
vertical-align: middle;
}

.row-selected button {
vertical-align: middle;
}

.emoji-delete {
vertical-align: top;
margin-left: -21px;
margin-top: -3px;
}
</style>