feat: Set widget min size when selected (#184)

app/static/locales/en/app.json

@@ -175,7 +175,7 @@
     "check-disable-source-not-visible": "Check: Shutdown source when not visible.",
     "check-refresh-browser-on-activate": "Check: Refresh browser when scene becomes active.",
     "overlay-not-found": "Overlay not found",
-    "no-source-selected": "obs.no-source-selected"
+    "no-source-selected": "No source selected"
   },
   "anime": {
     "timeline": "Animation"

app/static/locales/es/app.json

@@ -174,7 +174,7 @@
     "check-disable-source-not-visible": "Marque la casilla: Desactivar la fuente en la que no este visible.",
     "check-refresh-browser-on-activate": "Marque la casilla: Recargar el navegador cuando la escena sea activa.",
     "overlay-not-found": "Overlay no encontrado",
-    "no-source-selected": "obs.no-source-selected"
+    "no-source-selected": "No se seleccionó ninguna fuente"
   },
   "anime": {
     "timeline": "Animación"

app/static/locales/fr/app.json

@@ -175,7 +175,7 @@
     "check-disable-source-not-visible": "Coche la case: Désactiver la source quand elle n'est pas visible.",
     "check-refresh-browser-on-activate": "Coche la case: Rafraîchir le navigateur lorsque la scène devient active.",
     "overlay-not-found": "Overlay non trouvé",
-    "no-source-selected": "obs.no-source-selected"
+    "no-source-selected": "Aucune source sélectionnée"
   },
   "anime": {
     "timeline": "Animation"

front-src/client/components/Panels/Panel/Widget/Button.svelte

@@ -32,14 +32,9 @@
 
   {#if $editMode}
     {#if !component}
-      <div class="absolute inset-0">
-        <div class="flex w-full h-full opacity-50 pb-2">
-          <MdAdd />
-        </div>
-        <div class="absolute bottom-0 w-full text-center">
-          <span
-            class="text-xs opacity-50"
-          >{_('sentences.double-click-to-edit')}</span>
+      <div class="flex absolute inset-0">
+        <div class="m-auto p-2 text-xs opacity-50">
+          {_('sentences.right-click-to-show-menu')}
         </div>
       </div>
     {/if}

front-src/client/components/Panels/Panel/Widget/Edit/Action.svelte

@@ -13,6 +13,7 @@
   import ActionEvents from "./ActionEvents.svelte";
   import Button from "@/components/UI/Button.svelte";
   import Select from "@/components/UI/Select.svelte";
+  import { findSpaceForWidget } from "@/stores/panels";
   import MdDelete from "svelte-icons/md/MdDeleteForever.svelte";
   import ConfirmModal from "@/components/UI/ConfirmModal.svelte";
 
@@ -58,6 +59,21 @@
   }
 
   function onComponentChange({ detail: name }) {
+    const { minSize } = widgets[name].config;
+
+    if (minSize) {
+      let oldSpace = {};
+      panel.grid = panel.grid.filter((space) => {
+        if (space.id === widget.id) {
+          oldSpace = space;
+          return false;
+        }
+        return true;
+      });
+      const space = findSpaceForWidget(panel, minSize);
+      panel.grid = [...panel.grid, { ...oldSpace, ...space }];
+    }
+
     change("component", cloneDeep(widgets[name].config));
   }
 

front-src/client/components/Widgets/Anime/Timeline/config.js

@@ -3,5 +3,9 @@ export default {
   label: "anime.timeline",
   hasTrigger: true,
   hasEvent: true,
+  minSize: {
+    w: 2,
+    h: 4,
+  },
   props: {},
 };

front-src/client/components/Widgets/OBS/GoToScene/config.js

@@ -3,6 +3,10 @@ export default {
   label: "obs.go-to-scene",
   hasTrigger: true,
   hasEvent: true,
+  minSize: {
+    w: 2,
+    h: 4,
+  },
   props: {
     scene: null,
   },

front-src/client/components/Widgets/OBS/SceneList/config.js

@@ -3,4 +3,8 @@ export default {
   label: "obs.scene-list",
   hasTrigger: true,
   hasEvent: ["onCommand"],
+  minSize: {
+    w: 2,
+    h: 4,
+  },
 };

front-src/client/components/Widgets/OBS/ToggleAudio/config.js

@@ -3,6 +3,10 @@ export default {
   label: "obs.toggle-audio",
   hasTrigger: true,
   hasEvent: true,
+  minSize: {
+    w: 2,
+    h: 4,
+  },
   props: {
     source: null,
   },

front-src/client/components/Widgets/OBS/ToggleScene/config.js

@@ -3,6 +3,10 @@ export default {
   label: "obs.toggle-scene",
   hasTrigger: true,
   hasEvent: true,
+  minSize: {
+    w: 2,
+    h: 4,
+  },
   props: {
     scene1: null,
     scene2: null,

front-src/client/components/Widgets/Twitch/Chat/config.js

@@ -3,6 +3,10 @@ export default {
   label: "twitch.chat",
   hasTrigger: false,
   hasEvent: false,
+  minSize: {
+    w: 3,
+    h: 8,
+  },
   props: {
     channel: null,
     theme: "dark",

front-src/client/components/Widgets/Twitch/Commands/config.js

@@ -3,4 +3,8 @@ export default {
   label: "twitch.commands",
   hasTrigger: false,
   hasEvent: false,
+  minSize: {
+    w: 3,
+    h: 4,
+  },
 };

front-src/client/components/Widgets/Twitch/Followers/config.js

@@ -3,4 +3,8 @@ export default {
   label: "twitch.followers",
   hasTrigger: false,
   hasEvent: false,
+  minSize: {
+    w: 3,
+    h: 4,
+  },
 };

front-src/client/components/Widgets/Twitch/Rewards/config.js

@@ -3,4 +3,8 @@ export default {
   label: "twitch.rewards",
   hasTrigger: false,
   hasEvent: false,
+  minSize: {
+    w: 3,
+    h: 4,
+  },
 };

front-src/client/components/Widgets/Twitch/Stream/config.js

@@ -3,6 +3,10 @@ export default {
   label: "twitch.stream",
   hasTrigger: false,
   hasEvent: false,
+  minSize: {
+    w: 3,
+    h: 4,
+  },
   props: {
     channel: null,
     autoplay: true,