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

DataViews: add actions to list layout #60805

Merged
merged 32 commits into from
May 14, 2024
Merged

DataViews: add actions to list layout #60805

Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
40d1331
Sort layout component properties alphabetically
oandregal Apr 17, 2024
6b5fb73
Remove unused id property
oandregal Apr 17, 2024
673cdec
Use actions in the ListItem
oandregal Apr 17, 2024
e0959b8
Let the fird grid grow and the second take the space for its content
oandregal Apr 30, 2024
c61f7a0
Account for lack of actions
oandregal Apr 30, 2024
5d15c4b
Fix rebase
oandregal May 8, 2024
08f3029
Use Ariakit directly
oandregal May 8, 2024
6fad6f1
Use Composite from @wordpress/components
oandregal May 8, 2024
6dbd0f8
Use the @wordpress/components Button as trigger
oandregal May 8, 2024
89a6c9d
Substitute last bits of Ariakit by @wordpress/components
oandregal May 8, 2024
12d3426
Reuse ActionsDropdownMenuGroup from item-actions
oandregal May 9, 2024
9378b7b
Make non-modal primary actions work
oandregal May 9, 2024
dd4d605
Make modal primary actions work
oandregal May 9, 2024
f3d4416
Do not show actions trigger if there is no actions
oandregal May 9, 2024
94b02b3
Fix rebase
oandregal May 9, 2024
ca8bc80
Attach border to top-level element (li)
oandregal May 9, 2024
ef3feeb
Space for actions
oandregal May 9, 2024
9c6421c
Sort lines ascending
oandregal May 9, 2024
16e8c84
Move children as part of Composite
oandregal May 9, 2024
d211167
Show actions on hover
oandregal May 9, 2024
c7db4b7
Reuse ActionModal
oandregal May 9, 2024
817aebb
Limit to a single primary action
oandregal May 9, 2024
4dc0555
Give more space to the item
oandregal May 9, 2024
dcf7306
Adjust conditions to show the primary action
oandregal May 9, 2024
132f6b9
Fixup: show the primary action when the item has focus as well
oandregal May 9, 2024
270c2a6
Align item tools to the top
oandregal May 10, 2024
9f92508
Fix rebase
oandregal May 10, 2024
6afa652
Manage item removal
oandregal May 13, 2024
7052fd2
Prevent the default behaviour and move up/down explicitely
oandregal May 13, 2024
249d86e
Primary actions + all actions share visibility logic
oandregal May 13, 2024
adf56e2
Improve types
oandregal May 13, 2024
7d76a8e
Update classes
oandregal May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/dataviews/src/dataviews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,16 +128,16 @@ export default function DataViews( {
/>
</HStack>
<ViewComponent
fields={ _fields }
view={ view }
onChangeView={ onChangeView }
actions={ actions }
data={ data }
fields={ _fields }
Copy link
Member Author

Choose a reason for hiding this comment

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

Sorts the props alphabetically.

getItemId={ getItemId }
isLoading={ isLoading }
onChangeView={ onChangeView }
onSelectionChange={ onSetSelection }
selection={ selection }
setOpenedFilter={ setOpenedFilter }
view={ view }
/>
<Pagination
view={ view }
Expand Down
53 changes: 34 additions & 19 deletions packages/dataviews/src/item-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,32 @@ function DropdownMenuItemTrigger( { action, onClick } ) {
);
}

export function ActionModal( {
Copy link
Member Author

Choose a reason for hiding this comment

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

The list view cannot use the ItemActions component, so this PR exports the two things it can actually use.

action,
items,
closeModal,
onActionStart,
onActionPerformed,
} ) {
return (
<Modal
title={ action.modalHeader || action.label }
__experimentalHideHeader={ !! action.hideModalHeader }
onRequestClose={ closeModal }
overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
action.id
) }` }
>
<action.RenderModal
items={ items }
closeModal={ closeModal }
onActionStart={ onActionStart }
onActionPerformed={ onActionPerformed }
/>
</Modal>
);
}

export function ActionWithModal( {
action,
items,
Expand All @@ -64,34 +90,23 @@ export function ActionWithModal( {
items,
isBusy,
};
const { RenderModal, hideModalHeader } = action;
return (
<>
<ActionTrigger { ...actionTriggerProps } />
{ isModalOpen && (
<Modal
title={ action.modalHeader || action.label }
__experimentalHideHeader={ !! hideModalHeader }
onRequestClose={ () => {
setIsModalOpen( false );
} }
overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
action.id
) }` }
>
<RenderModal
items={ items }
closeModal={ () => setIsModalOpen( false ) }
onActionStart={ onActionStart }
onActionPerformed={ onActionPerformed }
/>
</Modal>
<ActionModal
action={ action }
items={ items }
closeModal={ () => setIsModalOpen( false ) }
onActionStart={ onActionStart }
onActionPerformed={ onActionPerformed }
/>
) }
</>
);
}

function ActionsDropdownMenuGroup( { actions, item } ) {
export function ActionsDropdownMenuGroup( { actions, item } ) {
return (
<DropdownMenuGroup>
{ actions.map( ( action ) => {
Expand Down
22 changes: 20 additions & 2 deletions packages/dataviews/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,7 @@
li {
margin: 0;
cursor: pointer;
border-top: 1px solid $gray-100;
Copy link
Member Author

Choose a reason for hiding this comment

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

Move the border to the topmost HTML element. The .dataviews-view-list__item only targets the item but not the actions.


.dataviews-view-list__item-wrapper {
position: relative;
Expand All @@ -411,6 +412,18 @@
}
}

.dataviews-item-actions .components-button {
Copy link
Member Author

Choose a reason for hiding this comment

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

Make the actions buttons (primary action + all actions) hidden, unless is hovered/focused/selected.

opacity: 0;
}

&.is-selected,
&.is-hovered,
&:focus-within {
.dataviews-item-actions .components-button {
opacity: 1;
}
}

&:not(.is-selected) {
.dataviews-view-list__primary-field {
color: $gray-900;
Expand All @@ -426,6 +439,7 @@
}
}
}

}

li.is-selected,
Expand All @@ -443,10 +457,9 @@
}

.dataviews-view-list__item {
padding: $grid-unit-20 $grid-unit-40;
padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40;
width: 100%;
scroll-margin: $grid-unit-10 0;
border-top: 1px solid $gray-100;

&:focus-visible {
&::before {
Expand Down Expand Up @@ -514,6 +527,11 @@
}
}

.dataviews-item-actions {
padding-top: $grid-unit-20;
padding-right: $grid-unit-40;
}

& + .dataviews-pagination {
justify-content: space-between;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/dataviews/src/view-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,14 @@ function GridItem( {
}

export default function ViewGrid( {
actions,
Copy link
Member Author

Choose a reason for hiding this comment

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

This is just sorting the prop alphabetically.

data,
fields,
view,
actions,
isLoading,
getItemId,
selection,
isLoading,
onSelectionChange,
selection,
view,
} ) {
const mediaField = fields.find(
( field ) => field.id === view.layout.mediaField
Expand Down
Loading
Loading