From 2be0eecf71f524159a5a22306777ff8107b2a709 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 18 Aug 2022 12:50:14 +0500 Subject: [PATCH] Multiple UI Improvements - (Table improvements, sidebar consistent) (#3689) * Updating table layout UX and UI * Updating table * Updating test * Updating sidebar UI * Updating options icon and modal border * Updating spacing between categories * fix(CompassIcon): no `undefined` in `className` * chore: update snapshots in plugin, too Co-authored-by: Mattermod Co-authored-by: Paul Esch-Laurent --- .../__snapshots__/boardSelector.test.tsx.snap | 6 +- .../boardSelectorItem.test.tsx.snap | 6 +- .../__snapshots__/cardDialog.test.tsx.snap | 2 +- .../__snapshots__/centerPanel.test.tsx.snap | 1682 ++++++----------- .../__snapshots__/viewTitle.test.tsx.snap | 10 +- .../__snapshots__/workspace.test.tsx.snap | 4 +- .../boardsSwitcher/boardsSwitcher.scss | 1 + webapp/src/components/flashMessages.scss | 23 +- webapp/src/components/modal.scss | 3 +- .../__snapshots__/shareBoard.test.tsx.snap | 6 +- .../sidebarBoardItem.test.tsx.snap | 2 +- webapp/src/components/sidebar/sidebar.scss | 10 +- .../components/sidebar/sidebarBoardItem.scss | 29 +- .../components/sidebar/sidebarCategory.scss | 19 +- .../table/__snapshots__/table.test.tsx.snap | 446 ++--- .../tableGroupHeaderRow.test.tsx.snap | 84 +- .../__snapshots__/tableRow.test.tsx.snap | 240 +-- .../__snapshots__/tableRows.test.tsx.snap | 48 +- webapp/src/components/table/table.scss | 57 +- .../table/tableGroupHeaderRow.test.tsx | 2 +- .../components/table/tableGroupHeaderRow.tsx | 9 +- webapp/src/components/table/tableRow.scss | 26 +- webapp/src/components/table/tableRow.tsx | 41 +- webapp/src/styles/main.scss | 2 +- webapp/src/widgets/buttons/iconButton.scss | 4 + webapp/src/widgets/icons/compassIcon.tsx | 2 +- webapp/src/widgets/icons/options.scss | 4 - 27 files changed, 1077 insertions(+), 1691 deletions(-) diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap index 7431c34b2..e81581852 100644 --- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap +++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap @@ -188,7 +188,7 @@ exports[`components/boardSelector renders with some results 1`] = ` class="icon" >
+
+ +
@@ -562,39 +540,13 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
-
- -
+
+ +
@@ -646,18 +614,12 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a style="width: 100px;" > hide description @@ -1426,7 +1388,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit type="button" > hide description @@ -1737,18 +1699,12 @@ exports[`components/centerPanel return centerPanel and click on new card to edit style="width: 100px;" > -
- -
+
+ +
@@ -1945,39 +1885,13 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
-
- -
+
+ +
@@ -2029,18 +1959,12 @@ exports[`components/centerPanel return centerPanel and click on new card to edit style="width: 100px;" > hide description @@ -2944,18 +2850,12 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on style="width: 100px;" > -
- -
+
+ +
@@ -3152,39 +3036,13 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
-
- -
+
+ +
@@ -3236,18 +3110,12 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on style="width: 100px;" > hide description @@ -3677,18 +3545,12 @@ exports[`components/centerPanel return centerPanel and press touch del for one c style="width: 100px;" > -
- -
+
+ +
@@ -3885,39 +3731,13 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
-
- -
+
+ +
@@ -3969,18 +3805,12 @@ exports[`components/centerPanel return centerPanel and press touch del for one c style="width: 100px;" > hide description @@ -4410,18 +4240,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c style="width: 100px;" > -
- -
+
+ +
@@ -4618,39 +4426,13 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
-
- -
+
+ +
@@ -4702,18 +4500,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c style="width: 100px;" > hide description @@ -5143,18 +4935,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c style="width: 100px;" > -
- -
+
+ +
@@ -5351,39 +5121,13 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
-
- -
+
+ +
@@ -5435,18 +5195,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c style="width: 100px;" > hide description @@ -5876,18 +5630,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > -
- -
+
+ +
@@ -6084,39 +5816,13 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
-
- -
+
+ +
@@ -6168,18 +5890,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > hide description @@ -6609,18 +6325,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > -
- -
+
+ +
@@ -6817,39 +6511,13 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
-
- -
+
+ +
@@ -6901,18 +6585,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > hide description @@ -7342,18 +7020,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > -
- -
+
+ +
@@ -7550,39 +7206,13 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
-
- -
+
+ +
@@ -7634,18 +7280,12 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c style="width: 100px;" > hide description @@ -8075,18 +7715,12 @@ exports[`components/centerPanel return centerPanel and select one card and click style="width: 100px;" > -
- -
+
+ +
@@ -8283,39 +7901,13 @@ exports[`components/centerPanel return centerPanel and select one card and click
-
- -
+
+ +
@@ -8367,18 +7975,12 @@ exports[`components/centerPanel return centerPanel and select one card and click style="width: 100px;" > hide description @@ -8808,18 +8410,12 @@ exports[`components/centerPanel return centerPanel and select one card and click style="width: 100px;" > -
- -
+
+ +
@@ -9016,39 +8596,13 @@ exports[`components/centerPanel return centerPanel and select one card and click
-
- -
+
+ +
@@ -9100,18 +8670,12 @@ exports[`components/centerPanel return centerPanel and select one card and click style="width: 100px;" > hide description @@ -9552,7 +9116,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = ` type="button" > hide description @@ -10118,7 +9682,7 @@ exports[`components/centerPanel should match snapshot for Kanban, not shared 1`] type="button" > hide description @@ -10637,7 +10201,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` type="button" > hide description @@ -10948,18 +10512,12 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` style="width: 100px;" > -
- -
+
+ +
@@ -11162,18 +10704,12 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` style="width: 100px;" > Add icon @@ -22,7 +22,7 @@ exports[`components/viewTitle add random icon 1`] = ` type="button" > show description @@ -56,7 +56,7 @@ exports[`components/viewTitle hide description 1`] = ` type="button" > show description @@ -107,7 +107,7 @@ exports[`components/viewTitle should match snapshot 1`] = ` type="button" > hide description @@ -311,7 +311,7 @@ exports[`components/viewTitle show description 1`] = ` type="button" > hide description diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap index 6b24d3e5d..83046f0c5 100644 --- a/webapp/src/components/__snapshots__/workspace.test.tsx.snap +++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap @@ -317,7 +317,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = ` type="button" > hide description @@ -1552,7 +1552,7 @@ exports[`src/components/workspace should match snapshot 1`] = ` type="button" > hide description diff --git a/webapp/src/components/boardsSwitcher/boardsSwitcher.scss b/webapp/src/components/boardsSwitcher/boardsSwitcher.scss index 458dd53d3..309cc2b98 100644 --- a/webapp/src/components/boardsSwitcher/boardsSwitcher.scss +++ b/webapp/src/components/boardsSwitcher/boardsSwitcher.scss @@ -31,5 +31,6 @@ margin-left: 4px; width: 28px; height: 28px; + flex: 0 0 28px; } } diff --git a/webapp/src/components/flashMessages.scss b/webapp/src/components/flashMessages.scss index 1c18d7fe8..10a96919c 100644 --- a/webapp/src/components/flashMessages.scss +++ b/webapp/src/components/flashMessages.scss @@ -5,21 +5,20 @@ display: flex; align-items: center; justify-content: center; - - position: absolute; - bottom: 120px; - left: 0; - right: 0; + position: fixed; + bottom: 48px; + left: 50%; + margin-left: -160px; margin: 0 auto; padding: 10px 20px; - min-width: 150px; - max-width: 420px; - min-height: 50px; - color: #fff; - background: rgba(100, 100, 100, 0.8); - font-size: 18px; + width: 320px; + min-height: 48px; + color: rgba(var(--center-channel-bg-rgb), 1); + background-color: rgba(var(--center-channel-color-rgb), 0.8); + font-size: 16px; + font-weight: 600; vertical-align: middle; - border-radius: 20px; + border-radius: 4px; &.flashIn { visibility: visible; diff --git a/webapp/src/components/modal.scss b/webapp/src/components/modal.scss index 6d50846e7..8cf6c6afb 100644 --- a/webapp/src/components/modal.scss +++ b/webapp/src/components/modal.scss @@ -7,7 +7,8 @@ left: -240px; background-color: rgb(var(--center-channel-bg-rgb)); padding: 10px; - border-radius: 3px; + border-radius: 4px; + border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); box-shadow: var(--elevation-4); @media screen and (max-width: 430px) { diff --git a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap index 8529104d1..d2dcd8d19 100644 --- a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap +++ b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap @@ -876,7 +876,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene type="button" >
@@ -3022,7 +3022,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc type="button" >
@@ -3254,7 +3254,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli type="button" >
diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap index 8e49f7cfe..c700e89e5 100644 --- a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap +++ b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap @@ -9,7 +9,7 @@ exports[`components/sidebarBoardItem renders default icon if no custom icon set class="octo-sidebar-icon" >
-
- -
+
+ +
@@ -265,39 +255,13 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
-
- -
+
+ +
@@ -599,39 +579,13 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
-
- -
+
+ +
@@ -729,39 +699,13 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
-
- -
+
+ +
@@ -1067,39 +1027,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
-
- -
+
+ +
@@ -1193,39 +1143,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
-
- -
+
+ +
@@ -1527,39 +1467,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
-
- -
+
+ +
@@ -1657,39 +1587,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
-
- -
+
+ +
@@ -2304,39 +2224,13 @@ exports[`components/table/Table should match snapshot 1`] = `
-
- -
+
+ +
@@ -2596,18 +2506,12 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = ` style="width: 100px;" > -
- -
+
+ +
@@ -93,39 +83,13 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
-
- -
+
+ +
@@ -176,39 +156,13 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
-
- -
+
+ +
@@ -297,39 +267,13 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
-
- -
+
+ +
@@ -426,39 +386,13 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
-
- -
+
+ +
diff --git a/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap b/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap index 74580c518..3a69efe8a 100644 --- a/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap +++ b/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap @@ -10,39 +10,13 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
-
- -
+
+ +
diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index 44f51a89c..15405d946 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -2,8 +2,8 @@ .Table { margin-top: 16px; - margin-left: 20px !important; - padding: 0 32px 0 0 !important; + margin-left: 0 !important; + padding: 0 20px !important; overflow: auto; position: relative; flex: 1; @@ -16,6 +16,7 @@ margin-right: 15px; margin-top: 15px; vertical-align: middle; + border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.08); &.narrow { width: 220px; @@ -23,6 +24,21 @@ > div { margin-right: 8px; + height: auto; + + &:first-child { + padding-left: 0; + border: 0; + + &:hover { + background-color: transparent; + } + + &:focus-within { + background: transparent; + border: 0; + } + } &:last-child { margin: 0; @@ -54,6 +70,7 @@ font-weight: 600; font-size: 14px; width: 100%; + height: 32px; input { background: transparent; @@ -74,18 +91,27 @@ } &.expanded { - .DisclosureTriangleIcon { - transform: rotate(90deg); + .icon-menu-down { + transform: rotate(270deg); } } } + .octo-table-cell__expand { + margin-right: 4px; + font-size: 24px; + + i { + font-size: inherit; + } + } + .octo-table-cell { flex: 0 0 auto; display: flex; flex-direction: row; color: rgb(var(--center-channel-color-rgb)); - border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.09); + border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.08); border-left: 1px solid transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent; @@ -96,12 +122,22 @@ position: relative; text-overflow: ellipsis; + .optionsMenu { + display: none; + } + &:hover { background-color: rgba(var(--center-channel-color-rgb), 0.05); + + .optionsMenu { + display: block; + } } &.title-cell { - padding-left: 16px; + &:hover { + background: transparent; + } } .octo-icontitle { @@ -177,7 +213,7 @@ display: flex; flex-direction: column; width: fit-content; - padding-left: 60px; + padding-left: 12px; } .octo-table-header, @@ -215,7 +251,6 @@ .octo-table-cell { align-items: center; - button, .octo-propertyvalue { font-size: inherit; font-weight: normal; @@ -224,6 +259,12 @@ } } + .octo-table-group { + .title-cell { + padding-left: 32px; + } + } + .octo-table-footer { .octo-table-cell { color: rgba(var(--center-channel-color-rgb), 0.6); diff --git a/webapp/src/components/table/tableGroupHeaderRow.test.tsx b/webapp/src/components/table/tableGroupHeaderRow.test.tsx index 97859d8b6..902a8ccab 100644 --- a/webapp/src/components/table/tableGroupHeaderRow.test.tsx +++ b/webapp/src/components/table/tableGroupHeaderRow.test.tsx @@ -131,7 +131,7 @@ test('should match snapshot, hide group', async () => { ) - const triangle = container.querySelector('svg.DisclosureTriangleIcon') + const triangle = container.querySelector('.octo-table-cell__expand') expect(triangle).not.toBeNull() act(() => { diff --git a/webapp/src/components/table/tableGroupHeaderRow.tsx b/webapp/src/components/table/tableGroupHeaderRow.tsx index 5d98f0722..6534da883 100644 --- a/webapp/src/components/table/tableGroupHeaderRow.tsx +++ b/webapp/src/components/table/tableGroupHeaderRow.tsx @@ -13,7 +13,7 @@ import Button from '../../widgets/buttons/button' import IconButton from '../../widgets/buttons/iconButton' import AddIcon from '../../widgets/icons/add' import DeleteIcon from '../../widgets/icons/delete' -import DisclosureTriangle from '../../widgets/icons/disclosureTriangle' +import CompassIcon from '../../widgets/icons/compassIcon' import HideIcon from '../../widgets/icons/hide' import OptionsIcon from '../../widgets/icons/options' import Menu from '../../widgets/menu' @@ -67,9 +67,12 @@ const TableGroupHeaderRow = (props: Props): JSX.Element => { ref={(ref) => columnResize.updateRef(group.option.id, Constants.titleColumnId, ref)} > } + icon={ + } onClick={() => (props.readonly ? {} : props.hideGroup(group.option.id || 'undefined'))} - className={props.readonly ? 'readonly' : ''} + className={`octo-table-cell__expand ${props.readonly ? 'readonly' : ''}`} /> {!group.option.id && diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss index 2865213a7..5925f4644 100644 --- a/webapp/src/components/table/tableRow.scss +++ b/webapp/src/components/table/tableRow.scss @@ -5,15 +5,15 @@ display: none; .Button { - padding: 2px 4px; + padding: 2px 6px; font-size: 11px; text-transform: uppercase; font-weight: 600; color: rgba(var(--center-channel-color-rgb), 0.64); - background-color: rgba(var(--center-channel-color-rgb), 0.1); + background-color: rgb(var(--center-channel-bg-rgb)); box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px, rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px; - height: 90%; + height: 24px; width: 100%; } } @@ -34,22 +34,14 @@ .open-button { display: block; } - + .action-cell { @include z-index(table-row-action-cell); - flex: 0 0 auto; - display: flex; - flex-direction: row; - color: rgb(var(--center-channel-color-rgb)); - border-left: 1px solid transparent; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - box-sizing: border-box; + position: relative; + align-items: center; + left: 8px; padding: 8px; height: 44px; - font-size: 14px; - text-overflow: ellipsis; - position: fixed; } .octo-table-cell-btn { @@ -57,13 +49,13 @@ } .title-cell { - margin-left: 60px; + margin-left: 0; } } .action-cell { display: none; - width: 60px; + margin-left: 20px; } .URLProperty:hover .Button_Copy { diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx index d4cc7a626..a36595ce7 100644 --- a/webapp/src/components/table/tableRow.tsx +++ b/webapp/src/components/table/tableRow.tsx @@ -17,7 +17,7 @@ import PropertyValueElement from '../propertyValueElement' import Menu from '../../widgets/menu' import MenuWrapper from '../../widgets/menuWrapper' import IconButton from '../../widgets/buttons/iconButton' -import GripIcon from '../../widgets/icons/grip' +import CompassIcon from '../../widgets/icons/compassIcon' import OptionsIcon from '../../widgets/icons/options' import DeleteIcon from '../../widgets/icons/delete' import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox' @@ -142,24 +142,7 @@ const TableRow = (props: Props) => { {!props.readonly && (
- - } - /> - - } - id='delete' - name={intl.formatMessage({id: 'TableRow.delete', defaultMessage: 'Delete'})} - onClick={handleDeleteButtonOnClick} - /> - - - }/> + }/>
)} @@ -184,6 +167,26 @@ const TableRow = (props: Props) => { />
+ {!props.readonly && ( + + } + /> + + } + id='delete' + name={intl.formatMessage({id: 'TableRow.delete', defaultMessage: 'Delete'})} + onClick={handleDeleteButtonOnClick} + /> + + + )} +