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

feat: add a compact console style option

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-10-28 00:07:54 +02:00
parent ee18b4cc33
commit 5e0198e259
5 changed files with 120 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/console/ConsoleTableEntry.vue
View File

@ -3,16 +3,30 @@
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: .95em; font-size: .95em;
&+.consoleTableRow .col { &.default {
border-top: 1px solid rgba(255, 255, 255, 0.12); .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> </style>
<template> <template>
<v-row class="ma-0"> <v-row :class="'ma-0 '+entryStyle">
<v-col class="col-auto pr-0 py-2">{{ event.formatTime }}</v-col> <v-col class="col-auto pr-0">{{ event.formatTime }}</v-col>
<v-col class="py-2" :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col> <v-col :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
</v-row> </v-row>
</template> </template>
@ -27,6 +41,10 @@ export default class ConsoleTableEntry extends Vue {
@Prop({ required: true }) @Prop({ required: true })
readonly event!: ServerStateEvent readonly event!: ServerStateEvent
get entryStyle() {
return this.$store.state.gui.console.entryStyle ?? 'default'
}
colorConsoleMessage(item: ServerStateEvent): string { colorConsoleMessage(item: ServerStateEvent): string {
if (item.message.startsWith('!! ')) return 'red--text' if (item.message.startsWith('!! ')) return 'red--text'

125
src/components/panels/MiniconsolePanel.vue
View File

@ -17,63 +17,65 @@
:collapsible="true" :collapsible="true"
card-class="miniconsole-panel" card-class="miniconsole-panel"
> >
<v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'"> <div class="d-flex flex-column">
<v-row> <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
<v-col> <v-row>
<v-textarea <v-col>
v-model="gcode" <v-textarea
:items="items" v-model="gcode"
:label="$t('Panels.MiniconsolePanel.SendCode')" :items="items"
solo :label="$t('Panels.MiniconsolePanel.SendCode')"
class="gcode-command-field" solo
ref="gcodeCommandField" class="gcode-command-field"
autocomplete="off" ref="gcodeCommandField"
no-resize autocomplete="off"
auto-grow no-resize
:rows="rows" auto-grow
@keydown.enter.prevent.stop="doSend" :rows="rows"
@keyup.up="onKeyUp" @keydown.enter.prevent.stop="doSend"
@keyup.down="onKeyDown" @keyup.up="onKeyUp"
@keydown.tab="getAutocomplete" @keyup.down="onKeyDown"
hide-details @keydown.tab="getAutocomplete"
outlined hide-details
dense outlined
append-icon="mdi-send" dense
@click:append="doSend" append-icon="mdi-send"
></v-textarea> @click:append="doSend"
</v-col> ></v-textarea>
<v-col class="col-auto"> </v-col>
<command-help-modal @onCommand="gcode = $event" ></command-help-modal> <v-col class="col-auto">
<v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')"> <command-help-modal @onCommand="gcode = $event" ></command-help-modal>
<template v-slot:activator="{ on, attrs }"> <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
<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-slot:activator="{ on, attrs }">
</template> <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>
<v-list> </template>
<v-list-item class="minHeight36"> <v-list>
<v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox> <v-list-item class="minHeight36">
</v-list-item> <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
<v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index"> </v-list-item>
<v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox> <v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
</v-list-item> <v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
</v-list> </v-list-item>
</v-menu> </v-list>
</v-col> </v-menu>
</v-row> </v-col>
</v-card-text> </v-row>
<v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'"> </v-card-text>
<v-row> <v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
<v-col> <v-row>
<perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'"> <v-col>
<console-table ref="console" <perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'">
:events="events" <console-table ref="console"
:is-mini="true" :events="events"
@command-click="commandClick" :is-mini="true"
/> @command-click="commandClick"
<v-divider></v-divider> />
</perfect-scrollbar> <v-divider></v-divider>
</v-col> </perfect-scrollbar>
</v-row> </v-col>
</v-card-text> </v-row>
</v-card-text>
</div>
</panel> </panel>
</template> </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> </script>

24
src/components/settings/SettingsConsoleTab.vue
View File

@ -10,6 +10,10 @@
<v-select v-model="consoleDirection" :items="availableDirections" hide-details outlined dense></v-select> <v-select v-model="consoleDirection" :items="availableDirections" hide-details outlined dense></v-select>
</settings-row> </settings-row>
<v-divider class="my-2"></v-divider> <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')"> <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> <v-slider v-model="consoleHeightTmp" @change="updateConsoleHeight" hide-details :min="200" :max="900" :step="10" :label="consoleHeightTmp+'px'" ></v-slider>
</settings-row> </settings-row>
@ -135,6 +139,26 @@ export default class SettingsConsoleTab extends Mixins(BaseMixin) {
this.$store.dispatch('gui/saveSetting', { name: 'console.direction', value: newVal }) 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() { get consoleHeight() {
return this.$store.state.gui.console.height ?? 300 return this.$store.state.gui.console.height ?? 300
} }

5
src/locales/en.json
View File

@ -630,7 +630,10 @@
"StoreButton": "Store filter", "StoreButton": "Store filter",
"UpdateButton": "Update filter", "UpdateButton": "Update filter",
"EditHeadline": "Edit filter", "EditHeadline": "Edit filter",
"AddFilter": "add filter" "AddFilter": "add filter",
"EntryStyle": "Entry-Design",
"EntryStyleDefault": "default",
"EntryStyleCompact": "compact"
}, },
"PresetsTab": { "PresetsTab": {
"PreheatPresets": "Presets", "PreheatPresets": "Presets",

1
src/store/gui/index.ts
View File

@ -121,6 +121,7 @@ export const getDefaultState = (): GuiState => {
console: { console: {
hideWaitTemperatures: true, hideWaitTemperatures: true,
direction: 'table', direction: 'table',
entryStyle: 'default',
height: 300, height: 300,
customFilters: [], customFilters: [],
}, },