In progress

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

Hide file tree

Showing 3 changed files with 35 additions and 45 deletions.
diff --git a/ui/src/BoardMenu.svelte b/ui/src/BoardMenu.svelte
@@ -2,6 +2,7 @@
     import { getContext } from "svelte";
     import type { KanDoStore } from "./store";
     import type {  EntryHash } from '@holochain/client';
+    import ParticipantsDialog from './ParticipantsDialog.svelte';
     import NewBoardDialog from './NewBoardDialog.svelte';
     import SvgIcon from "./SvgIcon.svelte";
     import AboutDialog from "./AboutDialog.svelte";
@@ -40,11 +41,14 @@
 
     let aboutDialog
 
+    let participantsDialog
 </script>
 
 <AboutDialog bind:this={aboutDialog} />
 <div class="board-menu"
     class:wide={wide} >
+
+    <ParticipantsDialog bind:this={participantsDialog} />
     <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/KanDoPane.svelte b/ui/src/KanDoPane.svelte
@@ -6,7 +6,6 @@
   //import { sortBy } from "lodash/fp";
   import type { KanDoStore } from "./store";
   import LabelSelector from "./LabelSelector.svelte";
-  import ParticipantsDialog from './ParticipantsDialog.svelte';
   import { Marked, Renderer } from "@ts-stack/markdown";
   import { v1 as uuidv1 } from "uuid";
   import { type Card, Group, UngroupedId, type CardProps, type Comment, type Checklists, Board } from "./board";
@@ -392,7 +391,6 @@
     }, 50);
   }
 
-  let participantsDialog
 
 </script>
 <div class="board">
@@ -639,7 +637,6 @@
         </div>
       </div>
   {/if}
-  <ParticipantsDialog bind:this={participantsDialog} />
   <div class="bottom-fade"></div>
 </div>
 <style>

diff --git a/ui/src/ParticipantsDialog.svelte b/ui/src/ParticipantsDialog.svelte
@@ -22,39 +22,36 @@
     let dialog
   
   </script>
-
-      <sl-dialog label="Participants" bind:this={dialog}>
-          <div class="participants">
-              <div class="list">
-                  {#if $agents.status == "pending"}
-                      <sl-skeleton
-                          effect="pulse"
-                          style="height: 40px; width: 100%"
-                      ></sl-skeleton>
-                  {:else}
-                  <h4 style="margin-left:50px">Contributed to:</h4>
-
-                          {#each $agents.status=="complete" ? Array.from($agents.value) : [] as agentPubKey}
-                              <div class="list-item">
-                                  <Avatar agentPubKey={agentPubKey} size={40} namePosition="column"/>
-                                  <div style="margin-left:10px; font-size:120%">
-                                      {#if $agentBoards.status=="complete"}
-                                      <div class="boards">
-                                          {#each $agentBoards.value.get(agentPubKey) as board}
-                                              <div class="board" on:click={()=>{
-                                                  store.boardList.setActiveBoard(board.board.hash)
-                                                  close()
-                                              }}>{board.latestState.name}x</div>
-                                          {/each}
-                                      </div>
-                                      {/if}
-                                  </div>
-                              </div>
-                          {/each}
-                      {/if}
-              </div>
-          </div>
-      </sl-dialog>
+    <div class="participants">
+        <div class="list">
+            {#if $agents.status == "pending"}
+                <sl-skeleton
+                    effect="pulse"
+                    style="height: 40px; width: 100%"
+                ></sl-skeleton>
+            {:else}
+            <h4 style="margin-left:50px">Contributed to:</h4>
+
+                    {#each $agents.status=="complete" ? Array.from($agents.value) : [] as agentPubKey}
+                        <div class="list-item">
+                            <Avatar agentPubKey={agentPubKey} size={40} namePosition="column"/>
+                            <div style="margin-left:10px; font-size:120%">
+                                {#if $agentBoards.status=="complete"}
+                                <div class="boards">
+                                    {#each $agentBoards.value.get(agentPubKey) as board}
+                                        <div class="board" on:click={()=>{
+                                            store.boardList.setActiveBoard(board.board.hash)
+                                            close()
+                                        }}>{board.latestState.name}x</div>
+                                    {/each}
+                                </div>
+                                {/if}
+                            </div>
+                        </div>
+                    {/each}
+                {/if}
+        </div>
+    </div>
 
   <style>
       .boards {
@@ -66,6 +63,7 @@
           border-radius: 5px;
           border: 2px solid rgb(166 115 55 / 26%);
           font-size: 90%;
+          color: #fff;
           font-weight: bold;
           padding: 2px;
           justify-content: center;
@@ -85,14 +83,5 @@
           display: flex;
           align-items: center;
       }
-  
-      sl-dialog::part(panel) {
-          background: #FFFFFF;
-          border: 2px solid rgb(166 115 55 / 26%);
-          border-bottom: 2px solid rgb(84 54 19 / 50%);
-          border-top: 2px solid rgb(166 115 55 / 5%);
-          box-shadow: 0px 15px 40px rgb(130 107 58 / 35%);
-          border-radius: 10px;
-      }
   </style>