Add close buttons to history & activity views (#1376)

sillsdev · Jan 15, 2025 · da83cd0 · da83cd0
1 parent df22ca0
commit da83cd0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {mdiHistory} from '@mdi/js';
+  import {mdiCloseCircle, mdiHistory} from '@mdi/js';
   import {
     cls,
     DurationUnits,
@@ -51,7 +51,10 @@
     </div>
   </Button>
   <Dialog {open} on:close={toggleOff} {loading} persistent={loading} class="w-[700px]">
-    <div slot="title">Activity</div>
+    <div slot="title">
+      Activity
+      <Button on:click={toggleOff} icon={mdiCloseCircle} class="float-end" rounded="full"></Button>
+    </div>
     <div class="m-6 grid gap-x-6 h-[50vh]" style="grid-template-columns: auto 4fr">
       <div class="flex flex-col gap-4 overflow-y-auto">
         <div class="border rounded-md">

diff --git a/frontend/viewer/src/lib/history/HistoryView.svelte b/frontend/viewer/src/lib/history/HistoryView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {mdiHistory} from '@mdi/js';
+  import {mdiCloseCircle, mdiHistory} from '@mdi/js';
   import {Button, cls, Dialog, Duration, DurationUnits, InfiniteScroll, ListItem, Toggle} from 'svelte-ux';
   import EntryEditor from '../entry-editor/object-editors/EntryEditor.svelte';
   import SenseEditor from '../entry-editor/object-editors/SenseEditor.svelte';
@@ -35,7 +35,10 @@
     </div>
   </Button>
   <Dialog {open} on:close={toggleOff} {loading} persistent={loading} class="w-[700px]">
-    <div slot="title">History</div>
+    <div slot="title">
+      History
+      <Button on:click={toggleOff} icon={mdiCloseCircle} class="float-end" rounded="full"></Button>
+    </div>
     <div class="m-6 grid gap-x-6 h-[50vh]" style="grid-template-columns: auto 4fr;">
 
       <div class="flex flex-col gap-4 overflow-y-auto">