Skip to content
Snippets Groups Projects
Commit ce0e6732 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

comments and backbutton

parent a16a02b6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 234 additions and 19 deletions
client/src/components/layout/CommentList/comment-list.scss 0 → 100644
+ 51
− 0
View file @ ce0e6732
@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
client/src/components/layout/CommentList/index.tsx 0 → 100644
+ 38
− 0
View file @ ce0e6732
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
client/src/components/navigation/Header/header.scss
+ 48
− 1
View file @ ce0e6732
...@@ -8,6 +8,44 @@ ...@@ -8,6 +8,44 @@
overflow: hidden; 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 { .page-wrapper {
&.moved { &.moved {
transform: translateX(340px); transform: translateX(340px);
...@@ -38,12 +76,21 @@ ...@@ -38,12 +76,21 @@
.site-header { .site-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding-bottom: 20px;
&.right {
justify-content: flex-end;
}
@include mx.breakpoint(large) { @include mx.breakpoint(large) {
display: none; display: none;
padding-bottom: 0;
} }
img { &>* {
padding: 35px 30px 20px 30px; padding: 35px 30px 20px 30px;
font-size: 30px;
height: 84px;
cursor: pointer;
} }
} }
\ No newline at end of file
client/src/components/navigation/Header/index.tsx
+ 17
− 3
View file @ ce0e6732
import './header.scss'; import './header.scss';
import hamburger from 'images/svg/hamburger.svg'; import { useLocation, useHistory } from 'react-router-dom';
import Navigation from 'components/navigation/Navigation'; import Navigation from 'components/navigation/Navigation';
import Sidebar from 'components/navigation/Sidebar'; import Sidebar from 'components/navigation/Sidebar';
import Page from 'components/layout/Page' import Page from 'components/layout/Page'
...@@ -10,14 +10,28 @@ interface Props { ...@@ -10,14 +10,28 @@ interface Props {
} }
export default function Header({ children }: Props) { export default function Header({ children }: Props) {
const history = useHistory();
const hasBack = history.location.pathname.split('/').length > 2;
const [showSidebar, setShowSidebar] = useState<boolean>(false); const [showSidebar, setShowSidebar] = useState<boolean>(false);
return ( return (
<div className="full-width"> <div className="full-width">
<Sidebar setMobileShown={setShowSidebar} mobileShown={showSidebar} /> <Sidebar setMobileShown={setShowSidebar} mobileShown={showSidebar} />
<div className={'page-wrapper' + (showSidebar ? ' moved' : '')} onClick={() => showSidebar && setShowSidebar(false)}> <div className={'page-wrapper' + (showSidebar ? ' moved' : '')} onClick={() => showSidebar && setShowSidebar(false)}>
<Page> <Page>
<header className="site-header"> <header className={'site-header' + (!hasBack ? ' right' : '')}>
<img src={hamburger} alt="Navigation" onClick={() => !showSidebar && setShowSidebar(true)} /> {
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> </header>
{children} {children}
</Page> </Page>
......
client/src/components/navigation/Tabs/index.tsx
+ 4
− 3
View file @ ce0e6732
...@@ -3,7 +3,7 @@ import './tabs.scss'; ...@@ -3,7 +3,7 @@ import './tabs.scss';
interface Tab extends RouteProps { interface Tab extends RouteProps {
label: string; label: string;
state?: object; routePath?: string;
} }
interface Props { interface Props {
...@@ -11,11 +11,12 @@ interface Props { ...@@ -11,11 +11,12 @@ interface Props {
} }
export default function Tabs({ tabs }: Props) { export default function Tabs({ tabs }: Props) {
return ( return (
<> <>
<nav className="tabs-container"> <nav className="tabs-container">
{tabs.map((tab) => ( {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} {tab.label}
</NavLink> </NavLink>
))} ))}
...@@ -23,7 +24,7 @@ export default function Tabs({ tabs }: Props) { ...@@ -23,7 +24,7 @@ export default function Tabs({ tabs }: Props) {
</nav> </nav>
{ {
tabs.map((tab) => ( tabs.map((tab) => (
<Route exact key={tab.label} {...tab} /> <Route exact key={tab.label} {...tab} path={tab.routePath ?? tab.path} />
)) ))
} }
</> </>
......
client/src/components/ui/Comment/comment.scss
+ 42
− 0
View file @ ce0e6732
@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
client/src/components/ui/Comment/index.tsx
+ 21
− 3
View file @ ce0e6732
import './comment.scss'; import './comment.scss';
import { User } from 'adapters/user';
import avatar from 'images/roland-bernard.jpg';
interface Props { export interface CommentProps {
comment: string; comment: string;
user: User;
} }
export default function Comment({ comment }: Props) { export default function Comment({ comment, user }: CommentProps) {
return ( return (
<div className="comment-container"> <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> </div>
) )
} }
\ No newline at end of file
client/src/index.scss
+ 1
− 0
View file @ ce0e6732
...@@ -51,6 +51,7 @@ h4, ...@@ -51,6 +51,7 @@ h4,
h5, h5,
h6 { h6 {
font-weight: s.$weight-bold; font-weight: s.$weight-bold;
line-height: 1.2;
} }
h1 { h1 {
......
client/src/pages/Tasks/TaskDetail/TaskComments/index.tsx
+ 10
− 7
View file @ ce0e6732
import { useLocation } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Params } from '../../TaskDetail';
interface State { import CommentList from 'components/layout/CommentList';
uuid: string;
}
export default function TaskComments() { 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
client/src/pages/Tasks/TaskDetail/index.tsx
+ 2
− 2
View file @ ce0e6732
...@@ -18,13 +18,13 @@ export default function TaskDetail() { ...@@ -18,13 +18,13 @@ export default function TaskDetail() {
{ {
label: 'Assignees', label: 'Assignees',
path: '/tasks/' + uuid, path: '/tasks/' + uuid,
state: { uuid }, routePath: '/tasks/:uuid',
component: TaskAssignees component: TaskAssignees
}, },
{ {
label: 'Comments', label: 'Comments',
path: '/tasks/' + uuid + '/comments', path: '/tasks/' + uuid + '/comments',
state: { uuid }, routePath: '/tasks/:uuid/comments',
component: TaskComments component: TaskComments
} }
]; ];
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment