search

webrecorder / browsertrix

Browsertrix is the hosted, high-fidelity, browser-based crawling service from Webrecorder designed to make web archiving easier and more accessible for all!
https://browsertrix.com
GNU Affero General Public License v3.0
170 stars 32 forks source link

Consolidate data table styles #1504

Open SuaYoo opened 7 months ago

SuaYoo commented 7 months ago

See TODO in https://github.com/webrecorder/browsertrix-cloud/pull/1485/files, consolidate data table variations into either one btrix-data-table component, a CSS-class-based theme, or separate components. (cc @emma-sg, @Shrinks99 )

SuaYoo commented 7 months ago

@Shrinks99 Could we document the different data table variations in Figma here? I believe there's three distinct variations right now:

  1. Grid (usage history, org members)
  2. Horizontally ruled (archived items)
  3. Horizontally ruled and separated (colelctions, browser profiles)
Shrinks99 commented 7 months ago

Yeah! I was just thinking of doing exactly this now that I've re-used the style of the crawl workflow list for pages. That Figma file is in need of some updates :)

Would probably be in favour of axing the horizontally ruled and separated style for single line usage (collections & browser profiles) and transitioning that to the horizontally ruled style? Seems like the consistency there would be a bonus.

Shrinks99 commented 7 months ago

Alright! Figma updated here — in the Shoelace+ table section instead of Browsertrix Components... The latter is more intended for Browsertrix specific amalgamations of other UI components, but also both my examples here are using Workflows and Archived Items so maybe the lines are a little more blurry 🙃

Changes

See ya later seperated single line table rows!

My previous thoughts about making all the table rows distinct styles per object were maybe useful when we didn't have all that many objects to deal with in the UI but that sure doesn't scale! These are going away in favour of the two new content table styles. One for when we need to display a bunch of data, and another for when our list of items can be a little more compact.

Two styles for displaying content, one for displaying editable data

The "Grid" style has been renamed the "Spreadsheet" style in Figma. The other two are the "Double Row Table" and the "Single Row Table". Here are screenshots of both in standard, hover, and selected states. Note that the checkbox doesn't always need to be present for the selected state (see QA mockups) and perhaps that one is worthy of some further iteration

Image

Image

Sort controls for spreadsheet tables

Generally I've been quite happy with how spreadsheet tables have been implemented in the app so far. One thing they're still missing is sort controls, I've added these to the header row, clicking on the header row should sort the table by the relevant control, in the case of this screenshot A-Z.

Image