1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-11 00:20:54 +00:00
* Added: Option for changing the chat timestamp font size.
* Changed: Allow chat room actions to be spread across multiple lines.
* Fixed: The chat action editor not properly displaying spacers.
* Fixed: Make `switchboard` wait for `web_munch` before trying to load a route.
This commit is contained in:
SirStendec 2021-03-02 19:50:25 -05:00
parent 9086230686
commit add9f7a7d5
11 changed files with 212 additions and 24 deletions

View file

@ -0,0 +1,28 @@
<template lang="html">
<div class="tw-flex tw-align-items-start">
<label class="tw-mg-y-05">
{{ t('setting.actions.emoji', 'Emoji') }}
</label>
<emoji-picker
:value="value.emoji"
class="tw-full-width"
@input="change"
/>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
change(val) {
this.value.emoji = val;
this.$emit('input', this.value);
}
}
}
</script>

View file

@ -158,7 +158,7 @@ export default class Actions extends Module {
path: 'Chat > Actions > Room @{"description": "Here, you can define custom actions that will appear above the chat input box."}',
component: 'chat-actions',
context: ['room', 'room-mode'],
inline: true,
inline: false,
data: () => {
const chat = this.resolve('site.chat');
@ -420,11 +420,38 @@ export default class Actions extends Module {
renderRoom(mod_icons, current_user, current_room, is_above, createElement) {
const actions = [],
const lines = [],
chat = this.resolve('site.chat');
let line = null;
for(const data of this.parent.context.get('chat.actions.room')) {
if ( ! data || ! data.action || ! data.appearance )
if ( ! data )
continue;
const type = data.type;
if ( type ) {
if ( type === 'new-line' ) {
line = null;
} else if ( type === 'space' ) {
if ( ! line )
lines.push(line = []);
line.push(<div class="tw-flex-grow-1" />);
} else if ( type === 'space-small' ) {
if ( ! line )
lines.push(line = []);
line.push(<div class="tw-mg-x-1" />);
} else
this.log.warn('Unknown action type', type);
continue;
}
if ( ! data.action || ! data.appearance )
continue;
let ap = data.appearance || {};
@ -460,7 +487,10 @@ export default class Actions extends Module {
color = has_color && (chat && chat.colors ? chat.colors.process(ap.color) : ap.color),
contents = def.render.call(this, ap, createElement, color);
actions.push(<button
if ( ! line )
lines.push(line = []);
line.push(<button
class={`ffz-tooltip tw-pd-x-05 mod-icon ffz-mod-icon tw-c-text-alt-2${disabled ? ' disabled' : ''}${has_color ? ' colored' : ''}`}
data-tooltip-type="action"
data-action={data.action}
@ -473,13 +503,18 @@ export default class Actions extends Module {
</button>);
}
if ( ! actions.length )
if ( ! lines.length )
return null;
const room = current_room && JSON.stringify(current_room);
const room = current_room && JSON.stringify(current_room),
multi_line = lines.length > 1;
const actions = multi_line ?
lines.map((line, idx) => <div key={idx} class="tw-flex tw-full-width tw-flex-row tw-flex-wrap">{line}</div>) :
lines[0];
return (<div
class={`ffz--room-actions ffz-action-data tw-flex tw-flex-grow-1 tw-flex-wrap tw-align-items-center ${is_above ? 'tw-pd-y-05 tw-border-t' : 'tw-mg-x-05'}`}
class={`ffz--room-actions${multi_line ? ' tw-flex-column' : ''} ffz-action-data tw-flex tw-flex-grow-1 tw-flex-wrap tw-align-items-center ${is_above ? 'tw-pd-y-05 tw-border-t' : 'tw-mg-x-05'}`}
data-room={room}
>
{actions}

View file

@ -90,4 +90,30 @@ export const image = {
render(data, createElement) {
return <figure class="mod-icon__image"><img src={data.image} /></figure>;
}
}
}
// ============================================================================
// Emoji
// ============================================================================
/*export const emoji = {
title: 'Emoji',
title_i18n: 'setting.actions.appearance.emoji',
colored: false,
editor: () => import(/* webpackChunkName: 'main-menu' * / './components/edit-emoji.vue'),
load(data) {
if ( data.icon && data.icon.startsWith('ffz-fa') )
loadFontAwesome();
return true;
},
component: () => import(/* webpackChunkName: 'main-menu' * / './components/preview-emoji.vue'),
render(data, createElement) {
return <figure class="mod-icon__image"><img src={data.image} /></figure>;
}
}*/

View file

@ -98,6 +98,23 @@ export default class Chat extends Module {
force_seen: true
});
this.settings.add('chat.timestamp-size', {
default: null,
ui: {
path: 'Chat > Appearance >> General',
title: 'Timestamp Font Size',
description: 'How large should timestamps be, in pixels. Defaults to Font Size if not set.',
component: 'setting-text-box',
process(val) {
val = parseInt(val, 10);
if ( isNaN(val) || ! isFinite(val) || val <= 0 )
return null;
return val;
}
}
});
this.settings.add('chat.font-size', {
default: 13,
ui: {
@ -108,7 +125,7 @@ export default class Chat extends Module {
process(val) {
val = parseInt(val, 10);
if ( isNaN(val) || ! isFinite(val) || val <= 0 )
return 12;
return 13;
return val;
}

View file

@ -193,15 +193,27 @@
:key="idx"
class="tw-flex tw-align-items-center tw-justify-content-center"
>
<action-preview
v-for="act in actions"
:key="act.id"
:act="act.v"
:color="color(act.v.appearance.color)"
:renderers="data.renderers"
tooltip="true"
pad="true"
/>
<template v-for="act in actions">
<div
v-if="act.type === 'space'"
:key="act.id"
class="tw-flex-grow-1"
/>
<div
v-else-if="act.type === 'space-small'"
:key="act.id"
class="tw-mg-x-1"
/>
<action-preview
v-else
:key="act.id"
:act="act.v"
:color="color(act.v.appearance.color)"
:renderers="data.renderers"
tooltip="true"
pad="true"
/>
</template>
</div>
</div>
</div>
@ -254,7 +266,7 @@
<div v-else class="tw-pd-y-1">
<button
class="ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive tw-full-width"
@click="add_pasting = true"
@click="preparePaste"
>
<div class="tw-flex tw-align-items-center tw-pd-y-05 tw-pd-x-1">
<div class="tw-flex-grow-1 tw-mg-r-1">
@ -532,6 +544,9 @@ export default {
out.push(current);
current = [];
} else if ( type === 'space' || type === 'small-space' ) {
current.push(val.v);
} else if ( this.displayAction(val.v) )
current.push(val);
}
@ -593,6 +608,14 @@ export default {
this.add_pasting = false;
},
preparePaste() {
this.add_open = true;
this.add_pasting = true;
requestAnimationFrame(() => {
this.$refs.paste.focus()
});
},
addFromJSON() {
let value = this.$refs.paste.value;
this.closeAdd();