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

Add very rudimentary context menu

Browse Source
This commit is contained in:
Tamius Han 2024-10-23 01:23:54 +02:00
parent dcbeecc8cf
commit 54c44b4379
2 changed files with 155 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/csui/PlayerOverlay.vue
View File

@ -6,10 +6,61 @@
:style="uwTriggerRegionConf"
@mouseenter="showUwWindow"
>
<h1>Aspect ratio controls</h1>
<div>Hover to activate</div>
<!-- <h1>Aspect ratio controls</h1>
<div>Hover to activate</div> -->
[ |> ]
</div>
<div class="context-spawn uw-clickable">
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Ultrawidify
</div>
</template>
<slot>
<div class="menu-width">
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Crop
</div>
</template>
<slot>
<div>MEnu item 1</div>
<div>Menu item 2</div>
<div>Menu item 3</div>
</slot>
</GhettoContextMenu>
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Stretch
</div>
</template>
<slot>
<div>Menu item 4</div>
<div>Menu item 5</div>
<div>Menu item 6</div>
</slot>
</GhettoContextMenu>
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Align
</div>
</template>
</GhettoContextMenu>
<button @click="showUiWindow()">Extension settings</button>
<button @click="showUiWindow()">Not working?</button>
</div>
</slot>
</GhettoContextMenu>
</div>
<div
v-if="settingsInitialized && uwWindowVisible"
class="uw-window flex flex-col uw-clickable"
@ -30,7 +81,8 @@
</template>
<script>
import PlayerUIWindow from './src/PlayerUIWindow.vue'
import PlayerUIWindow from './src/PlayerUIWindow.vue';
import GhettoContextMenu from './src/components/GhettoContextMenu.vue';
import BrowserDetect from '../ext/conf/BrowserDetect';
import Logger from '../ext/lib/Logger';
import Settings from '../ext/lib/Settings';
@ -39,7 +91,8 @@ import UIProbeMixin from './src/utils/UIProbeMixin';
export default {
components: {
PlayerUIWindow
PlayerUIWindow,
GhettoContextMenu
},
mixins: [
UIProbeMixin
@ -302,7 +355,6 @@ export default {
.uw-hover {
position: absolute;
z-index: 999999999999999999;
}
@ -342,4 +394,31 @@ export default {
}
}
.context-spawn {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
// width: 100%;
// height: 100%;
padding: 2rem;
color: #fff;
.context-item {
font-size: .95rem;
padding: 1rem 1.6rem;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px) saturate(120%);
white-space: nowrap;
}
}
</style>

71
src/csui/src/components/GhettoContextMenu.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div class="context-container" @mouseleave="hideContextMenu()">
<div class="activator"
@click="showContextMenu()"
@mouseenter="showContextMenu()"
>
<slot name="activator"></slot>
</div>
<div
v-if="contextMenuVisible"
class="context-menu"
:class="{
'menu-left': alignment === 'left',
'menu-right': alignment !== 'left'
}"
@mouseleave="hideContextMenu()"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
alignment: String,
},
data() {
return {
contextMenuVisible: false,
contextMenuHideTimeout: undefined,
}
},
methods: {
showContextMenu() {
console.log('will show context menu.')
this.contextMenuVisible = true;
},
hideContextMenu() {
this.contextMenuHideTimeout = setTimeout( () => {
this.contextMenuVisible = false;
}, 250);
}
}
}
</script>
<style>
.context-container {
position: relative;
}
.context-menu-wrapper {
position: relative;
}
.context-menu {
position: absolute;
display: flex;
flex-direction: column;
min-width: 5rem;
top: 50%;
transform: translateY(-50%);
}
.menu-left {
right: 100%;
}
.menu-right {
left: 100%;
}
</style>