Skip to content
Snippets Groups Projects
Unverified Commit 1175ee6e authored by Raphael Krut-Landau's avatar Raphael Krut-Landau Committed by GitHub
Browse files

Put bulk actions above popovers in collections (#42512) 

* q

* Restore margin-left adjustment
parent ef15d0e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx
+ 3
− 5
View file @ 1175ee6e
...@@ -4,11 +4,6 @@ export const CollectionRoot = styled.div` ...@@ -4,11 +4,6 @@ export const CollectionRoot = styled.div`
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
container-name: ItemsTableContainer;
container-type: inline-size;
// NOTE: The BulkActionsToast is centered within this container.
// If this div ever ceases to be a container one day, let's restore the previously
// existing margin-left fix for the toast so it is still centered when the nav sidebar is open
`; `;
export const CollectionMain = styled.div` export const CollectionMain = styled.div`
...@@ -24,6 +19,9 @@ export interface CollectionTableProps { ...@@ -24,6 +19,9 @@ export interface CollectionTableProps {
export const CollectionTable = styled.div<CollectionTableProps>` export const CollectionTable = styled.div<CollectionTableProps>`
margin-top: ${props => (props.hasPinnedItems ? "2rem" : "")}; margin-top: ${props => (props.hasPinnedItems ? "2rem" : "")};
container-name: ItemsTableContainer;
container-type: inline-size;
`; `;
export const CollectionEmptyContent = styled.div` export const CollectionEmptyContent = styled.div`
......
frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx
+ 38
− 36
View file @ 1175ee6e
...@@ -350,41 +350,43 @@ export const CollectionContentView = ({ ...@@ -350,41 +350,43 @@ export const CollectionContentView = ({
} }
return ( return (
<CollectionTable data-testid="collection-table"> <>
<ItemsTable <CollectionTable data-testid="collection-table">
databases={databases} <ItemsTable
bookmarks={bookmarks} databases={databases}
createBookmark={createBookmark} bookmarks={bookmarks}
deleteBookmark={deleteBookmark} createBookmark={createBookmark}
items={unpinnedItems} deleteBookmark={deleteBookmark}
collection={collection} items={unpinnedItems}
sortingOptions={unpinnedItemsSorting} collection={collection}
onSortingOptionsChange={ sortingOptions={unpinnedItemsSorting}
handleUnpinnedItemsSortingChange onSortingOptionsChange={
} handleUnpinnedItemsSortingChange
selectedItems={selected} }
hasUnselected={hasUnselected} selectedItems={selected}
getIsSelected={getIsSelected} hasUnselected={hasUnselected}
onToggleSelected={toggleItem} getIsSelected={getIsSelected}
onDrop={clear} onToggleSelected={toggleItem}
onMove={handleMove} onDrop={clear}
onCopy={handleCopy} onMove={handleMove}
onSelectAll={handleSelectAll} onCopy={handleCopy}
onSelectNone={clear} onSelectAll={handleSelectAll}
/> onSelectNone={clear}
<div className={cx(CS.flex, CS.justifyEnd, CS.my3)}> />
{hasPagination && ( <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}>
<PaginationControls {hasPagination && (
showTotal <PaginationControls
page={page} showTotal
pageSize={PAGE_SIZE} page={page}
total={metadata.total} pageSize={PAGE_SIZE}
itemsLength={unpinnedItems.length} total={metadata.total}
onNextPage={handleNextPage} itemsLength={unpinnedItems.length}
onPreviousPage={handlePreviousPage} onNextPage={handleNextPage}
/> onPreviousPage={handlePreviousPage}
)} />
</div> )}
</div>
</CollectionTable>
<CollectionBulkActions <CollectionBulkActions
selected={selected} selected={selected}
collection={collection} collection={collection}
...@@ -396,7 +398,7 @@ export const CollectionContentView = ({ ...@@ -396,7 +398,7 @@ export const CollectionContentView = ({
selectedItems={selectedItems} selectedItems={selectedItems}
selectedAction={selectedAction} selectedAction={selectedAction}
/> />
</CollectionTable> </>
); );
}} }}
</Search.ListLoader> </Search.ListLoader>
......
frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
+ 3
− 0
View file @ 1175ee6e
...@@ -2,6 +2,7 @@ import styled from "@emotion/styled"; ...@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
import Card from "metabase/components/Card"; import Card from "metabase/components/Card";
import { alpha, color } from "metabase/lib/colors"; import { alpha, color } from "metabase/lib/colors";
import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
import { space } from "metabase/styled-components/theme"; import { space } from "metabase/styled-components/theme";
import { Button, DEFAULT_POPOVER_Z_INDEX } from "metabase/ui"; import { Button, DEFAULT_POPOVER_Z_INDEX } from "metabase/ui";
...@@ -12,6 +13,8 @@ export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>` ...@@ -12,6 +13,8 @@ export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>`
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: ${props =>
props.isNavbarOpen ? `${parseInt(NAV_SIDEBAR_WIDTH) / 2}px` : "0"};
margin-bottom: ${space(2)}; margin-bottom: ${space(2)};
z-index: ${BULK_ACTIONS_Z_INDEX}; z-index: ${BULK_ACTIONS_Z_INDEX};
`; `;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment