Prepare some things for edit mode
This commit is contained in:
parent
7dc354509b
commit
7c27c33aa0
@ -1,216 +1,245 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
|
<div class="flex flex-column">
|
||||||
|
<!-- 'Change UI' options is a tiny bit in upper right corner. -->
|
||||||
|
<div
|
||||||
<!-- CROP OPTIONS -->
|
class="options-bar flex flex-row"
|
||||||
<div v-if="settings" class="sub-panel">
|
:class="{isEditing: editMode}"
|
||||||
<div class="flex flex-row">
|
>
|
||||||
<mdicon name="crop" :size="32" />
|
<template v-if="editMode">
|
||||||
<h1>Crop video:</h1>
|
<div class="flex-grow">
|
||||||
</div>
|
You are currently editing options and shortcuts.
|
||||||
<div class="sub-panel-content flex flex-row flex-wrap">
|
</div>
|
||||||
<ShortcutButton v-for="(command, index) of settings?.active.commands.crop"
|
<div
|
||||||
class="flex b3 flex-grow button"
|
class="flex-nogrow flex-noshrink"
|
||||||
:key="index"
|
@click="editMode = false"
|
||||||
:label="command.label"
|
|
||||||
:shortcut="parseShortcut(command)"
|
|
||||||
@click="execAction(command)"
|
|
||||||
>
|
>
|
||||||
</ShortcutButton>
|
Exit edit mode
|
||||||
</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)"
|
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="flex flex-row">
|
<template v-else>
|
||||||
<div class="label">Extension default</div>
|
<div class="flex-grow"></div>
|
||||||
<div class="select">
|
<div
|
||||||
<select
|
class=""
|
||||||
:value="extensionDefaultCrop"
|
@click="editMode = true"
|
||||||
@click="setDefaultCrop($event, 'global')"
|
>
|
||||||
>
|
Edit ratios and shortcuts
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
|
||||||
|
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
|
||||||
|
|
||||||
<!-- STRETCH OPTIONS -->
|
<!-- CROP 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">
|
||||||
<mdicon name="stretch-to-page-outline" :size="32" />
|
<mdicon name="crop" :size="32" />
|
||||||
<h1>Stretch video:</h1>
|
<h1>Crop video:</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-wrap">
|
<div class="sub-panel-content flex flex-row flex-wrap">
|
||||||
<ShortcutButton v-for="(command, index) of settings?.active.commands.stretch"
|
<ShortcutButton v-for="(command, index) of settings?.active.commands.crop"
|
||||||
class="flex b3 flex-grow button"
|
class="flex b3 button"
|
||||||
:key="index"
|
:key="index"
|
||||||
:label="command.label"
|
:label="command.label"
|
||||||
:shortcut="parseShortcut(command)"
|
:shortcut="parseShortcut(command)"
|
||||||
@click="execAction(command)"
|
@click="execAction(command)"
|
||||||
>
|
|
||||||
</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
|
</ShortcutButton>
|
||||||
v-for="(command, index) of settings?.active.commands.stretch"
|
</div>
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
<div class="flex flex-row">
|
||||||
|
<div class="label">Default for this site</div>
|
||||||
|
<div class="select">
|
||||||
|
<select
|
||||||
|
:value="siteDefaultCrop"
|
||||||
|
@click="setDefaultCrop($event, 'site')"
|
||||||
>
|
>
|
||||||
{{command.label}}
|
<option
|
||||||
</option>
|
v-for="(command, index) of settings?.active.commands.crop"
|
||||||
</select>
|
:key="index"
|
||||||
</div>
|
:value="JSON.stringify(command.arguments)"
|
||||||
</div>
|
>
|
||||||
<div class="flex flex-row">
|
{{command.label}}
|
||||||
<div class="label">Extension default</div>
|
</option>
|
||||||
<div class="select">
|
</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)"
|
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ZOOM OPTIONS -->
|
|
||||||
<div class="sub-panel">
|
|
||||||
<div class="flex flex-row">
|
|
||||||
<mdicon name="magnify-plus-outline" :size="32" />
|
|
||||||
<h1>Manual zoom:</h1>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column">
|
|
||||||
<!--
|
|
||||||
min, max and value need to be implemented in js as this slider
|
|
||||||
should use logarithmic scale
|
|
||||||
-->
|
|
||||||
<div class="flex flex-row flex-end">
|
|
||||||
<Button
|
|
||||||
v-if="zoomAspectRatioLocked"
|
|
||||||
label="Unlock aspect ratio"
|
|
||||||
icon="lock-open"
|
|
||||||
:fixedWidth="true"
|
|
||||||
@click="toggleZoomAr()"
|
|
||||||
>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
v-else
|
|
||||||
label="Lock aspect ratio"
|
|
||||||
icon="lock"
|
|
||||||
:fixedWidth="true"
|
|
||||||
@click="toggleZoomAr()"
|
|
||||||
>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<template v-if="zoomAspectRatioLocked">
|
|
||||||
<input id="_input_zoom_slider"
|
|
||||||
class="input-slider"
|
|
||||||
type="range"
|
|
||||||
step="any"
|
|
||||||
min="-1"
|
|
||||||
max="3"
|
|
||||||
:value="zoom.x"
|
|
||||||
@input="changeZoom($event.target.value)"
|
|
||||||
/>
|
|
||||||
<div style="overflow: auto" class="flex flex-row">
|
|
||||||
<div class="flex flex-grow medium-small x-pad-1em">
|
|
||||||
Zoom: {{getZoomForDisplay('x')}}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
|
||||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template v-else>
|
<div class="flex flex-row">
|
||||||
<div>Horizontal zoom</div>
|
<div class="label">Extension default</div>
|
||||||
<input id="_input_zoom_slider"
|
<div class="select">
|
||||||
class="input-slider"
|
<select
|
||||||
type="range"
|
:value="extensionDefaultCrop"
|
||||||
step="any"
|
@click="setDefaultCrop($event, 'global')"
|
||||||
min="-1"
|
>
|
||||||
max="4"
|
<option
|
||||||
:value="zoom.x"
|
v-for="(command, index) of settings?.active.commands.crop"
|
||||||
@input="changeZoom($event.target.value, 'x')"
|
:key="index"
|
||||||
/>
|
:value="JSON.stringify(command.arguments)"
|
||||||
|
>
|
||||||
<div>Vertical zoom</div>
|
{{command.label}}
|
||||||
<input id="_input_zoom_slider"
|
</option>
|
||||||
class="input-slider"
|
</select>
|
||||||
type="range"
|
|
||||||
step="any"
|
|
||||||
min="-1"
|
|
||||||
max="3"
|
|
||||||
:value="zoom.y"
|
|
||||||
@input="changeZoom($event.target.value, 'y')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div style="overflow: auto" class="flex flex-row">
|
|
||||||
<div class="flex flex-grow medium-small x-pad-1em">
|
|
||||||
Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
|
||||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sub-panel">
|
|
||||||
<div class="flex flex-row">
|
|
||||||
<mdicon name="align-horizontal-center" :size="32" />
|
|
||||||
<h1>Video alignment:</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row">
|
|
||||||
<alignment-options-control-component
|
<!-- STRETCH OPTIONS -->
|
||||||
:eventBus="eventBus"
|
<div v-if="settings" class="sub-panel">
|
||||||
>
|
<div class="flex flex-row">
|
||||||
</alignment-options-control-component>
|
<mdicon name="stretch-to-page-outline" :size="32" />
|
||||||
|
<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="parseShortcut(command)"
|
||||||
|
@click="execAction(command)"
|
||||||
|
>
|
||||||
|
</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)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</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)"
|
||||||
|
>
|
||||||
|
{{command.label}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row flex-wrap">
|
|
||||||
<div class="m-t-0-33em display-block">
|
<!-- ZOOM OPTIONS -->
|
||||||
<input id="_input_zoom_site_allow_pan"
|
<div class="sub-panel">
|
||||||
type="checkbox"
|
<div class="flex flex-row">
|
||||||
/>
|
<mdicon name="magnify-plus-outline" :size="32" />
|
||||||
Pan with mouse
|
<h1>Manual zoom:</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<!--
|
||||||
|
min, max and value need to be implemented in js as this slider
|
||||||
|
should use logarithmic scale
|
||||||
|
-->
|
||||||
|
<div class="flex flex-row flex-end">
|
||||||
|
<Button
|
||||||
|
v-if="zoomAspectRatioLocked"
|
||||||
|
label="Unlock aspect ratio"
|
||||||
|
icon="lock-open"
|
||||||
|
:fixedWidth="true"
|
||||||
|
@click="toggleZoomAr()"
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
v-else
|
||||||
|
label="Lock aspect ratio"
|
||||||
|
icon="lock"
|
||||||
|
:fixedWidth="true"
|
||||||
|
@click="toggleZoomAr()"
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<template v-if="zoomAspectRatioLocked">
|
||||||
|
<input id="_input_zoom_slider"
|
||||||
|
class="input-slider"
|
||||||
|
type="range"
|
||||||
|
step="any"
|
||||||
|
min="-1"
|
||||||
|
max="3"
|
||||||
|
:value="zoom.x"
|
||||||
|
@input="changeZoom($event.target.value)"
|
||||||
|
/>
|
||||||
|
<div style="overflow: auto" class="flex flex-row">
|
||||||
|
<div class="flex flex-grow medium-small x-pad-1em">
|
||||||
|
Zoom: {{getZoomForDisplay('x')}}
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||||
|
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div>Horizontal zoom</div>
|
||||||
|
<input id="_input_zoom_slider"
|
||||||
|
class="input-slider"
|
||||||
|
type="range"
|
||||||
|
step="any"
|
||||||
|
min="-1"
|
||||||
|
max="4"
|
||||||
|
:value="zoom.x"
|
||||||
|
@input="changeZoom($event.target.value, 'x')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div>Vertical zoom</div>
|
||||||
|
<input id="_input_zoom_slider"
|
||||||
|
class="input-slider"
|
||||||
|
type="range"
|
||||||
|
step="any"
|
||||||
|
min="-1"
|
||||||
|
max="3"
|
||||||
|
:value="zoom.y"
|
||||||
|
@input="changeZoom($event.target.value, 'y')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style="overflow: auto" class="flex flex-row">
|
||||||
|
<div class="flex flex-grow medium-small x-pad-1em">
|
||||||
|
Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||||
|
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sub-panel">
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<mdicon name="align-horizontal-center" :size="32" />
|
||||||
|
<h1>Video alignment:</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<alignment-options-control-component
|
||||||
|
:eventBus="eventBus"
|
||||||
|
>
|
||||||
|
</alignment-options-control-component>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row flex-wrap">
|
||||||
|
<div class="m-t-0-33em display-block">
|
||||||
|
<input id="_input_zoom_site_allow_pan"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
Pan with mouse
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -241,7 +270,8 @@ export default {
|
|||||||
zoom: {
|
zoom: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
}
|
},
|
||||||
|
editMode: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
@ -398,6 +428,17 @@ export default {
|
|||||||
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
||||||
|
|
||||||
<style lang="scss" scoped module>
|
<style lang="scss" scoped module>
|
||||||
|
@import '../res-common/variables';
|
||||||
|
|
||||||
|
.options-bar {
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
&.isEditing {
|
||||||
|
background-color: $primary;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
.b3 {
|
.b3 {
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
padding-left: 0.33rem;
|
padding-left: 0.33rem;
|
||||||
|
|||||||
@ -1 +1,3 @@
|
|||||||
$warning-color: #d6ba4a;
|
$warning-color: #d6ba4a;
|
||||||
|
|
||||||
|
$primary: rgb(255, 147, 85);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user