luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-1053] Fix table horizontal lines (#1054)

Browse source 
* 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 <hahmadia@users.noreply.github.com>
This commit is contained in:
kamre 2021-08-23 20:25:39 +07:00 committed by GitHub
parent 9bfdc7b93a
commit 6bf4008199
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 2098 additions and 2066 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/components/gallery/gallery.tsx
View file

@ -53,7 +53,7 @@ const Gallery = (props: Props): JSX.Element => {
const visibleTitle = activeView.fields.visiblePropertyIds.includes(Constants.titleColumnId)
return (
<div className='octo-table-body Gallery'>
<div className='Gallery'>
{cards.filter((c) => c.parentId === board.id).map((card) => {
return (
<GalleryCard

42
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -3,7 +3,10 @@
exports[`components/table/Table extended should match snapshot with CreatedBy 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -387,13 +390,17 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table extended should match snapshot with CreatedBy 2`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -777,13 +784,17 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table extended should match snapshot with UpdatedAt 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -1167,13 +1178,17 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table extended should match snapshot with UpdatedBy 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -1557,13 +1572,17 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table should match snapshot 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -1805,13 +1824,17 @@ exports[`components/table/Table should match snapshot 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table should match snapshot with GroupBy 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -2025,13 +2048,17 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/table/Table should match snapshot, read-only 1`] = `
<div>
<div
class="octo-table-body Table"
class="Table"
>
<div
class="octo-table-body"
>
<div
class="octo-table-header"
@ -2246,5 +2273,6 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

19
webapp/src/components/table/table.scss
View file

@ -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 {

5
webapp/src/components/table/table.tsx
View file

@ -273,11 +273,11 @@ const Table = (props: Props): JSX.Element => {
return (
<div
className='octo-table-body Table'
className='Table'
ref={drop}
>
<div className='octo-table-body'>
{/* Headers */}
<div
className='octo-table-header'
id='mainBoardHeader'
@ -399,6 +399,7 @@ const Table = (props: Props): JSX.Element => {
offset={offset}
/>
</div>
</div>
)
}