Skip to content

Commit

Permalink
refactor: some fixes in 2.1.0 beta and minor changes to ui (mainsail-…
Browse files Browse the repository at this point in the history
…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]>
  • Loading branch information
steadyjaw authored and dw-0 committed Dec 25, 2021
1 parent 9300a5d commit f331709
Show file tree
Hide file tree
Showing 23 changed files with 138 additions and 92 deletions.
2 changes: 1 addition & 1 deletion src/components/TheEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 11 additions & 8 deletions src/components/TheSelectPrinterDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/gcodeviewer/Viewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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')">
Expand Down
1 change: 1 addition & 0 deletions src/components/inputs/MotionSettingsInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
min="1"
@click:append="resetLimit"
hide-details
hide-spin-buttons
></v-text-field>
</form>
</template>
Expand Down
2 changes: 2 additions & 0 deletions src/components/inputs/ToolInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
item-text="value"
type="number"
@change="setTemps"
attach
hide-spin-buttons
></v-combobox>
</template>

Expand Down
28 changes: 25 additions & 3 deletions src/components/panels/ControlPanelExtruder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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 })
Expand Down
3 changes: 2 additions & 1 deletion src/components/panels/Machine/ConfigFilesPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/panels/Timelapse/TimelapseFilesPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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')">
Expand Down
82 changes: 42 additions & 40 deletions src/components/panels/Timelapse/TimelapseStatusPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -84,6 +80,7 @@
outlined
dense
hide-details
attach
></v-select>
</v-col>
<v-col class="col-4">
Expand All @@ -95,6 +92,7 @@
outlined
dense
hide-details
hide-spin-buttons
></v-text-field>
<v-text-field
:label="$t('Timelapse.MaxFramerate')"
Expand All @@ -103,6 +101,7 @@
outlined
dense
hide-details
hide-spin-buttons
class="mt-3"
></v-text-field>
<v-text-field
Expand All @@ -112,6 +111,7 @@
outlined
dense
hide-details
hide-spin-buttons
class="mt-3"
></v-text-field>
</template>
Expand All @@ -123,6 +123,7 @@
outlined
dense
hide-details
hide-spin-buttons
></v-text-field>
</template>
<v-text-field
Expand All @@ -132,6 +133,7 @@
outlined
dense
hide-details
hide-spin-buttons
class="mt-3"
></v-text-field>
</v-col>
Expand Down
Loading

0 comments on commit f331709

Please sign in to comment.