Update ui to reflect liking and ui fixes

openstad · Jan 4, 2024 · d22adf2 · d22adf2
1 parent 71472ac
commit d22adf2
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 22 deletions.
diff --git a/packages/comments/src/index.css b/packages/comments/src/index.css
@@ -16,30 +16,50 @@
  }
 
  p.reaction-name { 
-   color: var(--foreground, black);
+   color: var(--osc-foreground, black);
  }
  .comment-item-header {
    display: flex;
    justify-content: space-between;
  }
 
  .comment-item-footer {
-   margin-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
  }
 
+ .reaction-name {
+  margin: 0px;
+  padding: 0px;
+ }
+
  .reaction-container {
-   margin-top: 1rem;
-   padding-left: 1rem;
-   border-left: 1px solid var(--border);
+   padding-left: 1.5rem;
+   border-left: 1px solid var(--osc-border);
+ }
+
+ .osc p.comment-reaction-text {
+  font-size: .75rem;
+  margin: 0;
+  overflow-wrap: break-word;
+ }
+
+ .osc p.comment-reaction-strong-text {
+  font-size: .75rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--osc-foreground)
  }
 
  .reaction-input-container {
     text-align: right;
  }
 
+ .comment-description-inputfield {
+  padding: .75rem;
+ }
+
  hr {
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--osc-border);
  }
diff --git a/packages/comments/src/main.tsx b/packages/comments/src/main.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Comments } from './comments.js';
+import { Comments, CommentsWidgetProps } from './comments.js';
 
-const config = {
+const config: CommentsWidgetProps = {
   api: {
     url: import.meta.env.VITE_API_URL,
   },
   projectId: import.meta.env.VITE_PROJECT_ID,
   resourceId: import.meta.env.VITE_RESOURCE_ID,
   login: {
     label: import.meta.env.VITE_LOGIN_LABEL,
-    url: `${import.meta.env.VITE_API_URL}/auth/project/${import.meta.env.VITE_PROJECT_ID}/login?forceNewLogin=1&useAuth=default&redirectUri=${document.location}`
+    url: `${import.meta.env.VITE_API_URL}/auth/project/${
+      import.meta.env.VITE_PROJECT_ID
+    }/login?forceNewLogin=1&useAuth=default&redirectUri=${document.location}`,
   },
   sentiment: import.meta.env.VITE_SENTIMENT,
   emptyListText: import.meta.env.VITE_EMPTY_LIST_TEXT,
@@ -20,19 +22,15 @@ const config = {
   placeholder: import.meta.env.VITE_PLACEHOLDER,
   formIntro: import.meta.env.VITE_FORM_INTRO,
   commentsIsOpen: import.meta.env.VITE_COMMENTS_IS_OPEN != 'false',
-  commentsIsClosedText: import.meta.env.VITE_COMMENTS_IS_CLOSED_TEXT,
+  commentIsClosedText: import.meta.env.VITE_COMMENTS_IS_CLOSED_TEXT,
   isVotingEnabled: import.meta.env.VITE_IS_VOTING_ENABLED != 'false',
   isReplyingEnabled: import.meta.env.VITE_IS_REPLYING_ENABLED != 'false',
   requiredUserRole: import.meta.env.VITE_REQUIRED_USER_ROLE,
   userNameFields: eval(import.meta.env.VITE_USER_NAME_FIELDS),
-}
+};
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Comments
-      {...config}
-      config={config}
-    />
+    <Comments {...config} />
   </React.StrictMode>
 );
-
diff --git a/packages/comments/src/parts/comment-form.tsx b/packages/comments/src/parts/comment-form.tsx
@@ -91,6 +91,7 @@ function CommentForm({
         hasRole(currentUser, 'admin') ? (
           <>
             <Input
+              className="comment-description-inputfield"
               name="description"
               placeholder={args.placeholder}
               defaultValue={args.comment?.description}

diff --git a/packages/comments/src/parts/comment.tsx b/packages/comments/src/parts/comment.tsx
@@ -15,6 +15,7 @@ function Comment({
   isReplyingEnabled = true,
   requiredUserRole = 'member',
   userNameFields = ['displayName'],
+  showDateSeperately = false,
   ...props
 }: CommentPropsType) {
   const args = {
@@ -72,7 +73,6 @@ function Comment({
       <section className="comment-item-header">
         <h6 className="reaction-name">
           {args.comment.user && args.comment.user.displayName}{' '}
-          {/* todo: gebruik de meegstuurde param */}
         </h6>
         {canEdit() || canDelete() ? (
           <DropDownMenu
@@ -100,18 +100,34 @@ function Comment({
           }}
         />
       ) : (
-        <p>{args.comment.description}</p>
+        <>
+          <Spacer size={0.25} />
+          <p className="comment-reaction-text">{args.comment.description}</p>
+          <Spacer size={0.25} />
+          {showDateSeperately ? (
+            <p className="comment-reaction-strong-text">
+              {args.comment.createDateHumanized}
+            </p>
+          ) : null}
+        </>
       )}
 
       {!args.comment.parentId ? (
         <section className="comment-item-footer">
-          <p className="strong">{args.comment.createDateHumanized}</p>
+          <p className="comment-reaction-strong-text">
+            {args.comment.createDateHumanized}
+          </p>
           {isVotingEnabled ? (
             canLike() ? (
               <GhostButton
-                icon="ri-thumb-up-line"
+                className={args.comment.hasUserVoted ? `active` : ''}
+                icon={
+                  args.comment.hasUserVoted
+                    ? 'ri-thumb-up-fill'
+                    : 'ri-thumb-up-line'
+                }
                 onClick={() => args.comment.submitLike()}>
-                Mee eens (<span>{args.comment.yes || 0}</span>)
+                Mee eens ({args.comment.yes || 0})
               </GhostButton>
             ) : (
               <GhostButton disabled icon="ri-thumb-up-line">
@@ -129,11 +145,13 @@ function Comment({
         </section>
       ) : null}
 
+      <Spacer size={1} />
+
       {args.comment.replies &&
         args.comment.replies.map((reply, index) => {
           return (
             <div className="reaction-container" key={index}>
-              <Comment {...args} comment={reply} />
+              <Comment {...args} showDateSeperately={true} comment={reply} />
             </div>
           );
         })}

diff --git a/packages/comments/src/types/comment-props.ts b/packages/comments/src/types/comment-props.ts
@@ -10,4 +10,5 @@ export type CommentProps = {
   isReplyingEnabled: boolean;
   requiredUserRole: string;
   userNameFields: Array<string>;
+  showDateSeperately?: boolean;
 };
diff --git a/packages/ui/src/button/index.css b/packages/ui/src/button/index.css
@@ -22,6 +22,10 @@
     color: var(--osc-foreground)
 }
 
+.osc button.ghost.active i{
+    color: var(--osc-primary);
+}
+
 .osc button > i {
     font-size: 1.5rem;
 }