Move over to iconify-icon, wrap around
This commit is contained in:
@@ -1,40 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from '~/components/ui/Dialog.vue'
|
||||
import cogIcon from '~/assets/images/icons/cog.png'
|
||||
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
||||
|
||||
function optionsMenu() {}
|
||||
const active = ref(false)
|
||||
</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>
|
||||
<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;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
&-layout {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: 'Icon',
|
||||
},
|
||||
})
|
||||
|
||||
const theme = ref(false)
|
||||
const animation = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>FALSE</p>
|
||||
<!-- <QDialog ref="dialogRef" @hide="onDialogHide">-->
|
||||
<!-- <QCard class="dialog">-->
|
||||
<!-- <div class="overlay background"></div>-->
|
||||
<!-- <div class="overlay content">-->
|
||||
<!-- <img-->
|
||||
<!-- class="icon-badge user-select-none"-->
|
||||
<!-- draggable="false"-->
|
||||
<!-- :src="props.icon"-->
|
||||
<!-- :alt="props.alt"-->
|
||||
<!-- />-->
|
||||
<!-- <QCardSection>-->
|
||||
<!-- <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>-->
|
||||
<!-- <QToggle-->
|
||||
<!-- v-model="theme"-->
|
||||
<!-- class="px-5"-->
|
||||
<!-- color="black"-->
|
||||
<!-- dense-->
|
||||
<!-- size="xl"-->
|
||||
<!-- :unchecked-icon="mdiWhiteBalanceSunny"-->
|
||||
<!-- :checked-icon="mdiWeatherNight"-->
|
||||
<!-- icon-color="primary"-->
|
||||
<!-- @change="theme = !theme"-->
|
||||
<!-- />-->
|
||||
<!-- <QCheckbox v-model="theme" />-->
|
||||
<!-- </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>-->
|
||||
<!-- <QToggle-->
|
||||
<!-- v-model="animation"-->
|
||||
<!-- color="purple"-->
|
||||
<!-- dense-->
|
||||
<!-- size="xl"-->
|
||||
<!-- :unchecked-icon="mdiStop"-->
|
||||
<!-- :checked-icon="mdiPlay"-->
|
||||
<!-- @change="theme = !theme"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- Report a bug-->
|
||||
<!-- <QCardActions>-->
|
||||
<!-- <QBtn label="OK" @click="onDialogOK" />-->
|
||||
<!-- </QCardActions>-->
|
||||
<!-- </QCardSection>-->
|
||||
<!-- </div>-->
|
||||
<!-- </QCard>-->
|
||||
<!-- </QDialog>-->
|
||||
</template>
|
||||
+38
-6
@@ -1,20 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import 'iconify-icon'
|
||||
import type { IconifyRenderMode } from 'iconify-icon'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
mode: {
|
||||
type: String as PropType<IconifyRenderMode>,
|
||||
default: 'svg',
|
||||
},
|
||||
color: {
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
default: '1em',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '1em',
|
||||
},
|
||||
flip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
rotate: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const icon = props.name?.split(':')?.[0] === 'local' ?
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
<template>
|
||||
<iconify-icon
|
||||
:icon="props.name"
|
||||
:mode="props.mode"
|
||||
:inline="props.inline"
|
||||
:width="props.width"
|
||||
:height="props.height"
|
||||
:flip="props.flip"
|
||||
:rotate="props.rotate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
Reference in New Issue
Block a user