feat: add a compact console style option
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej
parent
ee18b4cc33
commit
5e0198e259
@ -3,16 +3,30 @@
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: .95em;
|
||||
|
||||
&+.consoleTableRow .col {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
&.default {
|
||||
.col {
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
|
||||
&+.consoleTableRow .col {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
.col {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<v-row class="ma-0">
|
||||
<v-col class="col-auto pr-0 py-2">{{ event.formatTime }}</v-col>
|
||||
<v-col class="py-2" :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
|
||||
<v-row :class="'ma-0 '+entryStyle">
|
||||
<v-col class="col-auto pr-0">{{ event.formatTime }}</v-col>
|
||||
<v-col :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -27,6 +41,10 @@ export default class ConsoleTableEntry extends Vue {
|
||||
@Prop({ required: true })
|
||||
readonly event!: ServerStateEvent
|
||||
|
||||
get entryStyle() {
|
||||
return this.$store.state.gui.console.entryStyle ?? 'default'
|
||||
}
|
||||
|
||||
colorConsoleMessage(item: ServerStateEvent): string {
|
||||
if (item.message.startsWith('!! ')) return 'red--text'
|
||||
|
||||
|
||||
@ -17,63 +17,65 @@
|
||||
:collapsible="true"
|
||||
card-class="miniconsole-panel"
|
||||
>
|
||||
<v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-textarea
|
||||
v-model="gcode"
|
||||
:items="items"
|
||||
:label="$t('Panels.MiniconsolePanel.SendCode')"
|
||||
solo
|
||||
class="gcode-command-field"
|
||||
ref="gcodeCommandField"
|
||||
autocomplete="off"
|
||||
no-resize
|
||||
auto-grow
|
||||
:rows="rows"
|
||||
@keydown.enter.prevent.stop="doSend"
|
||||
@keyup.up="onKeyUp"
|
||||
@keyup.down="onKeyDown"
|
||||
@keydown.tab="getAutocomplete"
|
||||
hide-details
|
||||
outlined
|
||||
dense
|
||||
append-icon="mdi-send"
|
||||
@click:append="doSend"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col class="col-auto">
|
||||
<command-help-modal @onCommand="gcode = $event" ></command-help-modal>
|
||||
<v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="px-2 minwidth-0" color="grey darken-3 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-filter</v-icon></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item class="minHeight36">
|
||||
<v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
|
||||
</v-list-item>
|
||||
<v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
|
||||
<v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'">
|
||||
<console-table ref="console"
|
||||
:events="events"
|
||||
:is-mini="true"
|
||||
@command-click="commandClick"
|
||||
/>
|
||||
<v-divider></v-divider>
|
||||
</perfect-scrollbar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<div class="d-flex flex-column">
|
||||
<v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-textarea
|
||||
v-model="gcode"
|
||||
:items="items"
|
||||
:label="$t('Panels.MiniconsolePanel.SendCode')"
|
||||
solo
|
||||
class="gcode-command-field"
|
||||
ref="gcodeCommandField"
|
||||
autocomplete="off"
|
||||
no-resize
|
||||
auto-grow
|
||||
:rows="rows"
|
||||
@keydown.enter.prevent.stop="doSend"
|
||||
@keyup.up="onKeyUp"
|
||||
@keyup.down="onKeyDown"
|
||||
@keydown.tab="getAutocomplete"
|
||||
hide-details
|
||||
outlined
|
||||
dense
|
||||
append-icon="mdi-send"
|
||||
@click:append="doSend"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col class="col-auto">
|
||||
<command-help-modal @onCommand="gcode = $event" ></command-help-modal>
|
||||
<v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="px-2 minwidth-0" color="grey darken-3 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-filter</v-icon></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item class="minHeight36">
|
||||
<v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
|
||||
</v-list-item>
|
||||
<v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
|
||||
<v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'">
|
||||
<console-table ref="console"
|
||||
:events="events"
|
||||
:is-mini="true"
|
||||
@command-click="commandClick"
|
||||
/>
|
||||
<v-divider></v-divider>
|
||||
</perfect-scrollbar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</panel>
|
||||
</template>
|
||||
|
||||
@ -250,5 +252,14 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
scrollToTop() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.miniConsoleScroll) {
|
||||
const perfectScroll = ((this.$refs.miniConsoleScroll as Vue).$el as HTMLDivElement)
|
||||
perfectScroll.scrollTop = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
<v-select v-model="consoleDirection" :items="availableDirections" hide-details outlined dense></v-select>
|
||||
</settings-row>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<settings-row :title="$t('Settings.ConsoleTab.EntryStyle')">
|
||||
<v-select v-model="entryStyle" :items="availableEntryStyles" hide-details outlined dense></v-select>
|
||||
</settings-row>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<settings-row :title="$t('Settings.ConsoleTab.Height')">
|
||||
<v-slider v-model="consoleHeightTmp" @change="updateConsoleHeight" hide-details :min="200" :max="900" :step="10" :label="consoleHeightTmp+'px'" ></v-slider>
|
||||
</settings-row>
|
||||
@ -135,6 +139,26 @@ export default class SettingsConsoleTab extends Mixins(BaseMixin) {
|
||||
this.$store.dispatch('gui/saveSetting', { name: 'console.direction', value: newVal })
|
||||
}
|
||||
|
||||
get availableEntryStyles() {
|
||||
return [
|
||||
{
|
||||
text: this.$t('Settings.ConsoleTab.EntryStyleDefault'),
|
||||
value: 'default'
|
||||
}, {
|
||||
text: this.$t('Settings.ConsoleTab.EntryStyleCompact'),
|
||||
value: 'compact'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
get entryStyle() {
|
||||
return this.$store.state.gui.console.entryStyle ?? 'default'
|
||||
}
|
||||
|
||||
set entryStyle(newVal) {
|
||||
this.$store.dispatch('gui/saveSetting', { name: 'console.entryStyle', value: newVal })
|
||||
}
|
||||
|
||||
get consoleHeight() {
|
||||
return this.$store.state.gui.console.height ?? 300
|
||||
}
|
||||
|
||||
@ -630,7 +630,10 @@
|
||||
"StoreButton": "Store filter",
|
||||
"UpdateButton": "Update filter",
|
||||
"EditHeadline": "Edit filter",
|
||||
"AddFilter": "add filter"
|
||||
"AddFilter": "add filter",
|
||||
"EntryStyle": "Entry-Design",
|
||||
"EntryStyleDefault": "default",
|
||||
"EntryStyleCompact": "compact"
|
||||
},
|
||||
"PresetsTab": {
|
||||
"PreheatPresets": "Presets",
|
||||
|
||||
@ -121,6 +121,7 @@ export const getDefaultState = (): GuiState => {
|
||||
console: {
|
||||
hideWaitTemperatures: true,
|
||||
direction: 'table',
|
||||
entryStyle: 'default',
|
||||
height: 300,
|
||||
customFilters: [],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user