Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

UI4: Fix Nugget Styling #4834

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.

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

Merged
Jon-edge merged 5 commits into develop from jon/ui4/fix/base-components
Feb 13, 2024
Merged

UI4: Fix Nugget Styling #4834

Jon-edge merged 5 commits into develop from jon/ui4/fix/base-components
Feb 13, 2024

Conversation

@Jon-edge
Copy link
Collaborator

@Jon-edge Jon-edge commented Feb 9, 2024 •
edited
Loading

  • Remove 'flex: 1' where appropriate.
  • Restyle ButtonUi4 and fix doubled custom margins.
  • Increase ButtonUi4 tappable areas.
  • MainButton: No callers directly called ButtonUi4 with custom margins.
    • Built-in horizontal margins removed. Remnant from when we had full width buttons.
    • Mostly doubled callers' custom margins to account for fix.
    • Removed custom horizontal margins and capped bottom margins for some users.

Red background fill shows increased tappable areas
image

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

  • Yes
  • No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

  • Tested on iOS device
  • Tested on Android device
  • Tested on small-screen device (iPod Touch)
  • Tested on large-screen device (tablet)

@Jon-edge Jon-edge force-pushed the jon/ui4/fix/base-components branch from 5c4e89b to f4a6f4e Compare February 9, 2024 02:12
// Whether to center the button or stretch to fill the screen.
// Defaults to 'auto', letting the parent component be in charge:
alignSelf?: 'auto' | 'stretch' | 'center' // TODO: Maybe also remove this once column layout is restyled for UI4
alignSelf?: 'auto' | 'stretch' | 'center' // TODO: Remove
Copy link
Contributor

@swansontec swansontec Feb 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you plan to remove this, then put /* @deprecated */ on the line before to get the obvious strikeout when somebody uses it.

Edit: Oh, I see you just removed it in the next commit. If you swapped the two commits in order, then you could just delete this without ceremony.

Jon-edge reacted with thumbs up emoji
// Combination of negative margin and positive padding to increase
// invisible tappable area outside of the bounds of the visible button
margin: -theme.rem(0.5),
padding: theme.rem(0.5)
Copy link
Contributor

@swansontec swansontec Feb 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. So the default behavior is essentially 0 marginRem, but with a stretched tap-box. If somebody does specify a marginRem, then we include that in the trappable area. Doing marginRem={0} isn't quite the same as the default, because we lose the extra tappable area.

Yeah, this seems like a good design. Good balance of nice defaults and configurability.

Jon-edge reacted with hooray emoji
@Jon-edge Jon-edge force-pushed the jon/ui4/fix/base-components branch 2 times, most recently from 47713a3 to 6ff510e Compare February 13, 2024 03:59 
'alignSelf' is now completely handled by ButtonUi4
No callers directly called ButtonUi4 with custom margins.
MainButton:
- Built-in horizontal margins removed. Remnant from when we had full width buttons.
- Mostly doubled callers' custom margins to account for fix.
- Removed custom horizontal margins and capped bottom margins for some users.
@Jon-edge Jon-edge force-pushed the jon/ui4/fix/base-components branch from 6ff510e to 48a2131 Compare February 13, 2024 06:14
@Jon-edge Jon-edge merged commit 0d2907e into develop Feb 13, 2024
@Jon-edge Jon-edge deleted the jon/ui4/fix/base-components branch February 13, 2024 06:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@swansontec swansontec swansontec requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /