Skip to content

Commit

Permalink
Fixes and stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Zeanon committed Jul 27, 2023
1 parent cba7332 commit 88409b9
Show file tree
Hide file tree
Showing 21 changed files with 398 additions and 161 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mainsail",
"version": "2.6.7",
"version": "2.6.9",
"private": true,
"decription": "a klipper web interface",
"author": {
Expand Down
75 changes: 42 additions & 33 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,37 +1,11 @@
<style>
@import './assets/styles/fonts.css';
@import './assets/styles/toastr.css';
@import './assets/styles/page.scss';
@import './assets/styles/sidebar.scss';
@import './assets/styles/utils.scss';
@import './assets/styles/updateManager.scss';
:root {
--app-height: 100%;
}
#content {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
/*noinspection CssUnusedSymbol*/
.v-btn:not(.v-btn--outlined).primary {
/*noinspection CssUnresolvedCustomProperty*/
color: var(--v-btn-text-primary);
}
</style>

<template>
<v-app dark :style="cssVars">
<template v-if="socketIsConnected && guiIsReady">
<the-sidebar></the-sidebar>
<the-topbar></the-topbar>

<the-sidebar />
<the-topbar />
<v-main id="content" :style="mainStyle">
<v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
<router-view></router-view>
<router-view />
</v-container>
</v-main>
<the-service-worker />
Expand All @@ -44,8 +18,8 @@
<the-bed-screws-dialog />
<the-screws-tilt-adjust-dialog />
</template>
<the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'"></the-select-printer-dialog>
<the-connecting-dialog v-else></the-connecting-dialog>
<the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'" />
<the-connecting-dialog v-else />
</v-app>
</template>

Expand Down Expand Up @@ -105,13 +79,26 @@ export default class App extends Mixins(BaseMixin) {
return this.$store.getters['files/getMainBackground']
}
get naviDrawer(): boolean {
return this.$store.state.naviDrawer
}
get navigationStyle() {
return this.$store.state.gui.uiSettings.navigationStyle
}
get mainStyle() {
let style = ''
let style: any = {
paddingLeft: '0',
}
if (this.mainBackground !== null) {
style = 'background-image: url(' + this.mainBackground + ');'
style.backgroundImage = 'url(' + this.mainBackground + ')'
}
// overwrite padding left for the sidebar
if (this.naviDrawer && this.navigationStyle === 'iconsAndText') style.paddingLeft = '220px'
if (this.naviDrawer && this.navigationStyle === 'iconsOnly') style.paddingLeft = '56px'
return style
}
Expand Down Expand Up @@ -316,3 +303,25 @@ export default class App extends Mixins(BaseMixin) {
}
}
</script>

<style>
@import './assets/styles/fonts.css';
@import './assets/styles/toastr.css';
@import './assets/styles/page.scss';
@import './assets/styles/sidebar.scss';
@import './assets/styles/utils.scss';
@import './assets/styles/updateManager.scss';
:root {
--app-height: 100%;
}
#content {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
/*noinspection CssUnusedSymbol*/
.v-btn:not(.v-btn--outlined).primary {
/*noinspection CssUnresolvedCustomProperty*/
color: var(--v-btn-text-primary);
}
</style>
10 changes: 1 addition & 9 deletions src/components/TheSidebar.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<v-navigation-drawer
:key="navigationStyle"
v-model="naviDrawer"
:value="naviDrawer"
:src="sidebarBackground"
:mini-variant="navigationStyle === 'iconsOnly'"
:width="navigationWidth"
Expand Down Expand Up @@ -70,10 +70,6 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
return this.$store.state.naviDrawer
}
set naviDrawer(newVal: boolean) {
this.$store.dispatch('setNaviDrawer', newVal)
}
get navigationStyle() {
return this.$store.state.gui.uiSettings.navigationStyle
}
Expand Down Expand Up @@ -133,10 +129,6 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
return output
}
mounted() {
this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
}
}
</script>

