Feat context menu remove widget

app/static/locales/en/app.json

@@ -59,8 +59,8 @@
     "move-widget-to": "Move widget to",
     "move-to": "Move to",
     "command-settings": "Command settings",
-    "edit-action": "sentences.edit-action",
-    "edit-styles": "sentences.edit-styles"
+    "edit-action": "Edit action",
+    "edit-styles": "Edit styles"
   },
   "words": {
     "settings": "settings",

app/static/locales/es/app.json

@@ -59,8 +59,8 @@
     "move-widget-to": "Mover el panel a",
     "move-to": "Mover a",
     "command-settings": "Ajustes de los comandos",
-    "edit-action": "sentences.edit-action",
-    "edit-styles": "sentences.edit-styles"
+    "edit-action": "Editar acción",
+    "edit-styles": "Editar apariencia"
   },
   "words": {
     "settings": "opciones",

app/static/locales/fr/app.json

@@ -59,8 +59,8 @@
     "move-widget-to": "Déplacer le bouton vers",
     "move-to": "Déplacer vers...",
     "command-settings": "Paramètres de commande",
-    "edit-action": "sentences.edit-action",
-    "edit-styles": "sentences.edit-styles"
+    "edit-action": "Editer l'action",
+    "edit-styles": "Editer l'apparence"
   },
   "words": {
     "settings": "options",

front-src/client/components/App/ContextMenu.svelte

@@ -6,7 +6,13 @@
   import AddWidgetItem from "./ContextMenu/AddWidgetItem.svelte";
 </script>
 
-<ContextMenu let:opened class="flex flex-col h-full">
+<ContextMenu
+  on:open
+  on:close
+  let:opened
+  {...$$restProps}
+  class="flex flex-col h-full"
+>
   <slot opened="{opened}" />
   <div slot="menu">
     <Menu>

front-src/client/components/Dashboard/Drawer.svelte

@@ -2,7 +2,7 @@
   import { electron } from "@/stores/app";
   import Donate from "../App/Donate.svelte";
   import { drawer, hide } from "@/stores/drawer";
-  import OpenEditMode from "./Drawer/OpenEditMode.svelte";
+  // import OpenEditMode from "./Drawer/OpenEditMode.svelte";
   import clickoutside from "@/libs/svelte/click-outside";
   import HelpLinks from "@/components/App/HelpLinks.svelte";
   import OpenOnStartup from "@/components/App/OpenOnStartup.svelte";
@@ -21,7 +21,7 @@
     style="top:{top}px; max-width:300px;"
     class="absolute z-50 right-0 bottom-0 flex flex-col bg-dark shadow overflow-y-auto"
   >
-    <OpenEditMode on:click="{hide}" />
+    <!-- <OpenEditMode on:click="{hide}" /> -->
     <LanguageSelect />
     <div class="flex flex-col divide-y divide-gray-800 divide-opacity-50">
       <OpenOnStartup />

front-src/client/components/Dashboard/Drawer/Toggle.svelte → front-src/client/components/Dashboard/DrawerToggle.svelte

@@ -2,11 +2,13 @@
   import { toggle } from "@/stores/drawer";
   import MdMenu from "svelte-icons/md/MdMenu.svelte";
   import Icon from "@/components/UI/Icon.svelte";
+
+  export let bgColor = "bg-primary";
 </script>
 
 <div
   on:click|stopPropagation="{toggle}"
-  class="p-2 bg-primary hover:bg-secondary cursor-pointer"
+  class="p-2 {bgColor} hover:bg-secondary cursor-pointer"
 >
   <Icon icon="{MdMenu}" />
 </div>

front-src/client/components/Dashboard/Topbar.svelte

@@ -1,18 +1,29 @@
 <script>
-  import DrawerToggle from "./Drawer/Toggle.svelte";
+  import { _ } from "@/libs/i18next";
+  import { editMode } from "@/stores/panels";
+  import DrawerToggle from "./DrawerToggle.svelte";
   import Flexbar from "@/components/UI/Flexbar.svelte";
   import OBSStatus from "@/components/OBS/Status.svelte";
   import OBSConnect from "@/components/OBS/Connect.svelte";
   import TwitchLogin from "@/components/Twitch/Login.svelte";
   import FlexbarSpacer from "@/components/UI/Flexbar/Spacer.svelte";
   import StreamStatus from "@/components/Twitch/StreamStatus.svelte";
+
+  $: bgColor = $editMode ? "bg-pink-700" : "bg-primary-darker";
+  $: toggleBgColor = $editMode ? "bg-pink-700" : "bg-primary";
 </script>
 
-<Flexbar bgColor="bg-primary-darker">
-  <OBSConnect />
-  <OBSStatus />
-  <StreamStatus />
-  <FlexbarSpacer />
+<Flexbar bgColor="{bgColor}">
+  {#if $editMode}
+    <div class="p-2 flex-auto font-bold text-center uppercase">
+      {_('sentences.edit-mode')}
+    </div>
+  {:else}
+    <OBSConnect />
+    <OBSStatus />
+    <StreamStatus />
+    <FlexbarSpacer />
+  {/if}
   <TwitchLogin />
-  <DrawerToggle />
+  <DrawerToggle bgColor="{toggleBgColor}" />
 </Flexbar>

front-src/client/components/Panels/Panel/Grid.svelte

@@ -1,43 +1,23 @@
 <script>
-  import {
-    gridOptions,
-    currentPanel,
-    duplicateWidget,
-    moveWidgetToPanel,
-  } from "@/stores/panels";
   import Grid from "svelte-grid";
   import { _ } from "@/libs/i18next";
   import Widget from "./Widget.svelte";
   import { update } from "@/libs/panels";
-  import MenuItem from "@/components/UI/MenuItem.svelte";
-  import Separator from "@/components/UI/Separator.svelte";
-  import ContextMenu from "@/components/App/ContextMenu.svelte";
-  import PanelSelectModal from "./Widget/PanelSelectModal.svelte";
-  import MdContentCopy from "svelte-icons/md/MdContentCopy.svelte";
-  import MdArrowForward from "svelte-icons/md/MdArrowForward.svelte";
+  import { onMount, onDestroy } from "svelte";
+  import { gridOptions, selectedWidget } from "@/stores/panels";
 
   export let panel;
 
-  let panelSelectModal = false;
-  let selectedItem = null;
-
   function onChange() {
     update(panel);
   }
 
-  async function duplicate(item) {
-    await duplicateWidget({ panel, item });
-  }
-
-  async function moveTo(item) {
-    panelSelectModal = true;
-    selectedItem = item;
+  function hide() {
+    $selectedWidget = null;
   }
 
-  async function onPanelSelect({ detail: targetPanel }) {
-    await moveWidgetToPanel({ panel, targetPanel, item: selectedItem });
-    $currentPanel = targetPanel;
-  }
+  onMount(() => document.addEventListener("mousedown", hide));
+  onDestroy(() => document.removeEventListener("mousedown", hide));
 </script>
 
 <style>
@@ -53,25 +33,5 @@
   on:adjust="{onChange}"
   bind:items="{panel.grid}"
 >
-  <ContextMenu>
-    <Widget item="{item}" panel="{panel}" />
-    <div slot="items">
-      <MenuItem
-        icon="{MdContentCopy}"
-        on:click="{duplicate.bind(null, item)}"
-        class="capitalize"
-      >
-        {_('words.duplicate')}
-      </MenuItem>
-      <MenuItem icon="{MdArrowForward}" on:click="{moveTo.bind(null, item)}">
-        {_('sentences.move-to')}
-      </MenuItem>
-      <Separator />
-    </div>
-  </ContextMenu>
+  <Widget panel="{panel}" item="{item}" />
 </Grid>
-
-<PanelSelectModal
-  bind:opened="{panelSelectModal}"
-  on:select="{onPanelSelect}"
-/>

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

@@ -1,48 +1,115 @@
 <script>
+  import {
+    panels,
+    currentPanel,
+    selectedWidget,
+    duplicateWidget,
+    moveWidgetToPanel,
+  } from "@/stores/panels";
   import { _ } from "@/libs/i18next";
-  import { editMode } from "@/stores/panels";
-  import widgets from "@/components/Widgets";
-  import EditMode from "./Widget/EditMode.svelte";
-  import MdAdd from "svelte-icons/md/MdAdd.svelte";
+  import Widget from "./Widget/Button.svelte";
+  import MdEdit from "svelte-icons/md/MdEdit.svelte";
+  import MdBrush from "svelte-icons/md/MdBrush.svelte";
+  import RemoveModal from "./Widget/RemoveModal.svelte";
+  import MenuItem from "@/components/UI/MenuItem.svelte";
+  import Separator from "@/components/UI/Separator.svelte";
+  import EditActionModal from "./Widget/EditActionModal.svelte";
+  import EditStylesModal from "./Widget/EditStylesModal.svelte";
+  import ContextMenu from "@/components/App/ContextMenu.svelte";
+  import PanelSelectModal from "./Widget/PanelSelectModal.svelte";
+  import MdContentCopy from "svelte-icons/md/MdContentCopy.svelte";
+  import MdArrowForward from "svelte-icons/md/MdArrowForward.svelte";
+  import MdDeleteForever from "svelte-icons/md/MdDeleteForever.svelte";
 
-  export let item;
   export let panel;
+  export let item;
+
+  let editActionModal = false;
+  let editStylesModal = false;
+  let panelSelectModal = false;
+  let removeWidgetModal = false;
 
-  $: component = widget.component;
   $: widget = panel.widgets.find((i) => i.id === item.id);
-  $: bgColor = `background-color: ${widget.backgroundColor};`;
-  $: bgImage = widget.backgroundImage
-    ? `background-image: url(files/${widget.backgroundImage});`
-    : "";
-  $: borders = widget.borders;
+
+  async function duplicate() {
+    const { widget } = await duplicateWidget({ panel, item });
+    $selectedWidget = widget;
+  }
+
+  function moveTo() {
+    panelSelectModal = true;
+  }
+
+  function remove() {
+    removeWidgetModal = true;
+  }
+
+  async function onPanelSelect({ detail: targetPanel }) {
+    await moveWidgetToPanel({ panel, targetPanel, item });
+    $currentPanel = targetPanel;
+    $selectedWidget = widget;
+  }
+
+  function editStyles() {
+    editStylesModal = true;
+  }
+
+  function editAction() {
+    editActionModal = true;
+  }
+
+  function stopPropagation(e) {
+    e.stopPropagation();
+  }
 </script>
 
-<div
-  class="h-full {borders} bg-center bg-no-repeat bg-cover"
-  style="{bgColor} {bgImage}"
->
-  {#if component}
-    <svelte:component
-      this="{widgets[component.name].Widget}"
-      widget="{widget}"
-    />
-  {/if}
-
-  {#if !component && $editMode}
-    <div class="absolute inset-0 pointer-events-none">
-      <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>
-    </div>
-    <EditMode panel="{panel}" widget="{widget}" />
-  {/if}
-
-  {#if $editMode}
-    <EditMode panel="{panel}" widget="{widget}" />
-  {/if}
-</div>
+<ContextMenu>
+  <Widget widget="{widget}" />
+  <div slot="items" on:mousedown|stopPropagation>
+    <MenuItem class="capitalize" icon="{MdEdit}" on:click="{editAction}">
+      {_('sentences.edit-action')}
+    </MenuItem>
+    <MenuItem class="capitalize" icon="{MdBrush}" on:click="{editStyles}">
+      {_('sentences.edit-styles')}
+    </MenuItem>
+    <MenuItem class="capitalize" icon="{MdContentCopy}" on:click="{duplicate}">
+      {_('words.duplicate')}
+    </MenuItem>
+    {#if $panels.length > 1}
+      <MenuItem icon="{MdArrowForward}" on:click="{moveTo}">
+        {_('sentences.move-to')}
+      </MenuItem>
+    {/if}
+    <MenuItem class="capitalize" icon="{MdDeleteForever}" on:click="{remove}">
+      {_('words.remove')}
+    </MenuItem>
+    <Separator />
+  </div>
+</ContextMenu>
+
+<EditStylesModal
+  panel="{panel}"
+  widget="{widget}"
+  bind:opened="{editStylesModal}"
+  on:mousedown="{stopPropagation}"
+/>
+
+<EditActionModal
+  panel="{panel}"
+  widget="{widget}"
+  bind:opened="{editActionModal}"
+  on:mousedown="{stopPropagation}"
+/>
+
+<PanelSelectModal
+  on:select="{onPanelSelect}"
+  bind:opened="{panelSelectModal}"
+  on:mousedown="{stopPropagation}"
+/>
+
+<RemoveModal
+  panel="{panel}"
+  widget="{widget}"
+  on:mousedown="{stopPropagation}"
+  bind:opened="{removeWidgetModal}"
+/>