From 6bf40081994d1f733843c8690fd6aeb774cd1591 Mon Sep 17 00:00:00 2001 From: kamre Date: Mon, 23 Aug 2021 20:25:39 +0700 Subject: [PATCH] [GH-1053] Fix table horizontal lines (#1054) * Set width to fit content for table header and row container. * Horizontal line for table footer fixed: use div wrapper to make the width of the footer equal to the width of header and rows. Co-authored-by: Hossein --- webapp/src/components/gallery/gallery.tsx | 2 +- .../table/__snapshots__/table.test.tsx.snap | 3932 +++++++++-------- webapp/src/components/table/table.scss | 19 +- webapp/src/components/table/table.tsx | 211 +- 4 files changed, 2098 insertions(+), 2066 deletions(-) diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx index 63a1bec17..492819619 100644 --- a/webapp/src/components/gallery/gallery.tsx +++ b/webapp/src/components/gallery/gallery.tsx @@ -53,7 +53,7 @@ const Gallery = (props: Props): JSX.Element => { const visibleTitle = activeView.fields.visiblePropertyIds.includes(Constants.titleColumnId) return ( -
+
{cards.filter((c) => c.parentId === board.id).map((card) => { return (
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
- - Date Created - -
-
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Name
+
+
- June 15, 4:22 PM -
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Property 1 + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+ + Date Created + +
+
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ June 15, 4:22 PM +
+
- June 15, 4:22 PM +
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ June 15, 4:22 PM +
-
-
- + New -
-
-
-
- - Calculate - - + + New +
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -393,387 +397,391 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1` exports[`components/table/Table extended should match snapshot with CreatedBy 2`] = `
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
- - Created By - -
-
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Name
+
+
- username_1 -
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Property 1 + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+ + Created By + +
+
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ username_1 +
+
- username_2 +
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ username_2 +
-
-
- + New -
-
-
-
- - Calculate - - + + New +
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -783,387 +791,391 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2` exports[`components/table/Table extended should match snapshot with UpdatedAt 1`] = `
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
- - Date Updated - -
-
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Name
+
+
- June 20, 12:22 PM -
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Property 1 + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+ + Date Updated + +
+
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ June 20, 12:22 PM +
+
- June 22, 11:23 AM +
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ June 22, 11:23 AM +
-
-
- + New -
-
-
-
- - Calculate - - + + New +
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -1173,387 +1185,391 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1` exports[`components/table/Table extended should match snapshot with UpdatedBy 1`] = `
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
- - Last Modified By - -
-
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Name
+
+
- username_4 -
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Property 1 + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+ + Last Modified By + +
+
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ username_4 +
+
- username_3 +
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
+
+
+ username_3 +
-
-
- + New -
-
-
-
- - Calculate - - + + New +
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -1563,245 +1579,249 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1` exports[`components/table/Table should match snapshot 1`] = `
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - -
- -
- -
-
-
-
- + Name
+
+
+
+
+
+ + Property 1 + + + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + +
+ +
+ +
+
+
+
+ + + +
+
-
-
- + New -
-
-
-
- - Calculate - - + + New +
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -1811,217 +1831,221 @@ exports[`components/table/Table should match snapshot 1`] = ` exports[`components/table/Table should match snapshot with GroupBy 1`] = `
- - Name - -
-
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
-
-
-
-
- - - -
- - No Property 1 - - -
-
+ + Name + +
+
+
+
+
+
+ + Property 1 + + + + + +
+
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+
+
+
+
+ + + +
+ + No Property 1 + + +
+ +
+
+ +
+
-
- -
-
-
-
- - Calculate - - -
+ class="octo-table-footer" + />
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
@@ -2031,218 +2055,222 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = ` exports[`components/table/Table should match snapshot, read-only 1`] = `
- - Name - -
-
-
-
-
- - Property 1 - - - - - -
-
-
-
-
- - Property 2 - - - - - -
-
-
-
-
-
-
-
- i -
- -
-
- -
-
-
-
- - - value 1 - - -
-
-
-
- + Name
+
+
+
+
+ + Property 1 + + + + + +
+
+
+
+
+ + Property 2 + + + + + +
+
+
+
+
+
+
+
+
+ i +
+ +
+
+ +
+
+
+
+ + + value 1 + + +
+
+
+
+ + + +
+
-
-
-
- - Calculate - - -
+ class="octo-table-footer" + />
- - Calculate - - -
-
- + Calculate + + +
+
- Calculate - - + + Calculate + + +
+
+ + Calculate + + +
diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index 164e48823..0fa877098 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -1,5 +1,9 @@ .Table { + margin-top: 16px; padding-bottom: 0 !important; + overflow: auto; + position: relative; + flex: 1; .octo-group-header-cell { display: flex; @@ -124,7 +128,6 @@ .Editable { padding: 0 5px; - display: relative; left: -5px; } @@ -150,13 +153,10 @@ } } - &.octo-table-body { - margin-top: 16px; + .octo-table-body { display: flex; - flex: 1; flex-direction: column; - overflow: auto; - position: relative; + width: fit-content; } .octo-table-header, @@ -175,6 +175,7 @@ top: -2px; z-index: 1; background: rgb(var(--center-channel-bg-rgb)); + width: fit-content; .octo-table-cell { color: rgba(var(--center-channel-color-rgb), 0.6); @@ -186,13 +187,15 @@ } } + .table-row-container { + width: fit-content; + } + .octo-table-footer { .octo-table-cell { color: rgba(var(--center-channel-color-rgb), 0.6); cursor: pointer; - width: 100%; - border-right: none; padding-left: 15px; &:hover { diff --git a/webapp/src/components/table/table.tsx b/webapp/src/components/table/table.tsx index 4ab2782c3..9d6c5a024 100644 --- a/webapp/src/components/table/table.tsx +++ b/webapp/src/components/table/table.tsx @@ -273,110 +273,110 @@ const Table = (props: Props): JSX.Element => { return (
- {/* Headers */} +
+ {/* Headers */} +
+ + } + sorted={titleSorted} + readonly={props.readonly} + board={board} + activeView={activeView} + cards={cards} + views={views} + template={{id: Constants.titleColumnId, name: 'title', type: 'text', options: []}} + offset={resizingColumn === Constants.titleColumnId ? offset : 0} + onDrop={onDropToColumn} + onAutoSizeColumn={onAutoSizeColumn} + /> -
- - } - sorted={titleSorted} - readonly={props.readonly} - board={board} - activeView={activeView} - cards={cards} - views={views} - template={{id: Constants.titleColumnId, name: 'title', type: 'text', options: []}} - offset={resizingColumn === Constants.titleColumnId ? offset : 0} - onDrop={onDropToColumn} - onAutoSizeColumn={onAutoSizeColumn} - /> + {/* Table header row */} - {/* Table header row */} + {board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => { + let sorted: 'up' | 'down' | 'none' = 'none' + const sortOption = activeView.fields.sortOptions.find((o: ISortOption) => o.propertyId === template.id) + if (sortOption) { + sorted = sortOption.reversed ? 'down' : 'up' + } - {board.fields.cardProperties.filter((template: IPropertyTemplate) => activeView.fields.visiblePropertyIds.includes(template.id)).map((template: IPropertyTemplate) => { - let sorted: 'up' | 'down' | 'none' = 'none' - const sortOption = activeView.fields.sortOptions.find((o: ISortOption) => o.propertyId === template.id) - if (sortOption) { - sorted = sortOption.reversed ? 'down' : 'up' + return ( + + ) + })} +
+ + {/* Table rows */} +
+ {activeView.fields.groupById && + visibleGroups.map((group) => { + return ( + ) + }) } - return ( - - ) - })} -
+ {/* No Grouping, Rows, one per card */} + {!activeView.fields.groupById && + + } +
- {/* Table rows */} -
- {activeView.fields.groupById && - visibleGroups.map((group) => { - return ( - ) - }) - } - - {/* No Grouping, Rows, one per card */} - {!activeView.fields.groupById && - - } -
- - {/* Add New row */} -
- {!props.readonly && !activeView.fields.groupById && + {/* Add New row */} +
+ {!props.readonly && !activeView.fields.groupById &&
{ @@ -388,16 +388,17 @@ const Table = (props: Props): JSX.Element => { defaultMessage='+ New' />
- } -
+ } +
- + +
) }