Expand Down
45 changes: 32 additions & 13 deletions src/components/TheTopbar.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
<v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
<v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer" />
<router-link to="/">
<template v-if="sidebarLogo">
<img
Expand All @@ -17,12 +17,12 @@
class="nav-logo ml-4 mr-1 d-none d-sm-flex"
router
to="/"
:ripple="false"></mainsail-logo>
:ripple="false" />
</template>
</router-link>
<v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
<printer-selector v-if="countPrinters"></printer-selector>
<v-spacer></v-spacer>
<printer-selector v-if="countPrinters" />
<v-spacer />
<input
ref="fileUploadAndStart"
type="file"
Expand Down Expand Up @@ -66,9 +66,9 @@
<v-icon class="mr-md-2">{{ mdiAlertOctagonOutline }}</v-icon>
<span class="d-none d-md-inline">{{ $t('App.TopBar.EmergencyStop') }}</span>
</v-btn>
<the-notification-menu></the-notification-menu>
<the-settings-menu></the-settings-menu>
<the-top-corner-menu></the-top-corner-menu>
<the-notification-menu />
<the-settings-menu />
<the-top-corner-menu />
</v-app-bar>
<v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom dark>
<strong>{{ $t('App.TopBar.Uploading') }} {{ uploadSnackbar.filename }}</strong>
Expand All @@ -84,7 +84,7 @@
</v-snackbar>
<v-dialog v-model="showEmergencyStopDialog" width="400" :fullscreen="isMobile">
<panel
:title="$t('EmergencyStopDialog.EmergencyStop').toString()"
:title="$t('EmergencyStopDialog.EmergencyStop')"
toolbar-color="error"
card-class="emergency-stop-dialog"
:icon="mdiAlertOctagonOutline"
Expand All @@ -96,7 +96,7 @@
</template>
<v-card-text>{{ $t('EmergencyStopDialog.AreYouSure') }}</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-spacer />
<v-btn text @click="showEmergencyStopDialog = false">{{ $t('EmergencyStopDialog.No') }}</v-btn>
<v-btn color="primary" text @click="emergencyStop">{{ $t('EmergencyStopDialog.Yes') }}</v-btn>
</v-card-actions>
Expand Down Expand Up @@ -245,6 +245,26 @@ export default class TheTopbar extends Mixins(BaseMixin) {
)
}
get defaultNavigationStateSetting() {
return this.$store.state.gui?.uiSettings?.defaultNavigationStateSetting ?? 'alwaysOpen'
}
mounted() {
//this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
switch (this.defaultNavigationStateSetting) {
case 'alwaysClosed':
this.naviDrawer = false
break
case 'lastState':
this.naviDrawer = (localStorage.getItem('naviDrawer') ?? 'true') === 'true'
break
default:
this.naviDrawer = this.$vuetify.breakpoint.lgAndUp
}
}
btnEmergencyStop() {
const confirmOnEmergencyStop = this.$store.state.gui.uiSettings.confirmOnEmergencyStop
if (confirmOnEmergencyStop) {
Expand Down Expand Up @@ -342,14 +362,13 @@ export default class TheTopbar extends Mixins(BaseMixin) {
}
</script>

<style>
<style scoped>
/*noinspection CssUnusedSymbol*/
.topbar .v-toolbar__content {
::v-deep .topbar .v-toolbar__content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
</style>
<style scoped>
.button-min-width-auto {
min-width: auto !important;
}
Expand Down
67 changes: 67 additions & 0 deletions src/components/inputs/CheckboxList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<v-col class="pl-6">
<template v-if="selectAll">
<v-checkbox
v-model="selectAllModel"
:label="selectAllLabel"
hide-details
class="mt-0"
:indeterminate="selectAllIndeterminate"
@change="$emit('update:selectedCheckboxes', selectedCheckboxes)"></v-checkbox>
<v-divider class="my-2" />
</template>
<template v-for="option in options">
<v-checkbox
:key="option.value"
v-model="selectedCheckboxes"
:label="option.label"
hide-details
class="mt-0"
:value="option.value"
@change="$emit('update:selectedCheckboxes', selectedCheckboxes)"></v-checkbox>
</template>
</v-col>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '../mixins/base'
import { computed } from 'vue'
@Component
export default class CheckboxList extends Mixins(BaseMixin) {
@Prop({ required: true })
declare readonly options: { label: string; value: string }[]
@Prop({ type: Boolean, required: false, default: false })
declare readonly selectAll: boolean
@Prop({ type: String, required: false, default: '' })
declare readonly selectAllLabel: string
private selectedCheckboxes: string[] = []
private selectAllIndeterminate: boolean = false
selectAllModel = computed<boolean>({
get: this.getSelectAll,
set: this.setSelectAll,
})
getSelectAll(): boolean {
this.selectAllIndeterminate = false
if (0 < this.selectedCheckboxes.length && this.selectedCheckboxes.length < this.options.length) {
this.selectAllIndeterminate = true
return false
}
return this.selectedCheckboxes.length == this.options.length
}
setSelectAll(state: boolean) {
if (state) {
this.selectedCheckboxes = this.options.map((o) => o.value)
} else {
this.selectedCheckboxes = []
}
}
}
</script>
Loading

0 comments on commit 88409b9

Please sign in to comment.