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

Show sort indicator in table header

Browse source
This commit is contained in:
Chen-I Lim 2020-11-04 11:04:30 -08:00
parent 4beb03b197
commit d1ece53731
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
webapp/src/components/tableComponent.scss
View file

@ -29,6 +29,13 @@
&.header-cell {
padding-right: 0;
.Icon {
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 5px;
}
}
&:focus-within {

13
webapp/src/components/tableComponent.tsx
View file

@ -12,6 +12,8 @@ import mutator from '../mutator'
import {Utils} from '../utils'
import MenuWrapper from '../widgets/menuWrapper'
import SortDownIcon from '../widgets/icons/sortDown'
import SortUpIcon from '../widgets/icons/sortUp'
import {CardDialog} from './cardDialog'
import RootPortal from './rootPortal'
@ -152,6 +154,12 @@ class TableComponent extends React.Component<Props, State> {
filter((template) => activeView.visiblePropertyIds.includes(template.id)).
map((template) => {
const headerRef = React.createRef<HTMLDivElement>()
let sortIcon = undefined
const sortOption = activeView.sortOptions.find(o => o.propertyId === template.id)
if (sortOption) {
sortIcon = sortOption.reversed ? <SortUpIcon /> : <SortDownIcon />
}
return (<div
key={template.id}
ref={headerRef}
@ -182,7 +190,10 @@ class TableComponent extends React.Component<Props, State> {
onDragEnd={() => {
this.draggedHeaderTemplate = undefined
}}
>{template.name}</div>
>
{template.name}
{sortIcon}
</div>
<TableHeaderMenu
boardTree={boardTree}
templateId={template.id}