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.

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

Style tweaks for controls in window footers #807

Merged
merged 6 commits into from
Nov 3, 2023
Merged

Conversation

eritbh
Copy link
Member

@eritbh eritbh commented Aug 4, 2023

  • Controls in window footers are now laid out consistently
    • Text inputs and buttons are styled to be the same height when shown inline with each other in footers
    • Footers are laid out with flexbox with consistent padding and gap between buttons
  • Text and other inputs in footers get the same border color as buttons to stand out more against the more saturated footer background
  • Select dropdown chevron is now an embedded SVG instead of a PNG - smaller, and looks good on high-density screens or higher zoom levels

Examples of the new styles:

image

image

image

@eritbh eritbh added the enhancement New feature or request label Aug 4, 2023
@eritbh eritbh added this to the v6.2.0 milestone Aug 4, 2023
Copy link
Contributor

@ashen-dawn ashen-dawn left a comment

Choose a reason for hiding this comment

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

The styles look good in testing, a few questions about your CSS selectors, but either way I'm approving it.

justify-content: center;
align-items: center;
background-color: #CEE3F8;
}
/* A form can be the only child of the footer - use it as the flex container */
.mod-toolbox-rd .tb-window-footer > form {
Copy link
Contributor

Choose a reason for hiding this comment

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

If this rule is specifically for the form being the only child, we may want to do

Suggested change
.mod-toolbox-rd .tb-window-footer > form {
.mod-toolbox-rd .tb-window-footer > form:only-child {

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't think this is really necessary tbh - there's no case where a form has
siblings in a footer, and I can't think of a reason we'd need to do that in the
future either. Plus, since these rules set the gap and other flex layout stuff
consistently between the form and the footer itself, I think this should work
pretty much as-is in the case where there is a form with arbitrary siblings,
so there's no need to arbitrarily lock this down.

extension/data/styles/tbui.css Outdated Show resolved Hide resolved
@eritbh eritbh merged commit 26f324a into master Nov 3, 2023
@eritbh eritbh deleted the fix/style-tweaks branch November 3, 2023 06:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants