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

Refactor showing buttons on popup, hide sections with no buttons

Browse Source
This commit is contained in:
Tamius Han 2019-06-02 23:49:31 +02:00
parent 50b16b0893
commit d2d624eddf
3 changed files with 146 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/common/mixins/ComputeActionsMixin.js Normal file
View File

@ -0,0 +1,28 @@
export default {
computed: {
scopeActions: function() {
return this.settings.active.actions.filter(x => x.scopes[this.scope] && x.scopes[this.scope].show) || [];
},
extensionActions: function(){
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-extension-mode') || [];
},
aardActions: function(){
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-autoar-mode') || [];
},
aspectRatioActions: function(){
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-ar') || [];
},
stretchActions: function(){
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-stretch') || [];
},
keyboardActions: function() {
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-keyboard') || [];
},
alignmentActions: function() {
return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-alignment') || [];
},
otherActions: function() {
return this.scopeActions.filter(x => x.cmd.length > 1) || [];
}
}
}

138
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -1,108 +1,110 @@
<template> <template>
<div class="w100 flex flex-column"> <div class="w100 flex flex-column" style="padding-bottom: 20px">
<ShortcutButton class="button" <!-- <ShortcutButton class="button"
@click.native="wipeSettings()" @click.native="wipeSettings()"
label="Wipe settings" label="Wipe settings"
/> /> -->
<div v-if="settings && true"
class="w100"
>
<!-- ENABLE EXTENSION --> <!-- ENABLE EXTENSION -->
<div class="label">Enable extension {{scope === 'site' ? 'for this site' : ''}}:</div> <div v-if="settings && extensionActions.length"
class="w100"
>
<div class="label">Enable extension {{scope === 'site' ? 'for this site' : ''}}:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of siteActions"> <ShortcutButton v-for="(action, index) of extensionActions"
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'" class="flex flex-grow button"
class="flex flex-grow button" :key="index"
:class="{'setting-selected': getCurrent('mode') === action.cmd[0].arg }" :class="{'setting-selected': getCurrent('mode') === action.cmd[0].arg }"
:label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[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)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
<!-- ENABLE AUTODETECTION --> <!-- ENABLE AUTODETECTION -->
<div v-if="true" <div v-if="aardActions.length"
class="w100" class="w100"
> >
<div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div> <div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of siteActions"> <ShortcutButton v-for="(action, index) of aardActions"
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'" class="flex flex-grow button"
class="flex flex-grow button" :class="{'setting-selected': getCurrent('autoar') === action.cmd[0].arg}"
:class="{'setting-selected': getCurrent('autoar') === action.cmd[0].arg}" :key="index"
:label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[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)"
> >
</ShortcutButton> </ShortcutButton>
</template>
<div class="info"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div> <div class="info"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
</div> </div>
</div> </div>
<!-- DEFAULT SETTINGS --> <!-- DEFAULT SETTINGS -->
<div v-if="true"> <div v-if="stretchActions.length">
<div class="label">Default stretching mode:</div> <div class="label">Default stretching mode:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of siteActions"> <ShortcutButton v-for="(action, index) of stretchActions"
<ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'" class="flex b3 flex-grow button"
class="flex b3 flex-grow button" :class="{'setting-selected': getCurrent('stretch') === action.cmd[0].arg}"
:class="{'setting-selected': getCurrent('stretch') === action.cmd[0].arg}" :key="index"
:label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[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)"
> >
</ShortcutButton> </ShortcutButton>
</template> </div>
</div>
</div> </div>
</div> </div>
<div v-if="true"> <div v-if="alignmentActions.length">
<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"> <ShortcutButton v-for="(action, index) of alignmentActions"
<ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'" class="flex b3 flex-grow button"
class="flex b3 flex-grow button" :class="{'setting-selected': getCurrent('videoAlignment') === action.cmd[0].arg}"
:class="{'setting-selected': getCurrent('videoAlignment') === action.cmd[0].arg}" :key="index"
:label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[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)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
<div v-if="true"> <div v-if="otherActions.length">
<div class="label">Multi-command actions:</div> <div class="label">Other actions:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <ShortcutButton v-for="(action, index) of otherActions"
<ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length > 1" class="flex b3 flex-grow button"
class="flex b3 flex-grow button" :key="index"
:label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[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)"
> >
</ShortcutButton> </ShortcutButton>
</template> </div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ExecAction from '../js/ExecAction' import ExecAction from '../js/ExecAction';
import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser' import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
import ShortcutButton from '../../common/components/ShortcutButton' import ShortcutButton from '../../common/components/ShortcutButton';
import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
export default { export default {
data() { data() {
return { return {
} }
}, },
mixins: [
ComputeActionsMixin
],
props: { props: {
settings: Object, settings: Object,
scope: String, scope: String,
@ -114,11 +116,7 @@ export default {
components: { components: {
ShortcutButton, ShortcutButton,
}, },
computed: {
siteActions: function() {
return this.settings.active.actions.filter(x => x.scopes[this.scope] && x.scopes[this.scope].show);
}
},
watch: { watch: {
settings: { settings: {
deep: true, deep: true,

95
src/popup/panels/VideoPanel.vue
View File

@ -1,21 +1,23 @@
<template> <template>
<div class="w100"> <div class="w100" style="padding-bottom: 20px">
<div v-if="true" class="w100"> <div v-if="aspectRatioActions.length"
class="w100"
>
<div class="label">Cropping mode:</div> <div class="label">Cropping mode:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <ShortcutButton v-for="(action, index) of aspectRatioActions"
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'" class="flex b3 flex-grow button"
class="flex b3 flex-grow button" :key="index"
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label" :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
<div v-if="true" class="w100"> <div v-if="true"
class="w100">
<div class="label experimental">Zooming and panning</div> <div class="label experimental">Zooming and panning</div>
<div class="row w100" <div class="row w100"
> >
@ -50,48 +52,46 @@
</div> </div>
</div> </div>
<div v-if="true"> <div v-if="stretchActions.length">
<div class="label">Stretching mode:</div> <div class="label">Stretching mode:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <ShortcutButton v-for="(action, index) of stretchActions"
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'" class="flex b3 flex-grow button"
class="flex b3 flex-grow button" :key="index"
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label" :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
<div v-if="true"> <div v-if="true">
<div v-if="alignmentActions.length">
<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"> <ShortcutButton v-for="(action, index) of alignmentActions"
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'" class="flex b3 button"
class="flex b3 button" :key="index"
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label" :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
<div v-if="true"> <div v-if="otherActions.length">
<div class="label">Multi-command actions:</div> <div class="label">Other actions:</div>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions"> <ShortcutButton v-for="(action, index) of otherActions"
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length > 1" class="flex b3 button"
class="flex b3 button" :key="index"
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label" :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
:shortcut="parseShortcut(action)" :shortcut="parseShortcut(action)"
@click.native="execAction(action)" @click.native="execAction(action)"
> >
</ShortcutButton> </ShortcutButton>
</template>
</div> </div>
</div> </div>
@ -99,15 +99,20 @@
</template> </template>
<script> <script>
import ExecAction from '../js/ExecAction' import ExecAction from '../js/ExecAction';
import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser' import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
import ShortcutButton from '../../common/components/ShortcutButton' import ShortcutButton from '../../common/components/ShortcutButton';
import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
export default { export default {
data() { data() {
return { return {
scope: 'page',
} }
}, },
mixins: [
ComputeActionsMixin
],
props: [ props: [
'settings', 'settings',
'frame', 'frame',