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

Switch some file action buttons to menuItems

Browse source 
So everything can fit better on mobile view
This commit is contained in:
Rafael 2022-02-01 17:20:55 -03:00 committed by Thomas Zarebczan
parent 5794432288
commit 416238db29
1 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ui/component/fileActions/view.jsx
View file

@ -1,4 +1,5 @@
// @flow // @flow
import { useIsMobile } from 'effects/use-screensize';
import { SITE_NAME, ENABLE_FILE_REACTIONS } from 'config'; import { SITE_NAME, ENABLE_FILE_REACTIONS } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
@ -60,6 +61,8 @@ export default function FileActions(props: Props) {
location: { pathname, search }, location: { pathname, search },
} = useHistory(); } = useHistory();
const isMobile = useIsMobile();
const [downloadClicked, setDownloadClicked] = React.useState(false); const [downloadClicked, setDownloadClicked] = React.useState(false);
const { claim_id: claimId, signing_channel: signingChannel, value, meta: claimMeta } = claim; const { claim_id: claimId, signing_channel: signingChannel, value, meta: claimMeta } = claim;
@ -108,7 +111,6 @@ export default function FileActions(props: Props) {
push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}&redirect=${encodeURIComponent(pathname)}`); push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}&redirect=${encodeURIComponent(pathname)}`);
} }
} }
return ( return (
<div className="media__actions section__actions--no-margin"> <div className="media__actions section__actions--no-margin">
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />} {ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
@ -117,7 +119,7 @@ export default function FileActions(props: Props) {
<ClaimCollectionAddButton uri={uri} fileAction /> <ClaimCollectionAddButton uri={uri} fileAction />
{!hideRepost && ( {!hideRepost && !isMobile && (
<Tooltip title={__('Repost')} arrow={false}> <Tooltip title={__('Repost')} arrow={false}>
<Button <Button
button="alt" button="alt"
@ -141,7 +143,7 @@ export default function FileActions(props: Props) {
/> />
</Tooltip> </Tooltip>
{claimIsMine && ( {claimIsMine && !isMobile && (
<> <>
<Tooltip title={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')} arrow={false}> <Tooltip title={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')} arrow={false}>
<div style={{ margin: '0px' }}> <div style={{ margin: '0px' }}>
@ -166,7 +168,7 @@ export default function FileActions(props: Props) {
</> </>
)} )}
{(!isLivestreamClaim || !claimIsMine) && ( {(!isLivestreamClaim || !claimIsMine || isMobile) && (
<Menu> <Menu>
<MenuButton <MenuButton
className="button--file-action" className="button--file-action"
@ -179,6 +181,42 @@ export default function FileActions(props: Props) {
</MenuButton> </MenuButton>
<MenuList className="menu__list"> <MenuList className="menu__list">
{isMobile && (
<>
{!hideRepost && (
<MenuItem className="comment__menu-option" onSelect={handleRepostClick}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.REPOST} />
{claimMeta.reposted > 1
? __(`%repost_total% Reposts`, { repost_total: claimMeta.reposted })
: __('Repost')}
</div>
</MenuItem>
)}
{claimIsMine && (
<>
<MenuItem className="comment__menu-option" onSelect={() => doEditForChannel(claim, editUri)}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.EDIT} />
{isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')}
</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => doOpenModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.DELETE} />
{__('Delete')}
</div>
</MenuItem>
</>
)}
</>
)}
{!isLivestreamClaim && !disableDownloadButton && ( {!isLivestreamClaim && !disableDownloadButton && (
<MenuItem className="comment__menu-option" onSelect={handleWebDownload}> <MenuItem className="comment__menu-option" onSelect={handleWebDownload}>
<div className="menu__link"> <div className="menu__link">