Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use Material Design for UI controls #8

Open
lehnerpat opened this issue May 24, 2022 · 4 comments
Open

Use Material Design for UI controls #8

lehnerpat opened this issue May 24, 2022 · 4 comments
Assignees
@lehnerpat

Comments

@lehnerpat
Copy link
Owner

lehnerpat commented May 24, 2022 •
edited
Loading

To make the app visually nicer, I'm migrating from the existing bare-bones, handcrafted UI controls to Material Design using the Material UI (MUI) implementation for React.

I'll record some before-after screenshots here because I think it's nice to see the changes :)

Reminder to myself: also update the screenshot in the README
@lehnerpat
Copy link
Owner Author

Start Page:

Before After
Startpage before Startpage after

@lehnerpat
Copy link
Owner Author

View Track page (viewing mode):

Before After
View Track page (viewing mode) before View Track page (viewing mode) after

@lehnerpat
Copy link
Owner Author

View Track page (editing mode):

Before After
View Track page (editing mode) before View Track page (editing mode) after

@lehnerpat
Copy link
Owner Author

View options dialog:

Before After
View options dialog before View options dialog after

lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Add Material UI and style first component with it
6e4e467
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Update track list to material UI style
f303911
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: More MUI styling for start page
69f7426
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Set a maximum width for start page
e3d4d67
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Migrate track page's top button bar to a MUI AppBar
2e10e57
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Migrate track page's view options dialog to a MUI dialog
7ff3001
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Move track file download to toolbar button
6079afc
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Use ToggleButton to switch between editing and viewing mode
36c1c15
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Start converting the timing points list to MUI
120ead7
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Extract TimingPointsTable to separate component and improve some …
d580989 
…performance by memoizing
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 Turn timing points table back into list, and use react-window to h…
ee36f96 
…elp with performance
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 Add "more" menu with option to delete a timing point
44425d7
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 add an "add timing point" area as map overlay (no function yet)
8317f7f
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 Extract "add timing point" button to component
2d9ead1
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 Overhaul layout of view track page
9cdd775
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8 Add video info panel for editing mode
729b7be
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Fix anchor position of "more" menu in timing points list
488004b
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Implement custom control buttons for map
be18e0a
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Add highlighting of current timing point in TP list
d10a392
lehnerpat added a commit that referenced this issue May 29, 2022
@lehnerpat
#8: Migrate view options dialog to MUI
79ed936
@lehnerpat lehnerpat self-assigned this May 29, 2022
@lehnerpat lehnerpat mentioned this issue May 29, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lehnerpat lehnerpat

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@lehnerpat