67 lines
1.1 KiB
Vue
67 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar'
|
|
|
|
import Dialog from '~/components/ui/Dialog.vue'
|
|
import cogIcon from '~/assets/images/icons/cog.png'
|
|
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
|
|
|
const quasar = useQuasar()
|
|
|
|
function optionsMenu() {
|
|
quasar
|
|
.dialog({
|
|
component: Dialog,
|
|
componentProps: {
|
|
icon: pearlIcon,
|
|
alt: 'Pearl',
|
|
},
|
|
})
|
|
.onOk(() => {
|
|
console.log('OK')
|
|
})
|
|
.onCancel(() => {
|
|
console.log('Cancel')
|
|
})
|
|
.onDismiss(() => {
|
|
console.log('OK or Cancel (Dialog Dismissed)')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="options-layout pass-through">
|
|
<div class="options clickable" @click="optionsMenu()">
|
|
<img
|
|
class="logo user-select-none"
|
|
draggable="false"
|
|
:src="cogIcon"
|
|
alt="Options"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.options {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 10px;
|
|
|
|
&-layout {
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|