oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-11 00:20:54 +00:00
Code Wiki Activity

4.20.61

Browse source 
This was a small update until Twitch ripped out half their CSS.

* Added: Cross-Origin Storage Bridge for settings, better synchronizing settings on sub-domains with support for binary blobs at the cost of slightly increased start-up time.
* Fixed: Rendering issues caused by missing CSS.
* Fixed: FFZ Control Center button not appearing on dashboard pages, and appearing in the incorrect place.
* Changed: Work towards splitting modules into their own JS files for a faster, more asynchronous startup.
* API Added: Methods for serializing and deserializing Blobs for transmission across postMessage.
This commit is contained in:
SirStendec 2021-02-11 19:40:12 -05:00
parent 2c5937c8af
commit 264c375f13
88 changed files with 1685 additions and 500 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/chat/actions/components/edit-ban.vue
View file

@ -8,7 +8,7 @@
<input
id="edit_reason"
v-model.trim="value.reason"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
</div>

8
src/modules/chat/actions/components/edit-chat.vue
View file

@ -9,7 +9,7 @@
:id="'edit_chat$' + id"
v-model="value.command"
:placeholder="defaults.command"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
@ -17,16 +17,16 @@
{{ t('setting.actions.variables', 'Available Variables: {vars}', {vars}) }}
</div>
<div class="tw-checkbox">
<div class="ffz-checkbox">
<input
:id="'chat-paste$' + id"
v-model="value.paste"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="$emit('input', value)"
>
<label :for="'chat-paste$' + id" class="tw-checkbox__label">
<label :for="'chat-paste$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.set-chat', 'Paste this message into chat rather than sending it directly.') }}
</span>

2
src/modules/chat/actions/components/edit-combo.vue
View file

@ -19,7 +19,7 @@
<input
id="edit_text"
v-model="value.text"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
</div>

2
src/modules/chat/actions/components/edit-image.vue
View file

@ -7,7 +7,7 @@
<input
id="edit_image"
v-model="value.image"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
</div>

2
src/modules/chat/actions/components/edit-text.vue
View file

@ -7,7 +7,7 @@
<input
id="edit_text"
v-model="value.text"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
</div>

4
src/modules/chat/actions/components/edit-timeout.vue
View file

@ -9,7 +9,7 @@
id="edit_duration"
v-model="value.duration_rich"
:placeholder="defaults.duration"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
type="text"
@input="update()"
>
@ -23,7 +23,7 @@
<input
id="edit_reason"
v-model.trim="value.reason"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>
</div>

2
src/modules/chat/actions/components/edit-url.vue
View file

@ -9,7 +9,7 @@
id="edit_url"
v-model="value.url"
:placeholder="defaults.url"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
@input="$emit('input', value)"
>

10
src/modules/chat/actions/index.jsx
View file

