Cleaned up boardmenu

holochain-apps · Dec 20, 2023 · e951b3b · e951b3b
1 parent a375088
commit e951b3b
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 28 deletions.
diff --git a/ui/src/Avatar.svelte b/ui/src/Avatar.svelte
@@ -11,6 +11,7 @@
   export let agentPubKey: AgentPubKey
   export let size = 32
   export let namePosition = "row"
+  export let nameColor = "rgba(86, 94, 109, 1.0)"
   export let showAvatar = true
   export let showNickname = true
   export let placeholder = false
@@ -38,7 +39,7 @@
             {/if}
         {/if}
         {#if showNickname}
-            <div class="nickname">{ nickname }</div>
+            <div class="nickname" style="color: {nameColor}">{ nickname }</div>
         {/if}
     {/if}
 </div>

diff --git a/ui/src/BoardMenu.svelte b/ui/src/BoardMenu.svelte
@@ -48,12 +48,10 @@
     class:wide={wide} >
 
     <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>
     {#if $activeBoards.status == "complete" && $activeBoards.value.length > 0}
-        <h3 class="type-header">Active Boards</h3>
+        <h3 class="type-header">Boards</h3>
         <div class="boards-section">
+            <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>
             {#each $activeBoards.value as hash}
                 <div
                     on:click={()=>selectBoard(hash)}
@@ -193,6 +191,7 @@
         font-size: 16px;
         font-weight: bold;
         transition: all .25s ease;
+        top: 3px;
         padding: 15px 0;
         box-shadow: 0px 4px 8px rgba(35, 32, 74, 0);
     }

diff --git a/ui/src/GroupParticipants.svelte b/ui/src/GroupParticipants.svelte
@@ -30,47 +30,72 @@
                     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}
+                <h4>Participants</h4>
+                <div class="participant-list">
+                {#each $agents.status=="complete" ? Array.from($agents.value) : [] as agentPubKey}
+                    <div class="list-item">
+                        <Avatar agentPubKey={agentPubKey} size={24} namePosition="row" />
+                        <div style="margin-left:10px; font-size:120%">
+                            {#if $agentBoards.status=="complete"}
+                            <div class="boards">
+                                <span style="font-size: 12px; opacity: .7;">Contributor to</span>
+                                {#each $agentBoards.value.get(agentPubKey) as board}
+                                    <div class="board" on:click={()=>{
+                                        store.boardList.setActiveBoard(board.board.hash)
+                                        close()
+                                    }}>{board.latestState.name}</div>
+                                {/each}
                             </div>
+                            {/if}
                         </div>
-                    {/each}
-                {/if}
+                    </div>
+                {/each}
+                </div>
+            {/if}
         </div>
     </div>
 
   <style>
+    .participants {
+        position: relative;
+    }
+
+    .participants:hover {
+        z-index: 100;
+    }
+        
       .boards {
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
       }
       .board {
           border-radius: 5px;
-          border: 2px solid rgb(166 115 55 / 26%);
+          border: 2px solid rgba(49, 74, 177, .25);
           font-size: 90%;
-          color: #fff;
           font-weight: bold;
-          padding: 2px;
+          padding: 2px 5px;
           justify-content: center;
           display: flex;
           cursor: pointer;
           margin-right: 5px;
+          font-size: 12px;
+          margin-bottom: 5px;
       }
+
+      h4 {
+        color: #fff;
+        font-size: 12px;
+        font-weight: normal;
+        opacity: .6;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        margin-left: 5px;
+      }
+
+      .participants {
+      }
+
       .board:hover {
           box-shadow: 0px 10px 35px rgb(130 107 58 / 25%);
           transform: scale(1.1);
@@ -79,9 +104,45 @@
           display: flex;
           flex-direction: column;
       }
+
+      .participant-list {
+        display: inline-flex;
+      }
+
       .list-item {
-          display: flex;
-          align-items: center;
+        max-width: 290px;
+        border-radius: 5px;
+        padding: 10px;
+        margin: 5px;
+        transition: all .25s ease;
+        border: 1px solid;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(200 221 237) 100%);
+        position: relative;
+        display: flex;
+        align-items: center;
+        box-shadow: 0px 4px 8px rgba(35, 32, 74, 0.8);
+      }
+
+      .boards {
+        position: absolute;
+        background-color: #fff;
+        top: 55px;
+        left: 0;
+        padding: 5px 10px 10px 10px;
+        border-radius: 5px;
+        transform: scale(0) translateY(-200%);
+        opacity: 0;
+        transition: all .25s ease;
+      }
+
+      .list-item:hover {
+        cursor: pointer;
+        z-index: 100;
+      }
+
+      .list-item:hover .boards {
+        transform: scale(1) translateY(0%);
+        opacity: 1;
       }
   </style>