Merge branch 'develop'

src/components/AppBar.vue

@@ -32,24 +32,11 @@
         <v-icon small class="mr-md-1">$tune</v-icon>
         <span>{{ $t('app.general.title.tune') }}</span>
       </btn>
-      <v-badge
-        bordered
-        color="warning"
-        left
-        overlap
-        :value="hasUpdates"
-        offset-y="17"
-        offset-x="22"
-        class="d-none d-md-flex mx-1"
-      >
-        <template v-slot:badge>
-          <strong class="black--text">!</strong>
-        </template>
-        <btn text to="/configure" color="" class="d-none d-md-flex mx-1">
-          <v-icon small class="mr-md-1">$cogs</v-icon>
-          <span>{{ $t('app.general.title.configure') }}</span>
-        </btn>
-      </v-badge>
+      <btn text to="/configure" color="" class="d-none d-md-flex mx-1">
+        <v-icon small right color="warning" v-if="hasUpdates">$info</v-icon>
+        <v-icon small class="mr-md-1" v-else>$cogs</v-icon>
+        <span>{{ $t('app.general.title.configure') }}</span>
+      </btn>
       <v-tooltip bottom v-if="socketConnected">
         <template v-slot:activator="{ on, attrs }">
           <btn

src/components/AppDrawer.vue

@@ -37,7 +37,10 @@
           <v-icon>$cogs</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>{{ $t('app.general.title.configure') }}</v-list-item-title>
+          <v-list-item-title>
+            {{ $t('app.general.title.configure') }}
+            <v-icon small right color="warning" v-if="hasUpdates">$info</v-icon>
+          </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-list-item to="/interface">
@@ -89,6 +92,10 @@ export default class AppDrawer extends Mixins(StateMixin) {
     return this.$store.getters['server/getInfo']
   }
 
+  get hasUpdates () {
+    return this.$store.getters['version/hasUpdates']
+  }
+
   close () {
     this.$emit('input', false)
   }

src/components/cards/CollapsableCard.vue

@@ -4,22 +4,7 @@
     :rounded="rounded"
     :loading="isLoading">
 
-    <div v-if="hasTabbedTitleSlot()" :class="{ 'draggable': isInLayout }">
-      <slot
-        name="tabbed-title"
-        v-bind:attrs="{
-          enabled,
-          isCollapsed
-        }"
-        v-bind:on="{
-          'input': onCollapseChange,
-          'layout-enabled': onLayoutEnabled
-        }">
-      </slot>
-    </div>
-
     <v-card-title
-      v-if="!hasTabbedTitleSlot()"
       class="card-title card-heading py-1"
       :class="{ 'draggable': isInLayout }"
     >
@@ -346,15 +331,6 @@ export default class ToolheadCard extends Vue {
     return !!this.$slots['collapse-button'] || !!this.$scopedSlots['collapse-button']
   }
 
