oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-31 06:58:30 +00:00
Code Wiki Activity

The Big Linting Commit.

Browse source 
* Add linting for Vue files.
* Fix a bunch of linting problems in Vue files.
* Update README with notes about configuring editors.
This commit is contained in:
SirStendec 2018-03-30 17:58:56 -04:00
parent 8dbcf434cd
commit f9f5f0affa
23 changed files with 1114 additions and 971 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,62 +1,84 @@
<template lang="html">
<div class="ffz--badge-visibility tw-pd-t-05">
<div
class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1"
v-if="source && source !== profile"
>
<span class="ffz-i-info" />
{{ t('setting.badge-inheritence', 'These values are being overridden by another profile and may not take effect.') }}
</div>
<div class="tw-mg-b-2 tw-align-right">
<button
class="tw-mg-l-05 tw-button tw-button--hollow tw-tooltip-wrapper"
@click="clear"
:disabled="! has_value"
<div class="ffz--badge-visibility tw-pd-t-05">
<div
v-if="source && source !== profile"
class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-cancel" />
</span>
<span class="tw-button__text">
{{ t('setting.reset-all', 'Reset All to Default') }}
</span>
</button>
</div>
<span class="ffz-i-info" />
{{ t('setting.badge-inheritence', 'These values are being overridden by another profile and may not take effect.') }}
</div>
<section class="ffz--menu-container tw-border-t" v-for="sec in data">
<header>{{ sec.title }}</header>
<ul class="tw-flex tw-flex-wrap tw-align-content-start">
<li v-for="i in sort(sec.badges)" class="ffz--badge-info tw-pd-y-1 tw-pd-r-1 tw-flex" :class="{default: badgeDefault(i.id)}">
<input
type="checkbox"
class="tw-checkbox__input"
:checked="badgeChecked(i.id)"
:id="i.id"
@click="onChange(i.id, $event)"
<div class="tw-mg-b-2 tw-align-right">
<button
:disabled="! has_value"
class="tw-mg-l-05 tw-button tw-button--hollow tw-tooltip-wrapper"
@click="clear"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-cancel" />
</span>
<span class="tw-button__text">
{{ t('setting.reset-all', 'Reset All to Default') }}
</span>
</button>
</div>
<section
v-for="sec in data"
:key="sec.title"
class="ffz--menu-container tw-border-t"
>
<header>{{ sec.title }}</header>
<ul class="tw-flex tw-flex-wrap tw-align-content-start">
<li
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"
>
<input
:checked="badgeChecked(i.id)"
:id="i.id"
type="checkbox"
class="tw-checkbox__input"
@click="onChange(i.id, $event)"
>
<label class="tw-checkbox__label tw-flex" :for="i.id">
<div class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0" :style="{backgroundColor: i.color, backgroundImage: i.styleImage }" />
<div>
<h5>{{ i.name }}</h5>
<section class="tw-mg-t-05" v-if="i.versions && i.versions.length > 1">
<span v-for="v in i.versions" data-tooltip-type="html" class="ffz-badge ffz-tooltip" :title="v.name" :style="{backgroundColor: i.color, backgroundImage: v.styleImage}" />
</section>
<button
class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper"
@click="reset(i.id)"
>
<span class="tw-button__text">Reset</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</span>
</button>
</div>
</label>
</li>
</ul>
</section>
</div>
<label :for="i.id" class="tw-checkbox__label tw-flex">
<div
:style="{backgroundColor: i.color, backgroundImage: i.styleImage }"
class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0"
/>
<div>
<h5>{{ i.name }}</h5>
<section
v-if="i.versions && i.versions.length > 1"
class="tw-mg-t-05"
>
<span
v-for="v in i.versions"
:key="v.name"
:title="v.name"
:style="{backgroundColor: i.color, backgroundImage: v.styleImage}"
data-tooltip-type="html"
class="ffz-badge ffz-tooltip"
/>
</section>
<button
class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper"
@click="reset(i.id)"
>
<span class="tw-button__text">Reset</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</span>
</button>
</div>
</label>
</li>
</ul>
</section>
</div>
</template>
<script>

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

@ -1,12 +1,11 @@
<template lang="html">
<div class="ffz--changelog tw-border-t tw-pd-t-1">
<div class="tw-align-center">
<h2>{{ t('home.changelog', 'Changelog') }}</h2>
<div class="ffz--changelog tw-border-t tw-pd-t-1">
<div class="tw-align-center">
<h2>{{ t('home.changelog', 'Changelog') }}</h2>
</div>
<div ref="changes" />
</div>
<div ref="changes" />
</div>
</template>
@ -17,6 +16,10 @@ import {SERVER} from 'utilities/constants';
export default {
props: ['item', 'context'],
mounted() {
this.fetch(`${SERVER}/script/changelog.html`, this.$refs.changes);
},
methods: {
fetch(url, container) {
const done = data => {
@ -38,13 +41,8 @@ export default {
fetch(url)
.then(resp => resp.ok ? resp.text() : null)
.then(done)
.catch(err => done(null));
.catch(() => done(null));
}
},
mounted() {
this.fetch(`${SERVER}/script/changelog.html`, this.$refs.changes);
}
}
</script>

37
src/modules/main_menu/components/feedback-page.vue
View file

@ -1,35 +1,32 @@
<template lang="html">
<div class="ffz--home tw-border-t tw-pd-t-1">
<h2>Feedback</h2>
<div class="ffz--home tw-border-t tw-pd-t-1">
<h2>Feedback</h2>
<div class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention">
Please keep in mind that FrankerFaceZ v4 is under heavy development.
</h3>
</div>
<div class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention">
Please keep in mind that FrankerFaceZ v4 is under heavy development.
</h3>
</div>
<p>
Okay, still here? Great! You can provide feedback and bug reports by
<a href="https://github.com/FrankerFaceZ/FrankerFaceZ/issues" target="_blank" rel="noopener">
<p>
Okay, still here? Great! You can provide feedback and bug reports by
<a href="https://github.com/FrankerFaceZ/FrankerFaceZ/issues" target="_blank" rel="noopener">
opening an issue at our GitHub repository</a>.
You can also <a href="https://twitter.com/FrankerFaceZ" target="_blank" rel="noopener">
You can also <a href="https://twitter.com/FrankerFaceZ" target="_blank" rel="noopener">
tweet at us</a>.
</p>
</p>
<p>
When creating a GitHub issue, please check that someone else hasn't
already created one for what you'd like to discuss or report.
</p>
</div>
<p>
When creating a GitHub issue, please check that someone else hasn't
already created one for what you'd like to discuss or report.
</p>
</div>
</template>
<script>
export default {
props: ['item', 'context'],
}
</script>

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

@ -1,55 +1,55 @@
<template lang="html">
<div class="ffz--widget ffz--filter-editor">
<div ref="list" class="ffz--rule-list">
<section v-for="(rule, idx) in rules">
<div
class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-y-1">
<span class="ffz-i-ellipsis-vert" />
</div>
<div class="tw-flex-shrink-0 tw-pd-y-05">
Channel
</div>
<div class="tw-mg-x-1 tw-flex tw-flex-grow-1">
<div class="tw-flex-shrink-0 tw-mg-r-1">
<select class="tw-select">
<option>is one of</option>
<option>is not one of</option>
</select>
<div class="ffz--widget ffz--filter-editor">
<div ref="list" class="ffz--rule-list">
<section v-for="(rule, idx) in rules">
<div
class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-y-1">
<span class="ffz-i-ellipsis-vert" />
</div>
<div class="tw-flex-grow-1">
<input
type="text"
class="tw-input"
value="SirStendec"
/>
<div class="tw-flex-shrink-0 tw-pd-y-05">
Channel
</div>
<div class="tw-mg-x-1 tw-flex tw-flex-grow-1">
<div class="tw-flex-shrink-0 tw-mg-r-1">
<select class="tw-select">
<option>is one of</option>
<option>is not one of</option>
</select>
</div>
<div class="tw-flex-grow-1">
<input
type="text"
class="tw-input"
value="SirStendec"
>
</div>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
<button class="tw-button tw-button--text" @click="del(idx)">
<span class="tw-button__text ffz-i-trash">
{{ t('setting.filters.delete', 'Delete') }}
</span>
</button>
</div>
</div>
</section>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
<button class="tw-button tw-button--text" @click="del(idx)">
<span class="tw-button__text ffz-i-trash">
{{ t('setting.filters.delete', 'Delete') }}
</span>
</button>
</div>
</div>
</section>
<button
class="tw-button tw-button--hollow tw-mg-y-1 tw-full-width"
@click="newRule"
>
<span class="tw-button__text ffz-i-plus">
{{ t('', 'Add New Rule') }}
</span>
</button>
</div>
<button
class="tw-button tw-button--hollow tw-mg-y-1 tw-full-width"
@click="newRule"
>
<span class="tw-button__text ffz-i-plus">
{{ t('', 'Add New Rule') }}
</span>
</button>
</div>
</template>
<script>

132
src/modules/main_menu/components/home-page.vue
View file

@ -1,72 +1,72 @@
<template lang="html">
<div class="ffz--home tw-flex tw-flex-nowrap">
<div class="tw-flex-grow-1">
<div class="tw-align-center">
<h1 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h1>
<span class="tw-c-text-alt">
{{ t('home.tag-line', 'The Twitch Enhancement Suite') }}
</span>
<div class="ffz--home tw-flex tw-flex-nowrap">
<div class="tw-flex-grow-1">
<div class="tw-align-center">
<h1 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h1>
<span class="tw-c-text-alt">
{{ t('home.tag-line', 'The Twitch Enhancement Suite') }}
</span>
</div>
<section class="tw-pd-t-1 tw-border-t tw-mg-t-1">
<h2>Welcome to the v4.0 Beta</h2>
<p>
This is the initial, beta release of FrankerFaceZ v4.0 with support
for the Twitch website rewrite.
As you'll notice, this release is <strong>not</strong> complete.
There are missing features. There are bugs. If you are a moderator,
you will want to just keep opening a Legacy Chat Popout for now.
</p>
<p>
FrankerFaceZ v4.0 is still under heavy development and there will
be significant changes and improvements in the coming weeks. For
now, here are some of the bigger issues:
</p>
<ul class="tw-mg-b-2">
<li>Settings from the old version are not being imported.</li>
<li>Settings cannot be searched.</li>
<li>Emoji aren't displayed.</li>
<li>The emote menu isn't finished.</li>
<li>Tab-completion and advanced input isn't available.</li>
</ul>
<p>And the biggest features still under development:</p>
<ul class="tw-mg-b-2">
<li>Emoji Rendering</li>
<li>Emotes Menu</li>
<li>Chat Filtering (Highlighted Words, etc.)</li>
<li>Room Status Indicators</li>
<li>Custom Mod Cards</li>
<li>Custom Mod Actions</li>
<li>Recent Highlights</li>
<li>More Channel Metadata</li>
<li>Disable Hosting</li>
<li>Portrait Mode</li>
<li>Importing and exporting settings</li>
<li>User Aliases</li>
<li>Rich Content in Chat (aka Clip Embeds)</li>
</ul>
<p>
For a possibly more up-to-date list of what I'm working on,
please consult <a href="https://trello.com/b/LGcYPFwi/frankerfacez-v4" target="_blank">this Trello board</a>.
</p>
</section>
</div>
<div class="tw-mg-l-1 tw-flex-shrink-0 tweet-column">
<a class="twitter-timeline" data-width="300" data-theme="dark" href="https://twitter.com/FrankerFaceZ?ref_src=twsrc%5Etfw">
Tweets by FrankerFaceZ
</a>
</div>
<section class="tw-pd-t-1 tw-border-t tw-mg-t-1">
<h2>Welcome to the v4.0 Beta</h2>
<p>
This is the initial, beta release of FrankerFaceZ v4.0 with support
for the Twitch website rewrite.
As you'll notice, this release is <strong>not</strong> complete.
There are missing features. There are bugs. If you are a moderator,
you will want to just keep opening a Legacy Chat Popout for now.
</p>
<p>
FrankerFaceZ v4.0 is still under heavy development and there will
be significant changes and improvements in the coming weeks. For
now, here are some of the bigger issues:
</p>
<ul class="tw-mg-b-2">
<li>Settings from the old version are not being imported.</li>
<li>Settings cannot be searched.</li>
<li>Emoji aren't displayed.</li>
<li>The emote menu isn't finished.</li>
<li>Tab-completion and advanced input isn't available.</li>
</ul>
<p>And the biggest features still under development:</p>
<ul class="tw-mg-b-2">
<li>Emoji Rendering</li>
<li>Emotes Menu</li>
<li>Chat Filtering (Highlighted Words, etc.)</li>
<li>Room Status Indicators</li>
<li>Custom Mod Cards</li>
<li>Custom Mod Actions</li>
<li>Recent Highlights</li>
<li>More Channel Metadata</li>
<li>Disable Hosting</li>
<li>Portrait Mode</li>
<li>Importing and exporting settings</li>
<li>User Aliases</li>
<li>Rich Content in Chat (aka Clip Embeds)</li>
</ul>
<p>
For a possibly more up-to-date list of what I'm working on,
please consult <a href="https://trello.com/b/LGcYPFwi/frankerfacez-v4" target="_blank">this Trello board</a>.
</p>
</section>
</div>
<div class="tw-mg-l-1 tw-flex-shrink-0 tweet-column">
<a class="twitter-timeline" data-width="300" data-theme="dark" href="https://twitter.com/FrankerFaceZ?ref_src=twsrc%5Etfw">
Tweets by FrankerFaceZ
</a>
</div>
</div>
</template>

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

@ -1,78 +1,81 @@
<template lang="html">
<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">
<!--div class="tw-search-input">
<label for="ffz-main-menu.search" class="hide-accessible">{{ t('main-menu.search', 'Search Settings') }}</label>
<div class="relative">
<div class="tw-input__icon-group">
<div class="tw-input__icon">
<figure class="ffz-i-search" />
<div
:class="{ maximized: maximized || exclusive, exclusive }"
class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
>
<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">
<!--div class="tw-search-input">
<label for="ffz-main-menu.search" class="hide-accessible">{{ t('main-menu.search', 'Search Settings') }}</label>
<div class="relative">
<div class="tw-input__icon-group">
<div class="tw-input__icon">
<figure class="ffz-i-search" />
</div>
</div>
<input type="search" class="tw-input tw-input--icon-left" :placeholder="t('main-menu.search', 'Search Settings')" autocapitalize="off" autocorrect="off" autocomplete="off" id="ffz-main-menu.search">
</div>
<input type="search" class="tw-input tw-input--icon-left" :placeholder="t('main-menu.search', 'Search Settings')" autocapitalize="off" autocorrect="off" autocomplete="off" id="ffz-main-menu.search">
</div>
</div-->
</div>
<button class="tw-button-icon tw-mg-x-05" @click="resize" v-if="!exclusive">
<span class="tw-button-icon__icon">
<figure :class="{'ffz-i-window-maximize': !maximized, 'ffz-i-window-restore': maximized}" />
</span>
</button>
<button class="tw-button-icon tw-mg-x-05" @click="close" v-if="!exclusive">
<span class="tw-button-icon__icon">
<figure class="ffz-i-window-close" />
</span>
</button>
</header>
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-nowrap tw-overflow-hidden">
<nav class="ffz-vertical-nav tw-c-background-alt-2 tw-border-r tw-full-height tw-flex tw-flex-column tw-flex-shrink-0 tw-flex-nowrap">
<header class="tw-border-b tw-pd-1">
<profile-selector
:context="context"
@navigate="navigate"
/>
</header>
<div class="tw-full-width tw-full-height tw-overflow-hidden tw-flex tw-flex-nowrap tw-relative">
<div class="ffz-vertical-nav__items tw-full-width tw-flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-tree
:currentItem="currentItem"
:modal="nav"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</div>
</div>
</div-->
</div>
<footer class="tw-c-text-alt tw-border-t tw-pd-1">
<div>
{{ t('main-menu.version', 'Version %{version}', {version: version.toString()}) }}
</div>
<div class="tw-c-text-alt-2">
{{version.build}}
</div>
</footer>
</nav>
<main class="tw-flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-page
ref="page"
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05" @click="resize">
<span class="tw-button-icon__icon">
<figure :class="{'ffz-i-window-maximize': !maximized, 'ffz-i-window-restore': maximized}" />
</span>
</button>
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05" @click="close">
<span class="tw-button-icon__icon">
<figure class="ffz-i-window-close" />
</span>
</button>
</header>
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-nowrap tw-overflow-hidden">
<nav class="ffz-vertical-nav tw-c-background-alt-2 tw-border-r tw-full-height tw-flex tw-flex-column tw-flex-shrink-0 tw-flex-nowrap">
<header class="tw-border-b tw-pd-1">
<profile-selector
:context="context"
:item="currentItem"
@change-item="changeItem"
@navigate="navigate"
v-if="currentItem"
/>
</header>
<div class="tw-full-width tw-full-height tw-overflow-hidden tw-flex tw-flex-nowrap tw-relative">
<div class="ffz-vertical-nav__items tw-full-width tw-flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-tree
:current-item="currentItem"
:modal="nav"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</div>
</div>
</div>
</div>
</main>
</section>
</div>
<footer class="tw-c-text-alt tw-border-t tw-pd-1">
<div>
{{ t('main-menu.version', 'Version %{version}', {version: version.toString()}) }}
</div>
<div class="tw-c-text-alt-2">
{{ version.build }}
</div>
</footer>
</nav>
<main class="tw-flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-page
v-if="currentItem"
ref="page"
:context="context"
:item="currentItem"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</div>
</main>
</section>
</div>
</template>
<script>
@ -84,6 +87,12 @@ export default {
return this.$vnode.data;
},
watch: {
maximized() {
this.updateDrag();
}
},
created() {
this.context.context._add_user();
},
@ -92,6 +101,22 @@ export default {
this.context.context._remove_user();
},
mounted() {
this.updateDrag();
this._on_resize = this.handleResize.bind(this);
window.addEventListener('resize', this._on_resize);
},
beforeDestroy() {
this.destroyDrag();
if ( this._on_resize ) {
window.removeEventListener('resize', this._on_resize);
this._on_resize = null;
}
},
methods: {
changeProfile() {
const new_id = this.$refs.profiles.value,
@ -153,28 +178,6 @@ export default {
this.changeItem(item);
}
},
watch: {
maximized() {
this.updateDrag();
}
},
mounted() {
this.updateDrag();
this._on_resize = this.handleResize.bind(this);
window.addEventListener('resize', this._on_resize);
},
beforeDestroy() {
this.destroyDrag();
if ( this._on_resize ) {
window.removeEventListener('resize', this._on_resize);
this._on_resize = null;
}
}
}
</script>

30
src/modules/main_menu/components/menu-container.vue
View file

@ -1,21 +1,21 @@
<template lang="html">
<div v-bind:class="classes" v-if="item.contents">
<header v-if="! item.no_header">
{{ t(item.i18n_key, item.title, item) }}
</header>
<section
v-if="item.description"
v-html="t(item.desc_i18n_key, item.description, item)"
class="tw-pd-b-1"
<div v-if="item.contents" :class="classes">
<header v-if="! item.no_header">
{{ t(item.i18n_key, item.title, item) }}
</header>
<section
v-if="item.description"
class="tw-pd-b-1"
v-html="t(item.desc_i18n_key, item.description, item)"
/>
<component
v-for="i in item.contents"
v-bind:is="i.component"
:context="context"
:item="i"
:key="i.full_key"
<component
v-for="i in item.contents"
:is="i.component"
:context="context"
:item="i"
:key="i.full_key"
/>
</div>
</div>
</template>
<script>

88
src/modules/main_menu/components/menu-page.vue
View file

@ -1,51 +1,49 @@
<template lang="html">
<div class="ffz--menu-page">
<header class="tw-mg-b-1">
<template v-for="i in breadcrumbs">
<a v-if="i !== item" href="#" @click="$emit('change-item', i, false)">{{ t(i.i18n_key, i.title, i) }}</a>
<strong v-if="i === item">{{ t(i.i18n_key, i.title, i) }}</strong>
<template v-if="i !== item">&raquo; </template>
</template>
</header>
<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention">
{{ t('setting.profiles.inactive', "This profile isn't active.") }}
</h3>
<div class="ffz--menu-page">
<header class="tw-mg-b-1">
<span v-for="i in breadcrumbs" :key="i.full_key">
<a v-if="i !== item" href="#" @click="$emit('change-item', i, false)">{{ t(i.i18n_key, i.title, i) }}</a>
<strong v-if="i === item">{{ t(i.i18n_key, i.title, i) }}</strong>
<template v-if="i !== item">&raquo; </template>
</span>
</header>
<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention">
{{ t('setting.profiles.inactive', "This profile isn't active.") }}
</h3>
{{ t(
'setting.profiles.inactive.description',
"This profile's rules don't match the current context and it therefore isn't currently active, so you " +
"won't see changes you make here reflected on Twitch."
) }}
{{ t('setting.profiles.inactive.description',
"This profile's rules don't match the current context and it therefore isn't currently active, so you " +
"won't see changes you make here reflected on Twitch.")
}}
</div>
</section>
<section
v-if="item.description"
class="tw-border-t tw-pd-y-1"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
<template v-if="! item.contents || ! item.contents.length">
<ul class="tw-border-t tw-pd-y-1">
<li v-for="i in item.items" :key="i.full_key" class="tw-pd-x-1">
<a href="#" @click="$emit('change-item', i, false)">
{{ t(i.i18n_key, i.title, i) }}
</a>
</li>
</ul>
</template>
<component
v-for="i in item.contents"
ref="children"
:is="i.component"
:context="context"
:item="i"
:key="i.full_key"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</section>
<section
v-if="item.description"
class="tw-border-t tw-pd-y-1"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</section>
<template v-if="! item.contents || ! item.contents.length">
<ul class="tw-border-t tw-pd-y-1">
<li class="tw-pd-x-1" v-for="i in item.items">
<a href="#" @click="$emit('change-item', i, false)">
{{ t(i.i18n_key, i.title, i) }}
</a>
</li>
</ul>
</template>
<component
v-for="i in item.contents"
v-bind:is="i.component"
ref="children"
:context="context"
:item="i"
:key="i.full_key"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</template>
<script>

93
src/modules/main_menu/components/menu-tree.vue
View file

@ -1,53 +1,52 @@
<template lang="html">
<ul
v-if="modal"
class="ffz--menu-tree"
:role="[root ? 'group' : 'tree']"
:tabindex="tabIndex"
@keyup.up="prevItem"
@keyup.down="nextItem"
@keyup.left="prevLevel"
@keyup.right="nextLevel"
@keyup.*="expandAll"
>
<li
v-for="item in modal"
:key="item.full_key"
:class="[currentItem === item ? 'active' : '']"
role="presentation"
<ul
v-if="modal"
:role="[root ? 'group' : 'tree']"
:tabindex="tabIndex"
class="ffz--menu-tree"
@keyup.up="prevItem"
@keyup.down="nextItem"
@keyup.left="prevLevel"
@keyup.right="nextLevel"
@keyup.*="expandAll"
>
<div
class="tw-flex__item tw-flex tw-flex-nowrap tw-align-items-center tw-pd-y-05 tw-pd-r-05"
role="treeitem"
:aria-expanded="item.expanded"
:aria-selected="currentItem === item"
@click="clickItem(item)"
<li
v-for="item in modal"
:key="item.full_key"
:class="[currentItem === item ? 'active' : '']"
role="presentation"
>
<span
role="presentation"
class="arrow"
:class="[
item.items ? '' : 'ffz--invisible',
item.expanded ? 'ffz-i-down-dir' : 'ffz-i-right-dir'
]"
<div
:aria-expanded="item.expanded"
:aria-selected="currentItem === item"
class="tw-flex__item tw-flex tw-flex-nowrap tw-align-items-center tw-pd-y-05 tw-pd-r-05"
role="treeitem"
@click="clickItem(item)"
>
<span
:class="[
item.items ? '' : 'ffz--invisible',
item.expanded ? 'ffz-i-down-dir' : 'ffz-i-right-dir'
]"
role="presentation"
class="arrow"
/>
<span class="tw-flex-grow-1">
{{ t(item.i18n_key, item.title, item) }}
</span>
<span v-if="item.pill" class="pill">
{{ item.pill_i18n_key ? t(item.pill_i18n_key, item.pill, item) : item.pill }}
</span>
</div>
<menu-tree
v-if="item.items && item.expanded"
:root="item"
:current-item="currentItem"
:modal="item.items"
@change-item="i => $emit('change-item', i)"
/>
<span class="tw-flex-grow-1">
{{ t(item.i18n_key, item.title, item) }}
</span>
<span v-if="item.pill" class="pill">
{{ item.pill_i18n_key ? t(item.pill_i18n_key, item.pill, item) : item.pill }}
</span>
</div>
<menu-tree
:root="item"
:currentItem="currentItem"
:modal="item.items"
v-if="item.items && item.expanded"
@change-item="i => $emit('change-item', i)"
/>
</li>
</ul>
</li>
</ul>
</template>
<script>
@ -120,7 +119,7 @@ export default {
this.$emit('change-item', i.parent);
},
nextItem(e) {
nextItem() {
if ( this.root ) return;
const i = this.currentItem;

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

@ -1,83 +1,81 @@
<template lang="html">
<div class="ffz--profile-editor">
<div class="tw-flex tw-align-items-center tw-border-t tw-pd-1">
<div class="tw-flex-grow-1"></div>
<button
class="tw-button tw-button--text"
@click="save"
>
<span class="tw-button__text ffz-i-floppy">
{{ t('settings.profiles.save', 'Save') }}
</span>
</button>
<button
class="tw-mg-l-1 tw-button tw-button--text"
:disabled="item.profile && context.profiles.length < 2"
@click="del"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.profiles.delete', 'Delete') }}
</span>
</button>
<!--button class="tw-mg-l-1 tw-button tw-button--text">
<span class="tw-button__text ffz-i-download">
{{ t('setting.profiles.export', 'Export') }}
</span>
</button-->
</div>
<div class="ffz--menu-container tw-border-t">
<header>
{{ t('settings.data_management.profiles.edit.general', 'General') }}
</header>
<div class="ffz--widget tw-flex tw-flex-nowrap">
<label for="ffz:editor:name">
{{ t('settings.data_management.profiles.edit.name', 'Name') }}
</label>
<input
class="tw-input"
ref="name"
id="ffz:editor:name"
v-model="name"
/>
<div class="ffz--profile-editor">
<div class="tw-flex tw-align-items-center tw-border-t tw-pd-1">
<div class="tw-flex-grow-1" />
<button
class="tw-button tw-button--text"
@click="save"
>
<span class="tw-button__text ffz-i-floppy">
{{ t('settings.profiles.save', 'Save') }}
</span>
</button>
<button
:disabled="item.profile && context.profiles.length < 2"
class="tw-mg-l-1 tw-button tw-button--text"
@click="del"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.profiles.delete', 'Delete') }}
</span>
</button>
<!--button class="tw-mg-l-1 tw-button tw-button--text">
<span class="tw-button__text ffz-i-download">
{{ t('setting.profiles.export', 'Export') }}
</span>
</button-->
</div>
<div class="ffz--widget tw-flex tw-flex-nowrap">
<label for="ffz:editor:description">
{{ t('settings.data_management.profiles.edit.desc', 'Description') }}
</label>
<div class="ffz--menu-container tw-border-t">
<header>
{{ t('settings.data_management.profiles.edit.general', 'General') }}
</header>
<textarea
class="tw-input"
ref="desc"
id="ffz:editor:description"
v-model="desc"
<div class="ffz--widget tw-flex tw-flex-nowrap">
<label for="ffz:editor:name">
{{ t('settings.data_management.profiles.edit.name', 'Name') }}
</label>
<input
id="ffz:editor:name"
ref="name"
v-model="name"
class="tw-input"
>
</div>
<div class="ffz--widget tw-flex tw-flex-nowrap">
<label for="ffz:editor:description">
{{ t('settings.data_management.profiles.edit.desc', 'Description') }}
</label>
<textarea
id="ffz:editor:description"
ref="desc"
v-model="desc"
class="tw-input"
/>
</div>
</div>
</div>
<div class="ffz--menu-container tw-border-t">
<header>
{{ t('settings.data_management.profiles.edit.rules', 'Rules') }}
</header>
<section class="tw-pd-b-1">
{{ t(
'settings.data_management.profiles.edit.rules.description',
'Rules allows you to define a series of conditions under which this profile will be active.'
) }}
</section>
<div class="ffz--menu-container tw-border-t">
<header>
{{ t('settings.data_management.profiles.edit.rules', 'Rules') }}
</header>
<section class="tw-pd-b-1">
{{ t('settings.data_management.profiles.edit.rules.description',
'Rules allows you to define a series of conditions under which this profile will be active.')
}}
</section>
<filter-editor
:filters="filters"
:rules="rules"
:context="test_context"
@change="unsaved = true"
<filter-editor
:filters="filters"
:rules="rules"
:context="test_context"
@change="unsaved = true"
/>
</div>
</div>
</div>
</template>
<script>
@ -100,17 +98,6 @@ export default {
}
},
created() {
this.context.context.on('context_changed', this.updateContext, this);
this.updateContext();
this.revert();
},
beforeDestroy() {
this.context.context.off('context_changed', this.updateContext, this);
},
watch: {
name() {
if ( this.name !== this.old_name )
@ -123,6 +110,16 @@ export default {
}
},
created() {
this.context.context.on('context_changed', this.updateContext, this);
this.updateContext();
this.revert();
},
beforeDestroy() {
this.context.context.off('context_changed', this.updateContext, this);
},
methods: {
revert() {
const profile = this.item.profile;
@ -131,7 +128,7 @@ export default {
profile.i18n_key ?
this.t(profile.i18n_key, profile.title, profile) :
profile.title :
'Unnamed Profile',
'Unnamed Profile';
this.old_desc = this.desc = profile ?
profile.desc_i18n_key ?

177
src/modules/main_menu/components/profile-manager.vue
View file

@ -1,74 +1,74 @@
<template lang="html">
<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
<h3 class="ffz-i-attention">
This feature is not yet finished.
</h3>
<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
<h3 class="ffz-i-attention">
This feature is not yet finished.
</h3>
Creating and editing profiles is disabled until the rule editor is finished.
</div>
<div class="tw-flex tw-align-items-center tw-pd-b-05">
<div class="tw-flex-grow-1">
{{ t('setting.profiles.drag', 'Drag profiles to change their priority.') }}
Creating and editing profiles is disabled until the rule editor is finished.
</div>
<button class="tw-mg-l-1 tw-button tw-button--text" disabled @notclick="edit()">
<span class="tw-button__text ffz-i-plus">
{{ t('setting.profiles.new', 'New Profile') }}
</span>
</button>
<!--button class="tw-mg-l-1 tw-button tw-button--text">
<span class="tw-button__text ffz-i-upload">
{{ t('setting.profiles.import', 'Import…') }}
</span>
</button-->
</div>
<div ref="list" class="ffz--profile-list">
<section
v-for="p in context.profiles"
:key="p.id"
:data-profile="p.id"
>
<div
class="ffz--profile tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
:class="{live: p.live}"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
<span class="ffz-i-ellipsis-vert" />
</div>
<div class="tw-flex-grow-1">
<h4>{{ t(p.i18n_key, p.title, p) }}</h4>
<div v-if="p.description" class="description">
{{ t(p.desc_i18n_key, p.description, p) }}
</div>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
<button class="tw-button tw-button--text" disabled @notclick="edit(p)">
<span class="tw-button__text ffz-i-cog">
{{ t('setting.profiles.configure', 'Configure') }}
</span>
</button>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-l tw-mg-l-1 tw-pd-l-1">
<div v-if="p.live" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is active.') }}
</div>
</div>
<div v-if="! p.live" class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.inactive', 'This profile is not active.') }}
</div>
</div>
</div>
<div class="tw-flex tw-align-items-center tw-pd-b-05">
<div class="tw-flex-grow-1">
{{ t('setting.profiles.drag', 'Drag profiles to change their priority.') }}
</div>
</section>
<button class="tw-mg-l-1 tw-button tw-button--text" disabled @notclick="edit()">
<span class="tw-button__text ffz-i-plus">
{{ t('setting.profiles.new', 'New Profile') }}
</span>
</button>
<!--button class="tw-mg-l-1 tw-button tw-button--text">
<span class="tw-button__text ffz-i-upload">
{{ t('setting.profiles.import', 'Import…') }}
</span>
</button-->
</div>
<div ref="list" class="ffz--profile-list">
<section
v-for="p in context.profiles"
:key="p.id"
:data-profile="p.id"
>
<div
:class="{live: p.live}"
class="ffz--profile tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
<span class="ffz-i-ellipsis-vert" />
</div>
<div class="tw-flex-grow-1">
<h4>{{ t(p.i18n_key, p.title, p) }}</h4>
<div v-if="p.description" class="description">
{{ t(p.desc_i18n_key, p.description, p) }}
</div>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
<button class="tw-button tw-button--text" disabled @notclick="edit(p)">
<span class="tw-button__text ffz-i-cog">
{{ t('setting.profiles.configure', 'Configure') }}
</span>
</button>
</div>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-l tw-mg-l-1 tw-pd-l-1">
<div v-if="p.live" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is active.') }}
</div>
</div>
<div v-if="! p.live" class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.inactive', 'This profile is not active.') }}
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</template>
<script>
@ -78,6 +78,28 @@ import Sortable from 'sortablejs';
export default {
props: ['item', 'context'],
mounted() {
this._sortable = Sortable.create(this.$refs.list, {
draggable: 'section',
filter: 'button',
onUpdate: event => {
const id = event.item.dataset.profile,
profile = this.context.profile_keys[id];
if ( profile )
profile.move(event.newIndex);
}
});
},
beforeDestroy() {
if ( this._sortable )
this._sortable.destroy();
this._sortable = null;
},
methods: {
edit(profile) {
const item = {
@ -100,30 +122,7 @@ export default {
item.contents[0].parent = item;
this.$emit('change-item', item);
}
},
mounted() {
this._sortable = Sortable.create(this.$refs.list, {
draggable: 'section',
filter: 'button',
onUpdate: (event) => {
const id = event.item.dataset.profile,
profile = this.context.profile_keys[id];
if ( profile )
profile.move(event.newIndex);
}
});
},
beforeDestroy() {
if ( this._sortable )
this._sortable.destroy();
this._sortable = null;
}
}
</script>

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

@ -1,79 +1,84 @@
<template lang="html">
<div class="ffz--widget ffz--profile-selector">
<div
tabindex="0"
class="tw-select"
:class="{active: opened}"
ref="button"
@keyup.up.stop.prevent="focusShow"
@keyup.left.stop.prevent="focusShow"
@keyup.down.stop.prevent="focusShow"
@keyup.right.stop.prevent="focusShow"
@keyup.enter="focusShow"
@keyup.space="focusShow"
@click="togglePopup"
>
{{ t(context.currentProfile.i18n_key, context.currentProfile.title, context.currentProfile) }}
</div>
<div v-if="opened" v-on-clickaway="hide" class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left">
<div class="ffz--widget ffz--profile-selector">
<div
class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
@keyup.escape="focusHide"
@focusin="focus"
@focusout="blur"
ref="button"
:class="{active: opened}"
tabindex="0"
class="tw-select"
@keyup.up.stop.prevent="focusShow"
@keyup.left.stop.prevent="focusShow"
@keyup.down.stop.prevent="focusShow"
@keyup.right.stop.prevent="focusShow"
@keyup.enter="focusShow"
@keyup.space="focusShow"
@click="togglePopup"
>
<div class="scrollable-area tw-border-b" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content" ref="popup">
<div
v-for="(p, idx) in context.profiles"
tabindex="0"
class="ffz--profile-row tw-relative tw-border-b tw-pd-y-05 tw-pd-r-3 tw-pd-l-1"
:class="{
live: p.live,
current: p === context.currentProfile
}"
@keydown.up.stop.prevent=""
@keydown.down.stop.prevent=""
@keydown.page-up.stop.prevent=""
@keydown.page-down.stop.prevent=""
@keyup.up.stop="prevItem"
@keyup.down.stop="nextItem"
@keyup.home="firstItem"
@keyup.end="lastItem"
@keyup.page-up.stop="prevPage"
@keyup.page-down.stop="nextPage"
@keyup.enter="changeProfile(p)"
@click="changeProfile(p)"
>
{{ t(context.currentProfile.i18n_key, context.currentProfile.title, context.currentProfile) }}
</div>
<div
v-on-clickaway="hide"
v-if="opened"
class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left"
>
<div
class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
@keyup.escape="focusHide"
@focusin="focus"
@focusout="blur"
>
<div class="scrollable-area tw-border-b" data-simplebar>
<div class="simplebar-scroll-content">
<div ref="popup" class="simplebar-content">
<div
v-if="p.live"
class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
v-for="p in context.profiles"
:key="p.id"
:class="{
live: p.live,
current: p === context.currentProfile
}"
tabindex="0"
class="ffz--profile-row tw-relative tw-border-b tw-pd-y-05 tw-pd-r-3 tw-pd-l-1"
@keydown.up.stop.prevent=""
@keydown.down.stop.prevent=""
@keydown.page-up.stop.prevent=""
@keydown.page-down.stop.prevent=""
@keyup.up.stop="prevItem"
@keyup.down.stop="nextItem"
@keyup.home="firstItem"
@keyup.end="lastItem"
@keyup.page-up.stop="prevPage"
@keyup.page-down.stop="nextPage"
@keyup.enter="changeProfile(p)"
@click="changeProfile(p)"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is active.') }}
<div
v-if="p.live"
class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is active.') }}
</div>
</div>
</div>
<h4>{{ t(p.i18n_key, p.title, p) }}</h4>
<div v-if="p.description" class="description">
{{ t(p.desc_i18n_key, p.description, p) }}
<h4>{{ t(p.i18n_key, p.title, p) }}</h4>
<div v-if="p.description" class="description">
{{ t(p.desc_i18n_key, p.description, p) }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tw-pd-y-05 tw-pd-x-05 tw-align-right">
<button class="tw-button tw-button--text" @click="openConfigure">
<span class="tw-button__text ffz-i-cog">
{{ t('setting.profiles.configure', 'Configure') }}
</span>
</button>
<div class="tw-pd-y-05 tw-pd-x-05 tw-align-right">
<button class="tw-button tw-button--text" @click="openConfigure">
<span class="tw-button__text ffz-i-cog">
{{ t('setting.profiles.configure', 'Configure') }}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>

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

@ -1,43 +1,46 @@
<template lang="html">
<div class="ffz--widget ffz--checkbox" :class="{inherits: isInherited, default: isDefault}">
<div class="tw-flex tw-align-items-center">
<input
type="checkbox"
class="tw-checkbox__input"
ref="control"
:id="item.full_key"
:checked="value"
@change="onChange"
<div
:class="{inherits: isInherited, default: isDefault}"
class="ffz--widget ffz--checkbox"
>
<div class="tw-flex tw-align-items-center">
<input
ref="control"
:id="item.full_key"
:checked="value"
type="checkbox"
class="tw-checkbox__input"
@change="onChange"
>
<label class="tw-checkbox__label" :for="item.full_key">
{{ t(item.i18n_key, item.title, item) }}
</label>
<label :for="item.full_key" class="tw-checkbox__label">
{{ t(item.i18n_key, item.title, item) }}
</label>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel"></span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<section
v-if="item.description"
class="tw-c-text-alt-2"
style="padding-left:2.2rem"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<section
v-if="item.description"
class="tw-c-text-alt-2"
style="padding-left:2.2rem"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</div>
</div>
</template>
<script>

46
src/modules/main_menu/components/setting-hotkey.vue
View file

@ -1,31 +1,31 @@
<template lang="html">
<div class="ffz--widget ffz--hotkey-input">
<label
:for="item.full_key"
v-html="t(item.i18n_key, item.title, item)"
<div class="ffz--widget ffz--hotkey-input">
<label
:for="item.full_key"
v-html="t(item.i18n_key, item.title, item)"
/>
<div class="tw-relative">
<div class="tw-input__icon-group tw-input__icon-group--right">
<div class="tw-input__icon">
<figure class="ffz-i-keyboard" />
<div class="tw-relative">
<div class="tw-input__icon-group tw-input__icon-group--right">
<div class="tw-input__icon">
<figure class="ffz-i-keyboard" />
</div>
</div>
<div
ref="display"
:id="item.full_key"
type="text"
class="tw-mg-05 tw-input tw-input--icon-right"
tabindex="0"
@keyup="onKey"
>
&nbsp;
</div>
</div>
<div
type="text"
class="tw-mg-05 tw-input tw-input--icon-right"
ref="display"
:id="item.full_key"
tabindex="0"
@keyup="onKey"
>
&nbsp;
</div>
</div>
<section
v-if="item.description"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
<section
v-if="item.description"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</div>
</div>
</template>
<script>

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

@ -1,27 +1,36 @@
<template lang="html">
<div class="tw-input">
<header>
{{ t(item.i18n_key, item.title, item) }}
</header>
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
<div class="tw-input">
<header>
{{ t(item.i18n_key, item.title, item) }}
</header>
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
<div v-for="(i, idx) in data" class="tw-mg-l-1">
<input type="radio" :name="item.full_key" :id="item.full_key + idx" :value="i.value" class="tw-radio__input">
<label :for="item.full_key + idx" class="tw-pd-y-05 tw-radio__label">{{ t(i.i18n_key, i.title, i) }}</label>
<div v-for="(i, idx) in data" :key="idx" class="tw-mg-l-1">
<input
:name="item.full_key"
:id="item.full_key + idx"
:value="i.value"
type="radio"
class="tw-radio__input"
>
<label
:for="item.full_key + idx"
class="tw-pd-y-05 tw-radio__label"
>
{{ t(i.i18n_key, i.title, i) }}
</label>
</div>
</div>
</div>
</template>
<script>
import SettingMixin from '../setting-mixin';
export default {
mixins: [SettingMixin],
props: ['item', 'context']
}
</script>

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

@ -1,49 +1,55 @@
<template lang="html">
<div class="ffz--widget ffz--select-box" :class="{inherits: isInherited, default: isDefault}">
<div class="tw-flex tw-align-items-center">
<label :for="item.full_key">
{{ t(item.i18n_key, item.title, item) }}
</label>
<div
:class="{inherits: isInherited, default: isDefault}"
class="ffz--widget ffz--select-box"
>
<div class="tw-flex tw-align-items-center">
<label :for="item.full_key">
{{ t(item.i18n_key, item.title, item) }}
</label>
<select
class="tw-mg-05 tw-select tw-display-inline tw-width-auto"
ref="control"
:id="item.full_key"
@change="onChange"
>
<option v-for="i in data" :selected="i.value === value">
{{ i.i18n_key ? t(i.i18n_key, i.title, i) : i.title }}
</option>
</select>
<select
ref="control"
:id="item.full_key"
class="tw-mg-05 tw-select tw-display-inline tw-width-auto"
@change="onChange"
>
<option
v-for="i in data"
:key="i.value"
:selected="i.value === value"
>
{{ i.i18n_key ? t(i.i18n_key, i.title, i) : i.title }}
</option>
</select>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel"></span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</div>
</div>
</template>
<script>
import SettingMixin from '../setting-mixin';
export default {
@ -60,5 +66,4 @@ export default {
}
}
}
</script>

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

@ -1,46 +1,48 @@
<template lang="html">
<div class="ffz--widget ffz--text-box" :class="{inherits: isInherited, default: isDefault}">
<div class="tw-flex tw-align-items-center">
<label :for="item.full_key">
{{ t(item.i18n_key, item.title, item) }}
</label>
<div
:class="{inherits: isInherited, default: isDefault}"
class="ffz--widget ffz--text-box"
>
<div class="tw-flex tw-align-items-center">
<label :for="item.full_key">
{{ t(item.i18n_key, item.title, item) }}
</label>
<input
class="tw-mg-05 tw-input tw-display-inline tw-width-auto"
ref="control"
:id="item.full_key"
@change="onChange"
:value="value"
/>
<input
ref="control"
:id="item.full_key"
:value="value"
class="tw-mg-05 tw-input tw-display-inline tw-width-auto"
@change="onChange"
>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel"></span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
<section
v-if="item.description"
class="tw-c-text-alt-2"
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</div>
</div>
</template>
<script>
import SettingMixin from '../setting-mixin';
export default {
@ -55,5 +57,4 @@ export default {
}
}
}
</script>