fix: opening console from a collapsed state fires scroll event properly

fluidd-core · Jan 18, 2021 · 373aea3 · 373aea3
1 parent 9db9322
commit 373aea3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/src/components/cards/CollapsableCard.vue b/src/components/cards/CollapsableCard.vue
@@ -9,9 +9,7 @@
       <slot
         name="tabbed-title"
         v-bind:attrs="{
-          inLayout: isInLayout,
           enabled,
-          value: isCollapsed,
           isCollapsed
         }"
         v-bind:on="{
@@ -116,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
 @Component({})
 export default class ToolheadCard extends Vue {
@@ -190,12 +188,6 @@ export default class ToolheadCard extends Vue {
   @Prop({ type: Boolean, default: true })
   collapsable!: boolean
 
-  /**
-   * Whether this card is in a collapsed state or not.
-   */
-  @Prop({ type: Boolean, default: false })
-  collapsed!: boolean // Determines the default state.
-
   /**
    * Rounded
    */
@@ -291,7 +283,7 @@ export default class ToolheadCard extends Vue {
 
   get isCollapsed (): boolean {
     const collapsed = (this.$store.state.config.cardState[this.id] === undefined)
-      ? this.collapsed
+      ? false
       : this.$store.state.config.cardState[this.id]
 
     return collapsed
@@ -301,6 +293,11 @@ export default class ToolheadCard extends Vue {
     this.$store.dispatch('config/saveCardState', { [this.id]: val })
   }
 
+  @Watch('isCollapsed')
+  isCollapsedChange (val: boolean) {
+    this.$emit('collapsed', val)
+  }
+
   get isInLayout (): boolean {
     return (this.inLayout && this.draggable)
   }

diff --git a/src/components/cards/dashboard/CameraCard.vue b/src/components/cards/dashboard/CameraCard.vue
@@ -3,7 +3,6 @@
     title="Camera"
     icon="$camera"
     :lazy="false"
-    :collapsed="true"
     :draggable="true"
     :inLayout="inLayout"
     :enabled="enabled"

diff --git a/src/components/cards/dashboard/ConsoleCard.vue b/src/components/cards/dashboard/ConsoleCard.vue
@@ -7,11 +7,11 @@
     menuBreakpoint="none"
     menuIcon="$cog"
     :height="450"
-    :collapsed="true"
     :draggable="true"
     :inLayout="inLayout"
     :enabled="enabled"
-    @enabled="$emit('enabled', $event)">
+    @enabled="$emit('enabled', $event)"
+    @collapsed="handleCollapseChange">
 
     <template v-slot:menu>
       <v-checkbox
@@ -57,11 +57,20 @@ export default class ConsoleCard extends Mixins(UtilsMixin) {
     return (this.$store.state.config.layoutMode)
   }
 
+  get consoleComponent (): ConsoleWidget {
+    return this.$refs.console as ConsoleWidget
+  }
+
   @Watch('inLayout')
   inLayoutChange (inLayout: boolean) {
     if (!inLayout) {
-      const consoleComponent = this.$refs.console as ConsoleWidget
-      consoleComponent.scrollToEnd()
+      this.consoleComponent.scrollToEnd()
+    }
+  }
+
+  handleCollapseChange (collapsed: boolean) {
+    if (!collapsed) {
+      this.consoleComponent.scrollToEnd()
     }
   }
 

diff --git a/src/components/cards/dashboard/PrinterLimitsCard.vue b/src/components/cards/dashboard/PrinterLimitsCard.vue
@@ -2,7 +2,6 @@
   <collapsable-card
     title="Printer Limits"
     icon="$limits"
-    :collapsed="true"
     :draggable="true"
     :inLayout="inLayout"
     :enabled="enabled"

diff --git a/src/components/cards/dashboard/ToolsCard.vue b/src/components/cards/dashboard/ToolsCard.vue
@@ -20,16 +20,18 @@
         background-color="quaternary"
         class="rounded-t"
       >
-        <v-tab :key="'targets'" :disabled="attrs.inLayout || attrs.isCollapsed">
+        <v-tab :key="'targets'" :disabled="inLayout || attrs.isCollapsed">
           <v-icon left>$fire</v-icon>
           Thermals
         </v-tab>
-        <v-tab :key="'jobs'" v-if="klippyConnected && jobsInDash" :disabled="attrs.inLayout || attrs.isCollapsed">
+        <v-tab :key="'jobs'" v-if="klippyConnected && jobsInDash" :disabled="inLayout || attrs.isCollapsed">
           <v-icon left>$files</v-icon>
           Jobs
         </v-tab>
         <btn-collapse
           class="align-self-center ml-1 mr-4"
+          :value="attrs.isCollapsed"
+          :in-layout="inLayout"
           v-bind="attrs"
           v-on="on"
         >