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

100
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,6 +38,7 @@ 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();
@ -44,54 +46,66 @@ function CollectionActions(props: Props) {
const webShareable = true; // collections have cost? const webShareable = true; // collections have cost?
const lhsSection = ( const lhsSection = (
<> <>
{ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />} {!isBuiltin && (
{uri && <ClaimSupportButton uri={uri} fileAction />} <>
{/* TODO Add ClaimRepostButton component */} {ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />}
{uri && ( {uri && <ClaimSupportButton uri={uri} fileAction />}
<Button {/* TODO Add ClaimRepostButton component */}
className="button--file-action" {uri && (
icon={ICONS.SHARE} <Button
label={__('Share')} className="button--file-action"
title={__('Share')} icon={ICONS.SHARE}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })} label={__('Share')}
/> title={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
/>
)}
</>
)} )}
</> </>
); );
const rhsSection = ( const rhsSection = (
<> <>
{isMyCollection && ( {!isBuiltin &&
<Button (isMyCollection ? (
title={uri ? __('Update') : __('Publish')} <>
label={uri ? __('Update') : __('Publish')} <Button
className={classnames('button--file-action')} title={uri ? __('Update') : __('Publish')}
onClick={() => push(`?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`)} label={uri ? __('Update') : __('Publish')}
icon={ICONS.PUBLISH} className={classnames('button--file-action')}
iconColor={collectionHasEdits && 'red'} onClick={() => push(`?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`)}
iconSize={18} icon={ICONS.PUBLISH}
disabled={claimIsPending} iconColor={collectionHasEdits && 'red'}
/> iconSize={18}
)} disabled={claimIsPending}
{isMyCollection && ( />
<Button <Button
className={classnames('button--file-action')} className={classnames('button--file-action')}
title={__('Delete List')} title={__('Delete List')}
onClick={() => openModal(MODALS.COLLECTION_DELETE, { uri, collectionId, redirect: `/$/${PAGES.LISTS}` })} onClick={() => openModal(MODALS.COLLECTION_DELETE, { uri, collectionId, redirect: `/$/${PAGES.LISTS}` })}
icon={ICONS.DELETE} icon={ICONS.DELETE}
iconSize={18} iconSize={18}
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;