refactor: some fixes in 2.1.0 beta and minor changes to ui (mainsail-…

…crew#457) * fix: truncated settings menu Signed-off-by: steadyjaw <[email protected]> * refactor: change probe chips to label Signed-off-by: steadyjaw <[email protected]> * refactor(timelapse): change button color and make responsive Signed-off-by: steadyjaw <[email protected]> * refactor: change display helpers of some buttons * fix(mainsail-crew#390): encodeURI of thumbnails in files page Signed-off-by: steadyjaw <[email protected]> * fix: responsivity of timelapse-page Signed-off-by: steadyjaw <[email protected]> * refactor(timelapse): more responsiveness Signed-off-by: steadyjaw <[email protected]> * refactor(timelapse): no frames found visibility Signed-off-by: steadyjaw <[email protected]> * refactor: tooltip on disabled retract /extrude buttons * refactor(editor): show "read-only" in title if file is not writable * fix: visibility of reload button Signed-off-by: steadyjaw <[email protected]> * refactor: select printer dialog new ui style Signed-off-by: steadyjaw <[email protected]> * refactor: add attach prop to inputs w dropdowns Signed-off-by: steadyjaw <[email protected]> * fix: paddings of panels on spec. viewports Signed-off-by: steadyjaw <[email protected]> * refactor: hide spin buttons on number inputs Signed-off-by: steadyjaw <[email protected]> * refactor: hide-spin-buttons after merging timelapseTab Signed-off-by: steadyjaw <[email protected]>
dw-0 · Dec 25, 2021 · f331709 · f331709
1 parent 9300a5d
commit f331709
Show file tree

Hide file tree

Showing 23 changed files with 138 additions and 92 deletions.
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
@@ -11,7 +11,7 @@
             @close="close"
             @keydown.esc="escClose"
         >
-            <panel card-class="editor-dialog" icon="mdi-file-document-edit-outline" :title="(filepath ? filepath.slice(1)+'/': '')+filename+' '+changed">
+            <panel card-class="editor-dialog" :icon="(isWriteable ? ' mdi-file-document-edit-outline' : 'mdi-file-document-outline')" :title="(filepath ? filepath.slice(1)+'/': '')+filename+' '+(isWriteable ? changed : '('+$t('Editor.FileReadOnly')+')')">
                 <template v-slot:buttons>
                     <v-btn text tile href="https://www.klipper3d.org/Config_Reference.html" v-if="restartServiceName === 'klipper'" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Editor.ConfigReference') }}</v-btn>
                     <v-btn v-if="isWriteable" text tile :color="restartServiceName === null ? 'primary' : ''" @click="save(null)" ><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Editor.SaveClose') }}</span></v-btn>

diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue
@@ -4,17 +4,17 @@
 
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <panel card-class="select-printer-dialog" icon="mdi-connection" :title="panelTitle" :margin-bottom="false" toolbar-color="primary">
+        <panel card-class="select-printer-dialog" icon="mdi-connection" :title="panelTitle" :margin-bottom="false" toolbar-color="toolbar">
             <template v-slot:buttons>
                 <template v-if="!isConnecting && !connectingFailed">
                     <template v-if="dialogEditPrinter.bool"><v-btn icon tile class="minwidth-0" @click="dialogEditPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
                     <template v-else-if="dialogAddPrinter.bool"><v-btn icon tile class="minwidth-0" v-if="dialogAddPrinter.bool" @click="dialogAddPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
-                    <template v-else-if="printers.length > 0"><v-btn icon tile class="minwidth-0" @click="checkPrinters"><v-icon>mdi-sync</v-icon></v-btn></template>
+                    <template v-else-if="printers.length > 0"><v-btn icon tile class="minwidth-0" @click="checkPrinters" color="primary"><v-icon>mdi-sync</v-icon></v-btn></template>
                 </template>
             </template>
             <template v-if="isConnecting">
                 <v-card-text>
-                    <v-progress-linear color="white" indeterminate></v-progress-linear>
+                    <v-progress-linear color="primary" indeterminate></v-progress-linear>
                 </v-card-text>
             </template>
             <template v-else-if="!isConnecting && connectingFailed">
@@ -103,8 +103,9 @@
                 <v-card-actions>
                     <v-btn
                         color="red"
-                        text
-                        class="minwidth-0"
+                        icon
+                        tile
+                        class="minwidth-0 rounded"
                         @click="delPrinter"
                     >
                         <v-icon small>mdi-delete</v-icon>
@@ -124,21 +125,23 @@
                     <v-row v-if="printers.length">
                         <v-col class="px-6">
                             <v-row v-for="(printer, index) in printers" v-bind:key="index">
-                                <v-col class="rounded transition-swing secondary py-2 px-2 mb-2" style="cursor: pointer;" @click="connect(printer)">
+                                <v-col class="rounded transition-swing toolbar py-2 px-2 mb-2 overflow-hidden" style="cursor: pointer;" @click="connect(printer)">
                                     <v-row align="center">
                                         <v-col class="col-auto pr-0">
                                             <v-progress-circular
                                                 indeterminate
                                                 color="primary"
                                                 v-if="printer.socket.isConnecting"
+                                                size="24"
+                                                width="2.5"
                                             ></v-progress-circular>
                                             <v-icon
                                                 :color="printer.socket.isConnected ? 'green' : 'red'"
                                                 v-if="!printer.socket.isConnecting"
                                             >mdi-{{ printer.socket.isConnected ? 'checkbox-marked-circle' : 'cancel' }}</v-icon>
                                         </v-col>
                                         <v-col>{{ getPrinterName(printer.id) }}</v-col>
-                                        <v-col class="col-auto"><v-btn small class="minwidth-0" v-on:click.stop.prevent="editPrinter(printer)"><v-icon small>mdi-pencil</v-icon></v-btn></v-col>
+                                        <v-col class="col-auto pa-0"><v-btn tile text icon large class="mr-1" v-on:click.stop.prevent="editPrinter(printer)"><v-icon small>mdi-pencil</v-icon></v-btn></v-col>
                                     </v-row>
                                 </v-col>
                             </v-row>
@@ -153,7 +156,7 @@
                     </v-row>
                     <v-row>
                         <v-col class="text-center mt-0">
-                            <v-btn @click="dialogAddPrinter.bool = true">{{ $t("SelectPrinterDialog.AddPrinter") }}</v-btn>
+                            <v-btn text color="primary" @click="dialogAddPrinter.bool = true">{{ $t("SelectPrinterDialog.AddPrinter") }}</v-btn>
                         </v-col>
                     </v-row>
                 </v-card-text>

diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
@@ -74,7 +74,7 @@
                 </v-row>
                 <v-row class="mt-0">
                     <v-col>
-                        <v-select :items="colorModes" :label="$t('GCodeViewer.ColorMode')" item-text="text" dense v-model="colorMode" hide-details outlined></v-select>
+                        <v-select :items="colorModes" :label="$t('GCodeViewer.ColorMode')" item-text="text" dense v-model="colorMode" hide-details outlined attach></v-select>
                     </v-col>
                     <v-col class="text-center">
                         <template v-if="loadedFile === null">
@@ -89,7 +89,7 @@
                     <v-col>
                         <v-row>
                             <v-col>
-                                <v-select :items="renderQualities" :label="$t('GCodeViewer.RenderQuality')" item-text="label" dense v-model="renderQuality" hide-details outlined></v-select>
+                                <v-select :items="renderQualities" :label="$t('GCodeViewer.RenderQuality')" item-text="label" dense v-model="renderQuality" hide-details outlined attach></v-select>
                             </v-col>
                             <v-col class="col-auto">
                                 <v-menu :offset-y="true" :offset-x="true" top :close-on-content-click="false" :title="$t('Files.SetupCurrentList')">

diff --git a/src/components/inputs/MotionSettingsInput.vue b/src/components/inputs/MotionSettingsInput.vue
@@ -16,6 +16,7 @@
             min="1"
             @click:append="resetLimit"
             hide-details
+            hide-spin-buttons
         ></v-text-field>
     </form>
 </template>

diff --git a/src/components/inputs/ToolInput.vue b/src/components/inputs/ToolInput.vue
@@ -27,6 +27,8 @@
         item-text="value"
         type="number"
         @change="setTemps"
+        attach
+        hide-spin-buttons
     ></v-combobox>
 </template>
 

diff --git a/src/components/panels/ControlPanelExtruder.vue b/src/components/panels/ControlPanelExtruder.vue
@@ -37,7 +37,7 @@
             <v-col class="col col-md-6 pt-2">
                 <span class="text--disabled" style="font-size: .9em">{{ $t("Panels.ControlPanel.FeedrateIn") }} [mm/s]</span>
                 <v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
-                    <v-tooltip top v-for="rate in feedratesSorted" v-bind:key="rate">
+                    <v-tooltip top v-for="rate in feedratesSorted" v-bind:key="rate" color="panel">
                         <template v-slot:activator="{ on, attrs }">
                             <v-btn v-bind="attrs" v-on="on" @click="setFeedrate(rate)" dense :class="(rate === currentFeedRate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
                         </template>
@@ -48,8 +48,26 @@
         </v-row>
         <v-row class="">
             <v-col class="col text-center pt-0">
-                <v-btn small @click="sendRetract()" class="mx-3" :loading="loadings.includes('btnRetract')" :disabled="!boolExtrudePossible"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> {{ $t('Panels.ControlPanel.Retract') }}</v-btn>
-                <v-btn small @click="sendDetract()" class="mx-3" :loading="loadings.includes('btnDetract')" :disabled="!boolExtrudePossible"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> {{ $t('Panels.ControlPanel.Extrude') }}</v-btn>
+                <v-tooltip top :disabled="boolExtrudePossible" color="panel">
+                    <template v-slot:activator="{ on }">
+                        <div v-on="on" class="d-inline-block">
+                            <v-btn small @click="sendRetract()" class="mx-3" :loading="loadings.includes('btnRetract')" :disabled="!boolExtrudePossible"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> {{ $t('Panels.ControlPanel.Retract') }}</v-btn>
+                        </div>
+                    </template>
+                    <span>
+                        {{ $t("Panels.ControlPanel.HotendTooCold") }} {{ minExtrudeTemp }} °C
+                    </span>
+                </v-tooltip>
+                <v-tooltip top :disabled="boolExtrudePossible" color="panel">
+                    <template v-slot:activator="{ on }">
+                        <div v-on="on" class="d-inline-block">
+                            <v-btn small @click="sendDetract()" class="mx-3" :loading="loadings.includes('btnDetract')" :disabled="!boolExtrudePossible"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> {{ $t('Panels.ControlPanel.Extrude') }}</v-btn>
+                        </div>
+                    </template>
+                    <span>
+                        {{ $t("Panels.ControlPanel.HotendTooCold") }} {{ minExtrudeTemp }} °C
+                    </span>
+                </v-tooltip>
             </v-col>
         </v-row>
     </div>
@@ -102,6 +120,10 @@ export default class ControlPanelExtruder extends Mixins(BaseMixin) {
         return this.$store.getters['printer/getExtrudePossible']
     }
 
+    get minExtrudeTemp() {
+        return this.$store.state.printer.configfile.config.extruder.min_extrude_temp
+    }
+
     doSend(gcode: string) {
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })

diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -16,6 +16,7 @@
                             hide-details
                             dense
                             @change="changeRoot"
+                            attach
                         ></v-select>
                     </v-col>
                     <v-col class="col col-lg-auto pl-lg-0 text-right">
@@ -34,7 +35,7 @@
                                 <span>{{ button.text }}</span>
                             </v-tooltip>
                         </v-btn>
-                        <v-menu :offset-y="true" :title="$t('Machine.ConfigFilesPanel.SetupCurrentList')">
+                        <v-menu :offset-y="true" :title="$t('Machine.ConfigFilesPanel.SetupCurrentList')" attach>
                             <template v-slot:activator="{ on, attrs }">
                                 <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
                             </template>

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -82,7 +82,7 @@
                 </template>
 
                 <template #no-data>
-                    <div class="text-center">{{ $t('Timelapse.Empty') }}</div>
+                    <div class="text-center font-italic">{{ $t('Timelapse.Empty') }}</div>
                 </template>
 
                 <template slot="body.prepend" v-if="(currentPath !== 'timelapse')">

diff --git a/src/components/panels/Timelapse/TimelapseStatusPanel.vue b/src/components/panels/Timelapse/TimelapseStatusPanel.vue
@@ -24,47 +24,43 @@
                         </v-row>
                     </v-card-text>
                 </v-col>
