Skip to content

Commit

Permalink
Make visible table links more visible (#394)
Browse files Browse the repository at this point in the history 
* Setup new cell type for number links

* Use new cell theme for number links

* Tweak UI for regular links

* Tweak table background color

* Cleanup
  • Loading branch information
@annavik
annavik authored Jun 4, 2024
1 parent 386205d commit a65ac19
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 132 deletions.
14 changes: 14 additions & 0 deletions ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@
&.primary {
.label {
color: $color-primary-1-600;
font-weight: 600;
}
}

&.bubble {
.label {
display: inline-flex;
height: 30px;
border-radius: 15px;
padding: 0 12px;
background-color: #f2f3fe;
line-height: 30px;
color: $color-primary-1-600;
font-weight: 600;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions ui/src/design-system/components/table/basic-table-cell/basic-table-cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const BasicTableCell = ({
<div
className={classNames(styles.tableCell, {
[styles.primary]: theme === CellTheme.Primary,
[styles.bubble]: theme === CellTheme.Bubble,
})}
style={{ textAlign, ...style }}
>
Expand Down
4 changes: 4 additions & 0 deletions ui/src/design-system/components/table/table/table.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
position: relative;
display: table-row-group;

tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.6);
}

tr:nth-child(odd) {
background-color: $color-generic-white;
}
Expand Down
1 change: 1 addition & 0 deletions ui/src/design-system/components/table/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export { CarouselTheme as ImageCellTheme } from '../image-carousel/types'
export enum CellTheme {
Default = 'default',
Primary = 'primary',
Bubble = 'bubble'
}

export enum TextAlign {
Expand Down
6 changes: 3 additions & 3 deletions ui/src/pages/deployments/deployment-columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
filters: { deployment: item.id },
})}
>
<BasicTableCell value={item.numEvents} theme={CellTheme.Primary} />
<BasicTableCell value={item.numEvents} theme={CellTheme.Bubble} />
</Link>
),
},
Expand All @@ -96,7 +96,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
filters: { deployment: item.id },
})}
>
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Primary} />
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Bubble} />
</Link>
),
},
Expand All @@ -114,7 +114,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
filters: { occurrences__deployment: item.id },
})}
>
<BasicTableCell value={item.numSpecies} theme={CellTheme.Primary} />
<BasicTableCell value={item.numSpecies} theme={CellTheme.Bubble} />
</Link>
),
},
Expand Down
259 changes: 131 additions & 128 deletions ui/src/pages/sessions/session-columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,137 +15,140 @@ import { STRING, translate } from 'utils/language'
export const columns: (projectId: string) => TableColumn<Session>[] = (
projectId: string
) => [
{
id: 'snapshots',
name: translate(STRING.FIELD_LABEL_MOST_RECENT),
sortField: 'updated_at',
styles: {
padding: '16px 32px 16px 50px',
},
renderCell: (item: Session, rowIndex: number) => {
const isOddRow = rowIndex % 2 == 0
const detailsRoute = APP_ROUTES.SESSION_DETAILS({ projectId, sessionId: item.id })

return (
<ImageTableCell
images={item.exampleCaptures}
to={detailsRoute}
theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
/>
)
},
},
{
id: 'session',
sortField: 'start',
name: translate(STRING.FIELD_LABEL_SESSION),
renderCell: (item: Session) => (
<Link to={APP_ROUTES.SESSION_DETAILS({ projectId, sessionId: item.id })}>
<BasicTableCell value={item.label} theme={CellTheme.Primary} />
</Link>
),
},
{
id: 'deployment',
name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
sortField: 'deployment',
renderCell: (item: Session) => (
<Link
to={APP_ROUTES.DEPLOYMENT_DETAILS({
projectId,
deploymentId: item.deploymentId,
})}
>
<BasicTableCell
value={item.deploymentLabel}
theme={CellTheme.Primary}
/>
</Link>
),
},
{
id: 'date',
name: translate(STRING.FIELD_LABEL_DATE),
sortField: 'start',
renderCell: (item: Session) => (
<BasicTableCell value={item.datespanLabel} />
),
{
id: 'snapshots',
name: translate(STRING.FIELD_LABEL_MOST_RECENT),
sortField: 'updated_at',
styles: {
padding: '16px 32px 16px 50px',
},
{
id: 'time',
name: translate(STRING.FIELD_LABEL_TIME),
sortField: 'start__time',
renderCell: (item: Session) => (
<BasicTableCell value={item.timespanLabel} />
),
},
{
id: 'duration',
name: translate(STRING.FIELD_LABEL_DURATION),
sortField: 'duration',
renderCell: (item: Session) => (
<BasicTableCell value={item.durationLabel} />
),
},
{
id: 'captures',
name: translate(STRING.FIELD_LABEL_CAPTURES),
sortField: 'captures_count',
styles: {
textAlign: TextAlign.Right,
},
renderCell: (item: Session) => <BasicTableCell value={item.numImages} />,
renderCell: (item: Session, rowIndex: number) => {
const isOddRow = rowIndex % 2 == 0
const detailsRoute = APP_ROUTES.SESSION_DETAILS({
projectId,
sessionId: item.id,
})

return (
<ImageTableCell
images={item.exampleCaptures}
to={detailsRoute}
theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
/>
)
},
{
id: 'detections',
name: translate(STRING.FIELD_LABEL_DETECTIONS),
sortField: 'detections_count',
styles: {
textAlign: TextAlign.Right,
},
renderCell: (item: Session) => (
<BasicTableCell value={item.numDetections} />
),
},
{
id: 'session',
sortField: 'start',
name: translate(STRING.FIELD_LABEL_SESSION),
renderCell: (item: Session) => (
<Link to={APP_ROUTES.SESSION_DETAILS({ projectId, sessionId: item.id })}>
<BasicTableCell value={item.label} theme={CellTheme.Primary} />
</Link>
),
},
{
id: 'deployment',
name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
sortField: 'deployment',
renderCell: (item: Session) => (
<Link
to={APP_ROUTES.DEPLOYMENT_DETAILS({
projectId,
deploymentId: item.deploymentId,
})}
>
<BasicTableCell
value={item.deploymentLabel}
theme={CellTheme.Primary}
/>
</Link>
),
},
{
id: 'date',
name: translate(STRING.FIELD_LABEL_DATE),
sortField: 'start',
renderCell: (item: Session) => (
<BasicTableCell value={item.datespanLabel} />
),
},
{
id: 'time',
name: translate(STRING.FIELD_LABEL_TIME),
sortField: 'start__time',
renderCell: (item: Session) => (
<BasicTableCell value={item.timespanLabel} />
),
},
{
id: 'duration',
name: translate(STRING.FIELD_LABEL_DURATION),
sortField: 'duration',
renderCell: (item: Session) => (
<BasicTableCell value={item.durationLabel} />
),
},
{
id: 'captures',
name: translate(STRING.FIELD_LABEL_CAPTURES),
sortField: 'captures_count',
styles: {
textAlign: TextAlign.Right,
},
{
id: 'occurrences',
name: translate(STRING.FIELD_LABEL_OCCURRENCES),
sortField: 'occurrences_count',
styles: {
textAlign: TextAlign.Right,
},
renderCell: (item: Session) => (
<Link
to={getAppRoute({
to: APP_ROUTES.OCCURRENCES({ projectId }),
filters: { event: item.id },
})}
>
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Primary} />
</Link>
),
renderCell: (item: Session) => <BasicTableCell value={item.numImages} />,
},
{
id: 'detections',
name: translate(STRING.FIELD_LABEL_DETECTIONS),
sortField: 'detections_count',
styles: {
textAlign: TextAlign.Right,
},
{
id: 'species',
name: translate(STRING.FIELD_LABEL_SPECIES),
// sortField: 'taxa_count',
styles: {
textAlign: TextAlign.Right,
},
renderCell: (item: Session) => (
<Link
to={getAppRoute({
to: APP_ROUTES.SPECIES({ projectId }),
filters: { occurrences__event: item.id },
})}
>
<BasicTableCell value={item.numSpecies} theme={CellTheme.Primary} />
</Link>
),
renderCell: (item: Session) => (
<BasicTableCell value={item.numDetections} />
),
},
{
id: 'occurrences',
name: translate(STRING.FIELD_LABEL_OCCURRENCES),
sortField: 'occurrences_count',
styles: {
textAlign: TextAlign.Right,
},
{
id: 'avg-temp',
name: translate(STRING.FIELD_LABEL_AVG_TEMP),
renderCell: (item: Session) => <BasicTableCell value={item.tempLabel} />,
renderCell: (item: Session) => (
<Link
to={getAppRoute({
to: APP_ROUTES.OCCURRENCES({ projectId }),
filters: { event: item.id },
})}
>
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Bubble} />
</Link>
),
},
{
id: 'species',
name: translate(STRING.FIELD_LABEL_SPECIES),
// sortField: 'taxa_count',
styles: {
textAlign: TextAlign.Right,
},
]
renderCell: (item: Session) => (
<Link
to={getAppRoute({
to: APP_ROUTES.SPECIES({ projectId }),
filters: { occurrences__event: item.id },
})}
>
<BasicTableCell value={item.numSpecies} theme={CellTheme.Bubble} />
</Link>
),
},
{
id: 'avg-temp',
name: translate(STRING.FIELD_LABEL_AVG_TEMP),
renderCell: (item: Session) => <BasicTableCell value={item.tempLabel} />,
},
]
2 changes: 1 addition & 1 deletion ui/src/pages/species/species-columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const columns: (projectId: string) => TableColumn<Species>[] = (
filters: { determination: item.id },
})}
>
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Primary} />
<BasicTableCell value={item.numOccurrences} theme={CellTheme.Bubble} />
</Link>
),
},
Expand Down

0 comments on commit a65ac19

Please sign in to comment.