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

Reorder panels in video settings

Browse Source
This commit is contained in:
Tamius Han 2024-05-04 01:06:01 +02:00
parent f2ac1557a4
commit 1c48ea1908
2 changed files with 76 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/csui/src/PlayerUiPanels/VideoSettings.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column" style="position: relative; width: 100%;">
<!-- 'Change UI' options is a tiny bit in upper right corner. --> <!-- 'Change UI' options is a tiny bit in upper right corner. -->
<div <div
class="options-bar flex flex-row" class="options-bar flex flex-row"
@ -28,77 +28,82 @@
</div> </div>
<!-- The rest of the tab is under 'edit ratios and shortcuts' row --> <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px"> <div class="flex flex-row flex-wrap" style="width: 100%">
<!-- CROP OPTIONS --> <div class="flex flex-col">
<div v-if="settings" class="sub-panel"> <!-- CROP OPTIONS -->
<div class="flex flex-row"> <div v-if="settings" class="sub-panel">
<mdicon name="crop" :size="32" /> <div class="flex flex-row">
<h1>Crop video:</h1> <mdicon name="crop" :size="32" />
</div> <h1>Crop video:</h1>
<CropOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
>
</CropOptionsPanel>
</div>
<!-- STRETCH OPTIONS -->
<div v-if="settings" class="sub-panel">
<div class="flex flex-row">
<mdicon name="stretch-to-page-outline" :size="32" />
<h1>Stretch video:</h1>
</div>
<StretchOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
></StretchOptionsPanel>
</div>
<!-- ZOOM OPTIONS -->
<div class="sub-panel">
<div class="flex flex-row">
<mdicon name="magnify-plus-outline" :size="32" />
<h1>Manual zoom:</h1>
</div>
<ZoomOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
></ZoomOptionsPanel>
</div>
<!-- VIDEO ALIGNMENT -->
<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>
<CropOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
>
</CropOptionsPanel>
</div> </div>
<!-- STRETCH OPTIONS -->
<div v-if="settings" class="sub-panel">
<div class="flex flex-row">
<mdicon name="stretch-to-page-outline" :size="32" />
<h1>Stretch video:</h1>
</div>
<StretchOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
></StretchOptionsPanel>
</div>
</div>
<div class="flex flex-col">
<!-- VIDEO ALIGNMENT -->
<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>
<!-- ZOOM OPTIONS -->
<div class="sub-panel">
<div class="flex flex-row">
<mdicon name="magnify-plus-outline" :size="32" />
<h1>Manual zoom:</h1>
</div>
<ZoomOptionsPanel
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:isEditing="editMode"
></ZoomOptionsPanel>
</div>
</div> </div>
</div> </div>
</div> </div>

4
src/csui/src/res-common/panels.scss
View File

@ -1,13 +1,13 @@
.sub-panel { .sub-panel {
max-width: 52rem; max-width: 52rem;
margin: 2rem; margin: 1rem;
h1:not(:first-child) { h1:not(:first-child) {
margin-left: 16px; margin-left: 16px;
} }
} }
.sub-panel-content { .sub-panel-content {
margin-top: 1.5rem; margin-top: 0.5rem;
} }
.tab { .tab {