Style dropdowns
This commit is contained in:
parent
3891d946e0
commit
302353f448
@ -147,43 +147,44 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="siteDefaultCrop"
|
||||
@click="setDefaultCrop($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
<div class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="siteDefaultCrop"
|
||||
@click="setDefaultCrop($event, 'site')"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="label">Extension default</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="extensionDefaultCrop"
|
||||
@click="setDefaultCrop($event, 'global')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
<div class="field">
|
||||
<div class="label">Extension default</div>
|
||||
<div class="select">
|
||||
<select
|
||||
:value="extensionDefaultCrop"
|
||||
@click="setDefaultCrop($event, 'global')"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.crop"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- STRETCH OPTIONS -->
|
||||
<div v-if="settings" class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
@ -191,12 +192,14 @@
|
||||
<h1>Stretch video:</h1>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<ShortcutButton v-for="(command, index) of settings?.active.commands.stretch"
|
||||
class="flex b3 flex-grow button"
|
||||
:key="index"
|
||||
:label="command.label"
|
||||
:shortcut="getKeyboardShortcutLabel(command)"
|
||||
@click="execAction(command)"
|
||||
<ShortcutButton
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
class="b3 button"
|
||||
:class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
|
||||
:key="index"
|
||||
:label="command.label"
|
||||
:shortcut="getKeyboardShortcutLabel(command)"
|
||||
@click="editMode ? editAction(command, index, 'stretch') : execAction(command)"
|
||||
>
|
||||
</ShortcutButton>
|
||||
|
||||
@ -205,44 +208,154 @@
|
||||
v-if="editMode"
|
||||
class="button b3"
|
||||
label="Add new"
|
||||
@click="execAction()"
|
||||
@click="editAction(
|
||||
{action: 'set-stretch', label: 'Stretch to ...', arguments: {type: StretchType.FixedSource}},
|
||||
null,
|
||||
'stretch'
|
||||
)"
|
||||
></ShortcutButton>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="label">Default for this site</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="siteDefaultStretchMode"
|
||||
@click="setDefaultStretchingMode($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
<!-- EDIT MODE PANEL -->
|
||||
<div
|
||||
v-if="editMode && !editModeOptions?.stretch?.selected"
|
||||
class="sub-panel-content"
|
||||
>
|
||||
<div class="edit-action-area">
|
||||
Click a button to edit
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="editMode && editModeOptions?.stretch?.selected" class="sub-panel-content">
|
||||
<div class="edit-action-area-header">
|
||||
<span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.stretch?.selected?.label}}</b>
|
||||
<template v-if="editModeOptions?.stretch?.selectedIndex === null && editModeOptions?.stretch?.selected?.label !== 'Stretch to ...'">(New option)</template>
|
||||
</div>
|
||||
<div class="edit-action-area">
|
||||
<!-- There are some special options for 'thin borders' -->
|
||||
<template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.Conditional">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Limit:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input
|
||||
v-model="editModeOptions.stretch.selected.arguments.limit"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
|
||||
Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Some options are only shown for type 5 (fixed) stretch -->
|
||||
<template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource">
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Ratio:
|
||||
</div>
|
||||
<div class="input">
|
||||
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
|
||||
<input
|
||||
v-model="editModeOptions.stretch.selected.arguments.ratio"
|
||||
@blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
|
||||
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
|
||||
your numbers without quote marks. Number will be converted to factor form on save.
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
Label:
|
||||
</div>
|
||||
<div class="input">
|
||||
<input v-model="editModeOptions.stretch.selected.label">
|
||||
</div>
|
||||
<div class="hint">
|
||||
Label for the button. You can make it say something other than ratio.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- editing keyboard shortcuts is always allowed -->
|
||||
<div class="field">
|
||||
<div class="label">Shortcut:</div>
|
||||
<div class="">
|
||||
<EditShortcutButton
|
||||
:shortcut="editModeOptions?.stretch?.selected?.shortcut"
|
||||
@shortcutChanged="updateSelectedShortcut($event, 'stretch')"
|
||||
>
|
||||
</EditShortcutButton>
|
||||
</div>
|
||||
<div class="hint">
|
||||
<b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
|
||||
The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
|
||||
any keyboard shortcuts defined by the site itself.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div
|
||||
v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource && editModeOptions?.stretch?.selectedIndex !== null"
|
||||
class="button"
|
||||
@click="deleteAction('stretch')"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
<mdicon name="delete"></mdicon> Delete
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="button" @click="cancelEdit('stretch')">Cancel</div>
|
||||
<div class="button" @click="saveShortcut('stretch')">
|
||||
<mdicon name="floppy"></mdicon>
|
||||
|
||||
<template v-if="editModeOptions?.crop?.selectedIndex === null">Add</template>
|
||||
<template v-else>Save</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-action-area">
|
||||
<div class="field">
|
||||
<div class="label">Default for this site:</div>
|
||||
<div class="select">
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="siteDefaultStretchMode"
|
||||
@click="setDefaultStretchingMode($event, 'site')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="label">Extension default</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="extensionDefaultStretchMode"
|
||||
@click="setDefaultStretchingMode($event, 'global')"
|
||||
>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
<div class="field">
|
||||
<div class="label">Extension default:</div>
|
||||
<div class="select">
|
||||
<select
|
||||
v-model="extensionDefaultStretchMode"
|
||||
@click="setDefaultStretchingMode($event, 'global')"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
<option
|
||||
v-for="(command, index) of settings?.active.commands.stretch"
|
||||
:key="index"
|
||||
:value="JSON.stringify(command.arguments)"
|
||||
>
|
||||
{{command.label}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -518,23 +631,6 @@ export default {
|
||||
// this.settings.saveWithoutReload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets default stretching mode, for either site or global
|
||||
*/
|
||||
setDefaultStretchingMode($event, globalOrSite) {
|
||||
const commandArguments = JSON.parse($event.target.value);
|
||||
|
||||
if (globalOrSite === 'site') {
|
||||
if (!this.settings.active.sites[window.location.hostname]) {
|
||||
this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
|
||||
}
|
||||
this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments;
|
||||
} else {
|
||||
this.settings.active.stretch.default = commandArguments;
|
||||
}
|
||||
this.settings.saveWithoutReload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Determines whether a given crop command is the currently active one
|
||||
*/
|
||||
@ -561,8 +657,41 @@ export default {
|
||||
// only legacy options (fitw, fith) left to handle:
|
||||
return cropCommand.arguments.type === this.resizerConfig.crop.type;
|
||||
},
|
||||
//#endregion cropping
|
||||
|
||||
//#region stretch
|
||||
/**
|
||||
* Sets default stretching mode, for either site or global
|
||||
*/
|
||||
setDefaultStretchingMode($event, globalOrSite) {
|
||||
const commandArguments = JSON.parse($event.target.value);
|
||||
|
||||
if (globalOrSite === 'site') {
|
||||
if (!this.settings.active.sites[window.location.hostname]) {
|
||||
this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
|
||||
}
|
||||
this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments;
|
||||
} else {
|
||||
this.settings.active.stretch.default = commandArguments;
|
||||
}
|
||||
this.settings.saveWithoutReload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Determines whether a given stretch command is the currently active one
|
||||
*/
|
||||
isActiveStretch(stretchCommand) {
|
||||
if (! this.resizerConfig.stretch) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// const defaultCrop = this.settings.getDefaultStretch(this.site);
|
||||
|
||||
if ([StretchType.NoStretch, StretchType.Basic, StretchType.Hybrid, StretchType.Conditional, StretchType.Default].includes(stretchCommand.arguments.type)) {
|
||||
return this.resizerConfig.stretch.type === stretchCommand.arguments.type;
|
||||
}
|
||||
return this.resizerConfig.crop.type === stretchCommand.arguments.type && this.resizerConfig.crop.ratio === stretchCommand.arguments.ratio;
|
||||
},
|
||||
//#endregion cropping
|
||||
|
||||
//#region edit mode
|
||||
|
||||
@ -99,4 +99,18 @@ h1, h2, h3 {
|
||||
opacity: 0.7;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.select {
|
||||
|
||||
select {
|
||||
background: rgba($blackBg, $hoverTransparentOpacity);
|
||||
color: #fff;
|
||||
border: 0px solid transparent;
|
||||
|
||||
padding: 0.5rem 1rem 0.25rem;
|
||||
outline: none;
|
||||
|
||||
font: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user