list editing behind toggle button

This commit is contained in:
zeppi 2021-12-02 20:39:08 -05:00 committed by jessopb
parent f79446b1e7
commit 5fed2d01c0
2 changed files with 26 additions and 2 deletions

View file

@ -22,6 +22,8 @@ type Props = {
collectionId: string,
showInfo: boolean,
setShowInfo: (boolean) => void,
showEdit: boolean,
setShowEdit: (boolean) => void,
collectionHasEdits: boolean,
isBuiltin: boolean,
doToggleShuffleList: (string, boolean) => void,
@ -44,6 +46,8 @@ function CollectionActions(props: Props) {
doToggleShuffleList,
playNextUri,
firstItem,
showEdit,
setShowEdit,
} = props;
const [doShuffle, setDoShuffle] = React.useState(false);
const { push } = useHistory();
@ -158,6 +162,17 @@ function CollectionActions(props: Props) {
/>
);
const showEditButton = (
<Button
title={__('Edit')}
className={classnames('button-toggle', {
'button-toggle--active': showEdit,
})}
icon={ICONS.EDIT}
onClick={() => setShowEdit(!showEdit)}
/>
);
if (isMobile) {
return (
<div className="media__actions">
@ -173,7 +188,12 @@ function CollectionActions(props: Props) {
{lhsSection}
{rhsSection}
</div>
{uri && <>{infoButton}</>}
{uri && (
<div className="section">
{infoButton}
{showEditButton}
</div>
)}
</div>
);
}

View file

@ -62,6 +62,7 @@ export default function CollectionPage(props: Props) {
const [didTryResolve, setDidTryResolve] = React.useState(false);
const [showInfo, setShowInfo] = React.useState(false);
const [showEdit, setShowEdit] = React.useState(false);
const { name, totalItems } = collection || {};
const isBuiltin = COLLECTIONS_CONSTS.BUILTIN_LISTS.includes(collectionId);
@ -133,6 +134,8 @@ export default function CollectionPage(props: Props) {
showInfo={showInfo}
isBuiltin={isBuiltin}
collectionUrls={collectionUrls}
setShowEdit={setShowEdit}
showEdit={showEdit}
/>
}
actions={
@ -188,7 +191,8 @@ export default function CollectionPage(props: Props) {
<Page>
<div className={classnames('section card-stack')}>
{info}
<ClaimList uris={collectionUrls} collectionId={collectionId} type={'listview'} />
{showEdit && <div>Do the sort</div>}
<ClaimList uris={collectionUrls} collectionId={collectionId} type={showEdit ? 'listview' : undefined} />
</div>
</Page>
);