Style dropdowns
This commit is contained in:
parent
3891d946e0
commit
302353f448
@ -147,43 +147,44 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row">
|
<div class="edit-action-area">
|
||||||
<div class="label">Default for this site</div>
|
<div class="field">
|
||||||
<div class="select">
|
<div class="label">Default for this site</div>
|
||||||
<select
|
<div class="select">
|
||||||
:value="siteDefaultCrop"
|
<select
|
||||||
@click="setDefaultCrop($event, 'site')"
|
:value="siteDefaultCrop"
|
||||||
>
|
@click="setDefaultCrop($event, 'site')"
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
>
|
||||||
{{command.label}}
|
<option
|
||||||
</option>
|
v-for="(command, index) of settings?.active.commands.crop"
|
||||||
</select>
|
:key="index"
|
||||||
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="field">
|
||||||
<div class="flex flex-row">
|
<div class="label">Extension default</div>
|
||||||
<div class="label">Extension default</div>
|
<div class="select">
|
||||||
<div class="select">
|
<select
|
||||||
<select
|
:value="extensionDefaultCrop"
|
||||||
:value="extensionDefaultCrop"
|
@click="setDefaultCrop($event, 'global')"
|
||||||
@click="setDefaultCrop($event, 'global')"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
>
|
||||||
{{command.label}}
|
<option
|
||||||
</option>
|
v-for="(command, index) of settings?.active.commands.crop"
|
||||||
</select>
|
:key="index"
|
||||||
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- STRETCH OPTIONS -->
|
<!-- STRETCH OPTIONS -->
|
||||||
<div v-if="settings" class="sub-panel">
|
<div v-if="settings" class="sub-panel">
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
@ -191,12 +192,14 @@
|
|||||||
<h1>Stretch video:</h1>
|
<h1>Stretch video:</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-wrap">
|
<div class="flex flex-row flex-wrap">
|
||||||
<ShortcutButton v-for="(command, index) of settings?.active.commands.stretch"
|
<ShortcutButton
|
||||||
class="flex b3 flex-grow button"
|
v-for="(command, index) of settings?.active.commands.stretch"
|
||||||
:key="index"
|
class="b3 button"
|
||||||
:label="command.label"
|
:class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
|
||||||
:shortcut="getKeyboardShortcutLabel(command)"
|
:key="index"
|
||||||
@click="execAction(command)"
|
:label="command.label"
|
||||||
|
:shortcut="getKeyboardShortcutLabel(command)"
|
||||||
|
@click="editMode ? editAction(command, index, 'stretch') : execAction(command)"
|
||||||
>
|
>
|
||||||
</ShortcutButton>
|
</ShortcutButton>
|
||||||
|
|
||||||
@ -205,44 +208,154 @@
|
|||||||
v-if="editMode"
|
v-if="editMode"
|
||||||
class="button b3"
|
class="button b3"
|
||||||
label="Add new"
|
label="Add new"
|
||||||
@click="execAction()"
|
@click="editAction(
|
||||||
|
{action: 'set-stretch', label: 'Stretch to ...', arguments: {type: StretchType.FixedSource}},
|
||||||
|
null,
|
||||||
|
'stretch'
|
||||||
|
)"
|
||||||
></ShortcutButton>
|
></ShortcutButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row">
|
<!-- EDIT MODE PANEL -->
|
||||||
<div class="label">Default for this site</div>
|
<div
|
||||||
<div class="select">
|
v-if="editMode && !editModeOptions?.stretch?.selected"
|
||||||
<select
|
class="sub-panel-content"
|
||||||
v-model="siteDefaultStretchMode"
|
>
|
||||||
@click="setDefaultStretchingMode($event, 'site')"
|
<div class="edit-action-area">
|
||||||
>
|
Click a button to edit
|
||||||
<option
|
</div>
|
||||||
v-for="(command, index) of settings?.active.commands.stretch"
|
</div>
|
||||||
:key="index"
|
<div v-if="editMode && editModeOptions?.stretch?.selected" class="sub-panel-content">
|
||||||
:value="JSON.stringify(command.arguments)"
|
<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}}
|
<mdicon name="delete"></mdicon> Delete
|
||||||
</option>
|
</div>
|
||||||
</select>
|
<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>
|
</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="field">
|
||||||
<div class="label">Extension default</div>
|
<div class="label">Extension default:</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<select
|
<select
|
||||||
v-model="extensionDefaultStretchMode"
|
v-model="extensionDefaultStretchMode"
|
||||||
@click="setDefaultStretchingMode($event, 'global')"
|
@click="setDefaultStretchingMode($event, 'global')"
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.stretch"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
>
|
||||||
{{command.label}}
|
<option
|
||||||
</option>
|
v-for="(command, index) of settings?.active.commands.stretch"
|
||||||
</select>
|
:key="index"
|
||||||
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -518,23 +631,6 @@ export default {
|
|||||||
// this.settings.saveWithoutReload();
|
// 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
|
* 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:
|
// only legacy options (fitw, fith) left to handle:
|
||||||
return cropCommand.arguments.type === this.resizerConfig.crop.type;
|
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
|
//#endregion cropping
|
||||||
|
|
||||||
//#region edit mode
|
//#region edit mode
|
||||||
|
|||||||
@ -99,4 +99,18 @@ h1, h2, h3 {
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
margin-top: 0.25rem;
|
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