From fbc884b22a40cde269692e49070d21d80dfe105a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 7 Sep 2022 11:48:32 +0500 Subject: [PATCH 1/2] Minor UI Fixes for todo items (#182) --- webapp/src/components/buttons/accept.jsx | 10 +++++-- .../components/sidebar_right/_todo-item.scss | 4 +++ .../sidebar_right/sidebar_right.jsx | 30 ++++++++++++++++--- .../sidebar_right/sidebar_right.scss | 25 ++++++++++++++-- webapp/src/components/todo_item/todo_item.jsx | 24 ++++++++++++++- webapp/src/widget/todo_toast/todo_toast.scss | 4 +++ 6 files changed, 86 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/buttons/accept.jsx b/webapp/src/components/buttons/accept.jsx index 8b17b0c6..3f3afaa6 100644 --- a/webapp/src/components/buttons/accept.jsx +++ b/webapp/src/components/buttons/accept.jsx @@ -1,12 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Button from 'src/widget/buttons/button'; + const AcceptButton = (props) => { return ( - + > + {'Add to my list'} + ); }; diff --git a/webapp/src/components/sidebar_right/_todo-item.scss b/webapp/src/components/sidebar_right/_todo-item.scss index f1b390af..b3f64153 100644 --- a/webapp/src/components/sidebar_right/_todo-item.scss +++ b/webapp/src/components/sidebar_right/_todo-item.scss @@ -151,4 +151,8 @@ p+ol { margin-top: 0.6em; } + + blockquote { + padding-bottom: 4px; + } } diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx index 6649c3f6..5d059ff1 100644 --- a/webapp/src/components/sidebar_right/sidebar_right.jsx +++ b/webapp/src/components/sidebar_right/sidebar_right.jsx @@ -168,14 +168,25 @@ export default class SidebarRight extends React.PureComponent { let inbox; if (inboxList.length > 0) { - const actionName = this.state.showInbox ? 'collapse' : 'expand'; + const actionName = this.state.showInbox ? ( + + ) : ( + + ); inbox = (
this.toggleInbox()} > - {`Incoming Todos (${inboxList.length}) (${actionName})`} + {actionName} +
{`Incoming Todos (${inboxList.length})`}
{this.state.showInbox ? 0) && (todos.length > 0)) { - const actionName = this.state.showMy ? 'collapse' : 'expand'; + const actionName = this.state.showMy ? ( + + ) : ( + + ); separator = (
this.toggleMy()} > - {`My Todos (${todos.length}) (${actionName})`} + {actionName} + {`My Todos (${todos.length})`}
); } diff --git a/webapp/src/components/sidebar_right/sidebar_right.scss b/webapp/src/components/sidebar_right/sidebar_right.scss index 99e353fa..f6453d23 100644 --- a/webapp/src/components/sidebar_right/sidebar_right.scss +++ b/webapp/src/components/sidebar_right/sidebar_right.scss @@ -68,6 +68,7 @@ } .todo-action-buttons { + margin: 8px 0; padding: 2px; display: flex; @@ -85,9 +86,27 @@ } .todo-separator { - font-size: 130%; - color: var(--link-color); - padding-left: 5px; + font-size: 14px; + text-transform: uppercase; + font-weight: 600; + opacity: 0.65; + margin: 8px 0 4px; + align-items: center; + cursor: pointer; + padding: 4px 10px 4px 4px; + display: inline-flex; + margin-left: 12px; + border-radius: 4px; + + &:hover { + background-color: rgba(var(--center-channel-color-rgb), 0.08); + opacity: 1; + } + + .CompassIcon { + font-size: 18px; + margin-right: 4px; + } } } diff --git a/webapp/src/components/todo_item/todo_item.jsx b/webapp/src/components/todo_item/todo_item.jsx index 2e9a9105..917bc10a 100644 --- a/webapp/src/components/todo_item/todo_item.jsx +++ b/webapp/src/components/todo_item/todo_item.jsx @@ -27,7 +27,17 @@ function TodoItem(props) { const [editTodo, setEditTodo] = useState(false); const [message, setMessage] = useState(issue.message); const [description, setDescription] = useState(issue.description); + const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const [hidden, setHidden] = useState(false); + const date = new Date(issue.create_at); + const year = date.getFullYear(); + const month = MONTHS[date.getMonth()]; + const day = date.getDate(); + const hours = date.getHours(); + const minutes = '0' + date.getMinutes(); + const seconds = '0' + date.getSeconds(); + const formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2); + const formattedDate = month + ' ' + day + ', ' + year; const style = getStyle(theme); @@ -45,14 +55,18 @@ function TodoItem(props) { const issueDescription = PostUtils.messageHtmlToComponent(htmlFormattedDescription); let listPositionMessage = ''; + let createdMessage = 'Created '; if (issue.user) { if (issue.list === '') { + createdMessage = 'Sent to ' + issue.user; listPositionMessage = 'Accepted. On position ' + (issue.position + 1) + '.'; } else if (issue.list === 'in') { + createdMessage = 'Sent to ' + issue.user; listPositionMessage = 'In Inbox on position ' + (issue.position + 1) + '.'; } else if (issue.list === 'out') { + createdMessage = 'Received from ' + issue.user; listPositionMessage = ''; } } @@ -181,6 +195,14 @@ function TodoItem(props) { canComplete(list) || canAccept(list)) && actionButtons} + {(issue.user) && ( +
+ {createdMessage + ' on ' + formattedDate + ' at ' + formattedTime} +
+ )} {listPositionMessage && listDiv}
)} @@ -279,7 +301,7 @@ const getStyle = makeStyleFromTheme((theme) => { fontWeight: 'bold', }, subtitle: { - marginTop: 8, + marginTop: '4px', fontStyle: 'italic', fontSize: '13px', }, diff --git a/webapp/src/widget/todo_toast/todo_toast.scss b/webapp/src/widget/todo_toast/todo_toast.scss index 9e85ff07..e5b43c7b 100644 --- a/webapp/src/widget/todo_toast/todo_toast.scss +++ b/webapp/src/widget/todo_toast/todo_toast.scss @@ -14,6 +14,10 @@ padding: 4px 4px 4px 12px; height: 40px; + .IconButton { + color: inherit; + } + >div { display: flex; align-items: center; From 18a628a67d158483c7523842a53963c88d5f8198 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 12 Sep 2022 20:19:22 +0500 Subject: [PATCH 2/2] Updating todo UI fixes (#189) Co-authored-by: Mattermod --- webapp/src/components/buttons/remove.jsx | 10 +++++++--- .../components/post_type_todo/post_type_todo.jsx | 10 ++++++---- .../src/components/sidebar_right/sidebar_right.scss | 13 ++++++++++--- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/webapp/src/components/buttons/remove.jsx b/webapp/src/components/buttons/remove.jsx index 53549c3a..73bf0b55 100644 --- a/webapp/src/components/buttons/remove.jsx +++ b/webapp/src/components/buttons/remove.jsx @@ -1,12 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Button from 'src/widget/buttons/button'; + const RemoveButton = (props) => { return ( - + > + {props.list === 'out' ? 'Cancel' : 'Won\'t do'} + ); }; diff --git a/webapp/src/components/post_type_todo/post_type_todo.jsx b/webapp/src/components/post_type_todo/post_type_todo.jsx index b990c842..75aa1320 100644 --- a/webapp/src/components/post_type_todo/post_type_todo.jsx +++ b/webapp/src/components/post_type_todo/post_type_todo.jsx @@ -28,7 +28,7 @@ export default class PostTypeTodo extends React.PureComponent { constructor(props) { super(props); - this.state = {}; + this.state = {done: false}; } render() { @@ -44,7 +44,7 @@ export default class PostTypeTodo extends React.PureComponent { const content = (
this.setState({done: true})} issueId={this.props.post.props.issueId} - complete={(issueID) => { + completeToast={() => { this.props.actions.telemetry('custom_post_complete'); - this.props.actions.complete(issueID); + this.props.actions.complete(this.props.post.props.issueId); }} />
diff --git a/webapp/src/components/sidebar_right/sidebar_right.scss b/webapp/src/components/sidebar_right/sidebar_right.scss index f6453d23..bf45cb1d 100644 --- a/webapp/src/components/sidebar_right/sidebar_right.scss +++ b/webapp/src/components/sidebar_right/sidebar_right.scss @@ -112,9 +112,16 @@ .post__content { .todo-post { - .btn { - margin-left: 5px; - margin-right: 5px; + &--done { + display: none; + } + + .Button { + margin-right: 8px; + } + + .todo-item__checkbox { + margin-right: 8px; } } }