Discussions Card Component Design Only #2339
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React from 'react' | ||
| import styles from './discussionsCard.module.scss' | ||
| import { | ||
| ReplyIcon, | ||
| ThumbsupIcon, | ||
| ThumbsdownIcon, | ||
| TrashIcon, | ||
| PencilIcon | ||
| } from '@primer/octicons-react' | ||
|
|
||
| export type DiscussionsCardProps = { | ||
| discussionType: 'main' | string | ||
| username: string | ||
| userPic: string | ||
| timeStamp: string | ||
| content: string | ||
| likes: number | ||
| dislikes: number | ||
| expandClick: Function | ||
| likeClick: Function | ||
| dislikeClick: Function | ||
| } | ||
|
|
||
| const DiscussionsCard: React.FC<DiscussionsCardProps> = ({ | ||
| discussionType, | ||
| username, | ||
| userPic, | ||
| timeStamp, | ||
| content, | ||
| likes, | ||
| dislikes, | ||
| expandClick, | ||
| likeClick, | ||
| dislikeClick | ||
| }) => { | ||
| const mainType = discussionType === 'main' | ||
|
|
||
| return ( | ||
| <div className={mainType ? styles.card_body_main : styles.card_body_sub}> | ||
| <div | ||
| className={ | ||
| mainType ? styles.card_user_info_main : styles.card_user_info_sub | ||
| } | ||
| > | ||
| <div> | ||
| <img src={userPic} className={styles.user_pic} /> | ||
| <span className={styles.username}>{username}</span> | ||
| <span> </span> | ||
| <span> - </span> | ||
| <span>{timeStamp}</span> | ||
| </div> | ||
| <div className={styles.expand_button} onClick={expandClick()}> | ||
|
There was a problem hiding this comment. I think you meant to put |
||
| ... | ||
|
There was a problem hiding this comment. What does the expandClick function do in this case? I remember from the design sessions the idea behind was to use it to edit/delete the comment, but it looks like those two have their own button in this design, should we keep it? There was a problem hiding this comment. It depends. Do we want to show every response to the thread(including responses to responses) upon load, or do we want the user to click first before it expands? There was a problem hiding this comment. Interesting, i didn't think it would be used for collapsing comments. There was a problem hiding this comment.
Only the discussion cards so far. Haven't implemented the full UI yet. I agree that we can load them all to a certain point. There was a problem hiding this comment.
I think having something similar to reddit is the way to go, we just need to make sure that the design will not break once we have too many branches. |
||
| </div> | ||
| </div> | ||
| <div className={styles.card_content}>{content}</div> | ||
| <div className={styles.card_buttons}> | ||
| <div className={styles.buttons_left}> | ||
| <div className={styles.reply_button}> | ||
| <ReplyIcon /> Reply | ||
| </div> | ||
| <div className={styles.edit_delete}> | ||
| <PencilIcon className={styles.pencil} size={28} /> | ||
| <TrashIcon className={styles.trash} size={28} /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.likes_container}> | ||
| <div className={styles.likes_button} onClick={likeClick()}> | ||
|
There was a problem hiding this comment. Change to |
||
| <ThumbsupIcon className={styles.thumbs_up_down} />{' '} | ||
|
There was a problem hiding this comment. If i remember correctly, during the design meetings we agreed on not having a like/dislike button and instead use arrows and only and show a sum of the votes. In the designs we have two versions and i think we agreed on this one: There was a problem hiding this comment. We also discussed another idea where we should only have the like button: There was a problem hiding this comment. @flacial Can you confirm which one did we agree on? There was a problem hiding this comment. I think without likes. On v2 of the discussions component, we can implement likes then. There was a problem hiding this comment.
Should we not include likes in the current PR? And add the up down arrows in a future PR? There was a problem hiding this comment. Or are you talking about V2 as in, after this initial discussions component has been fully implemented without likes. There was a problem hiding this comment.
Yes, after this initial design. |
||
| <span className={styles.number_shown}>{likes}</span> | ||
| </div> | ||
| <div className={styles.likes_button} onClick={dislikeClick()}> | ||
|
There was a problem hiding this comment. Change to |
||
| <ThumbsdownIcon className={styles.thumbs_up_down} />{' '} | ||
| <span className={styles.number_shown}>{dislikes}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DiscussionsCard | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| @use '../../scss/colors.module'; | ||
|
|
||
| .card_body_main { | ||
| background: #edebff; | ||
| box-shadow: 13px 14px 25px rgba(0.08, 0.05, 0.09, 0.07); | ||
| border-radius: 10px; | ||
| font-family: Inter; | ||
| font-size: 12px; | ||
| padding-bottom: 15px; | ||
| } | ||
|
|
||
| .card_body_sub { | ||
| background: #ffffff; | ||
| box-shadow: 13px 14px 25px rgba(0.08, 0.05, 0.09, 0.07); | ||
| border-radius: 10px; | ||
| font-family: Inter; | ||
| font-size: 12px; | ||
| padding-bottom: 15px; | ||
| } | ||
|
|
||
| .card_user_info_main { | ||
| background: colors.$primary; | ||
| color: white; | ||
| border-radius: 10px 10px 0px 0px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| padding-right: 13px; | ||
| padding-left: 9px; | ||
| padding-top: 4px; | ||
| height: 33px; | ||
| } | ||
|
|
||
| .card_user_info_sub { | ||
| background: #e0e0eb; | ||
| border-radius: 10px 10px 0px 0px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| padding-right: 13px; | ||
| padding-left: 9px; | ||
| padding-top: 4px; | ||
| height: 33px; | ||
| } | ||
|
|
||
| .user_pic { | ||
| height: 26px; | ||
| width: 26px; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .username { | ||
| font-weight: 700; | ||
| padding-left: 9px; | ||
| } | ||
|
|
||
| .card_content { | ||
| margin-top: 11px; | ||
| line-height: 14.52px; | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| padding-bottom: 12px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .expand_button { | ||
| font-size: 17px; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| cursor: pointer; | ||
| font-weight: 1000; | ||
| } | ||
| } | ||
|
|
||
| .card_buttons { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| } | ||
|
|
||
| .buttons_left { | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| .edit_delete { | ||
| display: flex; | ||
| gap: 5px; | ||
| margin-top: 1px; | ||
| } | ||
|
|
||
| .pencil { | ||
| padding: 5px 0px 5px 0px; | ||
| border-radius: 10px; | ||
| &:hover, | ||
| &:focus { | ||
| color: colors.$secondary; | ||
| background: colors.$primary; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| .trash { | ||
| padding: 5px 0px 5px 0px; | ||
| border-radius: 10px; | ||
| &:hover, | ||
| &:focus { | ||
| color: colors.$secondary; | ||
| background: red; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| .reply_button { | ||
| font-weight: bold; | ||
| padding: 5px 3px 5px 0px; | ||
| font-size: 14px; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: colors.$secondary; | ||
| background: colors.$primary; | ||
| border-radius: 10px; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| .likes_container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 11.3px; | ||
| } | ||
|
|
||
| .likes_button { | ||
| font-weight: bold; | ||
| font-family: 'PT Mono'; | ||
| font-size: 17.7778px; | ||
| width: 63.7px; | ||
| height: 25px; | ||
| background: colors.$secondary; | ||
| border-radius: 10px; | ||
| color: colors.$primary; | ||
| border: 1px solid colors.$primary; | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: colors.$secondary; | ||
| background: colors.$primary; | ||
| } | ||
| } | ||
|
|
||
| .thumbs_up_down { | ||
| margin-left: 10.5px; | ||
| margin-right: 5px; | ||
| margin-top: 4px; | ||
| } | ||
|
|
||
| .number_shown { | ||
| min-width: 25px; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default, type DiscussionsCardProps } from './DiscussionsCard' |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react' | ||
| import DiscussionsCard from '../../components/DiscussionsCard/DiscussionsCard' | ||
|
|
||
| export default { | ||
| title: 'Components/DiscussionsCard', | ||
| component: DiscussionsCard | ||
| } | ||
|
|
||
| const discussionMainProps = { | ||
| discussionType: 'main', | ||
| username: 'user01', | ||
| userPic: | ||
| 'https://ssb.wiki.gallery/images/thumb/6/61/Ryu_SSBU.png/1200px-Ryu_SSBU.png', | ||
| timeStamp: 'September 22, 2022 @ 3:00 UTC', | ||
| content: | ||
| 'dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit: dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:', | ||
| likes: 9, | ||
| dislikes: 2, | ||
| expandClick: () => {}, | ||
| likeClick: () => {}, | ||
| dislikeClick: () => {} | ||
| } | ||
|
|
||
| const discussionSubProps = { | ||
| discussionType: 'sub', | ||
| username: 'user01', | ||
| userPic: | ||
| 'https://ssb.wiki.gallery/images/thumb/6/61/Ryu_SSBU.png/1200px-Ryu_SSBU.png', | ||
| timeStamp: 'September 22, 2022 @ 3:00 UTC', | ||
| content: | ||
| 'dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit: dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:', | ||
| likes: 20, | ||
| dislikes: 3, | ||
| expandClick: () => {}, | ||
| likeClick: () => {}, | ||
| dislikeClick: () => {} | ||
| } | ||
|
|
||
| export const DiscussionsCardMain: React.FC = () => ( | ||
| <DiscussionsCard {...discussionMainProps} /> | ||
| ) | ||
|
|
||
| export const DiscussionsCardSub: React.FC = () => ( | ||
| <DiscussionsCard {...discussionSubProps} /> | ||
| ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can change this to type
'main' | 'sub'if that makes more sense.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@HS-90 Is there any potential that there will be more than 2 possible values for
discussionType? Also, what is the reason for different styling options? Do we have different styling on different pages for DiscussionCard component?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking that if we know there will never be more than 2 possible values for
discussionType, then we might as well simplify things make the prop a boolean value, ex.subMode?: booleanThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If theres high potential that discussionType will have more than 2 possible values, id suggest we use a mapping approach instead of using ternary operators(see lines 39 and 42 for example)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Example of mapping approach:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The above might be a bad example.. im not sure its a good idea for name of the
classto be part of the logic in this kind of way because it makes the logic more complexA more simple approach would probably be to have
mainandsubas keys in a hashmap, and then have as its values the corresponding styles for themThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There should be only 2 types if we are going by design, one is a main card, which will be the original comment or thread, then replies will be the sub design, branching off of the original comment.
A subcard can also have subcards branching off of them, kind of like how reddit works. but the design should be the same for every subcard, if that makes sense. I think I agree with your boolean approach.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the only purpose of having a boolean is to check if a reply is the main one, wouldn't be better to instead check if the subreply doesn't have any parent comment and style accordingly?
Also, should we consider that any subreply that has n replies would be considered a main? if so, wouldn't that make things a bit confusing?
We didn't get to this point in the design meetings.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is it better?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After a bit of though, it seems like it won't make any difference in our case, the only case it would be useful is if we want to style subthread replies with different levels/shades of colors.