Merge branch 'main' into feat/add-profile-error-handling

holochain-apps · Dec 18, 2023 · f46934f · f46934f
2 parents 8b7cf72 + 6aec4b3
commit f46934f
Show file tree

Hide file tree

Showing 22 changed files with 126 additions and 190 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -22,8 +22,6 @@
     "@mdi/js": "^7.1.96",
     "@ts-stack/markdown": "^1.4.0",
     "lodash": "^4.17.21",
-    "svelte-fa": "^3.0.3",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "svelte-materialify": "^0.3.11",
     "svelte-multiselect": "^8.2.0",
     "uuid": "^8.3.2",

diff --git a/ui/src/AboutDialog.svelte b/ui/src/AboutDialog.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { getContext } from "svelte";
     import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
-    import { faFileImport } from '@fortawesome/free-solid-svg-icons';
-    import Fa from 'svelte-fa';
+    import SvgIcon from "./SvgIcon.svelte";
     import type { KanDoStore } from "./store";
     import { v1 as uuidv1 } from "uuid";
 
@@ -58,7 +57,7 @@
 </script>
 
 
-<sl-dialog label="KanDo!: UI v0.6.1 for DNA v0.5.1" bind:this={dialog} width={600} >
+<sl-dialog label="KanDo!: UI v0.6.2 for DNA v0.5.1" bind:this={dialog} width={600} >
     <div class="about">
         <p>KanDo! is a demonstration Holochain app built by the Holochain Foundation.</p>
         <p> <b>Developers:</b>
@@ -67,7 +66,7 @@
             a library that makes it really easy to build this kind of real-time collaboaration into Holochain apps.
         </p>
     <p class="small">Copyright © 2023 Holochain Foundation.  This software is distributed under the MIT License</p>
-    <div class="new-board" on:click={()=>{fileinput.click();}} title="Import Board"><Fa icon={faFileImport} size=2x style="margin-left: 15px;"/><span>Import Board </span></div>
+    <div class="new-board" on:click={()=>{fileinput.click();}} title="Import Board"><SvgIcon color="#fff" icon=faFileImport size=20px style="margin-left: 15px;"/><span>Import Board </span></div>
     <input style="display:none" type="file" accept=".json" on:change={(e)=>onFileSelected(e)} bind:this={fileinput} >
     </div>
 </sl-dialog>

diff --git a/ui/src/Avatar.svelte b/ui/src/Avatar.svelte
@@ -3,8 +3,7 @@
   import "@holochain-open-dev/profiles/dist/elements/agent-avatar.js";
   import { getContext } from "svelte";
   import type { KanDoStore } from "./store";
-  import { faUser } from "@fortawesome/free-solid-svg-icons";
-  import Fa from "svelte-fa";
+  import SvgIcon from "./SvgIcon.svelte";
 
   const { getStore } :any = getContext("store");
   let store: KanDoStore = getStore();
