Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Minor changes to menu and settings tab #411

Merged
merged 26 commits into from
Nov 14, 2021
Merged
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
2b55058
refactor(appbar): change buttons to new design
steadyjaw Nov 8, 2021
ff1437a
refactor(appbar): change height and add pritnername
steadyjaw Nov 8, 2021
e78ed57
refactor: small sidebar
steadyjaw Nov 9, 2021
11a9a8e
refactor(vuetify): define parts of the mainsail theme and expose colo…
steadyjaw Nov 9, 2021
413e642
refactor: ui settings add missing divider
steadyjaw Nov 9, 2021
46bb749
refactor: add farm printer selection and menu to new top and sidebar,…
steadyjaw Nov 9, 2021
d10caf3
refactor: make topbar buttons hideable via ui settings
steadyjaw Nov 9, 2021
be109a6
refactor: move miniConsole buttons to toolbar and make'em collapsible
steadyjaw Nov 9, 2021
39ede45
refactor: set matching colors for buttons on console page
steadyjaw Nov 9, 2021
88fb3f3
refactor: use colornames from theme and set play/resume button to green
steadyjaw Nov 9, 2021
c30ea16
fix: correct visibility of hide buttons on collapse
steadyjaw Nov 9, 2021
884a336
feature: add virtual tab button to console-input on touch devices
steadyjaw Nov 9, 2021
1dfa48a
refactor: remove hide e-stop button setting
steadyjaw Nov 12, 2021
9af6427
fix: add reactivity to hide upload and print button functionality
steadyjaw Nov 12, 2021
03408a0
refactor: move logo to topbar and clip menu under topbar
steadyjaw Nov 12, 2021
4d6d9de
refactor: remove unused TheSidebarPrinterMenu
steadyjaw Nov 12, 2021
cd2a534
feature: create and add about component to sidebar ...no dialog on cl…
steadyjaw Nov 12, 2021
f66e29d
fix: correct appearance of the close icon from interface settings dialog
steadyjaw Nov 12, 2021
b414572
Revert "fix: correct appearance of the close icon from interface sett…
steadyjaw Nov 13, 2021
7f67a35
Merge branch 'develop' into refactor/ui-redesign
steadyjaw Nov 13, 2021
dc2c034
Merge branch 'mainsail-crew:develop' into feature/ui-design
steadyjaw Nov 14, 2021
44cfcda
refactor: close ui settings on ESC and change close icon to tile
steadyjaw Nov 14, 2021
de8d400
refactor: change font style in wide sidebar and extend width of wide …
steadyjaw Nov 14, 2021
44f12e9
refactor: change menu style ui-settings-entry to dropdown
steadyjaw Nov 14, 2021
259aa1f
refactor: correct variablenames in locales
steadyjaw Nov 14, 2021
aadd989
refactor: re-do menuStyle setting implementation
steadyjaw Nov 14, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feature: create and add about component to sidebar ...no dialog on cl…
…ick yet

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
steadyjaw committed Nov 12, 2021
commit cd2a5343441357b371fc7722b72fe8ce8f770e5f
48 changes: 6 additions & 42 deletions src/components/TheSidebar.vue
Original file line number Diff line number Diff line change
@@ -59,39 +59,9 @@
</v-list>
<template v-slot:append>
<v-list-item class="small-list-item mb-2">
<template v-if="!boolWideNavDrawer">
<!-- <v-list-item-icon>
<v-menu right offset-x open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
</template>
<v-card>
-- Logos hier mit rein, damit man erkennt welche version für was steht :) --
<div overflow-hidden class="nowrap body-2" id="mainsailVersion" > v{{ mainsailVersion }}</div>
<div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
</v-card>
</v-menu>
</v-list-item-icon> -->

<v-list-item-icon>
<v-tooltip right color="panel">
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
</template>
<span class="dark d-inline-block">
<img height="12" src="/img/logo.svg"> v{{ mainsailVersion }}<br />
<img height="12" src="/img/klipper.svg" style="transform: rotate(90deg);"> {{ klipperVersion }}
</span>
</v-tooltip>
</v-list-item-icon>

</template>
<template v-else-if="boolWideNavDrawer">
<v-list-item-content>
<div overflow-hidden class="nowrap body-2" id="mainsilVersion" > v{{ mainsailVersion }}</div>
<div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
</v-list-item-content>
</template>
<v-list-item-icon>
<about-modal></about-modal>
</v-list-item-icon>
</v-list-item>
</template>
</v-navigation-drawer>
@@ -104,10 +74,12 @@ 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'
@Component({
components: {
TheSelectPrinterDialog
TheSelectPrinterDialog,
AboutModal
}
})
export default class TheSidebarAlt extends Mixins(BaseMixin) {
@@ -127,14 +99,6 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
return this.$store.getters['files/getSidebarBackground']
}
get mainsailVersion(): string {
return this.$store.state.packageVersion
}
get klipperVersion():string {
return this.$store.state.printer?.software_version ?? ''
}
get naviPoints(): AppRoute[] {
return routes.filter((element) => element.showInNavi)
}
86 changes: 86 additions & 0 deletions src/components/modals/AboutModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<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
transition="dialog-bottom-transition"
max-width="600"
scrollable
v-model="isOpen"
>
<template v-slot:activator="{ an }">
<v-tooltip right color="panel">
<template v-slot:activator="{ on, attrs }">
<!-- <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave" @click.stop="isOpen = true">mdi-help-circle-outline</v-icon> -->
<v-icon v-on="an" v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</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">mdi-moon-waning-crescent</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 v-slot:default>
<panel title="About" :margin-bottom="false">
<template v-slot:buttons>
<v-btn icon tile @click="isOpen = false"><v-icon>mdi-close-thick</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'
@Component({
components: {Panel}
})
export default class AboutModal extends Mixins(BaseMixin) {
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>