feat(ui): Use app ContextMenu

skarab42 · Jan 21, 2021 · e5ec039 · e5ec039
1 parent 8646a1b
commit e5ec039
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/front-src/client/components/Panels/Main.svelte b/front-src/client/components/Panels/Main.svelte
@@ -1,7 +1,17 @@
 <script>
+  import ContextMenu from "@/components/app/ContextMenu.svelte";
+  import MenuItem from "@/components/UI/MenuItem.svelte";
   import Topbar from "./Topbar.svelte";
   import Panel from "./Panel.svelte";
+  import { _ } from "@/libs/i18next";
 </script>
 
-<Topbar />
-<Panel />
+<ContextMenu>
+  <Topbar />
+  <Panel />
+  <div slot="items">
+    <MenuItem>prout 1</MenuItem>
+    <MenuItem>prout 2</MenuItem>
+    <MenuItem>prout 3</MenuItem>
+  </div>
+</ContextMenu>
diff --git a/front-src/client/components/Panels/Panel/Grid.svelte b/front-src/client/components/Panels/Panel/Grid.svelte
@@ -3,6 +3,8 @@
   import Widget from "./Widget.svelte";
   import { update } from "@/libs/panels";
   import { gridOptions } from "@/stores/panels";
+  import MenuItem from "@/components/UI/MenuItem.svelte";
+  import ContextMenu from "@/components/app/ContextMenu.svelte";
 
   export let panel;
 
@@ -24,5 +26,13 @@
   on:adjust="{onChange}"
   bind:items="{panel.grid}"
 >
-  <Widget item="{item}" panel="{panel}" />
+  <ContextMenu>
+    <Widget item="{item}" panel="{panel}" />
+    <div slot="items">
+      <MenuItem>{item.id}</MenuItem>
+      <MenuItem>kapoué 2</MenuItem>
+      <MenuItem>kapoué 3</MenuItem>
+      <MenuItem>kapoué 4</MenuItem>
+    </div>
+  </ContextMenu>
 </Grid>
diff --git a/front-src/client/components/Panels/Topbar/Selector.svelte b/front-src/client/components/Panels/Topbar/Selector.svelte
@@ -8,7 +8,7 @@
   import MdEdit from "svelte-icons/md/MdEdit.svelte";
   import { panels, currentPanel } from "@/stores/panels";
   import MenuItem from "@/components/UI/MenuItem.svelte";
-  import ContextMenu from "@/components/UI/ContextMenu.svelte";
+  import ContextMenu from "@/components/app/ContextMenu.svelte";
   import MdDeleteForever from "svelte-icons/md/MdDeleteForever.svelte";
   import HorizontalScroller from "@/components/UI/HorizontalScroller.svelte";
 
@@ -50,21 +50,19 @@
             panel="{panel}"
             on:move="{onMove}"
           />
-          <div slot="menu">
-            <Menu>
-              <MenuItem
-                icon="{MdEdit}"
-                on:click="{openRenameModal.bind(null, panel)}"
-              >
-                {_('words.rename')}
-              </MenuItem>
-              <MenuItem
-                icon="{MdDeleteForever}"
-                on:click="{openRemoveModal.bind(null, panel)}"
-              >
-                {_('words.remove')}
-              </MenuItem>
-            </Menu>
+          <div slot="items">
+            <MenuItem
+              icon="{MdEdit}"
+              on:click="{openRenameModal.bind(null, panel)}"
+            >
+              {_('words.rename')}
+            </MenuItem>
+            <MenuItem
+              icon="{MdDeleteForever}"
+              on:click="{openRemoveModal.bind(null, panel)}"
+            >
+              {_('words.remove')}
+            </MenuItem>
           </div>
         </ContextMenu>
       {/each}