@ -263,7 +263,7 @@ export default class Actions extends Module {
reason_elements.push(<li class="tw-full-width tw-relative">
<a
href="#"
class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive tw-pd-05"
class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive tw-pd-05"
onClick={click_fn(text)}
>
{text}
@ -280,7 +280,7 @@ export default class Actions extends Module {
reason_elements.push(<li class="tw-full-width tw-relative">
<a
href="#"
class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive tw-pd-05"
class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive tw-pd-05"
onClick={click_fn(rule)}
>
{rule}
@ -350,9 +350,9 @@ export default class Actions extends Module {
hover_events: true,
no_update: true,
tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
tooltipClass: 'ffz-action-balloon ffz-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
arrowClass: 'ffz-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'ffz-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: '',
popper: {

4
src/modules/chat/components/chat-rich.vue
View file

@ -281,8 +281,8 @@ export default {
class: [
tooltip && 'ffz-tooltip',
this.accent && 'ffz-accent-card',
!this.error && 'tw-interactable--hover-enabled',
'tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--default tw-interactive'
!this.error && 'ffz-interactable--hover-enabled',
'tw-block tw-border-radius-medium tw-full-width ffz-interactable ffz-interactable--default tw-interactive'
],
attrs: {
'data-tooltip-type': 'link',

2
src/modules/chat/override-editor.vue
View file

@ -20,7 +20,7 @@
<input
id="user-name"
ref="name"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input tw-flex-grow-1"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-flex-grow-1"
:value="name"
@change="updateName"
>

6
src/modules/chat/overrides.js
View file

@ -67,9 +67,9 @@ export default class Overrides extends Module {
no_update: true,
no_auto_remove: true,
tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
arrowClass: '', //tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: '', //tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
tooltipClass: 'ffz-action-balloon ffz-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
arrowClass: '', //ffz-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: '', //ffz-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: '',
popper: {

54
src/modules/main_menu/components/action-editor.vue
View file

@ -19,7 +19,7 @@
ref="json"
v-model="json"
readonly
class="tw-full-width tw-full-height tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-full-width tw-full-height tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@focus="$event.target.select()"
/>
</template>
@ -34,7 +34,7 @@
<input
v-model="edit_data.appearance.tooltip"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
>
</div>
@ -47,7 +47,7 @@
id="renderer_type"
ref="renderer_type"
v-model="edit_data.appearance.type"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option
v-for="(r, key) in data.renderers"
@ -91,7 +91,7 @@
<select
id="vis_mod"
v-model="edit_data.display.mod"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -113,7 +113,7 @@
<select
id="vis_mod_icons"
v-model="edit_data.display.mod_icons"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -135,7 +135,7 @@
<select
id="vis_deleted"
v-model="edit_data.display.deleted"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -157,7 +157,7 @@
<select
id="vis_emote"
v-model="edit_data.display.emoteOnly"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -179,7 +179,7 @@
<select
id="vis_slow"
v-model="edit_data.display.slowMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -201,7 +201,7 @@
<select
id="vis_subs"
v-model="edit_data.display.followersOnly"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -223,7 +223,7 @@
<select
id="vis_subs"
v-model="edit_data.display.subsMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -245,7 +245,7 @@
<select
id="vis_r9k"
v-model="edit_data.display.r9kMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }}
@ -266,80 +266,80 @@
<div>
<div class="ffz--inline tw-flex">
<div class="tw-pd-r-1 tw-checkbox">
<div class="tw-pd-r-1 ffz-checkbox">
<input
:id="'key_ctrl$' + id"
ref="key_ctrl"
:checked="edit_data.display.keys & 1"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChangeKeys"
>
<label :for="'key_ctrl$' + id" class="tw-checkbox__label">
<label :for="'key_ctrl$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.key.ctrl', 'Ctrl') }}
</span>
</label>
</div>
<div class="tw-pd-r-1 tw-checkbox">
<div class="tw-pd-r-1 ffz-checkbox">
<input
:id="'key_shift$' + id"
ref="key_shift"
:checked="edit_data.display.keys & 2"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChangeKeys"
>
<label :for="'key_shift$' + id" class="tw-checkbox__label">
<label :for="'key_shift$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.key.shift', 'Shift') }}
</span>
</label>
</div>
<div class="tw-pd-r-1 tw-checkbox">
<div class="tw-pd-r-1 ffz-checkbox">
<input
:id="'key_alt$' + id"
ref="key_alt"
:checked="edit_data.display.keys & 4"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChangeKeys"
>
<label :for="'key_alt$' + id" class="tw-checkbox__label">
<label :for="'key_alt$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.key.alt', 'Alt') }}
</span>
</label>
</div>
<div class="tw-pd-r-1 tw-checkbox">
<div class="tw-pd-r-1 ffz-checkbox">
<input
:id="'key_meta$' + id"
ref="key_meta"
:checked="edit_data.display.keys & 8"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChangeKeys"
>
<label :for="'key_meta$' + id" class="tw-checkbox__label">
<label :for="'key_meta$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.key.meta', 'Meta') }}
</span>
</label>
</div>
<div class="tw-pd-r-1 tw-checkbox">
<div class="tw-pd-r-1 ffz-checkbox">
<input
:id="'key_hover$' + id"
ref="key_hover"
:checked="edit_data.display.hover"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChangeKeys"
>
<label :for="'key_hover$' + id" class="tw-checkbox__label">
<label :for="'key_hover$' + id" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.key.hover', 'Hover') }}
</span>
@ -361,7 +361,7 @@
<select
id="action_type"
v-model="edit_data.action"
class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
>
<option
v-for="(a, key) in data.actions"

2
src/modules/main_menu/components/addon-list.vue
View file

@ -61,7 +61,7 @@
<input
ref="unlisted"
:placeholder="t('addon.unlisted.id', 'add-on id')"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@keydown.enter="addUnlisted"
>
<button

2
src/modules/main_menu/components/async-text.vue
View file

@ -18,7 +18,7 @@
<input
ref="url_box"
:value="url"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
type="text"
readonly
@focusin="selectURL"

2
src/modules/main_menu/components/badge-term-editor.vue
View file

@ -18,7 +18,7 @@
<select
v-if="editing"
v-model="edit_data.v"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
>
<optgroup
v-for="section in badges"

12
src/modules/main_menu/components/badge-visibility.vue
View file

@ -32,20 +32,20 @@
<header
v-if="sec.id"
:class="{default: badgeDefault(sec.id)}"
class="tw-flex tw-checkbox"
class="tw-flex ffz-checkbox"
>
<input
:id="sec.id"
:checked="badgeChecked(sec.id)"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@click="onChange(sec.id, $event)"
@contextmenu.prevent="reset(sec.id)"
>
<label
:for="sec.id"
:title="t('setting.right-click-reset', 'Right-Click to Reset')"
class="tw-checkbox__label"
class="ffz-checkbox__label"
@contextmenu.prevent="reset(sec.id)"
>
<span class="tw-mg-l-1">
@ -61,17 +61,17 @@
v-for="i in sort(sec.badges)"
:key="i.id"
:class="{default: badgeDefault(i.id)}"
class="ffz--badge-info tw-pd-y-1 tw-pd-r-1 tw-flex tw-checkbox"
class="ffz--badge-info tw-pd-y-1 tw-pd-r-1 tw-flex ffz-checkbox"
>
<input
:id="i.id"
:checked="badgeChecked(i.id)"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@click="onChange(i.id, $event)"
>
<label :for="i.id" class="tw-checkbox__label">
<label :for="i.id" class="ffz-checkbox__label">
<div class="tw-mg-l-1 tw-flex">
<div
:style="{backgroundColor: i.color, backgroundImage: i.styleImage }"

2
src/modules/main_menu/components/blocked-type-editor.vue
View file

@ -8,7 +8,7 @@
<select
v-if="editing"
v-model="edit_data.v"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
>
<option
v-for="type in types"

10
src/modules/main_menu/components/changelog.vue
View file

@ -11,22 +11,22 @@
<div v-if=" ! addons" class="tw-mg-b-1 tw-flex tw-align-items-center">
<div class="tw-flex-grow-1" />
<div class="tw-checkbox tw-relative tw-tooltip__container">
<div class="ffz-checkbox tw-relative tw-tooltip__container">
<input
id="nonversioned"
ref="nonversioned"
v-model="nonversioned"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
>
<label for="nonversioned" class="tw-checkbox__label">
<label for="nonversioned" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('home.changelog.show-nonversioned', 'Include non-versioned commits.') }}
</span>
</label>
<div class="tw-tooltip tw-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-right">
<div class="tw-tooltip ffz-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-right">
{{ t('home.changelog.about-nonversioned', 'Non-versioned commits are commits to the FrankerFaceZ repository not associated with a release build. They typically represent maintenance or contributions from the community that will be included in a subsequent release.') }}
</div>
</div>
@ -58,7 +58,7 @@
>
<figure
v-if="commit.author.avatar_url"
class="tw-avatar tw-avatar--size-20 tw-mg-r-05"
class="ffz-avatar ffz-avatar--size-20 tw-mg-r-05"
>
<img
:src="commit.author.avatar_url"

60
src/modules/main_menu/components/chat-actions.vue
View file

@ -12,153 +12,153 @@
<div class="tw-flex tw-flex-wrap tw-align-items-center ffz--inline">
{{ t('setting.actions.preview', 'Preview:') }}
<div class="tw-pd-x-1 tw-checkbox">
<div class="tw-pd-x-1 ffz-checkbox">
<input
id="as_mod"
ref="as_mod"
:checked="is_moderator"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="as_mod" class="tw-checkbox__label">
<label for="as_mod" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.mod', 'As Moderator') }}
</span>
</label>
</div>
<div v-if="has_msg" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_msg" class="tw-pd-x-1 ffz-checkbox">
<input
id="is_deleted"
ref="is_deleted"
:checked="is_deleted"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="is_deleted" class="tw-checkbox__label">
<label for="is_deleted" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.deleted', 'Deleted Message') }}
</span>
</label>
</div>
<div v-if="has_icons" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_icons" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_mod_icons"
ref="with_mod_icons"
:checked="with_mod_icons"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_mod_icons" class="tw-checkbox__label">
<label for="with_mod_icons" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.mod_icons', 'With Mod Icons') }}
</span>
</label>
</div>
<div v-if="has_mode" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_mode" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_slow"
ref="with_slow"
:checked="with_slow"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_slow" class="tw-checkbox__label">
<label for="with_slow" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.slow', 'Slow Mode') }}
</span>
</label>
</div>
<div v-if="has_mode" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_mode" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_emote"
ref="with_emote"
:checked="with_emote"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_emote" class="tw-checkbox__label">
<label for="with_emote" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.emote-only', 'Emote-Only') }}
</span>
</label>
</div>
<div v-if="has_mode" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_mode" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_subs"
ref="with_subs"
:checked="with_subs"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_subs" class="tw-checkbox__label">
<label for="with_subs" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.subs', 'Subs Only') }}
</span>
</label>
</div>
<div v-if="has_mode" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_mode" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_followers"
ref="with_followers"
:checked="with_followers"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_followers" class="tw-checkbox__label">
<label for="with_followers" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.followers', 'Followers-Only') }}
</span>
</label>
</div>
<div v-if="has_mode" class="tw-pd-x-1 tw-checkbox">
<div v-if="has_mode" class="tw-pd-x-1 ffz-checkbox">
<input
id="with_r9k"
ref="with_r9k"
:checked="with_r9k"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="with_r9k" class="tw-checkbox__label">
<label for="with_r9k" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.r9k', 'R9k Mode') }}
</span>
</label>
</div>
<div class="tw-pd-x-1 tw-checkbox">
<div class="tw-pd-x-1 ffz-checkbox">
<input
id="show_all"
ref="show_all"
:checked="show_all"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onPreview"
>
<label for="show_all" class="tw-checkbox__label">
<label for="show_all" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.actions.preview.all', 'Show All') }}
</span>
@ -230,7 +230,7 @@
<input
ref="paste"
:placeholder="t('setting.paste-json.json', '[json]')"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@keydown.enter="addFromJSON"
>
<button
@ -245,7 +245,7 @@
</div>
<div v-else class="tw-pd-y-1">
<button
class="tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive tw-full-width"
class="ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive tw-full-width"
@click="add_pasting = true"
>
<div class="tw-flex tw-align-items-center tw-pd-y-05 tw-pd-x-1">
@ -264,7 +264,7 @@
v-else
:key="idx"
:disabled="preset.disabled"
class="tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive tw-full-width"
class="ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive tw-full-width"
@click="add(preset.value)"
>
<div class="tw-flex tw-align-items-center tw-pd-y-05 tw-pd-x-1">

8
src/modules/main_menu/components/clear-settings.vue
View file

@ -16,16 +16,16 @@
<div
v-for="(type, key) in types"
:key="key"
class="tw-checkbox tw-relative tw-mg-y-05"
class="ffz-checkbox tw-relative tw-mg-y-05"
>
<input
:id="key"
:ref="key"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
>
<label :for="key" class="tw-checkbox__label">
<label :for="key" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t(`setting.clear.opt.${key}`, type.label || key) }}
</span>
@ -41,7 +41,7 @@
<input
v-model="entered"
type="text"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
>

14
src/modules/main_menu/components/experiments.vue
View file

@ -16,7 +16,7 @@
<input
ref="code"
type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
@keydown.enter="enterCode"
@ -31,7 +31,7 @@
</div>
<select
ref="sort_select"
class="tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onSort"
>
<option :selected="sort_by === 0">
@ -44,16 +44,16 @@
</div>
<div class="tw-mg-b-2 tw-flex tw-align-items-center">
<div class="tw-flex-grow-1" />
<div class="tw-checkbox tw-relative">
<div class="ffz-checkbox tw-relative">
<input
id="unused"
ref="unused"
v-model="unused"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
>
<label for="unused" class="tw-checkbox__label">
<label for="unused" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('setting.experiments.show-unused', 'Display unused experiments.') }}
</span>
@ -90,7 +90,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select
:data-key="key"
class="tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onChange($event)"
>
<option
@ -169,7 +169,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select
:data-key="key"
class="tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onTwitchChange($event)"
>
<option

2
src/modules/main_menu/components/filter-editor.vue
View file

@ -21,7 +21,7 @@
<select
v-once
ref="add_box"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-select"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-select"
>
<option
v-for="(filter, key) in filters"

22
src/modules/main_menu/components/link-tester.vue
View file

@ -10,7 +10,7 @@
<select
id="selector"
ref="selector"
class="tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
class="tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
@change="onSelectChange"
>
<option
@ -27,7 +27,7 @@
<input
ref="text"
:disabled="! isCustomURL"
class="ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@blur="updateText"
@input="onTextChange"
>
@ -37,34 +37,34 @@
<div class="tw-flex tw-mg-b-1">
<div class="tw-flex-grow-1" />
<div class="tw-pd-x-1 tw-checkbox">
<div class="tw-pd-x-1 ffz-checkbox">
<input
id="force_media"
ref="force_media"
:checked="force_media"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onCheck"
>
<label for="force_media" class="tw-checkbox__label">
<label for="force_media" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('debug.link-provider.allow.media', 'Allow Media') }}
</span>
</label>
</div>
<div class="tw-pd-x-1 tw-checkbox">
<div class="tw-pd-x-1 ffz-checkbox">
<input
id="force_unsafe"
ref="force_unsafe"
:checked="force_unsafe"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onCheck"
>
<label for="force_unsafe" class="tw-checkbox__label">
<label for="force_unsafe" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('debug.link-provider.allow.unsafe', 'Allow NSFW') }}
</span>
@ -104,17 +104,17 @@
</a>
</div>
<div class="tw-pd-x-1 tw-checkbox">
<div class="tw-pd-x-1 ffz-checkbox">
<input
id="force_tooltip"
ref="force_tooltip"
:checked="force_tooltip"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onTooltip"
>
<label for="force_tooltip" class="tw-checkbox__label">
<label for="force_tooltip" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t('debug.link-provider.force-tooltip', 'Force Tooltip') }}
</span>

