[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 <hahmadia@users.noreply.github.com>
This commit is contained in:
kamre
GitHub
parent
9bfdc7b93a
commit
6bf4008199
4 changed files with 2098 additions and 2066 deletions
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -273,110 +273,110 @@ const Table = (props: Props): JSX.Element => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className='octo-table-body Table'
|
||||
className='Table'
|
||||
ref={drop}
|
||||
>
|
||||
{/* Headers */}
|
||||
<div className='octo-table-body'>
|
||||
{/* Headers */}
|
||||
<div
|
||||
className='octo-table-header'
|
||||
id='mainBoardHeader'
|
||||
>
|
||||
<TableHeader
|
||||
name={
|
||||
<FormattedMessage
|
||||
id='TableComponent.name'
|
||||
defaultMessage='Name'
|
||||
/>
|
||||
}
|
||||
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}
|
||||
/>
|
||||
|
||||
<div
|
||||
className='octo-table-header'
|
||||
id='mainBoardHeader'
|
||||
>
|
||||
<TableHeader
|
||||
name={
|
||||
<FormattedMessage
|
||||
id='TableComponent.name'
|
||||
defaultMessage='Name'
|
||||
/>
|
||||
}
|
||||
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 (
|
||||
<TableHeader
|
||||
name={template.name}
|
||||
sorted={sorted}
|
||||
readonly={props.readonly}
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
cards={cards}
|
||||
views={views}
|
||||
template={template}
|
||||
key={template.id}
|
||||
offset={resizingColumn === template.id ? offset : 0}
|
||||
onDrop={onDropToColumn}
|
||||
onAutoSizeColumn={onAutoSizeColumn}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Table rows */}
|
||||
<div className='table-row-container'>
|
||||
{activeView.fields.groupById &&
|
||||
visibleGroups.map((group) => {
|
||||
return (
|
||||
<TableGroup
|
||||
key={group.option.id}
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
groupByProperty={groupByProperty}
|
||||
group={group}
|
||||
readonly={props.readonly}
|
||||
columnRefs={columnRefs}
|
||||
selectedCardIds={props.selectedCardIds}
|
||||
cardIdToFocusOnRender={props.cardIdToFocusOnRender}
|
||||
hideGroup={hideGroup}
|
||||
addCard={props.addCard}
|
||||
showCard={props.showCard}
|
||||
propertyNameChanged={propertyNameChanged}
|
||||
onCardClicked={props.onCardClicked}
|
||||
onDropToGroupHeader={onDropToGroupHeader}
|
||||
onDropToCard={onDropToCard}
|
||||
onDropToGroup={onDropToGroup}
|
||||
/>)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<TableHeader
|
||||
name={template.name}
|
||||
sorted={sorted}
|
||||
readonly={props.readonly}
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
cards={cards}
|
||||
views={views}
|
||||
template={template}
|
||||
key={template.id}
|
||||
offset={resizingColumn === template.id ? offset : 0}
|
||||
onDrop={onDropToColumn}
|
||||
onAutoSizeColumn={onAutoSizeColumn}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{/* No Grouping, Rows, one per card */}
|
||||
{!activeView.fields.groupById &&
|
||||
<TableRows
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
columnRefs={columnRefs}
|
||||
cards={cards}
|
||||
selectedCardIds={props.selectedCardIds}
|
||||
readonly={props.readonly}
|
||||
cardIdToFocusOnRender={props.cardIdToFocusOnRender}
|
||||
showCard={props.showCard}
|
||||
addCard={props.addCard}
|
||||
onCardClicked={props.onCardClicked}
|
||||
onDrop={onDropToCard}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Table rows */}
|
||||
<div className='table-row-container'>
|
||||
{activeView.fields.groupById &&
|
||||
visibleGroups.map((group) => {
|
||||
return (
|
||||
<TableGroup
|
||||
key={group.option.id}
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
groupByProperty={groupByProperty}
|
||||
group={group}
|
||||
readonly={props.readonly}
|
||||
columnRefs={columnRefs}
|
||||
selectedCardIds={props.selectedCardIds}
|
||||
cardIdToFocusOnRender={props.cardIdToFocusOnRender}
|
||||
hideGroup={hideGroup}
|
||||
addCard={props.addCard}
|
||||
showCard={props.showCard}
|
||||
propertyNameChanged={propertyNameChanged}
|
||||
onCardClicked={props.onCardClicked}
|
||||
onDropToGroupHeader={onDropToGroupHeader}
|
||||
onDropToCard={onDropToCard}
|
||||
onDropToGroup={onDropToGroup}
|
||||
/>)
|
||||
})
|
||||
}
|
||||
|
||||
{/* No Grouping, Rows, one per card */}
|
||||
{!activeView.fields.groupById &&
|
||||
<TableRows
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
columnRefs={columnRefs}
|
||||
cards={cards}
|
||||
selectedCardIds={props.selectedCardIds}
|
||||
readonly={props.readonly}
|
||||
cardIdToFocusOnRender={props.cardIdToFocusOnRender}
|
||||
showCard={props.showCard}
|
||||
addCard={props.addCard}
|
||||
onCardClicked={props.onCardClicked}
|
||||
onDrop={onDropToCard}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Add New row */}
|
||||
<div className='octo-table-footer'>
|
||||
{!props.readonly && !activeView.fields.groupById &&
|
||||
{/* Add New row */}
|
||||
<div className='octo-table-footer'>
|
||||
{!props.readonly && !activeView.fields.groupById &&
|
||||
<div
|
||||
className='octo-table-cell'
|
||||
onClick={() => {
|
||||
|
|
@ -388,16 +388,17 @@ const Table = (props: Props): JSX.Element => {
|
|||
defaultMessage='+ New'
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<CalculationRow
|
||||
board={board}
|
||||
cards={cards}
|
||||
activeView={activeView}
|
||||
resizingColumn={resizingColumn}
|
||||
offset={offset}
|
||||
/>
|
||||
<CalculationRow
|
||||
board={board}
|
||||
cards={cards}
|
||||
activeView={activeView}
|
||||
resizingColumn={resizingColumn}
|
||||
offset={offset}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue