79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import cogIcon from '~/assets/images/icons/cog.png'
|
|
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
|
|
|
const active = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog>
|
|
<template #activator="{ props }">
|
|
<div v-bind="props" class="options clickable">
|
|
<img
|
|
class="logo user-select-none"
|
|
draggable="false"
|
|
:src="cogIcon"
|
|
alt="Options"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #default="{ isActive }">
|
|
<VCard title="Dialog">
|
|
<VCardText>
|
|
<div class="overlay background"></div>
|
|
<div class="overlay content">
|
|
<img
|
|
class="icon-badge user-select-none"
|
|
draggable="false"
|
|
:src="pearlIcon"
|
|
alt="Pearl"
|
|
/>
|
|
<div>
|
|
<h3 class="alex text-align-center">Site options</h3>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<p>
|
|
<strong>Theme</strong><br />
|
|
Available in all flavors, vanilla and chocolate.
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<p>
|
|
<strong>Animation</strong><br />
|
|
Some computers may have issues rendering that gorgeous
|
|
background animation. Enabling it substantially increases
|
|
power consumption.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
Report a bug
|
|
<VCardActions>
|
|
<VSpacer></VSpacer>
|
|
|
|
<VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
|
|
</VCardActions>
|
|
</VCard>
|
|
</template>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.options {
|
|
display: flex;
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
.logo {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|