@@ -31,7 +30,7 @@
 
         {#if showAvatar}
             {#if placeholder && !$profile.value.entry.fields.avatar}
-                <Fa color="#fff" icon={faUser} size=2x style="margin-left:5px;margin-right:5px"></Fa>
+                <SvgIcon color="#fff" icon=faUser size="" style="margin-left:5px;margin-right:5px"></SvgIcon>
             {:else}
             <!-- <div title={nickname}> -->
                 <agent-avatar title={nickname} disable-tooltip={true} disable-copy={true} size={size} agent-pub-key="{agentPubKeyB64}"></agent-avatar>

diff --git a/ui/src/BoardEditor.svelte b/ui/src/BoardEditor.svelte
@@ -9,8 +9,7 @@
     import '@shoelace-style/shoelace/dist/components/input/input.js';
     import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
     import sanitize from "sanitize-filename";
-    import Fa from 'svelte-fa'
-    import { faPlus, faGripVertical, faTrash, faFileExport, faSpinner} from '@fortawesome/free-solid-svg-icons';
+    import SvgIcon from "./SvgIcon.svelte"
     import { cloneDeep } from "lodash";
     import type { KanDoStore } from './store';
     import { encodeHashToBase64, type EntryHash } from '@holochain/client';
@@ -165,16 +164,16 @@
         itemClass="unselectable"
         >
         <div class="group">
-          <div class="grip" ><Fa icon={faGripVertical}/></div>
+          <div class="grip" ><SvgIcon icon=faGripVertical size=12px/></div>
           <sl-input class='textarea' value={groups[index].name} on:input={e=>groups[index].name = e.target.value}></sl-input>
           <sl-button size="small"  on:click={deleteGroup(index)}>
-          <Fa icon={faTrash}/>
+          <SvgIcon icon=faTrash size=12px/>
           </sl-button>
         </div>
       </DragDropList>
 
       <div class="add-item" on:click={() => addGroup()}>
-        <Fa icon={faPlus}/>
+        <SvgIcon icon=faPlus size=12px/>
         <span>Add Column</span>
       </div>
     </div>
@@ -191,19 +190,19 @@
         itemClass="unselectable"
         >
         <div class="label-def">
-          <div class="grip" ><Fa icon={faGripVertical}/></div>
+          <div class="grip" ><SvgIcon icon=faGripVertical size=12px/></div>
           <sl-button on:click={()=>{showEmojiPicker = index;emojiDialog.show()}} >
             <span style="font-size:180%">{labelDefs[index].emoji}</span>
           </sl-button>
           <sl-input class='textarea' value={labelDefs[index].toolTip} title="label name"
           on:input={e=>labelDefs[index].toolTip = e.target.value}> </sl-input>
           <sl-button size="small"  on:click={deleteLabelDef(index)} >
-            <Fa icon={faTrash}/>
+            <SvgIcon icon=faTrash size=12px/>
           </sl-button>
         </div>
       </DragDropList>
       <div class="add-item" on:click={() => addLabelDef()}>
-        <Fa icon={faPlus}/>
+        <SvgIcon icon=faPlus size=12px/>
         <span>Add Label</span>
       </div>
       <sl-dialog label="Choose Emoji" bind:this={emojiDialog}>
@@ -255,7 +254,7 @@
         itemClass="unselectable"
         >
         <div class="category-def">
-          <div class="grip" ><Fa icon={faGripVertical}/></div>
+          <div class="grip" ><SvgIcon icon=faGripVertical size=12px/></div>
           <sl-button icon on:click={()=>{
             hex = categoryDefs[index].color
             showColorPicker = index;colorDialog.show()}} >
@@ -264,12 +263,12 @@
           <sl-input class='textarea' style="margin-left:10px" value={categoryDefs[index].name} title="category name"
           on:input={e=>categoryDefs[index].name = e.target.value}></sl-input>
           <sl-button size="small" on:click={deleteCategoryDef(index)} >
-            <Fa icon={faTrash}/>
+            <SvgIcon icon=faTrash size=12px/>
           </sl-button>
         </div>
       </DragDropList> 
       <div class="add-item" on:click={() => addCategoryDef()}>
-        <Fa icon={faPlus}/>
+        <SvgIcon icon=faPlus size=12px/>
         <span>Add Category</span>
       </div>
     </div>
@@ -284,7 +283,7 @@
     <div class='controls'>
       {#if boardHash}
         <sl-button class="board-control" on:click={() => exportBoard($state)} title="Export">
-          <Fa icon={faFileExport} /> Export
+          <SvgIcon icon=faFileExport /> Export
         </sl-button>
       {/if}
       {#if handleDelete}
@@ -307,7 +306,7 @@
 
         <span >
           {#if saving}
-            <Fa class="spinning" icon={faSpinner}></Fa>
+            <div class="spinning"><SvgIcon icon=faSpinner></SvgIcon></div>
           {:else}
             Save
           {/if}

diff --git a/ui/src/BoardMenu.svelte b/ui/src/BoardMenu.svelte
@@ -3,11 +3,9 @@
     import type { KanDoStore } from "./store";
     import type {  EntryHash } from '@holochain/client';
     import NewBoardDialog from './NewBoardDialog.svelte';
-    import { faSquarePlus } from '@fortawesome/free-solid-svg-icons';
-    import Fa from 'svelte-fa';
+    import SvgIcon from "./SvgIcon.svelte";
     import AboutDialog from "./AboutDialog.svelte";
     import KDLogoIcon from "./icons/KDLogoIcon.svelte";
-    import { faCog } from "@fortawesome/free-solid-svg-icons";
     import BoardMenuItem from "./BoardMenuItem.svelte";
     import { BoardType } from "./boardList";
     export let wide = false
@@ -48,7 +46,7 @@
 <div class="board-menu"
     class:wide={wide} >
     <div style="display:flex;flex-direction: row;">
-    <div class="new-board" on:click={()=>newBoardDialog.open()} title="New Board"><Fa icon={faSquarePlus} size=2x style="margin-left: 15px;"/><span>New Board</span></div>
+    <div class="new-board" on:click={()=>newBoardDialog.open()} title="New Board"><SvgIcon color="white" size=25px icon=faSquarePlus style="margin-left: 15px;"/><span>New Board</span></div>
     </div>
     {#if $activeBoards.status == "complete" && $activeBoards.value.length > 0}
         <h3 class="type-header">Active Boards</h3>
@@ -110,7 +108,7 @@
         class:slideOut={$uiProps.showMenu == false}
         on:click={()=>aboutDialog.open()}>   
         <div class="logo" title="About KanDo!"><KDLogoIcon /></div>
-        <Fa icon={faCog} class="cog" size="1.5x" color="#fff"/>
+        <div class="cog"><SvgIcon icon=faCog size="20px" color="#fff"/></div>
     </div>
 </div>
 

diff --git a/ui/src/CardDetails.svelte b/ui/src/CardDetails.svelte
@@ -12,11 +12,10 @@
   import type { KanDoStore } from './store';
   import Avatar from './Avatar.svelte';
   import { decodeHashFromBase64, encodeHashToBase64 } from '@holochain/client';
-  import { faEdit, faTrash, faPlus, faArchive, faClose, faPaperPlane, faCancel } from '@fortawesome/free-solid-svg-icons';
   import type { Checklist, ChecklistItem, Comment } from "./board";
 
   import { Marked, Renderer } from "@ts-stack/markdown";
-  import Fa from 'svelte-fa';
+  import SvgIcon from "./SvgIcon.svelte";
   import ClickEdit from './ClickEdit.svelte';
 
   Marked.setOptions
@@ -271,16 +270,16 @@
         <div class="card-controls">
             {#if handleDelete}
               <div class="details-button delete-button" title="Delete this card" on:click={()=>handleDelete(cardId)}>
-                <Fa icon={faTrash} style="width: 16px; height: 16px;"/>
+                <SvgIcon icon=faTrash size="18px"/>
               </div>
             {/if}
             {#if handleArchive}
               <div class="details-button archive-button" title="Archive this card" on:click={()=>{close();handleArchive()}}>
-                <Fa icon={faArchive} style="width: 16px; height: 16px;"/>
+                <SvgIcon icon=faArchive size="18px"/>
               </div>
             {/if}
           <div class="details-button" title="Close this card" on:click={(e)=>{close()}}>
-            <Fa icon={faClose} style="width: 24px; height: 24px;"/>
+            <SvgIcon icon=faClose size="18px"/>
           </div>
         </div>
       </div>
@@ -306,12 +305,12 @@
           ></sl-textarea>
       {:else}
           {#if props.description}
-        <div style="display:flex;flex-direction: column">
-          <div class="details" on:click={(e)=>editDescription()}>{@html Marked.parse(props.description)}</div>
-        </div>
+            <div style="display:flex;flex-direction: column">
+              <div class="details" style="cursor:pointer" on:click={(e)=>editDescription()}>{@html Marked.parse(props.description)}</div>
+            </div>
           {:else}
           <div style="display:flex;flex-direction: column">
-            <div class="details" style="opacity: .7" on:click={(e)=>editDescription()}>Add a description... <Fa icon={faEdit} style="width: 12px; height: 12px;"/></div>
+            <div class="details" style="opacity: .7;cursor:pointer" on:click={(e)=>editDescription()}>Add a description... <SvgIcon icon=faEdit size=12px/></div>
           </div>
           {/if}
       {/if}
@@ -342,7 +341,7 @@
                 <span class="delete-item"  on:click={(e)=>{
                   e.stopPropagation();
                   deleteChecklistItem(cardId,list,itemIdx)
-                 }}><Fa icon={faTrash} style="opacity: .3; height: .875rem; margin-left: 3px; position: relative; top: -.15rem"/></span >
+                 }}><SvgIcon icon=faTrash size=12px style="opacity: .3;  margin-left: 3px; position: relative; top: -.15rem"/></span >
 
             </div>
             {/each}
@@ -352,7 +351,7 @@
                     addingChecklistItem=idx}}>
 
                   <div>
-                    <span class="add-item-icon"><Fa icon={faPlus}/></span>
+                    <span class="add-item-icon"><SvgIcon icon=faPlus/></span>
                     Add item
                   </div>
               </div>
@@ -388,13 +387,13 @@
                       addChecklistItem(cardId, list, checklistItemElement.value)
                       checklistItemElement.focus()
                     }}>
-                      <Fa icon={faPlus}/>
+                      <SvgIcon icon=faPlus/>
                   </sl-button>
                   <sl-button 
                     on:mousedown={()=>{
                     addingChecklistItem = -1
                   }}>
-                      <Fa icon={faCancel}/>
+                      <SvgIcon icon=faCancel/>
                   </sl-button>
                 </div>
               </div>
@@ -404,7 +403,7 @@
         {/if}
         {#if !addingChecklist}
           <div class="checklist">
-            <div style="opacity: .7" on:click={(e)=>addingChecklist=true}>Add a checklist... <Fa icon={faEdit} style="width: 12px; height: 12px;"/></div>
+            <div style="opacity: .7" on:click={(e)=>addingChecklist=true}>Add a checklist... <SvgIcon icon=faEdit size="12px"/></div>
           </div>
         {:else}
           <div class="checklist add-checklist">
@@ -434,13 +433,13 @@
               on:mousedown={()=>{
                 addChecklist(cardId, checklistElement.value, Object.keys(card.checklists).length)
               }}>
-                <Fa icon={faPlus}/>
+                <SvgIcon icon=faPlus/>
             </sl-button>
             <sl-button 
               on:mousedown={()=>{
               addingChecklist = false
             }}>
-                <Fa icon={faCancel}/>
+                <SvgIcon icon=faCancel/>
             </sl-button>
           </div>
         {/if}
@@ -541,14 +540,14 @@
             on:mousedown={()=>{
               addComment(cardId, commentElement.value)
             }}>
-              <Fa icon={faPaperPlane}/>
+              <SvgIcon icon=faPaperPlane size="20px"/>
           </sl-button>
           <sl-button 
             on:mousedown={()=>{
             commentingFocused = false
             commentElement.value = ""
           }}>
-              <Fa icon={faCancel}/>
+              <SvgIcon icon=faCancel size="20px"/>
           </sl-button>
         {/if}
 
@@ -567,12 +566,12 @@
                     <div class="comment-control"
                       on:click={()=>editComment(cardId, comment)}
                       >
-                      <Fa icon={faEdit} style="width: 12px; height: 12px;"/>
+                      <SvgIcon icon=faEdit size=12px/>
                     </div>
                     <div class="comment-control"
                       on:click={()=>deleteComment(cardId, comment.id)}
                       >
-                      <Fa icon={faTrash} style="width: 12px; height: 12px;"/>
+                      <SvgIcon icon=faTrash size=12px/>
                     </div>
                   </div>
                   {/if}