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

refactor: change panel buttons to toolbar text/icon buttons

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-10-10 14:04:11 +02:00
parent 11c64e084e
commit 7ce9dc30a6
13 changed files with 80 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CommandHelpModal.vue
View File

@ -19,7 +19,7 @@
<template #default>
<panel :title="$t('Console.CommandList')" icon="mdi-help" card-class="command-help-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" text @click="isOpen = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-title>
<v-row>

2
src/components/TheSettingsMenu.vue
View File

@ -6,7 +6,7 @@
<v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile">
<panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" text @click="showSettings = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
<template v-if="isMobile">
<v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">
<v-tab

4
src/components/gcodeviewer/Viewer.vue
View File

@ -41,8 +41,8 @@
<div>
<panel :title="$t('GCodeViewer.Title')" icon="mdi-video-3d" card-class="gcode-viewer-panel">
<template v-slot:buttons>
<v-btn @click="reloadViewer" color="info" class="ml-3" v-show="reloadRequired" small>{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
<v-btn @click="resetCamera" class="px-2 minwidth-0 ml-3" color="grey darken-3" small dense><v-icon small>mdi-camera-retake</v-icon></v-btn>
<v-btn text @click="reloadViewer" color="info" class="ml-3" v-show="reloadRequired">{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
<v-btn icon @click="resetCamera"><v-icon>mdi-camera-retake</v-icon></v-btn>
</template>
<v-card-text>
<v-row>

56
src/components/panels/FarmPrinterPanel.vue
View File

@ -33,35 +33,33 @@
:loading="printer.socket.isConnecting"
:toolbar-color="isCurrentPrinter ? 'primary' : ''"
>
<template v-slot:buttons>
<v-item-group v-if="printer.socket.isConnected && printer_webcams.length">
<v-menu :offset-y="true" title="Webcam">
<template v-slot:activator="{ on, attrs }">
<v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on">
<v-icon small>mdi-webcam</v-icon>
<v-icon small>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list dense class="py-0">
<v-list-item link @click="currentCamName = 'off'">
<v-list-item-icon class="mr-0">
<v-icon small>mdi-webcam-off</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('Panels.FarmPrinterPanel.WebcamOff') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-for="webcam of printer_webcams" v-bind:key="webcam.index" link @click="currentCamName = webcam.name">
<v-list-item-icon class="mr-0">
<v-icon small>{{ webcam.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="webcam.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-item-group>
<template v-slot:buttons v-if="printer.socket.isConnected && printer_webcams.length">
<v-menu :offset-y="true" title="Webcam">
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on">
<v-icon small>mdi-webcam</v-icon>
<v-icon small>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list dense class="py-0">
<v-list-item link @click="currentCamName = 'off'">
<v-list-item-icon class="mr-0">
<v-icon small>mdi-webcam-off</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('Panels.FarmPrinterPanel.WebcamOff') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-for="webcam of printer_webcams" v-bind:key="webcam.index" link @click="currentCamName = webcam.name">
<v-list-item-icon class="mr-0">
<v-icon small>{{ webcam.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="webcam.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
<v-hover>
<template v-slot:default="{ hover }">

2
src/components/panels/HistoryListPanel.vue
View File

@ -142,7 +142,7 @@
<v-dialog v-model="detailsDialog.boolShow" :max-width="600" persistent>
<panel :title="$t('History.JobDetails')" icon="mdi-update" card-class="history-detail-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="detailsDialog.boolShow = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="detailsDialog.boolShow = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-text class="px-0">
<perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">

4
src/components/panels/Machine/SystemPanel.vue
View File

@ -100,7 +100,7 @@
<v-dialog v-model="mcuDetailsDialog.bool" :max-width="400" :max-height="500" scrollable>
<panel :title="mcuDetailsDialog.headline" icon="mdi-text-box-search-outline" card-class="machine-systemload-mcu-details-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="mcuDetailsDialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="mcuDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-text class="pt-5 px-0">
<perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">
@ -135,7 +135,7 @@
<v-dialog v-model="hostDetailsDialog.bool" :max-width="600" :max-height="500" scrollable>
<panel :title="$t('Machine.SystemPanel.HostDetails')" icon="mdi-text-box-search-outline" card-class="machine-systemload-host-details-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="hostDetailsDialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="hostDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-text class="pt-5 px-0">
<perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">

4
src/components/panels/Machine/UpdatePanel.vue
View File

@ -10,7 +10,7 @@
<template v-slot:buttons>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn small class="px-2 minwidth-0" color="primary" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon small>mdi-refresh</v-icon></v-btn>
<v-btn icon color="primary" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon>mdi-refresh</v-icon></v-btn>
</template>
<span>{{ $t('Machine.UpdatePanel.CheckForUpdates') }}</span>
</v-tooltip>
@ -110,7 +110,7 @@
<v-dialog v-model="commitsOverlay.bool" persistent max-width="800">
<panel :title="$t('Machine.UpdatePanel.Commits')" icon="mdi-update" :margin-bottom="false" card-class="machine-update-commits-dialog">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="commitsOverlay.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="commitsOverlay.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-text class="py-0 px-0">
<perfect-scrollbar style="max-height: 400px;" :options="{ suppressScrollX: true }">

5
src/components/panels/StatusPanel.vue
View File

@ -33,15 +33,14 @@
<v-btn
v-for="button in filteredToolbarButtons"
v-bind:key="button.loadingName"
class="px-2 minwidth-0 ml-3"
:color="button.color"
@click="button.click"
:loading="loadings.includes(button.loadingName)"
small
icon
>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on" small>{{ button.icon }}</v-icon>
<v-icon v-bind="attrs" v-on="on">{{ button.icon }}</v-icon>
</template>
<span>{{ button.text }}</span>
</v-tooltip>

2
src/components/panels/StatusPanelExcludeObjectDialog.vue
View File

@ -7,7 +7,7 @@
<v-dialog v-model="showDialog" width="900" persistent :fullscreen="isMobile">
<panel :title="$t('Panels.StatusPanel.ExcludeObject.ExcludeObject')" icon="mdi-selection-remove" card-class="exclude-object-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn small class="minwidth-0 px-2" text @click="hideDialog"><v-icon small>mdi-close-thick</v-icon></v-btn>
<v-btn icon @click="hideDialog"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-container>
<v-row>

23
src/components/panels/ToolsPanel.vue
View File

@ -33,7 +33,7 @@
<template v-slot:buttons>
<v-menu :offset-y="true" title="Preheat" v-if="presets.length">
<template v-slot:activator="{ on, attrs }">
<v-btn text small class="px-2 minwidth-0" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Panels.ToolsPanel.Presets") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
<v-btn text v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Panels.ToolsPanel.Presets") }} <v-icon>mdi-menu-down</v-icon></v-btn>
</template>
<v-list dense class="py-0">
<v-list-item v-for="preset of presets" v-bind:key="preset.index" link @click="preheat(preset)">
@ -57,10 +57,10 @@
</v-list-item>
</v-list>
</v-menu>
<v-btn small class="px-2 minwidth-0" text @click="cooldown()" v-if="presets.length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-btn>
<v-btn text @click="cooldown()" v-if="presets.length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-btn>
<v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.ToolsPanel.SetupTemperatures')">
<template v-slot:activator="{ on, attrs }">
<v-btn small class="px-2 minwidth-0" text v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
<v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
</template>
<v-list>
<v-list-item class="minHeight36">
@ -197,17 +197,10 @@
</v-container>
</v-card-text>
<v-dialog v-model="editHeater.bool" persistent :width="400">
<v-card dark>
<v-toolbar flat dense color="primary">
<v-toolbar-title>
<span class="subheading">
<v-icon left>mdi-{{ editHeater.icon }}</v-icon>
{{ convertName(editHeater.name) }}
</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn small class="minwidth-0" @click="editHeater.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
</v-toolbar>
<panel :title="convertName(editHeater.name)" :icon="'mdi-'+editHeater.icon" card-class="tools-edit-heater-dialog" :margin-bottom="false">
<template v-slot:buttons>
<v-btn icon @click="editHeater.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
</template>
<v-card-text class="pt-6">
<v-row v-for="dataset in editHeater.chartSeries" v-bind:key="dataset">
<v-col class="col-12 py-1">
@ -243,7 +236,7 @@
</v-col>
</v-row>
</v-card-text>
</v-card>
</panel>
</v-dialog>
</panel>
</template>

58
src/components/panels/WebcamPanel.vue
View File

@ -10,36 +10,34 @@
:collapsible="true"
card-class="webcam-panel"
>
<template v-slot:buttons>
<v-item-group v-if="webcams.length > 1">
<v-menu :offset-y="true" title="Webcam">
<template v-slot:activator="{ on, attrs }">
<v-btn small class="px-2 minwidth-0" text v-bind="attrs" v-on="on">
<v-icon small v-if="'icon' in currentCam" class="mr-2">{{ currentCam.icon }}</v-icon>
{{ 'name' in currentCam ? currentCam.name : "unknown" }}
<v-icon small>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list dense class="py-0">
<v-list-item link @click="currentCamName = 'all'">
<v-list-item-icon class="mr-0">
<v-icon small>mdi-view-grid</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-for="webcam of webcams" v-bind:key="webcam.name" link @click="currentCamName = webcam.name">
<v-list-item-icon class="mr-0">
<v-icon small>{{ webcam.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="webcam.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-item-group>
<template v-slot:buttons v-if="webcams.length > 1">
<v-menu :offset-y="true" title="Webcam">
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on">
<v-icon small v-if="'icon' in currentCam" class="mr-2">{{ currentCam.icon }}</v-icon>
{{ 'name' in currentCam ? currentCam.name : "unknown" }}
<v-icon small>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list dense class="py-0">
<v-list-item link @click="currentCamName = 'all'">
<v-list-item-icon class="mr-0">
<v-icon small>mdi-view-grid</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-for="webcam of webcams" v-bind:key="webcam.name" link @click="currentCamName = webcam.name">
<v-list-item-icon class="mr-0">
<v-icon small>{{ webcam.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="webcam.name"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
<v-card-text class="px-0 py-0 content d-inline-block">
<v-row>

4
src/components/panels/ZoffsetPanel.vue
View File

@ -13,10 +13,10 @@
>
<template v-slot:buttons>
<template v-if="z_gcode_offset !== 0">
<v-btn small class="px-2 minwidth-0" color="grey darken-3" @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon small>mdi-broom</v-icon></v-btn>
<v-btn icon @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon>mdi-broom</v-icon></v-btn>
<v-menu offset-y left v-if="existZOffsetApplyProbe && existZOffsetApplyEndstop">
<template v-slot:activator="{ on, attrs }">
<v-btn small class="px-2 minwidth-0 ml-3" color="primary" v-bind="attrs" v-on="on">{{ $t("Panels.ZoffsetPanel.Save") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
<v-btn text color="primary" v-bind="attrs" v-on="on">{{ $t("Panels.ZoffsetPanel.Save") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
</template>
<v-list dense class="py-0">
<v-list-item link @click="saveZOffsetToEndstop">

6
src/pages/Heightmap.vue
View File

@ -12,9 +12,9 @@
</template>
<template v-slot:buttons>
<v-btn text color="primary" class=" d-sm-none" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
<v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon small>mdi-home</v-icon></v-btn>
<v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
<v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
<v-btn icon @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon>mdi-home</v-icon></v-btn>
<v-btn text @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
<v-btn text @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
</template>
<v-card-text class="d-sm-none text-center pb-0">
<v-item-group class="v-btn-toggle" name="controllers">