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

Improve alignment ui

Browse Source
This commit is contained in:
Tamius Han 2024-06-09 21:25:11 +02:00
parent 10a8452709
commit 75e31dc3a4
2 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
View File

@ -105,41 +105,70 @@ export default {
flex: 0 0 33%; flex: 0 0 33%;
display: flex; display: flex;
.alignment-ui {
width: 50%;
height: 50%;
}
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0,0,0,0.25);
cursor: pointer;
margin: 0.125rem;
padding: 0.5rem;
width: 1.5rem;
height: 1.5rem;
border-bottom: 1px solid transparent;
.alignment-ui {
width: 50%;
height: 50%;
border-style: solid;
border-width: 0px;
border-color: #fff;
}
&:hover {
background-color: rgba(0,0,0,0.5);
border-bottom: 1px solid #fa6;
.alignment-ui {
border-color: #fa6 !important;
}
&.center.ycenter {
.alignment-ui {
background-color: #fa6;
}
}
}
&.top { &.top {
align-items: flex-start; align-items: flex-start;
.alignment-ui { .alignment-ui {
border-top: 3px solid #fff; border-top-width: 3px;
} }
} }
&.bottom { &.bottom {
align-items: flex-end; align-items: flex-end;
.alignment-ui { .alignment-ui {
border-bottom: 3px solid #fff; border-bottom-width: 3px;
} }
} }
&.left { &.left {
justify-content: flex-start; justify-content: flex-start;
.alignment-ui { .alignment-ui {
border-left: 3px solid #fff; border-left-width: 3px;
} }
} }
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
.alignment-ui { .alignment-ui {
border-right: 3px solid #fff; border-right-width: 3px;
} }
} }

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

@ -76,7 +76,7 @@
<h1>Video alignment:</h1> <h1>Video alignment:</h1>
</div> </div>
<div class="flex flex-row"> <div class="flex flex-row justify-center mt-4">
<alignment-options-control-component <alignment-options-control-component
:eventBus="eventBus" :eventBus="eventBus"
> >
@ -94,7 +94,7 @@
</div> </div>
<!-- ZOOM OPTIONS --> <!-- ZOOM OPTIONS -->
<div class="sub-panel"> <!-- <div class="sub-panel">
<div class="flex flex-row"> <div class="flex flex-row">
<mdicon name="magnify-plus-outline" :size="32" /> <mdicon name="magnify-plus-outline" :size="32" />
<h1>Manual zoom:</h1> <h1>Manual zoom:</h1>
@ -106,7 +106,7 @@
:eventBus="eventBus" :eventBus="eventBus"
:isEditing="editMode" :isEditing="editMode"
></ZoomOptionsPanel> ></ZoomOptionsPanel>
</div> </div> -->
</div> </div>
</div> </div>
@ -179,3 +179,14 @@ export default {
<style lang="scss" src="../../res/css/flex.scss" scoped module></style> <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
<style lang="scss" src="../res-common/panels.scss" scoped module></style> <style lang="scss" src="../res-common/panels.scss" scoped module></style>
<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>
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.mt-4{
margin-top: 1rem;
}
</style>