Create a swappable UI component #160

savanni · 2024-01-18T12:48:44Z

savanni commented

2024-01-18 12:48:44 +00:00

Singleton is a UI component that allows for only a single child. Not complicated in itself, but it helps simplify other components that need to have only a single child but will visually toggle between two different states.

This had some follow-on complications and refactorings of the DayDetail, DayEdit, and DayDetailView. Those, themselves, became a lot more complicated. It was feeling really awkward both in code and in UI, to have only one field be editable at the same time. It was also getting to be difficult to click no a field to make it editable and then click away to commit it. Instead, I also added an ActionGroup bar which appears at the top of the day detail and the day edit, and which prompts the user to edit or save items. We did it in 1Password with professional designers, so I can copy that here.

There's a lot of code getting intermixed in the UI callbacks, and I'll have to solve those. Plus, there's a lot of code necessary to just handle rendering and saving a weight. I'm going to solve all of that in the next PR.

Singleton is a UI component that allows for only a single child. Not complicated in itself, but it helps simplify other components that need to have only a single child but will visually toggle between two different states. This had some follow-on complications and refactorings of the DayDetail, DayEdit, and DayDetailView. Those, themselves, became a lot more complicated. It was feeling really awkward both in code and in UI, to have only one field be editable at the same time. It was also getting to be difficult to click no a field to make it editable and then click away to commit it. Instead, I also added an ActionGroup bar which appears at the top of the day detail and the day edit, and which prompts the user to edit or save items. We did it in 1Password with professional designers, so I can copy that here. There's a lot of code getting intermixed in the UI callbacks, and I'll have to solve those. Plus, there's a lot of code necessary to just handle rendering and saving a weight. I'm going to solve all of that in the next PR.

savanni added 7 commits 2024-01-18 12:48:45 +00:00

2e2ff6b47e Create a Singleton component and use it to simplify the weight view

1e6555ef61 Create a day detail view

DayDetail, the component, I used to use as a view. Now I'm swapping
things out so that DayDetailView handles the view itself. The DayDetail
component will still show the details of the day, but I'll create a
DayEditComponent which is dedicated to showing the edit interface for
everything in a day.

The swapping will now happen in DayDetailView, not in DayDetail or an
even deeper component.

104760c754 Be able to switch into edit mode

b00acc64a3 Set up the ActionGroup component

56d0a53666 Fix how DayEdit deals with the weight field

c075b7ed6e Just barely get the data saveable again

Starting to see some pretty serious limitations already.

1c2c4982a1 Update the record in the detail view on save

savanni merged commit 1c2c4982a1 into main

2024-01-18 12:56:56 +00:00

savanni deleted branch fitnesstrax/swappable

2024-01-18 12:56:56 +00:00

Sign in to join this conversation.

No reviewers

No Label

hex-grid

maintenance

music-player

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: savanni/monorepo#160