mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
feat: Adds the ability to set an emoji for help center category (#8111)
This commit is contained in:
Sivin Varghese
@@ -48,7 +48,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
|
||||
|
||||
def category_params
|
||||
params.require(:category).permit(
|
||||
:name, :description, :position, :slug, :locale, :parent_category_id, :associated_category_id
|
||||
:name, :description, :position, :slug, :locale, :icon, :parent_category_id, :associated_category_id
|
||||
)
|
||||
end
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"EMOJI": {
|
||||
"PLACEHOLDER": "Search emojis",
|
||||
"NOT_FOUND": "No emoji match your search"
|
||||
"NOT_FOUND": "No emoji match your search",
|
||||
"REMOVE": "Remove"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -365,7 +365,7 @@
|
||||
"NAME": {
|
||||
"LABEL": "Name",
|
||||
"PLACEHOLDER": "Category name",
|
||||
"HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
|
||||
"HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
|
||||
"ERROR": "Name is required"
|
||||
},
|
||||
"SLUG": {
|
||||
@@ -396,7 +396,7 @@
|
||||
"NAME": {
|
||||
"LABEL": "Name",
|
||||
"PLACEHOLDER": "Category name",
|
||||
"HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
|
||||
"HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
|
||||
"ERROR": "Name is required"
|
||||
},
|
||||
"SLUG": {
|
||||
|
||||
@@ -224,7 +224,9 @@ export default {
|
||||
key: 'category',
|
||||
children: this.categories.map(category => ({
|
||||
id: category.id,
|
||||
label: category.name,
|
||||
label: category.icon
|
||||
? `${category.icon} ${category.name}`
|
||||
: category.name,
|
||||
count: category.meta.articles_count,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
|
||||
@@ -21,15 +21,14 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
class="w-full"
|
||||
:error="nameError"
|
||||
<category-name-icon-input
|
||||
:label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
|
||||
:help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
|
||||
@input="onNameChange"
|
||||
:has-error="$v.name.$error"
|
||||
:error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
|
||||
@name-change="onNameChange"
|
||||
@icon-change="onClickInsertEmoji"
|
||||
/>
|
||||
<woot-input
|
||||
v-model.trim="slug"
|
||||
@@ -72,8 +71,10 @@ import alertMixin from 'shared/mixins/alertMixin';
|
||||
import { required, minLength } from 'vuelidate/lib/validators';
|
||||
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
|
||||
import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
|
||||
import CategoryNameIconInput from './NameEmojiInput.vue';
|
||||
|
||||
export default {
|
||||
components: { CategoryNameIconInput },
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
show: {
|
||||
@@ -96,6 +97,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
icon: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
};
|
||||
@@ -115,12 +117,6 @@ export default {
|
||||
? this.$route.params.portalSlug
|
||||
: this.portalSlug;
|
||||
},
|
||||
nameError() {
|
||||
if (this.$v.name.$error) {
|
||||
return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
slugError() {
|
||||
if (this.$v.slug.$error) {
|
||||
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
|
||||
@@ -129,7 +125,8 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onNameChange() {
|
||||
onNameChange(name) {
|
||||
this.name = name;
|
||||
this.slug = convertToCategorySlug(this.name);
|
||||
},
|
||||
onCreate() {
|
||||
@@ -138,11 +135,15 @@ export default {
|
||||
onClose() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
onClickInsertEmoji(emoji) {
|
||||
this.icon = emoji;
|
||||
},
|
||||
|
||||
async addCategory() {
|
||||
const { name, slug, description, locale } = this;
|
||||
const { name, slug, description, locale, icon } = this;
|
||||
const data = {
|
||||
name,
|
||||
icon,
|
||||
slug,
|
||||
description,
|
||||
locale,
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<tbody>
|
||||
<tr v-for="category in categories" :key="category.id">
|
||||
<td>
|
||||
<span>{{ category.name }}</span>
|
||||
<span>{{ category.icon }} {{ category.name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ category.description }}</span>
|
||||
|
||||
@@ -21,15 +21,16 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
class="w-full"
|
||||
:error="nameError"
|
||||
<category-name-icon-input
|
||||
:label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
|
||||
:help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
|
||||
@input="onNameChange"
|
||||
:has-error="$v.name.$error"
|
||||
:error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
|
||||
:existing-name="category.name"
|
||||
:saved-icon="category.icon"
|
||||
@name-change="changeName"
|
||||
@icon-change="onClickInsertEmoji"
|
||||
/>
|
||||
<woot-input
|
||||
v-model.trim="slug"
|
||||
@@ -72,8 +73,10 @@ import alertMixin from 'shared/mixins/alertMixin';
|
||||
import { required, minLength } from 'vuelidate/lib/validators';
|
||||
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
|
||||
import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
|
||||
import CategoryNameIconInput from './NameEmojiInput.vue';
|
||||
|
||||
export default {
|
||||
components: { CategoryNameIconInput },
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
show: {
|
||||
@@ -101,6 +104,7 @@ export default {
|
||||
return {
|
||||
id: this.category.id,
|
||||
name: '',
|
||||
icon: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
};
|
||||
@@ -115,12 +119,6 @@ export default {
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
nameError() {
|
||||
if (this.$v.name.$error) {
|
||||
return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
slugError() {
|
||||
if (this.$v.slug.$error) {
|
||||
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
|
||||
@@ -135,12 +133,17 @@ export default {
|
||||
updateDataFromStore() {
|
||||
const { category } = this;
|
||||
this.name = category.name;
|
||||
this.icon = category.icon;
|
||||
this.slug = category.slug;
|
||||
this.description = category.description;
|
||||
},
|
||||
onNameChange() {
|
||||
changeName(name) {
|
||||
this.name = name;
|
||||
this.slug = convertToCategorySlug(this.name);
|
||||
},
|
||||
onClickInsertEmoji(emoji) {
|
||||
this.icon = emoji;
|
||||
},
|
||||
onUpdate() {
|
||||
this.$emit('update');
|
||||
},
|
||||
@@ -148,10 +151,11 @@ export default {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
async editCategory() {
|
||||
const { id, name, slug, description } = this;
|
||||
const { id, name, slug, icon, description } = this;
|
||||
const data = {
|
||||
id,
|
||||
name,
|
||||
icon,
|
||||
slug,
|
||||
description,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="flex items-center relative">
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[25px] h-[2.45rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
|
||||
color-scheme="secondary"
|
||||
@click="toggleEmojiPicker"
|
||||
>
|
||||
<span v-if="icon" v-dompurify-html="icon" class="text-lg" />
|
||||
<fluent-icon
|
||||
v-else
|
||||
size="18"
|
||||
icon="emoji-add"
|
||||
type="outline"
|
||||
class="text-slate-400 dark:text-slate-600"
|
||||
/>
|
||||
</woot-button>
|
||||
<woot-input
|
||||
v-model="name"
|
||||
:class="{ error: hasError }"
|
||||
class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
|
||||
:error="nameErrorMessage"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:help-text="helpText"
|
||||
@input="onNameChange"
|
||||
/>
|
||||
<emoji-input
|
||||
v-if="showEmojiPicker"
|
||||
v-on-clickaway="hideEmojiPicker"
|
||||
class="left-0 top-16"
|
||||
:show-remove-button="true"
|
||||
:on-click="onClickInsertEmoji"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
|
||||
const EmojiInput = () => import('shared/components/emoji/EmojiInput');
|
||||
|
||||
export default {
|
||||
components: { EmojiInput },
|
||||
mixins: [clickaway],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
helpText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hasError: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
errorMessage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
existingName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
savedIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
icon: '',
|
||||
showEmojiPicker: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
nameErrorMessage() {
|
||||
if (this.hasError) {
|
||||
return this.errorMessage;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.updateDataFromStore();
|
||||
},
|
||||
methods: {
|
||||
updateDataFromStore() {
|
||||
this.name = this.existingName;
|
||||
this.icon = this.savedIcon;
|
||||
},
|
||||
toggleEmojiPicker() {
|
||||
this.showEmojiPicker = !this.showEmojiPicker;
|
||||
},
|
||||
onClickInsertEmoji(emoji = '') {
|
||||
this.icon = emoji;
|
||||
this.$emit('icon-change', emoji);
|
||||
this.showEmojiPicker = false;
|
||||
},
|
||||
onNameChange() {
|
||||
this.$emit('name-change', this.name);
|
||||
},
|
||||
hideEmojiPicker() {
|
||||
if (this.showEmojiPicker) {
|
||||
this.showEmojiPicker = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.emoji-dialog::before {
|
||||
@apply hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -92,6 +92,7 @@
|
||||
"credit-card-person-outline": "M2 7.25A3.25 3.25 0 0 1 5.25 4h13.5A3.25 3.25 0 0 1 22 7.25V10h-.258A3.74 3.74 0 0 0 20.5 7.455V7.25a1.75 1.75 0 0 0-1.75-1.75H5.25A1.75 1.75 0 0 0 3.5 7.25v.25h11.95c-.44.409-.782.922-.987 1.5H3.5v5.75c0 .966.784 1.75 1.75 1.75h6.78c.06.522.217 1.028.458 1.5H5.25A3.25 3.25 0 0 1 2 14.75v-7.5Zm21 8.25a1.5 1.5 0 0 0-1.5-1.5h-7a1.5 1.5 0 0 0-1.5 1.5v.5c0 1.971 1.86 4 5 4 3.14 0 5-2.029 5-4v-.5Zm-2.25-5.25a2.75 2.75 0 1 0-5.5 0 2.75 2.75 0 0 0 5.5 0Z",
|
||||
"delete-outline": "M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75Zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5ZM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75Zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75Zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25Z",
|
||||
"dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
|
||||
"dismiss-circle-filled": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2Zm3.53 6.47l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47l-.084-.072a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47l-.072.084a.75.75 0 0 0-.007.882l.08.094l.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47l.084.072a.75.75 0 0 0 .882.007l.094-.08l.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47l.072-.084a.75.75 0 0 0 .007-.882l-.08-.094l-.084-.073l.084.073Z",
|
||||
"dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
|
||||
"document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
|
||||
"document-error-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0ZM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25Z",
|
||||
@@ -100,6 +101,7 @@
|
||||
"dual-screen-clock-outline": "M10.019 6.002a6.632 6.632 0 0 0 .058 1.5H3.75a.25.25 0 0 0-.25.25v12.494c0 .138.112.25.25.25h7.498l-.001-10.167c.416.57.924 1.07 1.5 1.479v8.69h7.498a.25.25 0 0 0 .25-.25v-8.62a6.535 6.535 0 0 0 1.501-1.656V20.25a1.75 1.75 0 0 1-1.75 1.75h-8.998l-.001-.003H3.75A1.75 1.75 0 0 1 2 20.246V7.751c0-.966.784-1.75 1.75-1.75h6.269Zm6.22 11.498a.75.75 0 0 1 .101 1.493L16.24 19h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-6.996 0a.75.75 0 0 1 .102 1.493L9.243 19H7.74a.75.75 0 0 1-.102-1.493l.102-.007h1.502ZM16.498 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-1 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.001a.5.5 0 0 0 0-1h-2.501V3.5a.5.5 0 0 0-.5-.5Z",
|
||||
"edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
|
||||
"emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
|
||||
"emoji-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 10.999a5.5 5.5 0 0 1 0-11ZM12 1.997c5.524 0 10.002 4.478 10.002 10.002c0 .263-.01.524-.03.782a6.503 6.503 0 0 0-1.475-1.052a8.501 8.501 0 1 0-8.765 8.767c.28.54.635 1.036 1.05 1.474c-.257.02-.518.03-.782.03c-5.524 0-10.002-4.478-10.002-10.001S6.476 1.998 12 1.998Zm5.5 12l-.09.008a.5.5 0 0 0-.402.402l-.008.09v2.5L14.498 17l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17v2.504l.008.09a.5.5 0 0 0 .402.401l.09.009l.09-.009a.5.5 0 0 0 .402-.402l.008-.09v-2.504l2.504.001l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18v-2.5l-.008-.09a.5.5 0 0 0-.402-.403l-.09-.008Zm-9.038.785a4.494 4.494 0 0 0 2.63 1.626a6.449 6.449 0 0 0-.079 1.51a5.982 5.982 0 0 1-3.73-2.208a.75.75 0 1 1 1.179-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499a1.25 1.25 0 0 1 0-2.499Z",
|
||||
"error-circle-outline": "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z",
|
||||
"file-upload-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9Zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2Z",
|
||||
"filter-outline": "M13.5 16a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h3Zm3-5a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1 0-1.5h9Zm3-5a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1 0-1.5h15Z",
|
||||
|
||||
@@ -4,14 +4,24 @@
|
||||
class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="emoji-search--wrap">
|
||||
<div class="emoji-search--wrap flex gap-2">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-blue-dark"
|
||||
class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark"
|
||||
:placeholder="$t('EMOJI.PLACEHOLDER')"
|
||||
/>
|
||||
<woot-button
|
||||
v-if="showRemoveButton"
|
||||
size="small"
|
||||
variant="smooth"
|
||||
class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
|
||||
color-scheme="secondary"
|
||||
@click="onClick('')"
|
||||
>
|
||||
{{ $t('EMOJI.REMOVE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
|
||||
<h5 class="emoji-category--title">
|
||||
@@ -99,6 +109,10 @@ export default {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
showRemoveButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -171,13 +185,13 @@ export default {
|
||||
.box-shadow-blue {
|
||||
box-shadow:
|
||||
0 0 0 1px #1f93ff,
|
||||
0 0 2px 3px #c7e3ff;
|
||||
0 0 1px 2px #c7e3ff;
|
||||
}
|
||||
|
||||
.box-shadow-blue-dark {
|
||||
.box-shadow-dark {
|
||||
box-shadow:
|
||||
0 0 0 1px #1f93ff,
|
||||
0 0 2px 3px #4c5155;
|
||||
0 0 0 1px #212222,
|
||||
0 0 1px 2px #4c5155;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -217,7 +231,7 @@ export default {
|
||||
@apply m-2 sticky top-2;
|
||||
|
||||
.emoji-search--input {
|
||||
@apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-75 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;
|
||||
@apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-50 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
#
|
||||
# id :bigint not null, primary key
|
||||
# description :text
|
||||
# icon :string default("")
|
||||
# locale :string default("en")
|
||||
# name :string
|
||||
# position :integer
|
||||
|
||||
@@ -5,6 +5,7 @@ json.locale category.locale
|
||||
json.description category.description
|
||||
json.position category.position
|
||||
json.account_id category.account_id
|
||||
json.icon category.icon
|
||||
|
||||
json.related_categories do
|
||||
if category.related_categories.any?
|
||||
|
||||
5
db/migrate/20231013072802_add_icon_to_categories.rb
Normal file
5
db/migrate/20231013072802_add_icon_to_categories.rb
Normal file
@@ -0,0 +1,5 @@
|
||||
class AddIconToCategories < ActiveRecord::Migration[7.0]
|
||||
def change
|
||||
add_column :categories, :icon, :string, default: ''
|
||||
end
|
||||
end
|
||||
@@ -10,7 +10,7 @@
|
||||
#
|
||||
# It's strongly recommended that you check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema[7.0].define(version: 2023_10_11_041615) do
|
||||
ActiveRecord::Schema[7.0].define(version: 2023_10_13_072802) do
|
||||
# These are extensions that must be enabled in order to support this database
|
||||
enable_extension "pg_stat_statements"
|
||||
enable_extension "pg_trgm"
|
||||
@@ -231,6 +231,7 @@ ActiveRecord::Schema[7.0].define(version: 2023_10_11_041615) do
|
||||
t.string "slug", null: false
|
||||
t.bigint "parent_category_id"
|
||||
t.bigint "associated_category_id"
|
||||
t.string "icon", default: ""
|
||||
t.index ["associated_category_id"], name: "index_categories_on_associated_category_id"
|
||||
t.index ["locale", "account_id"], name: "index_categories_on_locale_and_account_id"
|
||||
t.index ["locale"], name: "index_categories_on_locale"
|
||||
|
||||
Reference in New Issue
Block a user