feat: new AppFocusableContainer component (#942)

Signed-off-by: Pedro Lamas <[email protected]>

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     AppCodeView: typeof import('./src/components/ui/AppCodeView.vue')['default']
     AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']
     AppColumnPicker: typeof import('./src/components/ui/AppColumnPicker.vue')['default']
+    AppFocusableContainer: typeof import('./src/components/ui/AppFocusableContainer.vue')['default']
     AppFooter: typeof import('./src/components/layout/AppFooter.vue')['default']
     AppIcon: typeof import('./src/components/ui/AppIcon.vue')['default']
     AppInlineHelp: typeof import('./src/components/ui/AppInlineHelp.vue')['default']
@@ -76,6 +77,7 @@ declare module 'vue' {
     VFooter: typeof import('vuetify/lib')['VFooter']
     VForm: typeof import('vuetify/lib')['VForm']
     VIcon: typeof import('vuetify/lib')['VIcon']
+    VInput: typeof import('vuetify/lib')['VInput']
     VItemGroup: typeof import('vuetify/lib')['VItemGroup']
     VLayout: typeof import('vuetify/lib')['VLayout']
     VList: typeof import('vuetify/lib')['VList']

src/components/ui/AppFocusableContainer.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    @focusin="setFocus(true)"
+    @focusout="setFocus(false)"
+  >
+    <v-input
+      class="v-text-field v-text-field--enclosed v-text-field--outlined"
+      :class="{
+        'v-input--is-focused': hasFocus,
+        'primary--text': hasFocus
+      }"
+      hide-details
+    >
+      <slot />
+      <fieldset aria-hidden="true" />
+    </v-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class AppFocusableContainer extends Vue {
+  hasFocus = false
+
+  setFocus (value: boolean) {
+    this.hasFocus = value
+
+    if (value) {
+      this.$emit('focus')
+    } else {
+      this.$emit('blur')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  :deep(.v-input__slot) {
+    padding: 0px !important;
+    outline: none !important;
+    cursor: default !important;
+
+    fieldset {
+      top: 0px !important;
+    }
+  }
+</style>

src/components/widgets/gcode-preview/GcodePreview.vue

@@ -1,6 +1,5 @@
 <template>
-  <div
-    :class="{container: true, dark: themeIsDark}"
+  <app-focusable-container
     @focus="focused = true"
     @blur="focused = false"
   >
@@ -199,7 +198,7 @@
         />
       </g>
     </svg>
-  </div>
+  </app-focusable-container>
 </template>
 
 <script lang="ts">
@@ -548,32 +547,19 @@ export default class GcodePreview extends Mixins(StateMixin) {
 </script>
 
 <style lang="scss" scoped>
-.layer > path {
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.container {
-  outline: none;
-  overflow: hidden;
-  border: 1px solid black;
-  max-height: calc(100vh * 2/3);
-  aspect-ratio: 1;
-
-  &:focus {
-    border-color: grey;
-    box-shadow: 0 0 4px 0 black;
-  }
-
-  .dark {
-    &:focus {
-      box-shadow: 0 0 4px 0 lightgrey;
+  :deep(.v-input__slot) {
+    overflow: hidden;
+    max-height: calc(100vh * 2/3);
+    aspect-ratio: 1;
+
+    svg {
+      shape-rendering: geometricPrecision;
+
+      .layer > path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
     }
   }
-}
-
-svg {
-  shape-rendering: geometricPrecision;
-}
 </style>