LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add Copy List button on Collection page

Browse source
This commit is contained in:
saltrafael 2021-08-20 09:47:04 -03:00
parent 749862c333
commit 975b6a3b01
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
3 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/component/collectionActions/view.jsx
View file

@ -15,7 +15,7 @@ import { ENABLE_FILE_REACTIONS } from 'config';
type Props = { type Props = {
uri: string, uri: string,
claim: StreamClaim, claim: StreamClaim,
openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void, openModal: (id: string, {}) => void,
myChannels: ?Array<ChannelClaim>, myChannels: ?Array<ChannelClaim>,
doToast: ({ message: string }) => void, doToast: ({ message: string }) => void,
claimIsPending: boolean, claimIsPending: boolean,
@ -24,6 +24,7 @@ type Props = {
showInfo: boolean, showInfo: boolean,
setShowInfo: (boolean) => void, setShowInfo: (boolean) => void,
collectionHasEdits: boolean, collectionHasEdits: boolean,
isBuiltin: boolean,
}; };
function CollectionActions(props: Props) { function CollectionActions(props: Props) {
@ -37,12 +38,15 @@ function CollectionActions(props: Props) {
showInfo, showInfo,
setShowInfo, setShowInfo,
collectionHasEdits, collectionHasEdits,
isBuiltin,
} = props; } = props;
const { push } = useHistory(); const { push } = useHistory();
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
const webShareable = true; // collections have cost? const webShareable = true; // collections have cost?
const lhsSection = ( const lhsSection = (
<>
{!isBuiltin && (
<> <>
{ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />} {ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />}
{uri && <ClaimSupportButton uri={uri} fileAction />} {uri && <ClaimSupportButton uri={uri} fileAction />}
@ -57,11 +61,15 @@ function CollectionActions(props: Props) {
/> />
)} )}
</> </>
)}
</>
); );
const rhsSection = ( const rhsSection = (
<> <>
{isMyCollection && ( {!isBuiltin &&
(isMyCollection ? (
<>
<Button <Button
title={uri ? __('Update') : __('Publish')} title={uri ? __('Update') : __('Publish')}
label={uri ? __('Update') : __('Publish')} label={uri ? __('Update') : __('Publish')}
@ -72,8 +80,6 @@ function CollectionActions(props: Props) {
iconSize={18} iconSize={18}
disabled={claimIsPending} disabled={claimIsPending}
/> />
)}
{isMyCollection && (
<Button <Button
className={classnames('button--file-action')} className={classnames('button--file-action')}
title={__('Delete List')} title={__('Delete List')}
@ -83,15 +89,23 @@ function CollectionActions(props: Props) {
description={__('Delete List')} description={__('Delete List')}
disabled={claimIsPending} disabled={claimIsPending}
/> />
)} </>
{!isMyCollection && ( ) : (
<Button <Button
title={__('Report content')} title={__('Report content')}
className="button--file-action" className="button--file-action"
icon={ICONS.REPORT} icon={ICONS.REPORT}
navigate={`/$/${PAGES.REPORT_CONTENT}?claimId=${claimId}`} navigate={`/$/${PAGES.REPORT_CONTENT}?claimId=${claimId}`}
/> />
)} ))}
<Button
className={classnames('button--file-action')}
label={__('Copy List')}
title={__('Copy List')}
onClick={() => openModal(MODALS.COLLECTION_ADD, { collectionId })}
icon={ICONS.COPY}
iconSize={18}
/>
</> </>
); );

20
ui/page/collection/view.jsx
View file

@ -112,18 +112,26 @@ export default function CollectionPage(props: Props) {
title={ title={
<span> <span>
<Icon <Icon
icon={(collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) || icon={
(collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK} (collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
className="icon--margin-right" /> (collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) ||
ICONS.STACK
}
className="icon--margin-right"
/>
{claim ? claim.value.title || claim.name : collection && collection.name} {claim ? claim.value.title || claim.name : collection && collection.name}
</span> </span>
} }
titleActions={titleActions} titleActions={titleActions}
subtitle={subTitle} subtitle={subTitle}
body={ body={
!isBuiltin && ( <CollectionActions
<CollectionActions uri={uri} collectionId={collectionId} setShowInfo={setShowInfo} showInfo={showInfo} /> uri={uri}
) collectionId={collectionId}
setShowInfo={setShowInfo}
showInfo={showInfo}
isBuiltin={isBuiltin}
/>
} }
actions={ actions={
showInfo && showInfo &&

5
ui/scss/component/_button.scss
View file

@ -240,6 +240,11 @@
} }
} }
.button--file-action--right {
@extend .button--file-action;
float: right;
}
.button--fire { .button--fire {
color: var(--color-fire); color: var(--color-fire);
position: relative; position: relative;