Skip to content

Commit

Permalink
feat: add option to block autoscroll in console (#1519)
Browse files Browse the repository at this point in the history
  • Loading branch information
@meteyou
meteyou authored Sep 19, 2023
1 parent a0ad7e8 commit 09c2526
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 38 deletions.
58 changes: 39 additions & 19 deletions src/components/panels/MiniconsolePanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
<style scoped lang="scss">
.consoleTable {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gcode-command-field {
font-family: 'Roboto Mono', monospace;
}
</style>

<template>
<panel
v-if="socketIsConnected && klipperState !== 'disconnected'"
Expand All @@ -20,38 +10,45 @@
<v-btn icon tile @click="clearConsole">
<v-icon small>{{ mdiTrashCan }}</v-icon>
</v-btn>
<command-help-modal :in-toolbar="true" @onCommand="gcode = $event"></command-help-modal>
<command-help-modal :in-toolbar="true" @onCommand="gcode = $event" />
<v-menu
:offset-y="true"
:close-on-content-click="false"
:title="$t('Panels.MiniconsolePanel.SetupConsole')">
<template #activator="{ on, attrs }">
<v-btn icon tile v-bind="attrs" v-on="on">
<v-icon small>{{ mdiFilter }}</v-icon>
<v-icon small>{{ mdiCog }}</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="consoleDirection === 'shell'" class="minHeight36">
<v-checkbox
v-model="autoscroll"
class="mt-0"
hide-details
:label="$t('Panels.MiniconsolePanel.Autoscroll')" />
</v-list-item>
<v-list-item class="minHeight36">
<v-checkbox
v-model="hideWaitTemperatures"
class="mt-0"
hide-details
:label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
:label="$t('Panels.MiniconsolePanel.HideTemperatures')" />
</v-list-item>
<v-list-item v-if="moonrakerComponents.includes('timelapse')" class="minHeight36">
<v-checkbox
v-model="hideTlCommands"
class="mt-0"
hide-details
:label="$t('Panels.MiniconsolePanel.HideTimelapse')"></v-checkbox>
:label="$t('Panels.MiniconsolePanel.HideTimelapse')" />
</v-list-item>
<v-list-item v-for="(filter, index) in customFilters" :key="index" class="minHeight36">
<v-checkbox
v-model="filter.bool"
class="mt-0"
hide-details
:label="filter.name"
@change="toggleFilter(filter)"></v-checkbox>
@change="toggleFilter(filter)" />
</v-list-item>
</v-list>
</v-menu>
Expand Down Expand Up @@ -93,7 +90,7 @@
:events="events"
:is-mini="true"
@command-click="commandClick" />
<v-divider></v-divider>
<v-divider />
</overlay-scrollbars>
</v-col>
</v-row>
Expand All @@ -109,7 +106,7 @@ import BaseMixin from '@/components/mixins/base'
import { CommandHelp, VTextareaType } from '@/store/printer/types'
import ConsoleTable from '@/components/console/ConsoleTable.vue'
import Panel from '@/components/ui/Panel.vue'
import { mdiChevronDoubleRight, mdiConsoleLine, mdiFilter, mdiSend, mdiTrashCan } from '@mdi/js'
import { mdiChevronDoubleRight, mdiCog, mdiConsoleLine, mdiSend, mdiTrashCan } from '@mdi/js'
import CommandHelpModal from '@/components/CommandHelpModal.vue'
@Component({
Expand All @@ -122,7 +119,7 @@ import CommandHelpModal from '@/components/CommandHelpModal.vue'
export default class MiniconsolePanel extends Mixins(BaseMixin) {
mdiTrashCan = mdiTrashCan
mdiConsoleLine = mdiConsoleLine
mdiFilter = mdiFilter
mdiCog = mdiCog
mdiSend = mdiSend
mdiChevronDoubleRight = mdiChevronDoubleRight
Expand Down Expand Up @@ -155,13 +152,18 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
@Watch('events')
eventsChanged() {
if (this.consoleDirection === 'shell') {
if (this.consoleDirection === 'shell' && this.autoscroll) {
setTimeout(() => {
this.scrollToBottom()
}, 50)
}
}
@Watch('autoscroll')
autoscrollChanged(newVal: boolean) {
if (newVal) this.scrollToBottom()
}
clearConsole() {
this.$store.dispatch('gui/console/clear')
}
Expand Down Expand Up @@ -194,6 +196,14 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
return this.$store.state.gui.gcodehistory.entries ?? []
}
get autoscroll(): boolean {
return this.$store.state.gui.console.autoscroll ?? true
}
set autoscroll(newVal) {
this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
}
commandClick(msg: string): void {
this.gcode = msg
Expand Down Expand Up @@ -325,3 +335,13 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
}
}
</script>

<style scoped>
.consoleTable {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gcode-command-field {
font-family: 'Roboto Mono', monospace;
}
</style>
2 changes: 2 additions & 0 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
"TryAgain": "try again"
},
"Console": {
"Autoscroll": "Autoscroll",
"CommandList": "Command list",
"Empty": "Empty",
"HideTemperatures": "Hide temperatures",
Expand Down Expand Up @@ -588,6 +589,7 @@
"Send": "send"
},
"MiniconsolePanel": {
"Autoscroll": "Autoscroll",
"Headline": "Console",
"HideTemperatures": "Hide temperatures",
"HideTimelapse": "Hide Timelapse",
Expand Down
58 changes: 39 additions & 19 deletions src/pages/Console.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
<style scoped>
.consoleScrollContainer {
min-height: 200px;
height: calc(var(--app-height) - 180px);
}
.gcode-command-field {
font-family: 'Roboto Mono', monospace;
}
</style>

<template>
<div class="d-flex flex-column">
<v-row :class="consoleDirection === 'table' ? 'order-0' : 'order-1 mt-3'">
Expand Down Expand Up @@ -41,39 +30,46 @@
<v-btn class="mr-3 px-2 minwidth-0" color="lightgray" @click="clearConsole">
<v-icon>{{ mdiTrashCan }}</v-icon>
</v-btn>
<command-help-modal @onCommand="gcode = $event"></command-help-modal>
<command-help-modal @onCommand="gcode = $event" />
<v-menu
offset-y
:top="consoleDirection === 'shell'"
:close-on-content-click="false"
:title="$t('Console.SetupConsole')">
<template #activator="{ on, attrs }">
<v-btn class="ml-3 px-2 minwidth-0" color="lightgray" v-bind="attrs" v-on="on">
<v-icon>{{ mdiFilter }}</v-icon>
<v-icon>{{ mdiCog }}</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="consoleDirection === 'shell'" class="minHeight36">
<v-checkbox
v-model="autoscroll"
class="mt-0"
hide-details
:label="$t('Panels.MiniconsolePanel.Autoscroll')" />
</v-list-item>
<v-list-item class="minHeight36">
<v-checkbox
v-model="hideWaitTemperatures"
class="mt-0"
hide-details
:label="$t('Console.HideTemperatures')"></v-checkbox>
:label="$t('Console.HideTemperatures')" />
</v-list-item>
<v-list-item v-if="moonrakerComponents.includes('timelapse')" class="minHeight36">
<v-checkbox
v-model="hideTlCommands"
class="mt-0"
hide-details
:label="$t('Console.HideTimelapse')"></v-checkbox>
:label="$t('Console.HideTimelapse')" />
</v-list-item>
<v-list-item v-for="(filter, index) in customFilters" :key="index" class="minHeight36">
<v-checkbox
v-model="filter.bool"
class="mt-0"
hide-details
:label="filter.name"
@change="toggleFilter(filter)"></v-checkbox>
@change="toggleFilter(filter)" />
</v-list-item>
</v-list>
</v-menu>
Expand Down Expand Up @@ -104,7 +100,7 @@ import ConsoleTable from '@/components/console/ConsoleTable.vue'
import { CommandHelp, VTextareaType } from '@/store/printer/types'
import { reverseString, strLongestEqual } from '@/plugins/helpers'
import CommandHelpModal from '@/components/CommandHelpModal.vue'
import { mdiChevronDoubleRight, mdiFilter, mdiSend, mdiTrashCan } from '@mdi/js'
import { mdiChevronDoubleRight, mdiCog, mdiSend, mdiTrashCan } from '@mdi/js'
@Component({
components: {
Expand All @@ -122,7 +118,7 @@ export default class PageConsole extends Mixins(BaseMixin) {
*/
mdiChevronDoubleRight = mdiChevronDoubleRight
mdiSend = mdiSend
mdiFilter = mdiFilter
mdiCog = mdiCog
mdiTrashCan = mdiTrashCan
declare $refs: {
Expand All @@ -145,13 +141,18 @@ export default class PageConsole extends Mixins(BaseMixin) {
@Watch('events')
eventsChanged() {
if (this.consoleDirection === 'shell') {
if (this.consoleDirection === 'shell' && this.autoscroll) {
setTimeout(() => {
this.scrollToBottom()
}, 50)
}
}
@Watch('autoscroll')
autoscrollChanged(newVal: boolean) {
if (newVal) this.scrollToBottom()
}
get hideWaitTemperatures(): boolean {
return this.$store.state.gui.console.hideWaitTemperatures
}
Expand Down Expand Up @@ -184,6 +185,14 @@ export default class PageConsole extends Mixins(BaseMixin) {
return this.$store.state.gui.gcodehistory.entries ?? []
}
get autoscroll(): boolean {
return this.$store.state.gui.console.autoscroll ?? true
}
set autoscroll(newVal) {
this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
}
commandClick(msg: string): void {
this.gcode = msg
Expand Down Expand Up @@ -304,3 +313,14 @@ export default class PageConsole extends Mixins(BaseMixin) {
}
}
</script>

<style scoped>
.consoleScrollContainer {
min-height: 200px;
height: calc(var(--app-height) - 180px);
}
.gcode-command-field {
font-family: 'Roboto Mono', monospace;
}
</style>
1 change: 1 addition & 0 deletions src/store/gui/console/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const getDefaultState = (): GuiConsoleState => {
direction: 'table',
entryStyle: 'default',
height: 300,
autoscroll: true,
consolefilters: {},
}
}
Expand Down
1 change: 1 addition & 0 deletions src/store/gui/console/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export interface GuiConsoleState {
direction: 'table' | 'shell'
entryStyle: 'default' | 'compact'
height: number
autoscroll: boolean
consolefilters: {
[key: string]: GuiConsoleStateFilter
}
Expand Down

0 comments on commit 09c2526

Please sign in to comment.