GH-177 - Minor UI tweaks and regression fix (#180)

* GH-177 - Minor UI tweaks and regression fix * Updating keyboard shortcut to allow shift * Updating todo
mattermost-community · Sep 1, 2022 · 7b7bece · 7b7bece
1 parent e184381
commit 7b7bece
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/webapp/src/components/add_issue/add_issue.jsx b/webapp/src/components/add_issue/add_issue.jsx
@@ -104,7 +104,7 @@ export default class AddIssue extends React.PureComponent {
     }
 
     onKeyDown = (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !e.shiftKey) {
             this.submit();
         }
 

diff --git a/webapp/src/components/add_issue/index.js b/webapp/src/components/add_issue/index.js
@@ -11,7 +11,7 @@ function mapStateToProps(state) {
 
     let permalink = '';
     if (postID) {
-        permalink = `[Permalink](${getCurrentTeamRoute(state)}pl/${postID})`;
+        permalink = `\n[Permalink](${getCurrentTeamRoute(state)}pl/${postID})`;
     }
 
     const message = getMessage(state) + permalink;

diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx
@@ -217,7 +217,9 @@ export default class SidebarRight extends React.PureComponent {
                 >
                     <div className='todolist-header'>
                         <MenuWrapper>
-                            <button style={style.todoHeader}>
+                            <button
+                                className='todolist-header__dropdown'
+                            >
                                 {listHeading}
                                 <CompassIcon
                                     style={style.todoHeaderIcon}
@@ -299,15 +301,6 @@ export default class SidebarRight extends React.PureComponent {
 
 const getStyle = () => {
     return {
-        todoHeader: {
-            fontFamily: 'Metropolis, sans-serif',
-            border: 0,
-            background: 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            fontWeight: 600,
-            fontSize: 16,
-        },
         todoHeaderIcon: {
             fontSize: 18,
             marginLeft: 2,

diff --git a/webapp/src/components/sidebar_right/sidebar_right.scss b/webapp/src/components/sidebar_right/sidebar_right.scss
@@ -8,6 +8,24 @@
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+        height: 65px;
+
+        .todolist-header__dropdown {
+            padding-top: 4px;
+            height: 28px;
+            border-radius: 4px;
+            font-family: Metropolis, sans-serif;
+            border: 0px;
+            background: transparent;
+            display: flex;
+            align-items: center;
+            font-weight: 600;
+            font-size: 16px;
+
+            &:hover {
+                background: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+        }
 
         .todolist-header__heading {
             font-size: 16px;

diff --git a/webapp/src/components/todo_item/todo_item.jsx b/webapp/src/components/todo_item/todo_item.jsx
@@ -74,7 +74,7 @@ function TodoItem(props) {
     );
 
     const onKeyDown = (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !e.shiftKey) {
             saveEditedTodo();
         }
 

diff --git a/webapp/src/widget/menu.scss b/webapp/src/widget/menu.scss
@@ -13,6 +13,8 @@
     color: rgba(var(--center-channel-color-rgb), 1);
     border-radius: 4px;
     box-shadow: var(--elevation-4);
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    margin-top: 8px;
 
     .menu-contents {
         display: flex;