4
src/modules/main_menu/components/main-menu.vue
View file

@ -11,7 +11,7 @@
<div class="tw-search-input">
<label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('main-menu.search', 'Search Settings') }}</label>
<div class="tw-relative">
<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">
<div class="tw-absolute tw-align-items-center tw-c-text-alt-2 tw-flex tw-full-height ffz-input__icon tw-justify-content-center tw-left-0 tw-top-0 tw-z-default">
<figure class="ffz-i-search" />
</div>
<input
@ -19,7 +19,7 @@
v-model="query"
:placeholder="t('main-menu.search', 'Search Settings')"
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"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
autocomplete="off"

4
src/modules/main_menu/components/profile-editor.vue
View file

@ -98,7 +98,7 @@
id="ffz:editor:name"
ref="name"
v-model="name"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
>
</div>
@ -111,7 +111,7 @@
id="ffz:editor:description"
ref="desc"
v-model="desc"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
/>
</div>
</div>

4
src/modules/main_menu/components/profile-selector.vue
View file

@ -4,7 +4,7 @@
ref="button"
:class="{active: opened}"
tabindex="0"
class="tw-c-background-alt tw-block tw-border tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
class="tw-c-background-alt tw-block tw-border tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
@keyup.up.stop.prevent="focusShow"
@keyup.left.stop.prevent="focusShow"
@keyup.down.stop.prevent="focusShow"
@ -18,7 +18,7 @@
<div
v-if="opened"
v-on-clickaway="hide"
class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left tw-z-above"
class="ffz-balloon tw-block ffz-balloon--lg ffz-balloon--down ffz-balloon--left tw-z-above"
>
<div
class="ffz--profile-list tw-elevation-2 tw-c-background-alt"

