Autosizing

src/dash/src/components/Widgets/Widget.vue

@@ -1,7 +1,8 @@
 <template>
   <v-card
     v-bind:style="widgetStyle"
-    v-bind:class="widgetData.style.border ? '' : 'hide-border'"
+    class="widget"
+    v-bind:class="!widgetData.style.border || widgetData.style.transparent ? 'hide-border' : ''"
     v-bind:draggable="$store.getters.editMode"
     v-on:dragstart="dragStartEvent"
     v-on:dragend="dragEndEvent"
@@ -115,4 +116,13 @@ export default {
   position: relative;
   z-index: 1;
 }
-</style>
+
+.widget-content img {
+  pointer-events: none;
+}
+
+.widget {
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>

src/dash/src/components/Wizards/Helpers/BackgroundStyle.vue

@@ -31,9 +31,7 @@ export default {
   }),
   mounted() {
     Communication.get("/api/dash/backgrounds", files => {
-      console.log(this.value);
       this.backgroundsList = files;
-      console.log(this.value);
     });
   },
   computed: {

src/dash/src/components/Wizards/Helpers/WidgetStyle.vue

@@ -5,23 +5,24 @@ Réglages communs aux widgets
   <div>
     <v-text-field v-model="formData.title" label="Titre" />
     <template v-if="$store.getters.dashType === 'manual'">
-      <v-slider v-model="formData.style.width" min="50" max="600" label="Largeur" thumb-label>
+      <v-checkbox v-model="autoSizing" label="Dimensions automatiques" />
+      <v-slider v-if="!autoSizing" v-model="formData.style.width" min="50" max="600" label="Largeur" thumb-label>
         <template v-slot:append>
           <v-text-field v-model="formData.style.width" class="mt-0 pt-0" hide-details single-line type="number" />
         </template>
       </v-slider>
-      <v-slider v-model="formData.style.height" min="50" max="600" label="Hauteur" thumb-label>
+      <v-slider v-if="!autoSizing" v-model="formData.style.height" min="50" max="600" label="Hauteur" thumb-label>
         <template v-slot:append>
           <v-text-field v-model="formData.style.height" class="mt-0 pt-0" hide-details single-line type="number" />
         </template>
       </v-slider>
     </template>
     <v-row>
       <v-col cols="6">
-        <v-checkbox v-model="formData.style.border" label="Afficher les bordures" />
+        <v-checkbox v-model="formData.style.transparent" label="Transparent" />
       </v-col>
       <v-col cols="6">
-        <v-checkbox v-model="formData.style.transparent" label="Transparent" />
+        <v-checkbox v-model="formData.style.border" v-if="!formData.style.transparent" label="Afficher les bordures" />
       </v-col>
     </v-row>
     <v-row v-if="!formData.style.transparent">
@@ -57,8 +58,17 @@ export default {
   },
   data: () => ({
     iconGroups: Data.iconGroups,
-    backgroundColor: "#FFFFFFFF"
+    backgroundColor: "#FFFFFFFF",
+    autoSizing: false
   }),
+  created() {
+    this.$eventBus.$on("previewWidthChange", previewSize => {
+      if (this.autoSizing) {
+        this.formData.style.width = previewSize.width;
+        this.formData.style.height = previewSize.height;
+      }
+    });
+  },
   watch: {
     backgroundColor: function(newBackroundColor) {
       this.formData.style.backgroundColor = newBackroundColor;

src/dash/src/components/Wizards/WidgetPreview.vue

@@ -2,9 +2,14 @@
 Container de prévisualisation du Widget
 -->
 <template>
-  <v-card v-bind:class="previewData.style.border ? '' : 'hide-border'" v-bind:style="widgetStyle">
-    <component v-bind:is="previewData.type" v-bind:widgetData="previewData" />
-  </v-card>
+  <div>
+    <v-card v-bind:class="!previewData.style.border || previewData.style.transparent ? 'hide-border' : ''" v-bind:style="widgetStyle">
+      <component v-bind:is="previewData.type" v-bind:widgetData="previewData" />
+    </v-card>
+    <div class="fake-preview">
+      <component v-bind:is="previewData.type" v-bind:widgetData="previewData" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -16,6 +21,41 @@ export default {
   props: {
     previewData: {}
   },
+  mounted() {
+    const resizeObserver = new ResizeObserver(entries => {
+      this.$eventBus.$emit("previewWidthChange", {
+        width: entries[0].contentRect.width * 1.05,
+        height: entries[0].contentRect.height
+      });
+    });
+    resizeObserver.observe(document.querySelectorAll(".fake-preview")[0]);
+  },
+  methods: {
+    sendAutoSize() {
+      const fakePreview = document.querySelectorAll(".fake-preview")[0];
+      let count = 5;
+      console.log(fakePreview.clientWidth);
+      console.log(fakePreview);
+      if (fakePreview !== undefined) {
+        this.$eventBus.$emit("previewWidthChange", {
+          width: fakePreview.clientWidth,
+          height: fakePreview.clientHeight
+        });
+      }
+      setTimeout(() => {
+        console.log(fakePreview.clientWidth);
+      }, 5000);
+      /*
+      console.log(
+        window.getComputedStyle(
+          document
+            .querySelectorAll(".fake-preview")[0]
+            .getPropertyValue("width")
+        )
+      );
+      */
+    }
+  },
   computed: {
     widgetStyle() {
       return {
@@ -34,9 +74,15 @@ export default {
 .v-card {
   margin-left: auto;
   margin-right: auto;
+  padding: 0;
 }
 
 .v-card.hide-border {
   box-shadow: none !important;
 }
+
+.fake-preview {
+  position: absolute;
+  visibility: hidden;
+}
 </style>