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

Add stretch actions to the popup, styling

Browse Source
This commit is contained in:
Tamius Han 2021-10-19 22:49:56 +02:00
parent 2df0b1a0fb
commit 53fb3e8f46
3 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/csui/PlayerUiComponent.vue
View File

@ -2,14 +2,23 @@
<div class="uw-hover uv-hover-trigger-region"> <div class="uw-hover uv-hover-trigger-region">
TEST CONTENT TEST CONTENT
</div> </div>
<div class="popup-panel"> <div class="popup-panel flex flex-row">
<div class="tab-row flex flex-row"> <div class="tab-row flex flex-column">
<div class="tab"> <div class="tab">
todo: icon<br/> todo: icon<br/>
Video options Video options
</div> </div>
<div class="tab">
Autodetection options
</div> </div>
<div>sudpo <div class="tab">
Advanced options
</div>
<div class="tab">
Debugging
</div>
</div>
<div>
<!-- Panel section --> <!-- Panel section -->
<template v-if="settingsInitialized"> <template v-if="settingsInitialized">
<VideoSettings <VideoSettings
@ -115,6 +124,7 @@ export default {
</script> </script>
<style lang="scss" src="../res/css/uwui-base.scss" scoped></style> <style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
<style lang="scss" src="../res/css/flex.scss" scoped></style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../res/css/uwui-base.scss'; @import '../res/css/uwui-base.scss';
@import '../res/css/colors.scss'; @import '../res/css/colors.scss';

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

@ -1,34 +1,38 @@
<template> <template>
<div class="" style="padding-bottom: 20px"> <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
<div> <div class="sub-panel">
<h1>Crop video:</h1> <h1>Crop video:</h1>
<div class="flex flex-row flex-wrap"> <div class="sub-panel-content flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of aspectRatioActions" <ShortcutButton v-for="(action, index) of aspectRatioActions"
class="flex b3 flex-grow button" class="flex b3 flex-grow button"
:key="index" :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)"
@clic.native="execAction(action)" @click.native="execAction(action)"
> >
</ShortcutButton> </ShortcutButton>
</div> </div>
</div> </div>
<div> <div class="sub-panel">
<h1>Streth video:</h1> <h1>Stretch video:</h1>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
<div @click="testAction()">TEST CLICK ME</div> <ShortcutButton v-for="(action, index) of stretchActions"
class="flex b3 flex-grow button"
:key="index"
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
:shortcut="parseShortcut(action)"
@click.native="execAction(action)"
>
</ShortcutButton>
</div> </div>
</div> </div>
<div> <div class="sub-panel">
<h1>Manual zoom:</h1> <h1>Manual zoom:</h1>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
</div> </div>
</div> </div>
<div> <div class="sub-panel">
<h1>Video alignment:</h1> <h1>Video alignment:</h1>
<div class="flex flex-row flex-wrap"> <div class="flex flex-row flex-wrap">
@ -109,7 +113,9 @@ export default {
} }
</script> </script>
<style> <style lang="scss" src="../../res/css/flex.scss" scoped></style>
<style lang="scss" src="../res-common/panels.scss"></style>
<style lang="scss" scoped>
.b3 { .b3 {
width: 9rem; width: 9rem;
padding-left: 0.33rem; padding-left: 0.33rem;
@ -124,4 +130,5 @@ export default {
padding-top: 8px; padding-top: 8px;
} }
</style> </style>

7
src/csui/res-common/panels.scss Normal file
View File

@ -0,0 +1,7 @@
.sub-panel {
max-width: 52rem;
margin: 2rem;
}
.sub-panel-content {
margin-top: 1.5rem;
}