Merge pull request #1914 from ever-co/update/add-comment-icons

Update/add comment icons
ever-co · Nov 30, 2023 · d86276b · d86276b
2 parents 0f714a2 + bf4d333
commit d86276b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -46,7 +46,8 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any){
  * @param param0 
  * @returns 
  */
-function InnerItemList({items}: {
+function InnerItemList({items, title}: {
+    title: string,
     items: any[]
 }) {
     return (
@@ -61,6 +62,11 @@ function InnerItemList({items}: {
                     isDragging={dragSnapshot.isDragging}
                     isGroupedOver={Boolean(dragSnapshot.combineTargetFor)}
                     provided={dragProvided}
+                    style={title === 'review' && {
+                        borderWidth: '1px',
+                        borderColor: '#6FCF97',
+                        borderStyle: 'solid'
+                    }}
                 />
                 )}
             </Draggable>
@@ -82,14 +88,14 @@ function InnerList(props: {
     dropProvided: DroppableProvided,
     dropSnapshot: DroppableStateSnapshot
 }) {
-    const { items, dropProvided, dropSnapshot } = props;
+    const { items, dropProvided, dropSnapshot, title } = props;
 
     return (
 
         <div 
         style={getBackgroundColor(dropSnapshot)}
         ref={dropProvided.innerRef}>
-          <InnerItemList items={items} />
+          <InnerItemList items={items} title={title} />
             <>
             {dropProvided.placeholder}
             </>

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -16,6 +16,27 @@ function getStyle(provided: DraggableProvided, style: any) {
     };
 }
 
+function setCommentIconColor(commentType: "tagged" | "untagged") {
+
+    let style;
+
+    if(commentType === "tagged"){
+        style = {
+            backgroundColor: '#D95F5F'
+        }
+    }else if(commentType === "untagged"){
+        style = {
+            backgroundColor: '#27AE60'
+        }
+    } else {
+        style = {
+
+        }
+    }
+
+    return style
+}
+
 function Tag({title, backgroundColor, color}: {
     title: string,
     backgroundColor: string,
@@ -170,6 +191,15 @@ export default function Item(props: any) {
                </div>
             </div>
         </div>
+        {item.hasComment !== "none" &&
+            (<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
+                <div 
+                    className="w-3.5 h-3.5 rounded-full"
+                    style={setCommentIconColor(item.hasComment)}
+                >
+                </div>
+            </div>)
+        }
       </section>
     );
 }

diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx
@@ -29,6 +29,7 @@ const demoData = {
         {
             id: '1',
             content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            hasComment: "tagged",
             tags: [
                 {
                     id: 'tag-1',
@@ -48,6 +49,7 @@ const demoData = {
         {
             id: '4',
             content: 'demo content2',
+            hasComment: "none",
             tags: [
                 {
                     id: 'tag-1',
@@ -69,6 +71,7 @@ const demoData = {
         {
             id: '2',
             content: 'another content',
+            hasComment: "untagged",
             tags: [
                 {
                     id: 'tag-1',
@@ -88,6 +91,7 @@ const demoData = {
         {
             id: '5',
             content: 'another content2',
+            hasComment: "none",
             tags: [
                 {
                     id: 'tag-1',
@@ -109,6 +113,7 @@ const demoData = {
         {
             id: '3',
             content: 'a simple tes',
+            hasComment: "none",
             tags: [
                 {
                     id: 'tag-1',
@@ -128,6 +133,7 @@ const demoData = {
         {
             id: '6',
             content: 'a simple tes',
+            hasComment: "none",
             tags: [
                 {
                     id: 'tag-1',