48
src/modules/main_menu/components/provider.vue
View file

@ -1,5 +1,14 @@
<template lang="html">
<div class="ffz--provider tw-pd-t-05">
<div v-if="not_www" class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
<h3 class="ffz-i-attention">
{{ t('setting.provider.warn-domain.title', 'You\'re far from home!') }}
</h3>
<div>
<markdown :source="t('setting.provider.warn-domain.desc', 'You are currently changing settings for a sub-domain of Twitch. Any changes here will only affect this sub-domain. You probably want to change this from Twitch\'s main website, and not here.')" />
</div>
</div>
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
<h3 class="ffz-i-attention">
{{ t('setting.provider.warn.title', 'Be careful!') }}
@ -14,18 +23,18 @@
</section>
<div class="ffz-options">
<div v-for="val of providers" :key="val.key" class="tw-pd-b-1 tw-radio ffz-radio-top">
<div v-for="val of providers" :key="val.key" class="tw-pd-b-1 ffz-radio ffz-radio-top">
<input
:id="'ffz--provider-opt-' + val.key"
v-model="selected"
:value="val.key"
name="ffz--provider-opt"
type="radio"
class="tw-radio__input"
class="ffz-radio__input"
>
<label
:for="'ffz--provider-opt-' + val.key"
class="tw-block tw-radio__label"
class="tw-block ffz-radio__label"
>
<div class="tw-mg-l-1">
<div>
@ -51,20 +60,23 @@
</div>
<div class="tw-border-t tw-pd-t-1">
<div class="tw-flex tw-align-items-center tw-checkbox">
<input id="transfer" ref="transfer" checked type="checkbox" class="tw-checkbox__input">
<label for="transfer" class="tw-checkbox__label">
<div v-if="canTransfer" class="tw-flex tw-align-items-center ffz-checkbox">
<input id="transfer" ref="transfer" checked type="checkbox" class="ffz-checkbox__input">
<label for="transfer" class="ffz-checkbox__label">
<div class="tw-mg-l-1">
{{ t('setting.provider.transfer', 'Transfer my settings when switching provider.') }}
</div>
</label>
</div>
<section class="tw-c-text-alt-2" style="padding-left:2.5rem">
<section v-if="canTransfer" class="tw-c-text-alt-2 tw-pd-b-05" style="padding-left:2.5rem">
<markdown :source="t('setting.provider.transfer.desc', '**Note:** It is recommended to leave this enabled unless you know what you\'re doing.')" />
</section>
<div class="tw-mg-t-1 tw-flex tw-align-items-center tw-checkbox">
<input id="backup" ref="backup" v-model="backup" type="checkbox" class="tw-checkbox__input">
<label for="backup" class="tw-checkbox__label">
<div v-else class="tw-flex tw-align-items-center" style="padding-left:2.5rem">
{{ t('setting.provider.no-transfer', 'Automatically transfering settings from your current provider to the selected provider is not allowed. Please use Backup and Restore.') }}
</div>
<div class="tw-mg-t-1 tw-flex tw-align-items-center ffz-checkbox">
<input id="backup" ref="backup" v-model="backup" type="checkbox" class="ffz-checkbox__input">
<label for="backup" class="ffz-checkbox__label">
<div class="tw-mg-l-1">
{{ t('setting.provider.backup', 'Yes, I made a backup.') }}
</div>
@ -97,33 +109,41 @@ export default {
data() {
const ffz = this.context.getFFZ(),
settings = ffz.resolve('settings'),
providers = [];
providers = [],
transfers = {};
for(const [key, val] of Object.entries(settings.getProviders())) {
const prov = {
key,
priority: val.priority || 0,
has_data: null,
has_blobs: val.supportsBlobs,
has_trans: val.allowTransfer,
i18n_key: `setting.provider.${key}.title`,
title: val.title || key,
desc_i18n_key: val.description ? `setting.provider.${key}.desc` : null,
description: val.description
};
transfers[key] = val.allowTransfer;
if ( val.supported() )
Promise.resolve(val.hasContent()).then(v => {
prov.has_data = v;
});
providers.push(prov);
}
providers.sort((a,b) => b.priority - a.priority);
const current = settings.getActiveProvider();
return {
backup: false,
not_www: window.location.host !== 'www.twitch.tv',
providers,
transfers,
current,
selected: current
}
@ -132,6 +152,10 @@ export default {
computed: {
enabled() {
return this.selected !== this.current && this.backup
},
canTransfer() {
return this.transfers[this.selected] && this.transfers[this.current]
}
},

2
src/modules/main_menu/components/reason-editor.vue
View file

@ -10,7 +10,7 @@
v-model="edit_data.text"
:placeholder="adding ? t('setting.reasons.add-placeholder', 'Add a new reason') : edit_data.text"
type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
>

6
src/modules/main_menu/components/setting-check-box.vue
View file

@ -3,17 +3,17 @@
:class="{inherits: isInherited, default: isDefault}"
class="ffz--widget ffz--checkbox"
>
<div class="tw-flex tw-align-items-center tw-checkbox">
<div class="tw-flex tw-align-items-center ffz-checkbox">
<input
:id="item.full_key"
ref="control"
:checked="value"
type="checkbox"
class="tw-checkbox__input"
class="ffz-checkbox__input"
@change="onChange"
>
<label :for="item.full_key" class="tw-checkbox__label">
<label :for="item.full_key" class="ffz-checkbox__label">
<span class="tw-mg-l-1">
{{ t(item.i18n_key, item.title) }}
<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>

4
src/modules/main_menu/components/setting-combo-box.vue
View file

@ -13,7 +13,7 @@
<select
:id="item.full_key"
ref="control"
class="tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
class="tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
@change="onChange"
>
<option
@ -31,7 +31,7 @@
ref="text"
:value="value"
:disabled="! isCustom"
class="ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input"
class="ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@change="onTextChange"
>
</div>

6
src/modules/main_menu/components/setting-radio-buttons.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div class="tw-input">
<div class="ffz-input">
<header>
{{ t(item.i18n_key, item.title) }}
<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>
@ -19,11 +19,11 @@
:name="item.full_key"
:value="i.value"
type="radio"
class="tw-radio__input"
class="ffz-radio__input"
>
<label
:for="item.full_key + idx"
class="tw-pd-y-05 tw-radio__label"
class="tw-pd-y-05 ffz-radio__label"
>
{{ t(i.i18n_key, i.title, i) }}
</label>

2
src/modules/main_menu/components/setting-select-box.vue
View file

@ -12,7 +12,7 @@
<select
:id="item.full_key"
ref="control"
class="tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-05"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-05"
@change="onChange"
>
<template v-for="i in nested_data">

2
src/modules/main_menu/components/setting-text-box.vue
View file

@ -15,7 +15,7 @@
:type="type"
:placeholder="placeholder"
:value="value"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-05 tw-input"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-05 ffz-input"
@change="onChange"
>

4
src/modules/main_menu/components/term-editor.vue
View file

@ -22,7 +22,7 @@
v-model="edit_data.v"
:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
>
@ -40,7 +40,7 @@
<select
v-else
v-model="edit_data.t"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset"
>
<option value="text">
{{ t('setting.terms.type.text', 'Text') }}

10
src/modules/metadata.jsx
View file

@ -210,7 +210,7 @@ export default class Metadata extends Module {
return false;
} : null;
tip.element.classList.add('tw-balloon--lg');
tip.element.classList.add('ffz-balloon--lg');
return (<div>
<div class="tw-pd-b-1 tw-mg-b-1 tw-border-b tw-semibold">
@ -220,7 +220,7 @@ export default class Metadata extends Module {
</div>
<div class="tw-flex tw-align-items-center">
<input
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input tw-full-width"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-full-width"
type="text"
value={url}
onFocus={e => e.target.select()}
@ -737,10 +737,10 @@ export default class Metadata extends Module {
live: false,
html: true,
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
tooltipClass: 'ffz-metadata-balloon ffz-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
// Hide the arrow for now, until we re-do our CSS to make it render correctly.
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
arrowClass: 'ffz-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'ffz-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: 'tw-pd-1',
popper: {

6
src/modules/translation_ui/components/i18n-entry.vue
View file

@ -21,8 +21,8 @@
<textarea
ref="editor"
v-model="value"
:class="{'tw-textarea--error': ! valid}"
class="tw-block tw-font-size-6 tw-full-width tw-textarea"
:class="{'ffz-textarea--error': ! valid}"
class="tw-block tw-font-size-6 tw-full-width ffz-textarea"
@input="onInput"
@blur="onBlur"
@focus="open = true"
@ -86,7 +86,7 @@
:id="`ui-ctx:${entry.key}:${val.key}`"
:type="val.is_number ? 'number' : 'text'"
:value="val.value"
class="tw-full-width tw-block tw-border-radius-medium tw-font-size-6 tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-full-width tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
@input="updateContext(val.key, $event)"
>
</div>

6
src/modules/translation_ui/components/translation-ui.vue
View file

@ -9,7 +9,7 @@
<div class="tw-search-input">
<label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('i18n.ui.search', 'Search Strings') }}</label>
<div class="tw-relative">
<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">
<div class="tw-absolute tw-align-items-center tw-c-text-alt-2 tw-flex tw-full-height ffz-input__icon tw-justify-content-center tw-left-0 tw-top-0 tw-z-default">
<figure class="ffz-i-search" />
</div>
<input
@ -17,7 +17,7 @@
v-model="query"
:placeholder="t('i18n.ui.search', 'Search Strings')"
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"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
autocapitalize="off"
autocorrect="off"
autocomplete="off"
@ -99,7 +99,7 @@
ref="pager"
:value="page"
:max="pages"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-input tw-pd-x-1 tw-pd-y-05"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
type="number"
min="1"
@keydown.enter="closePage"

2
src/modules/viewer_cards/card.vue
View file

@ -13,7 +13,7 @@
<div class="tw-flex tw-flex-column tw-full-height tw-full-width viewer-card__overlay">
<div class="tw-align-center tw-align-items-start tw-c-background-overlay tw-c-text-overlay tw-flex tw-flex-grow-1 tw-flex-row tw-full-width tw-justify-content-start tw-pd-05 tw-relative viewer-card__banner">
<div class="tw-mg-l-05 tw-mg-y-05 tw-inline-flex viewer-card-drag-cancel">
<figure class="tw-avatar tw-avatar--size-50">
<figure class="ffz-avatar ffz-avatar--size-50">
<img
v-if="loaded"
:src="user.profileImageURL"