Fixed up board-settings menu

holochain-apps · Dec 19, 2023 · 3cc6d6a · 3cc6d6a
1 parent 675d756
commit 3cc6d6a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 29 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/ui/src/BoardMenu.svelte b/ui/src/BoardMenu.svelte
@@ -2,7 +2,7 @@
     import { getContext } from "svelte";
     import type { KanDoStore } from "./store";
     import type {  EntryHash } from '@holochain/client';
-    import ParticipantsDialog from './ParticipantsDialog.svelte';
+    import GroupParticipants from './GroupParticipants.svelte';
     import NewBoardDialog from './NewBoardDialog.svelte';
     import SvgIcon from "./SvgIcon.svelte";
     import AboutDialog from "./AboutDialog.svelte";
@@ -41,14 +41,13 @@
 
     let aboutDialog
 
-    let participantsDialog
 </script>
 
 <AboutDialog bind:this={aboutDialog} />
 <div class="board-menu"
     class:wide={wide} >
 
-    <ParticipantsDialog bind:this={participantsDialog} />
+    <GroupParticipants/>
     <div style="display:flex;flex-direction: row;">
     <div class="new-board" on:click={()=>newBoardDialog.open()} title="New Board"><SvgIcon color="white" size=25px icon=faSquarePlus style="margin-top:5px; margin-left: 15px;"/><span>New Board</span></div>
     </div>

diff --git a/ui/src/ParticipantsDialog.svelte → ui/src/GroupParticipants.svelte b/ui/src/ParticipantsDialog.svelte → ui/src/GroupParticipants.svelte
diff --git a/ui/src/KanDoPane.svelte b/ui/src/KanDoPane.svelte
@@ -398,28 +398,25 @@
   <div class="top-bar">
     <div class="left-items">
       <sl-button  class="board-button close" on:click={closeBoard} title="Close">
-        <SvgIcon icon=faClose />
+        <SvgIcon icon=faClose size="16px"/>
       </sl-button>
       <sl-dropdown class="board-options board-menu" skidding=15>
         <sl-button slot="trigger"   class="board-button settings" caret>{$state.name}</sl-button>
-        <sl-menu>
-          <sl-menu-item on:click={()=>{participantsDialog.open()}} class="participants">
-                <SvgIcon icon=faUserGroup /> <span>Participants</span>
-          </sl-menu-item>
+        <sl-menu className="settings-menu">
           <sl-menu-item on:click={()=> editBoardDialog.open(cloneDeep(activeBoard.hash))} class="board-settings" >
-              <SvgIcon icon=faCog  style="background: transparent;"/> <span>Settings</span>
+              <SvgIcon icon="faCog"  style="background: transparent; opacity: .5; position: relative; top: -2px;" size="14px"/> <span>Settings</span>
           </sl-menu-item>
           <sl-menu-item on:click={() => exportBoard($state)} title="Export" class="board-export" >
-            <SvgIcon icon=faFileExport /> <span>Export</span>
+            <SvgIcon icon="faFileExport"  style="background: transparent; opacity: .5; position: relative; top: -2px;" size="14px" /> <span>Export</span>
           </sl-menu-item>
           <sl-menu-item on:click={() => {
             store.boardList.archiveBoard(activeBoard.hash)
             store.setUIprops({showMenu: true})
             }} title="Archive" class="board-archive" >
-            <SvgIcon icon=faArchive /> <span>Archive</span>
+            <SvgIcon icon="faArchive" style="background: transparent; opacity: .5; position: relative; top: -2px;" size="14px" /> <span>Archive</span>
           </sl-menu-item>
           <sl-menu-item  on:click={leaveBoard} class="leave-board" >
-              <SvgIcon icon=faArrowTurnDown /> <span>Leave board</span>
+              <SvgIcon icon="faArrowTurnDown" style="background: transparent; opacity: .5; position: relative; top: -2px;" size="12px" /> <span>Leave board</span>
           </sl-menu-item>
         </sl-menu>
       </sl-dropdown>
@@ -691,7 +688,7 @@
   }
 
   .board-button.close::part(base) {
-    font-size: 20px;
+    font-size: 16px;
     line-height: 36px;
   }
 
@@ -709,12 +706,18 @@
   }
   .board-options .board-settings {
     width: 100%;
+    position: relative;
   }
   .board-options .board-settings span, .board-export span, .board-archive span, .board-options .leave-board span, .board-options .participants span {
     font-size: 16px;
     font-weight: bold;
   }
 
+  .settings-menu {
+    position: relative;
+    left: -10px;
+  }
+
   .board-button.settings:hover {
     transform: scale(1.1);
   }
@@ -766,6 +769,14 @@
     transform: scale(1.1);
   }
 
+  sl-menu-item::part(checked-icon) {
+    display: none;
+  }
+
+  sl-menu-item::part(base) {
+    padding-left: 8px;
+  }
+
   .card-edit {
     position: relative;
     z-index: 1;