forked from OpenStackweb/summit-admin
-
Notifications
You must be signed in to change notification settings - Fork 4
Fix: responsive grids #1038
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
Open
santipalenque
wants to merge
10
commits into
master
Choose a base branch
from
fix/responsive-mui-table
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Fix: responsive grids #1038
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
a75cc3a
chore: apply mui-table changes
santipalenque 4177bc7
chore: adjusting tables one by one - WIP
santipalenque c609c5f
chore: update uicore
santipalenque 2446f7d
chore: fix tests
santipalenque 3416075
chore: adjust sponsors and sponsors purchases
santipalenque a54c75d
chore: sponsor forms grid
santipalenque d8ecceb
chore: define style pattern and apply to all grid headers
santipalenque bc293be
chore: create universal grid toolbar component
santipalenque 9a7365f
chore: apply responsive grid toolbar to all grid pages
santipalenque 191bbf9
chore: update uicore and resize icon
santipalenque File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Checkbox, FormControlLabel, FormGroup, Grid2 } from "@mui/material"; | ||
| import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; | ||
|
|
||
| const GridToolbar = ({ searchProps, checkboxProps, children, splitAt }) => { | ||
| const hasSearch = !!searchProps; | ||
| const hasCheckbox = !!checkboxProps; | ||
|
|
||
| let searchSize; | ||
| let checkboxSize; | ||
| let actionsSize; | ||
|
|
||
| if (hasSearch && hasCheckbox) { | ||
| searchSize = { xs: 12, sm: 6, md: 4 }; | ||
| checkboxSize = { xs: 12, sm: 6, md: 2 }; | ||
| actionsSize = { xs: 12, md: 6 }; | ||
| } else if (hasSearch) { | ||
| // has search but no checkbox | ||
| searchSize = { xs: 12, [splitAt]: 4 }; | ||
| actionsSize = { xs: 12, [splitAt]: 8 }; | ||
| } else if (hasCheckbox) { | ||
| // has checkbox but no search | ||
| checkboxSize = { xs: 12, [splitAt]: 4 }; | ||
| actionsSize = { xs: 12, [splitAt]: 8 }; | ||
|
smarcet marked this conversation as resolved.
|
||
| } else { | ||
| actionsSize = { xs: 12 }; | ||
| } | ||
|
|
||
| // must match the breakpoint where actionsSize itself leaves its xs:12 | ||
| // (own full-width row) value — that's the point flexWrap needs to switch | ||
| // to nowrap, so children don't get squeezed once actionsSize starts | ||
| // sharing a row with a sibling | ||
| const actionsWidthBreakpoint = | ||
| hasSearch && hasCheckbox ? "md" : hasSearch || hasCheckbox ? splitAt : "xs"; | ||
|
|
||
| // children go natural (auto) width starting at actionsWidthBreakpoint, | ||
| // never earlier than sm; between sm and that point (only a real window | ||
| // when actionsWidthBreakpoint is md) they fill the row evenly instead | ||
| const actionsAutoBreakpoint = | ||
| actionsWidthBreakpoint === "xs" ? "sm" : actionsWidthBreakpoint; | ||
| const hasFillTier = actionsAutoBreakpoint !== "sm"; | ||
|
|
||
| return ( | ||
| <Grid2 container spacing={2} sx={{ mb: 3 }}> | ||
| {hasSearch && ( | ||
| <Grid2 size={searchSize}> | ||
| <SearchInput {...searchProps} /> | ||
| </Grid2> | ||
| )} | ||
| {hasCheckbox && ( | ||
| <Grid2 size={checkboxSize}> | ||
| <FormGroup sx={{ flexShrink: 0 }}> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={checkboxProps.checked} | ||
| onChange={checkboxProps.onChange} | ||
| inputProps={{ | ||
| "aria-label": checkboxProps.ariaLabel ?? checkboxProps.label | ||
| }} | ||
|
smarcet marked this conversation as resolved.
|
||
| /> | ||
| } | ||
| label={checkboxProps.label} | ||
| sx={{ whiteSpace: "nowrap" }} | ||
| /> | ||
| </FormGroup> | ||
| </Grid2> | ||
| )} | ||
| <Grid2 | ||
| size={actionsSize} | ||
| sx={{ | ||
| display: "flex", | ||
| justifyContent: "flex-end", | ||
| flexWrap: { xs: "wrap", [actionsWidthBreakpoint]: "nowrap" }, | ||
| gap: 2 | ||
| }} | ||
| > | ||
| {/* xs: stacked full width. sm through actionsAutoBreakpoint (only a | ||
| real window when that's md): fill the row evenly via flexGrow. | ||
| From actionsAutoBreakpoint on: natural/auto width. */} | ||
| {React.Children.map(children, (child) => | ||
| child | ||
| ? React.cloneElement(child, { | ||
| sx: { | ||
| width: { xs: "100%", [actionsAutoBreakpoint]: "auto" }, | ||
| ...(hasFillTier && { | ||
| flexGrow: { sm: 1, [actionsAutoBreakpoint]: 0 }, | ||
| flexBasis: { sm: 0, [actionsAutoBreakpoint]: "auto" } | ||
| }), | ||
| ...child.props.sx | ||
| } | ||
| }) | ||
| : child | ||
| )} | ||
| </Grid2> | ||
| </Grid2> | ||
| ); | ||
| }; | ||
|
|
||
| GridToolbar.propTypes = { | ||
| searchProps: PropTypes.shape({ | ||
| term: PropTypes.string, | ||
| onSearch: PropTypes.func.isRequired, | ||
| placeholder: PropTypes.string, | ||
| debounced: PropTypes.bool | ||
| }), | ||
| checkboxProps: PropTypes.shape({ | ||
| checked: PropTypes.bool, | ||
| onChange: PropTypes.func, | ||
| label: PropTypes.node, | ||
| ariaLabel: PropTypes.string | ||
| }), | ||
| // breakpoint where search/checkbox split from the actions row into their | ||
| // compact ratio — raise it (e.g. "lg") when actions holds a lot of children | ||
| splitAt: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]) | ||
| }; | ||
|
|
||
| GridToolbar.defaultProps = { | ||
| searchProps: null, | ||
| checkboxProps: null, | ||
| splitAt: "sm" | ||
| }; | ||
|
|
||
| export default GridToolbar; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@santipalenque this changes the meaning of the "Show archived" checkbox for this one list only. On
masterall 13showArchivedthunks pushis_archived==${showArchived ? 1 : 0}(checked = archived only). After this changegetSponsorFormsreturns active + archived when checked, while the other 12 — includinggetSponsorFormItems, the sponsor Forms tab and the rest of this same file (lines 326, 575, 774, 857, 1162), plusform-template-actions.js:99,form-template-item-actions.js:101,inventory-item-actions.js:117,page-template-actions.js:79,show-pages-actions.js:78,sponsor-pages-actions.js:145/361— keep the old semantics. The global forms list and the sponsor Forms tab now render the identicalGridToolbarcheckbox with the same "Show archived" label and behave in opposite ways.Ticket 86bb7tvh1 is scoped to column-width/responsive layout and does not ask for a filter change, so unless product requested this, please revert this hunk to
filter.push(is_archived==${showArchived ? 1 : 0})so the archived filter stays consistent across lists. If "include archived" is the intended new behavior, it needs to be applied to all 13 sites (and covered by ashowArchived=truecase insrc/actions/__tests__/sponsor-forms-actions.test.js) in one change, not to a single list.