list editing behind toggle button
This commit is contained in:
parent
f79446b1e7
commit
5fed2d01c0
2 changed files with 26 additions and 2 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue