tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extension/site settings panel complete (but not functional)

Browse Source
This commit is contained in:
Tamius Han 2019-01-21 00:07:11 +01:00
parent e0482084f0
commit cf221fba90
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/popup/App.vue
View File

@ -8,8 +8,8 @@
<!-- TABS/SIDEBAR --> <!-- TABS/SIDEBAR -->
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink"> <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
<div class="menu-item" <div class="menu-item"
:class="{'selected-tab': selectedTab === 'extension'}" :class="{'selected-tab': selectedTab === 'global'}"
@click="selectTab('extension')" @click="selectTab('global')"
> >
<div class=""> <div class="">
Extension settings Extension settings
@ -33,7 +33,6 @@
> >
<div class=""> <div class="">
Video settings Video settings
</div> </div>
<div v-if="selectedTab === 'video' && this.activeFrames.length > 0" <div v-if="selectedTab === 'video' && this.activeFrames.length > 0"
class="" class=""
@ -81,8 +80,12 @@
:frame="selectedFrame" :frame="selectedFrame"
:zoom="currentZoom" :zoom="currentZoom"
@zoom-change="updateZoom($event)" @zoom-change="updateZoom($event)"
> />
</VideoPanel> <DefaultSettingsPanel v-if="settings && settings.active && (selectedTab === 'site' || selectedTab === 'global')"
class=""
:settings="settings"
:scope="selectedTab"
/>
</div> </div>
</div> </div>
</div> </div>
@ -95,6 +98,7 @@ import Comms from '../ext/lib/comms/Comms';
import VideoPanel from './panels/VideoPanel'; import VideoPanel from './panels/VideoPanel';
import Settings from '../ext/lib/Settings'; import Settings from '../ext/lib/Settings';
import ExecAction from './js/ExecAction.js'; import ExecAction from './js/ExecAction.js';
import DefaultSettingsPanel from './panels/DefaultSettingsPanel'
export default { export default {
data () { data () {
@ -131,6 +135,7 @@ export default {
}, },
components: { components: {
VideoPanel, VideoPanel,
DefaultSettingsPanel,
}, },
methods: { methods: {
async sleep(t) { async sleep(t) {

17
src/popup/panels/SitePanel.vue → src/popup/panels/DefaultSettingsPanel.vue
View File

@ -11,7 +11,7 @@
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'" <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'"
class="flex button" class="flex button"
:class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}" :class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}"
:label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label" :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
@ -31,7 +31,7 @@
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'" <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'"
class="flex button" class="flex button"
:class="{'setting-selected': getDefault('set-autoar-mode') === action.cmd[0].arg}" :class="{'setting-selected': getDefault('set-autoar-mode') === action.cmd[0].arg}"
:label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label" :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
@ -48,7 +48,7 @@
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'" <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
class="flex b3 button" class="flex b3 button"
:class="{'setting-selected': getDefault('set-stretch') === action.cmd[0].arg}" :class="{'setting-selected': getDefault('set-stretch') === action.cmd[0].arg}"
:label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label" :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
@ -61,10 +61,10 @@
<div class="label">Video alignment:</div> <div class="label">Video alignment:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <template v-for="action of settings.active.actions">
<ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'" <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
class="flex b3 button" class="flex b3 button"
:class="{'setting-selected': getDefault('set-alignment') === action.cmd[0].arg}" :class="{'setting-selected': getDefault('set-alignment') === action.cmd[0].arg}"
:label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label" :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
@ -77,9 +77,9 @@
<div class="label">Multi-command actions:</div> <div class="label">Multi-command actions:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <template v-for="action of settings.active.actions">
<ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length > 1" <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length > 1"
class="flex b3 button" class="flex b3 button"
:label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label" :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
@ -102,7 +102,6 @@ export default {
}, },
props: [ props: [
'settings', 'settings',
'frame',
'scope', 'scope',
], ],
created() { created() {
@ -118,7 +117,7 @@ export default {
}, },
methods: { methods: {
execAction(action) { execAction(action) {
this.exec.exec(action, this.scope, this.frame); this.exec.exec(action, this.scope);
}, },
getDefault(action) { getDefault(action) {