Merge branch 'master' into release-0.7.0

mattermost-community · Sep 13, 2022 · 5afbef7 · 5afbef7
2 parents 12798a4 + 18a628a
commit 5afbef7
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 21 deletions.
diff --git 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 (
-        <button
-            className='btn btn-primary'
+        <Button
+            emphasis={'secondary'}
             onClick={() => props.accept(props.issueId)}
-        >{'Add to my list'}</button>
+        >
+            {'Add to my list'}
+        </Button>
     );
 };
 

diff --git 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 (
-        <button
-            className='btn btn-primary'
+        <Button
+            emphasis='tertiary'
             onClick={() => props.remove(props.issueId)}
-        >{props.list === 'out' ? 'Cancel' : 'Won\'t do'}</button>
+        >
+            {props.list === 'out' ? 'Cancel' : 'Won\'t do'}
+        </Button>
     );
 };
 

diff --git 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 = (
             <div
-                className='todo-post'
+                className={`todo-post d-flex flex-row-reverse align-items-center justify-content-end ${this.state.done ? 'todo-item--done' : ''}`}
                 style={style.body}
             >
                 <RemoveButton
@@ -62,10 +62,12 @@ export default class PostTypeTodo extends React.PureComponent {
                     }}
                 />
                 <CompleteButton
+                    active={this.state.done}
+                    markAsDone={() => 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);
                     }}
                 />
             </div>

diff --git 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
@@ -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 ? (
+                <CompassIcon
+                    style={style.todoHeaderIcon}
+                    icon='chevron-down'
+                />
+            ) : (
+                <CompassIcon
+                    style={style.todoHeaderIcon}
+                    icon='chevron-right'
+                />
+            );
             inbox = (
                 <div>
                     <div
                         className='todo-separator'
                         onClick={() => this.toggleInbox()}
                     >
-                        {`Incoming Todos (${inboxList.length}) (${actionName})`}
+                        {actionName}
+                        <div>{`Incoming Todos (${inboxList.length})`}</div>
                     </div>
                     {this.state.showInbox ?
                         <ToDoIssues
@@ -193,13 +204,24 @@ export default class SidebarRight extends React.PureComponent {
 
         let separator;
         if ((inboxList.length > 0) && (todos.length > 0)) {
-            const actionName = this.state.showMy ? 'collapse' : 'expand';
+            const actionName = this.state.showMy ? (
+                <CompassIcon
+                    style={style.todoHeaderIcon}
+                    icon='chevron-down'
+                />
+            ) : (
+                <CompassIcon
+                    style={style.todoHeaderIcon}
+                    icon='chevron-right'
+                />
+            );
             separator = (
                 <div
                     className='todo-separator'
                     onClick={() => this.toggleMy()}
                 >
-                    {`My Todos (${todos.length}) (${actionName})`}
+                    {actionName}
+                    {`My Todos (${todos.length})`}
                 </div>
             );
         }

diff --git 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,17 +86,42 @@
     }
 
     .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;
+        }
     }
 }
 
 .post__content {
     .todo-post {
-        .btn {
-            margin-left: 5px;
-            margin-right: 5px;
+        &--done {
+            display: none;
+        }
+
+        .Button {
+            margin-right: 8px;
+        }
+
+        .todo-item__checkbox  {
+            margin-right: 8px;
         }
     }
 }
diff --git 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) && (
+                                    <div
+                                        className='light'
+                                        style={style.subtitle}
+                                    >
+                                        {createdMessage + ' on ' + formattedDate + ' at ' + formattedTime}
+                                    </div>
+                                )}
                                 {listPositionMessage && listDiv}
                             </div>
                         )}
@@ -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
@@ -14,6 +14,10 @@
     padding: 4px 4px 4px 12px;
     height: 40px;
 
+    .IconButton {
+        color: inherit;
+    }
+
     >div {
         display: flex;
         align-items: center;