mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-30 08:08:32 +00:00
7fc27ff025
* Added: Initial support for the `/delete` command. Only specific messages will be removed from chat when one is received, now, and there's an easy to add action for In-Line Chat Actions to let moderators perform the action.
133 lines
No EOL
3.1 KiB
Vue
133 lines
No EOL
3.1 KiB
Vue
<template lang="html">
|
|
<div class="tw-flex tw-align-items-start">
|
|
<label class="tw-mg-y-05">
|
|
{{ t('setting.actions.icon', 'Icon') }}
|
|
</label>
|
|
|
|
<div class="tw-full-width">
|
|
<div class="tw-search-input">
|
|
<label for="icon-search" class="tw-hide-accessible">
|
|
{{ t('setting.actions.icon.search', 'Search for Icon') }}
|
|
</label>
|
|
<div class="tw-relative tw-mg-t-05">
|
|
<div class="tw-absolute tw-align-items-center tw-c-text-alt-2 tw-flex tw-full-height tw-input__icon tw-justify-content-center tw-left-0 tw-top-0 tw-z-default">
|
|
<figure class="ffz-i-search" />
|
|
</div>
|
|
<input
|
|
id="icon-search"
|
|
:placeholder="t('setting.actions.icon.search', 'Search for Icon')"
|
|
v-model="search"
|
|
type="search"
|
|
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
autocomplete="off"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<simplebar classes="tw-c-background-alt-2 tw-border-l tw-border-r tw-border-b ffz-icon-picker tw-mg-b-05">
|
|
<div v-if="visible.length" role="radiogroup" class="tw-pd-1 tw-flex tw-flex-wrap" >
|
|
<div
|
|
v-for="i of visible"
|
|
:key="i[0]"
|
|
:aria-checked="value.icon === i[0]"
|
|
:class="{'tw-interactable--selected': value.icon === i[0]}"
|
|
class="ffz-icon tw-interactable tw-interactable--inverted"
|
|
role="radio"
|
|
tabindex="0"
|
|
@keydown.space.stop.prevent=""
|
|
@keyup.space="change(i[0])"
|
|
@keyup.enter="change(i[0])"
|
|
@click="change(i[0])"
|
|
>
|
|
<figure :class="`tw-mg-y-05 tw-mg-x-1 ${i[0]}`" />
|
|
</div>
|
|
</div>
|
|
<div v-else class="tw-align-center tw-pd-1 tw-c-text-alt-2">
|
|
{{ t('setting.actions.empty-search', 'no results') }}
|
|
</div>
|
|
</simplebar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {escape_regex, deep_copy} from 'utilities/object';
|
|
import {load, ICONS as FA_ICONS, ALIASES as FA_ALIASES} from 'utilities/font-awesome';
|
|
|
|
const FFZ_ICONS = [
|
|
'zreknarf',
|
|
'crown',
|
|
'verified',
|
|
'inventory',
|
|
'ignore',
|
|
'pin-outline',
|
|
'pin',
|
|
'block',
|
|
'ok',
|
|
'clock',
|
|
'eye',
|
|
'eye-off',
|
|
'trash'
|
|
];
|
|
|
|
const FFZ_ALIASES = {
|
|
'block': ['ban', 'block'],
|
|
'ok': ['ok', 'unban', 'untimeout', 'checkmark'],
|
|
'clock': ['clock', 'clock-o', 'timeout']
|
|
};
|
|
|
|
|
|
const ICONS = FFZ_ICONS
|
|
.map(x => [`ffz-i-${x}`, FFZ_ALIASES[x] ? FFZ_ALIASES[x].join(' ') : x])
|
|
.concat(FA_ICONS.filter(x => ! FFZ_ICONS.includes(x)).map(x => [`ffz-fa fa-${x}`, FA_ALIASES[x] ? FA_ALIASES[x].join(' ') : x]));
|
|
|
|
|
|
export default {
|
|
props: ['value'],
|
|
|
|
data() {
|
|
return {
|
|
search: '',
|
|
icons: deep_copy(ICONS)
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
visible() {
|
|
if ( ! this.search || ! this.search.length )
|
|
return this.icons;
|
|
|
|
const search = this.search.toLowerCase().replace(' ', '-'),
|
|
reg = new RegExp('(?:^|-| )' + escape_regex(search), 'i');
|
|
|
|
return this.icons.filter(x => reg.test(x[1]));
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
load();
|
|
},
|
|
|
|
methods: {
|
|
change(val) {
|
|
this.value.icon = val;
|
|
this.$emit('input', this.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ffz-icon-picker {
|
|
max-height: 15rem;
|
|
font-size: 1.6rem;
|
|
|
|
.ffz-icon {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
</style> |