-                <v-col class="col-12 col-sm-6 col-md-12 pt-3 pt-md-0 text--secondary" align-self="center">
+                <v-col class="col-12 col-sm-6 col-md-12 pt-3 pt-md-0 text--secondary" align-self="center" v-if="framesCount > 0">
                     <v-card-text :class="framesCount ? 'pt-0' : ''">
-                        <v-row v-if="framesCount > 0">
-                            <v-col>
-                                <template v-if="framesCount > 0">
-                                    <settings-row :title="$t('Timelapse.Frames')">
-                                        {{ framesCount }}
-                                    </settings-row>
-                                    <v-divider class="my-2"></v-divider>
-                                    <settings-row :title="$t('Timelapse.EstimatedLength')" :dynamicSlotWidth="true">
-                                        {{ estimatedVideoLength }}
-                                    </settings-row>
-                                </template>
-                                <template v-if="['printing', 'paused'].includes(printer_state)">
-                                    <v-divider class="my-2"></v-divider>
-                                    <settings-row :title="$t('Timelapse.Enabled')" :dynamicSlotWidth="true">
-                                        <v-switch v-model="enabled" hide-details class="mt-0"></v-switch>
-                                    </settings-row>
-                                    <template v-if="enabled">
-                                        <v-divider class="my-2" v-if="framesCount > 0"></v-divider>
-                                        <settings-row :title="$t('Timelapse.Autorender')" :dynamicSlotWidth="true">
-                                            <v-switch v-model="autorender" hide-details class="mt-0"></v-switch>
-                                        </settings-row>
-                                    </template>
-                                </template>
-                                <template v-if="framesCount > 0 && !['printing', 'paused'].includes(printer_state)">
-                                    <v-divider class="mt-2 mb-4"></v-divider>
-                                    <v-row>
-                                        <v-col class="text-center">
-                                            <v-btn text color="primary" :disabled="disableRenderButton" @click="boolDialogRendersettings = true">{{ $t('Timelapse.Render') }}</v-btn>
-                                            <v-btn text color="primary" @click="saveFrames" :loading="loadings.includes('timelapse_saveframes')">{{ $t('Timelapse.SaveFrames') }}</v-btn>
-                                        </v-col>
-                                    </v-row>
-                                </template>
-                            </v-col>
-                        </v-row>
-                        <v-row v-else>
-                            <v-col>
-                                <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
-                            </v-col>
-                        </v-row>
+                        <template v-if="framesCount > 0">
+                            <settings-row :title="$t('Timelapse.Frames')">
+                                {{ framesCount }}
+                            </settings-row>
+                            <v-divider class="my-2"></v-divider>
+                            <settings-row :title="$t('Timelapse.EstimatedLength')" :dynamicSlotWidth="true">
+                                {{ estimatedVideoLength }}
+                            </settings-row>
+                        </template>
+                        <template v-if="['printing', 'paused'].includes(printer_state)">
+                            <v-divider class="my-2"></v-divider>
+                            <settings-row :title="$t('Timelapse.Enabled')" :dynamicSlotWidth="true">
+                                <v-switch v-model="enabled" hide-details class="mt-0"></v-switch>
+                            </settings-row>
+                            <template v-if="enabled">
+                                <v-divider class="my-2" v-if="framesCount > 0"></v-divider>
+                                <settings-row :title="$t('Timelapse.Autorender')" :dynamicSlotWidth="true">
+                                    <v-switch v-model="autorender" hide-details class="mt-0"></v-switch>
+                                </settings-row>
+                            </template>
+                        </template>
+                        <template v-if="framesCount > 0 && !['printing', 'paused'].includes(printer_state)">
+                            <v-divider class="mt-2 mb-4"></v-divider>
+                            <v-row>
+                                <v-col class="text-center">
+                                    <v-btn text color="primary" :disabled="disableRenderButton" @click="boolDialogRendersettings = true">{{ $t('Timelapse.Render') }}</v-btn>
+                                    <v-btn text color="primary" @click="saveFrames" :loading="loadings.includes('timelapse_saveframes')">{{ $t('Timelapse.SaveFrames') }}</v-btn>
+                                </v-col>
+                            </v-row>
+                        </template>
+                    </v-card-text>
+                </v-col>
+                <v-col class="col-12 text--secondary" align-self="center" v-else>
+                    <v-card-text class="pt-0 pt-md-3">
+                        <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
                     </v-card-text>
                 </v-col>
             </v-row>
@@ -84,6 +80,7 @@
                                 outlined
                                 dense
                                 hide-details
+                                attach
                             ></v-select>
                         </v-col>
                         <v-col class="col-4">
@@ -95,6 +92,7 @@
                                     outlined
                                     dense
                                     hide-details
+                                    hide-spin-buttons
                                 ></v-text-field>
                                 <v-text-field
                                     :label="$t('Timelapse.MaxFramerate')"
@@ -103,6 +101,7 @@
                                     outlined
                                     dense
                                     hide-details
+                                    hide-spin-buttons
                                     class="mt-3"
                                 ></v-text-field>
                                 <v-text-field
@@ -112,6 +111,7 @@
                                     outlined
                                     dense
                                     hide-details
+                                    hide-spin-buttons
                                     class="mt-3"
                                 ></v-text-field>
                             </template>
@@ -123,6 +123,7 @@
                                     outlined
                                     dense
                                     hide-details
+                                    hide-spin-buttons
                                 ></v-text-field>
                             </template>
                             <v-text-field
@@ -132,6 +133,7 @@
                                 outlined
                                 dense
                                 hide-details
+                                hide-spin-buttons
                                 class="mt-3"
                             ></v-text-field>
                         </v-col>