CreatBot/CreatBotMainsail
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: rename and clean up AboutModal (#1090)

Browse Source
This commit is contained in:
th33xitus 2022-09-18 00:37:10 +02:00 committed by GitHub
parent e150a4ef32
commit 27c57eef68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/TheSidebar.vue
View File

@ -130,7 +130,7 @@
<template #append>
<v-list-item class="small-list-item mb-2">
<v-list-item-icon class="menu-item-icon">
<about-modal></about-modal>
<about-dialog></about-dialog>
</v-list-item-icon>
</v-list-item>
</template>
@ -144,7 +144,7 @@ import { Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { PrinterStateKlipperConfig } from '@/store/printer/types'
import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
import AboutModal from '@/components/modals/AboutModal.vue'
import AboutDialog from '@/components/dialogs/AboutDialog.vue'
import { navigationWidth, topbarHeight } from '@/store/variables'
import MainsailLogo from '@/components/ui/MainsailLogo.vue'
import { mdiViewDashboardOutline } from '@mdi/js'
@ -152,7 +152,7 @@ import { mdiViewDashboardOutline } from '@mdi/js'
@Component({
components: {
TheSelectPrinterDialog,
AboutModal,
AboutDialog,
MainsailLogo,
},
})

59
src/components/dialogs/AboutDialog.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<v-tooltip right color="panel">
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">
{{ mdiHelpCircleOutline }}
</v-icon>
</template>
<v-container class="version-container pa-0">
<div><img height="12" src="/img/logo.svg" alt="mainsail-logo" /></div>
<div>v{{ mainsailVersion }}</div>
<div>
<v-icon small class="moonraker-logo">{{ mdiMoonWaningCrescent }}</v-icon>
</div>
<div>{{ moonrakerVersion }}</div>
<div><img height="12" src="/img/klipper.svg" class="klipper-logo" alt="klipper-logo" /></div>
<div>{{ klipperVersion }}</div>
</v-container>
</v-tooltip>
</template>
<script lang="ts">
import BaseMixin from '../mixins/base'
import { Mixins } from 'vue-property-decorator'
import Component from 'vue-class-component'
import { mdiCloseThick, mdiHelpCircleOutline, mdiMoonWaningCrescent } from '@mdi/js'
@Component({})
export default class AboutDialog extends Mixins(BaseMixin) {
mdiHelpCircleOutline = mdiHelpCircleOutline
mdiCloseThick = mdiCloseThick
mdiMoonWaningCrescent = mdiMoonWaningCrescent
get mainsailVersion(): string {
return this.$store.state.packageVersion
}
get klipperVersion(): string {
return this.$store.state.printer?.software_version ?? ''
}
get moonrakerVersion(): string {
return this.$store.state.server?.moonraker_version ?? ''
}
}
</script>
<style scoped>
.klipper-logo {
transform: rotate(90deg);
}
.moonraker-logo {
transform: rotate(45deg);
color: #ebc815;
}
.version-container {
display: grid;
grid-template-columns: 20px auto;
}
</style>

93
src/components/modals/AboutModal.vue
View File

@ -1,93 +0,0 @@
<style scoped>
.klipper-logo {
transform: rotate(90deg);
}
.moonraker-logo {
transform: rotate(45deg);
color: #ebc815;
}
.version-container {
display: grid;
grid-template-columns: 20px auto;
}
</style>
<template>
<v-dialog v-model="isOpen" transition="dialog-bottom-transition" max-width="600" scrollable>
<template #activator="{ an }">
<v-tooltip right color="panel">
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="an" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">
{{ mdiHelpCircleOutline }}
</v-icon>
</template>
<span class="dark version-container">
<div><img height="12" src="/img/logo.svg" /></div>
<div>v{{ mainsailVersion }}</div>
<div>
<v-icon small class="moonraker-logo">{{ mdiMoonWaningCrescent }}</v-icon>
</div>
<div>{{ moonrakerVersion }}</div>
<div><img height="12" src="/img/klipper.svg" class="klipper-logo" /></div>
<div>{{ klipperVersion }}</div>
</span>
</v-tooltip>
</template>
<template #default>
<panel title="About" :margin-bottom="false">
<template #buttons>
<v-btn icon tile @click="isOpen = false">
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>
<v-card-text>
<v-container fliud class="align-self-start">
<v-row tag="logo">
<v-col cols="auto">
<v-img
height="80"
contain
src="https://docs.mainsail.xyz/assets/img/logo-mainsail.png"></v-img>
</v-col>
</v-row>
<v-row tag="data1" justify="center">
<v-col class="pr-3 text-right">Version</v-col>
<v-col>v2.1.0-alpha</v-col>
</v-row>
</v-container>
</v-card-text>
</panel>
</template>
</v-dialog>
</template>
<script lang="ts">
import BaseMixin from '../mixins/base'
import { Mixins } from 'vue-property-decorator'
import Component from 'vue-class-component'
import Panel from '@/components/ui/Panel.vue'
import { mdiCloseThick, mdiHelpCircleOutline, mdiMoonWaningCrescent } from '@mdi/js'
@Component({
components: { Panel },
})
export default class AboutModal extends Mixins(BaseMixin) {
mdiHelpCircleOutline = mdiHelpCircleOutline
mdiCloseThick = mdiCloseThick
mdiMoonWaningCrescent = mdiMoonWaningCrescent
private isOpen = false
get mainsailVersion(): string {
return this.$store.state.packageVersion
}
get klipperVersion(): string {
return this.$store.state.printer?.software_version ?? ''
}
get moonrakerVersion(): string {
return this.$store.state.server?.moonraker_version ?? ''
}
}
</script>