From ce0e6732be5edb3001bc9590b7d358d4a8f721ac Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sun, 9 May 2021 23:28:00 +0200
Subject: [PATCH] comments and backbutton
---
.../layout/CommentList/comment-list.scss | 51 +++++++++++++++++++
.../components/layout/CommentList/index.tsx | 38 ++++++++++++++
.../components/navigation/Header/header.scss | 49 +++++++++++++++++-
.../components/navigation/Header/index.tsx | 20 ++++++--
.../src/components/navigation/Tabs/index.tsx | 7 +--
client/src/components/ui/Comment/comment.scss | 42 +++++++++++++++
client/src/components/ui/Comment/index.tsx | 24 +++++++--
client/src/index.scss | 1 +
.../Tasks/TaskDetail/TaskComments/index.tsx | 17 ++++---
client/src/pages/Tasks/TaskDetail/index.tsx | 4 +-
10 files changed, 234 insertions(+), 19 deletions(-)
create mode 100644 client/src/components/layout/CommentList/comment-list.scss
create mode 100644 client/src/components/layout/CommentList/index.tsx
diff --git a/client/src/components/layout/CommentList/comment-list.scss b/client/src/components/layout/CommentList/comment-list.scss
new file mode 100644
index 0000000..a72e25b
--- /dev/null
+++ b/client/src/components/layout/CommentList/comment-list.scss
@@ -0,0 +1,51 @@
+@use 'styles/settings.scss'as s;
+
+.comment-list {
+ .comment-container {
+ margin: 40px 0;
+ }
+
+ .add-comment {
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ .head {
+ padding: 0 20px;
+ align-items: center;
+
+ .name {
+ margin-top: 5px;
+ }
+ }
+
+ textarea {
+ background: s.$light;
+ border: none;
+ border-radius: 25px;
+ width: 100%;
+ margin: 0;
+ height: 100%;
+ font-size: 14px;
+ padding: 25px;
+ display: flex;
+ resize: vertical;
+ outline: none;
+ min-height: 150px;
+ }
+
+ button {
+ position: absolute;
+ bottom: 0;
+ right: 20px;
+ transform: translateY(50%);
+ padding: 8px 20px;
+ background: s.$linear-gradient;
+ color: s.$white;
+ font-weight: s.$weight-regular;
+ border-radius: 10px;
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/layout/CommentList/index.tsx b/client/src/components/layout/CommentList/index.tsx
new file mode 100644
index 0000000..8d81fad
--- /dev/null
+++ b/client/src/components/layout/CommentList/index.tsx
@@ -0,0 +1,38 @@
+import Comment, { CommentProps } from 'components/ui/Comment';
+import { User } from 'adapters/user';
+import avatar from 'images/roland-bernard.jpg';
+import './comment-list.scss';
+
+interface Props {
+ user: User;
+ comments: CommentProps[]
+}
+
+export default function CommentList({ comments, user }: Props) {
+ return (
+ <div className="comment-list">
+ <div className="add-comment comment-container">
+ <div className="head">
+ <div className="avatar">
+ <img src={avatar} alt={user.realname} />
+ </div>
+ <div className="user-info">
+ <div className="name">
+ {user.realname}
+ </div>
+ </div>
+ </div>
+ <form action="">
+ <textarea placeholder="Write a comment..."></textarea>
+ <button type="submit">Send</button>
+ </form>
+
+ </div>
+
+ {comments.map(comment => (
+ <Comment key={comment.comment} {...comment} />
+ ))}
+
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/navigation/Header/header.scss b/client/src/components/navigation/Header/header.scss
index 389cbca..0247c93 100644
--- a/client/src/components/navigation/Header/header.scss
+++ b/client/src/components/navigation/Header/header.scss
@@ -8,6 +8,44 @@
overflow: hidden;
}
+.hamburger {
+ position: relative;
+ width: 30px;
+ height: 24px;
+
+ &:before,
+ &:after {
+ content: ' ';
+ position: absolute;
+ right: 0;
+ height: 4px;
+ width: 75%;
+ background: s.$body-color;
+ border-radius: 5px;
+ }
+
+ &:before {
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &:after {
+ width: 40%;
+ bottom: 0;
+ }
+
+ .line {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ top: 0;
+ right: 0;
+ background: s.$body-color;
+ border-radius: 5px;
+
+ }
+}
+
.page-wrapper {
&.moved {
transform: translateX(340px);
@@ -38,12 +76,21 @@
.site-header {
display: flex;
justify-content: space-between;
+ align-items: center;
+ padding-bottom: 20px;
+ &.right {
+ justify-content: flex-end;
+ }
@include mx.breakpoint(large) {
display: none;
+ padding-bottom: 0;
}
- img {
+ &>* {
padding: 35px 30px 20px 30px;
+ font-size: 30px;
+ height: 84px;
+ cursor: pointer;
}
}
\ No newline at end of file
diff --git a/client/src/components/navigation/Header/index.tsx b/client/src/components/navigation/Header/index.tsx
index ecf8d71..8c139dd 100644
--- a/client/src/components/navigation/Header/index.tsx
+++ b/client/src/components/navigation/Header/index.tsx
@@ -1,5 +1,5 @@
import './header.scss';
-import hamburger from 'images/svg/hamburger.svg';
+import { useLocation, useHistory } from 'react-router-dom';
import Navigation from 'components/navigation/Navigation';
import Sidebar from 'components/navigation/Sidebar';
import Page from 'components/layout/Page'
@@ -10,14 +10,28 @@ interface Props {
}
export default function Header({ children }: Props) {
+ const history = useHistory();
+ const hasBack = history.location.pathname.split('/').length > 2;
+
const [showSidebar, setShowSidebar] = useState<boolean>(false);
return (
<div className="full-width">
<Sidebar setMobileShown={setShowSidebar} mobileShown={showSidebar} />
<div className={'page-wrapper' + (showSidebar ? ' moved' : '')} onClick={() => showSidebar && setShowSidebar(false)}>
<Page>
- <header className="site-header">
- <img src={hamburger} alt="Navigation" onClick={() => !showSidebar && setShowSidebar(true)} />
+ <header className={'site-header' + (!hasBack ? ' right' : '')}>
+ {
+ hasBack && (
+ <span className="material-icons" onClick={history.goBack} >
+ arrow_back
+ </span>
+ )
+ }
+ <div className="hamburger-container">
+ <div className="hamburger" onClick={() => !showSidebar && setShowSidebar(true)}>
+ <div className="line"></div>
+ </div>
+ </div>
</header>
{children}
</Page>
diff --git a/client/src/components/navigation/Tabs/index.tsx b/client/src/components/navigation/Tabs/index.tsx
index a351e36..897cf81 100644
--- a/client/src/components/navigation/Tabs/index.tsx
+++ b/client/src/components/navigation/Tabs/index.tsx
@@ -3,7 +3,7 @@ import './tabs.scss';
interface Tab extends RouteProps {
label: string;
- state?: object;
+ routePath?: string;
}
interface Props {
@@ -11,11 +11,12 @@ interface Props {
}
export default function Tabs({ tabs }: Props) {
+
return (
<>
<nav className="tabs-container">
{tabs.map((tab) => (
- <NavLink key={tab.label} className="tab" exact activeClassName="active" to={{ pathname: tab.path?.toString(), state: tab.state }}>
+ <NavLink key={tab.label} className="tab" exact activeClassName="active" to={{ pathname: tab.path?.toString() }}>
{tab.label}
</NavLink>
))}
@@ -23,7 +24,7 @@ export default function Tabs({ tabs }: Props) {
</nav>
{
tabs.map((tab) => (
- <Route exact key={tab.label} {...tab} />
+ <Route exact key={tab.label} {...tab} path={tab.routePath ?? tab.path} />
))
}
</>
diff --git a/client/src/components/ui/Comment/comment.scss b/client/src/components/ui/Comment/comment.scss
index e69de29..b66c40f 100644
--- a/client/src/components/ui/Comment/comment.scss
+++ b/client/src/components/ui/Comment/comment.scss
@@ -0,0 +1,42 @@
+@use 'styles/settings.scss'as s;
+
+.comment-container {
+ padding: 0 20px;
+ background: rgba(s.$white, 0.95);
+ box-shadow: 0 0 25px rgba(s.$black, 0.1);
+ border-radius: 25px;
+ margin-top: 10px;
+
+ .head {
+ display: flex;
+ align-items: flex-end;
+ transform: translateY(-10px);
+
+ .avatar {
+ width: 65px;
+ height: 65px;
+ border-radius: 50%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .user-info {
+ margin-left: 10px;
+
+ .name {
+ font-weight: s.$weight-bold;
+ }
+
+ .time {
+ font-size: 12px;
+ }
+ }
+ }
+ .comment {
+ font-size: 14px;
+ padding: 20px 0;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Comment/index.tsx b/client/src/components/ui/Comment/index.tsx
index 934d855..e0bfe55 100644
--- a/client/src/components/ui/Comment/index.tsx
+++ b/client/src/components/ui/Comment/index.tsx
@@ -1,13 +1,31 @@
import './comment.scss';
+import { User } from 'adapters/user';
+import avatar from 'images/roland-bernard.jpg';
-interface Props {
+export interface CommentProps {
comment: string;
+ user: User;
}
-export default function Comment({ comment }: Props) {
+export default function Comment({ comment, user }: CommentProps) {
return (
<div className="comment-container">
-
+ <div className="head">
+ <div className="avatar">
+ <img src={avatar} alt={user.realname} />
+ </div>
+ <div className="user-info">
+ <div className="name">
+ {user.realname}
+ </div>
+ <div className="time">
+ 10 years ago
+ </div>
+ </div>
+ </div>
+ <div className="comment">
+ {comment}
+ </div>
</div>
)
}
\ No newline at end of file
diff --git a/client/src/index.scss b/client/src/index.scss
index 6da0176..8ade53c 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -51,6 +51,7 @@ h4,
h5,
h6 {
font-weight: s.$weight-bold;
+ line-height: 1.2;
}
h1 {
diff --git a/client/src/pages/Tasks/TaskDetail/TaskComments/index.tsx b/client/src/pages/Tasks/TaskDetail/TaskComments/index.tsx
index 60ab241..8bd1331 100644
--- a/client/src/pages/Tasks/TaskDetail/TaskComments/index.tsx
+++ b/client/src/pages/Tasks/TaskDetail/TaskComments/index.tsx
@@ -1,11 +1,14 @@
-import { useLocation } from "react-router-dom";
-
-interface State {
- uuid: string;
-}
+import { useParams } from "react-router-dom";
+import { Params } from '../../TaskDetail';
+import CommentList from 'components/layout/CommentList';
export default function TaskComments() {
- const { state } = useLocation<State>();
+ const { uuid } = useParams<Params>();
+ console.log(uuid);
- return (<></>);
+ return (
+ <div className="task-comment-list">
+ <CommentList user={{id: 'testid', realname: 'Current user', username: 'testname'}} comments={[{user: {id: 'test', username: 'test', realname: 'testname'}, comment: 'Comment'}]}/>
+ </div>
+ );
}
\ No newline at end of file
diff --git a/client/src/pages/Tasks/TaskDetail/index.tsx b/client/src/pages/Tasks/TaskDetail/index.tsx
index 14bc651..96cb73f 100644
--- a/client/src/pages/Tasks/TaskDetail/index.tsx
+++ b/client/src/pages/Tasks/TaskDetail/index.tsx
@@ -18,13 +18,13 @@ export default function TaskDetail() {
{
label: 'Assignees',
path: '/tasks/' + uuid,
- state: { uuid },
+ routePath: '/tasks/:uuid',
component: TaskAssignees
},
{
label: 'Comments',
path: '/tasks/' + uuid + '/comments',
- state: { uuid },
+ routePath: '/tasks/:uuid/comments',
component: TaskComments
}
];
--
GitLab