-  /**
-   * To overide the title with tabs.
-   * Note, this is not a computed prop because
-   * slots are not reactive.
-   */
-  hasTabbedTitleSlot () {
-    return !!this.$slots['tabbed-title'] || !!this.$scopedSlots['tabbed-title']
-  }
-
   mounted () {
     this.$emit('collapsed', this.isCollapsed)
     if (this.hasCollapseButtonSlot) {

src/components/cards/dashboard/CameraCard.vue

@@ -15,7 +15,11 @@
       :camera="dialogState.camera"
     ></camera-dialog>
 
-    <v-row class="ma-2" justify="space-around">
+    <v-row
+      v-if="cameras.length > 1 || !fillSpace"
+      class="ma-2"
+      justify="space-around"
+    >
       <template v-for="camera in cameras">
         <v-col
           v-if="!collapsed"
@@ -28,6 +32,12 @@
         </v-col>
       </template>
     </v-row>
+    <camera
+      v-if="!collapsed && fillSpace && cameras.length === 1"
+      :camera="cameras[0]"
+      flat
+      @click="handleCameraClick(cameras[0])"
+    ></camera>
 
   </collapsable-card>
 </template>
@@ -56,10 +66,15 @@ export default class CameraCard extends Mixins(StateMixin) {
   collapsed = false
 
   get cols () {
+    if (this.fillSpace) return 12
     if (this.cameras.length <= 2) return 6
     if (this.cameras.length > 2) return 4
   }
 
+  get fillSpace (): boolean {
+    return this.$store.state.cameras.fillSpace && this.cameras.length === 1
+  }
+
   get inLayout (): boolean {
     return (this.$store.state.config.layoutMode)
   }

src/components/cards/dashboard/StatusCard.vue

@@ -62,7 +62,7 @@
 
       <btn
         v-if="!supportsHistoryPlugin && !printerPrinting && !printerPaused && filename"
-        @click="handleReprint(this.filename)"
+        @click="handleReprint(filename)"
         small
         class="ma-1">
         <v-icon small class="mr-1">$reprint</v-icon>
@@ -95,8 +95,6 @@ import { SocketActions } from '@/socketActions'
   }
 })
 export default class StatusCard extends Mixins(StateMixin, FilesMixin) {
-  showHistory = false
-
   get hidePrinterMenu () {
     if (!this.supportsHistoryPlugin) {
       return (!this.printerPrinting && !this.printerPaused && !this.filename)
@@ -150,7 +148,6 @@ export default class StatusCard extends Mixins(StateMixin, FilesMixin) {
   }
 
   handleReprint (filename: string) {
-    this.showHistory = false
     SocketActions.printerPrintStart(filename)
   }
 

src/components/dialogs/CameraDialog.vue

@@ -2,7 +2,7 @@
   <v-dialog
     @input="$emit('input', $event)"
     :value="value"
-    :width="640"
+    max-width="90vh"
   >
     <camera
       :camera="camera"

src/components/inputs/FluiddSetting.vue

@@ -8,8 +8,10 @@
   >
     <v-col :cols="cols[0]" class="setting-title">
       <slot name="title">{{ title }}</slot>
-      <div v-if="hasSubTitle">
-        <slot name="subtitle"></slot>
+      <div class="setting-sub-title grey--text" v-if="hasSubTitle">
+        <slot name="subtitle">
+            {{ subTitle }}
+        </slot>
       </div>
     </v-col>
     <v-col :cols="cols[1]" class="setting-controls" align-self="center">
@@ -26,6 +28,12 @@ export default class Setting extends Vue {
   @Prop({ type: String, default: '' })
   title!: string;
 
+  @Prop({ type: String })
+  subTitle!: string;
+
+  @Prop({ type: String })
+  help!: string;
+
   @Prop({ type: Number, default: 6 })
   rCols!: number;
 
@@ -38,7 +46,11 @@ export default class Setting extends Vue {
   }
 
   get hasSubTitle () {
-    return (this.$slots.subtitle || this.$scopedSlots.subtitle)
+    return (
+      this.$slots.subtitle ||
+      this.$scopedSlots.subtitle ||
+      this.subTitle
+    )
   }
 
   get classes () {
@@ -71,6 +83,11 @@ export default class Setting extends Vue {
     padding-bottom: 12px;
     padding-right: 12px;
   }
+
+  .col.setting-title > .setting-sub-title {
+    font-size: 0.875rem;
+  }
+
   .setting__link {
     cursor: pointer;
     user-select: none;

src/components/widgets/camera/Camera.vue

@@ -1,33 +1,36 @@
 <template>
-  <v-card
-    color="secondary"
-    :elevation="6"
-    v-on="$listeners"
-  >
-    <img
-      v-if="camera.type === 'mjpgstream' || camera.type === 'mjpgadaptive'"
-      :src="cameraUrl"
-      class="webcam"
-      :style="cameraTransformStyle"
-      @load="handleImgLoad"
-    />
-
-    <video
-      v-if="camera.type === 'ipstream'"
-      :src="cameraUrl"
-      autoplay
-      class="webcam"
-      :style="cameraTransformStyle"
-    />
-
-    <v-card-text
-      v-if="camera.name"
-      class="card-heading py-1 d-flex align-center justify-space-between"
+  <div>
+    <v-card
+      :elevation="(flat) ? 0 : 6"
+      v-on="$listeners"
+      color="secondary"
+      class="rounded-t-0"
     >
-      <span class="font-weight-light" style="font-size: 1.0rem;">{{ camera.name }}</span>
-      <small v-if="this.camera.type === 'mjpgadaptive' && this.time">FPS: {{ currentFPS }}</small>
-    </v-card-text>
-  </v-card>
+      <img
+        v-if="camera.type === 'mjpgstream' || camera.type === 'mjpgadaptive'"
+        :src="cameraUrl"
+        class="webcam"
+        :style="cameraTransformStyle"
+        @load="handleImgLoad"
+      />
+
+      <video
+        v-if="camera.type === 'ipstream'"
+        :src="cameraUrl"
+        autoplay
+        class="webcam"
+        :style="cameraTransformStyle"
+      />
+
+      <v-card-text
+        v-if="camera.name"
+        class="card-heading py-1 d-flex align-center justify-space-between"
+      >
+        <span class="font-weight-light" style="font-size: 1.0rem;">{{ camera.name }}</span>
+        <small v-if="this.camera.type === 'mjpgadaptive' && this.time">FPS: {{ currentFPS }}</small>
+      </v-card-text>
+    </v-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -42,6 +45,9 @@ export default class CameraCard extends Vue {
   @Prop({ type: Object, required: true })
   camera!: CameraConfig
 
+  @Prop({ type: Boolean, default: false })
+  flat!: boolean
+
   // Adaptive load counters
   request_start_time = performance.now()
   start_time = performance.now()

src/components/widgets/filesystem/FileSystem.vue

@@ -248,7 +248,11 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
 
   // Determine if we're waiting for a directory load on our current path.
   get filesLoading () {
-    return this.hasWait(`${Waits.onGetDirectory}${this.currentPath}`)
+    return this.hasWait([
+      `${Waits.onUpload}`,
+      Waits.onFileSystem,
+      `${Waits.onFileSystem}${this.currentPath}`
+    ])
   }
 
   // Get a list of currently active uploads.
@@ -459,7 +463,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     )
       .then(res => {
         if (res) {
-          if (file.type === 'directory') SocketActions.serverFilesDeleteDirectory(`${this.currentPath}/${file.name}`)
+          if (file.type === 'directory') SocketActions.serverFilesDeleteDirectory(`${this.currentPath}/${file.name}`, true)
           if (file.type === 'file') SocketActions.serverFilesDeleteFile(`${this.currentPath}/${file.name}`)
         }
       })

src/components/widgets/settings/CameraSettings.vue

@@ -18,6 +18,21 @@
         </btn>
       </fluidd-setting>
 
+      <v-divider></v-divider>
+
+      <fluidd-setting
+        :title="$t('app.setting.label.camera_fillspace')"
+        :r-cols="2"
+        :sub-title="$t('app.setting.label.camera_fillspace_help')"
+      >
+        <v-switch
+          @click.native.stop
+          v-model="fillSpace"
+          hide-details
+          class="mb-5"
+        ></v-switch>
+      </fluidd-setting>
+
       <v-divider v-if="cameras.length > 0"></v-divider>
 
       <template v-for="(camera, i) in cameras">
@@ -68,6 +83,14 @@ export default class CameraSettingsCard extends Vue {
     camera: null
   }
 
+  get fillSpace () {
+    return this.$store.state.cameras.fillSpace
+  }
+
+  set fillSpace (value: boolean) {
+    this.$store.dispatch('cameras/updateFillSpace', value)
+  }
+
   get cameras () {
     return this.$store.getters['cameras/getCameras']
   }

src/components/widgets/settings/TemperaturePresetSettings.vue

@@ -31,7 +31,7 @@
               v-for="(value, k) in preset.values"
               :key="k"
               v-show="value.active"
-              class="grey--text mr-2"
+              class="mr-2"
             >
               {{ k }}: {{ value.value }}<small>°C</small>
             </span>

src/components/widgets/settings/ThemePicker.vue

@@ -3,7 +3,6 @@
       v-model="menu"
       bottom
       left
-      offset-y
       :close-on-content-click="false"
     >
       <template v-slot:activator="{ on, attrs }">