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

improve mobile style and initial blocked screen loading

Browse source
This commit is contained in:
Sean Yesmunt 2021-03-04 01:03:58 -05:00
parent eb0e0cb7cc
commit 84bab875bc
9 changed files with 154 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/app-strings.json
View file

@ -1589,5 +1589,9 @@
"Interacting as %channelName%": "Interacting as %channelName%",
"Page Not Found": "Page Not Found",
"Transaction limit reached. Try reducing the Description length.": "Transaction limit reached. Try reducing the Description length.",
"You do not have any muted channels": "You do not have any muted channels",
"You do not have any blocked channels": "You do not have any blocked channels",
"Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.": "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.",
"Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.": "Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.",
"--end--": "--end--"
}

2
ui/component/fileAuthor/view.jsx
View file

@ -10,7 +10,7 @@ function FileAuthor(props: Props) {
const { channelUri } = props;
return channelUri ? (
<ClaimPreview uri={channelUri} type="inline" properties={false} />
<ClaimPreview uri={channelUri} type="inline" properties={false} hideMenu />
) : (
<div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
);

160
ui/component/header/view.jsx
View file

@ -176,7 +176,7 @@ const Header = (props: Props) => {
: __('Your Wallet')
}
navigate={`/$/${PAGES.WALLET}`}
className={balanceButtonProps.className}
className={classnames(balanceButtonProps.className, 'header__navigation-item--balance')}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
icon={ICONS.LBC}
// @if TARGET='app'
@ -212,7 +212,7 @@ const Header = (props: Props) => {
/>
{backTitle && <h1 className="header__auth-title">{isMobile ? simpleBackTitle || backTitle : backTitle}</h1>}
{authenticated || !IS_WEB ? (
<BalanceButton className="header__navigation-item menu__title header__navigation-item--balance" />
<BalanceButton className="header__navigation-item menu__title" />
) : (
loginButtons
)}
@ -275,10 +275,6 @@ const Header = (props: Props) => {
history={history}
handleThemeToggle={handleThemeToggle}
currentTheme={currentTheme}
activeChannelUrl={activeChannelUrl}
openSignOutModal={openSignOutModal}
email={email}
signOut={signOut}
/>
</div>
)}
@ -287,10 +283,77 @@ const Header = (props: Props) => {
{!authHeader && !backout ? (
<div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
{(!IS_WEB || authenticated) && (
<BalanceButton className="header__navigation-item menu__title header__navigation-item--balance mobile-hidden" />
<BalanceButton className="header__navigation-item menu__title mobile-hidden" />
)}
{IS_WEB && !authenticated && loginButtons}
{(authenticated || !IS_WEB) && (
<Menu>
<MenuButton
aria-label={__('Your account')}
title={__('Your account')}
className={classnames('header__navigation-item', {
'menu__title header__navigation-item--icon': !activeChannelUrl,
'header__navigation-item--profile-pic': activeChannelUrl,
})}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
{activeChannelUrl ? (
<ChannelThumbnail uri={activeChannelUrl} />
) : (
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
)}
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOADS}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Uploads')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
<Icon aria-hidden icon={ICONS.ANALYTICS} />
{__('Creator Analytics')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.REWARDS} />
{__('Rewards')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
<Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')}
</MenuItem>
{authenticated ? (
<MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
) : !IS_WEB ? (
<>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
<Icon aria-hidden icon={ICONS.SIGN_UP} />
{__('Sign Up')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
<Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')}
</MenuItem>
</>
) : null}
</MenuList>
</Menu>
)}
</div>
) : (
!isVerifyPage &&
@ -328,24 +391,10 @@ type HeaderMenuButtonProps = {
history: { push: (string) => void },
handleThemeToggle: (string) => void,
currentTheme: string,
activeChannelUrl: ?string,
openSignOutModal: () => void,
email: ?string,
signOut: () => void,
};
function HeaderMenuButtons(props: HeaderMenuButtonProps) {
const {
authenticated,
notificationsEnabled,
history,
handleThemeToggle,
currentTheme,
activeChannelUrl,
openSignOutModal,
email,
signOut,
} = props;
const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme } = props;
return (
<div className="header__buttons">
@ -407,73 +456,6 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
</MenuItem>
</MenuList>
</Menu>
{(authenticated || !IS_WEB) && (
<Menu>
<MenuButton
aria-label={__('Your account')}
title={__('Your account')}
className={classnames('header__navigation-item mobile-hidden', {
'menu__title header__navigation-item--icon': !activeChannelUrl,
'header__navigation-item--profile-pic': activeChannelUrl,
})}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
{activeChannelUrl ? (
<ChannelThumbnail uri={activeChannelUrl} />
) : (
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
)}
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOADS}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Uploads')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
<Icon aria-hidden icon={ICONS.ANALYTICS} />
{__('Creator Analytics')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.REWARDS} />
{__('Rewards')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
<Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')}
</MenuItem>
{authenticated ? (
<MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
) : !IS_WEB ? (
<>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
<Icon aria-hidden icon={ICONS.SIGN_UP} />
{__('Sign Up')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
<Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')}
</MenuItem>
</>
) : null}
</MenuList>
</Menu>
)}
</div>
);
}

1
ui/component/recommendedContent/view.jsx
View file

@ -58,6 +58,7 @@ export default function RecommendedContent(props: Props) {
type="small"
loading={isSearching}
uris={recommendedContent}
hideMenu={isMobile}
injectedItem={
SHOW_ADS && IS_WEB ? (
SIMPLE_SITE ? (

99
ui/page/listBlocked/view.jsx
View file

@ -6,10 +6,10 @@ import ClaimList from 'component/claimList';
import Page from 'component/page';
import Spinner from 'component/spinner';
import Button from 'component/button';
import usePrevious from 'effects/use-previous';
import usePersistedState from 'effects/use-persisted-state';
import ChannelBlockButton from 'component/channelBlockButton';
import ChannelMuteButton from 'component/channelMuteButton';
import Yrbl from 'component/yrbl';
type Props = {
mutedUris: ?Array<string>,
@ -22,27 +22,19 @@ const VIEW_MUTED = 'muted';
function ListBlocked(props: Props) {
const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
// Keep a local list to allow for undoing actions in this component
const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
const [localMutedList, setLocalMutedList] = React.useState(undefined);
const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
const hasLocalMuteList = localMutedList && localMutedList.length > 0;
const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
const stringifiedMutedChannels = JSON.stringify(mutedUris);
const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
const stringifiedBlockedChannels = JSON.stringify(blockedUris);
React.useEffect(() => {
if (previousFetchingModBlockList && !fetchingModerationBlockList) {
setLoading(false);
}
}, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
const showUris = (viewMode === VIEW_MUTED && hasLocalMuteList) || (viewMode === VIEW_BLOCKED && hasLocalBlockList);
React.useEffect(() => {
const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
@ -70,15 +62,22 @@ function ListBlocked(props: Props) {
}
}, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);
const mutedHelpText = __(
'Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.'
);
const blockedHelpText = __(
"Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content."
);
return (
<Page>
{loading && (
{fetchingModerationBlockList && (
<div className="main--empty">
<Spinner />
</div>
)}
{!loading && (
{!fetchingModerationBlockList && (
<>
<div className="section__header--actions">
<div className="section__actions--inline">
@ -102,38 +101,50 @@ function ListBlocked(props: Props) {
/>
</div>
</div>
<div className="help--notice">
{viewMode === VIEW_MUTED
? __(
'Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.'
)
: __(
"Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content."
)}
</div>
<ClaimList
uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
showUnresolvedClaims
showHiddenByUser
hideMenu
renderActions={(claim) => {
return (
<div className="section__actions">
{viewMode === VIEW_MUTED ? (
<>
<ChannelMuteButton uri={claim.permanent_url} />
<ChannelBlockButton uri={claim.permanent_url} />
</>
) : (
<>
<ChannelBlockButton uri={claim.permanent_url} />
<ChannelMuteButton uri={claim.permanent_url} />
</>
)}
</div>
);
}}
/>
{showUris && <div className="help--notice">{viewMode === VIEW_MUTED ? mutedHelpText : blockedHelpText}</div>}
{showUris ? (
<ClaimList
uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
showUnresolvedClaims
showHiddenByUser
hideMenu
renderActions={(claim) => {
return (
<div className="section__actions">
{viewMode === VIEW_MUTED ? (
<>
<ChannelMuteButton uri={claim.permanent_url} />
<ChannelBlockButton uri={claim.permanent_url} />
</>
) : (
<>
<ChannelBlockButton uri={claim.permanent_url} />
<ChannelMuteButton uri={claim.permanent_url} />
</>
)}
</div>
);
}}
/>
) : (
<div className="main--empty">
<Yrbl
title={
viewMode === VIEW_MUTED
? __('You do not have any muted channels')
: __('You do not have any blocked channels')
}
subtitle={viewMode === VIEW_MUTED ? mutedHelpText : blockedHelpText}
actions={
<div className="section__actions">
<Button button="primary" label={__('Go Home')} navigate="/" />
</div>
}
/>
</div>
)}
</>
)}
</Page>

9
ui/redux/actions/comments.js
View file

@ -561,9 +561,12 @@ export function doFetchModBlockedList() {
dispatch({
type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,
data: {
blockList: globalBlockList
.sort((a, b) => new Date(a.blockedAt) - new Date(b.blockedAt))
.map((blockedChannel) => blockedChannel.channelUri),
blockList:
globalBlockList.length > 0
? globalBlockList
.sort((a, b) => new Date(a.blockedAt) - new Date(b.blockedAt))
.map((blockedChannel) => blockedChannel.channelUri)
: null,
},
});
})

10
ui/scss/component/_claim-list.scss
View file

@ -456,9 +456,8 @@
.claim-tile__title {
position: relative;
padding: var(--spacing-s);
padding-right: var(--spacing-m);
padding-right: var(--spacing-l);
padding-bottom: 0;
margin-bottom: var(--spacing-s);
@ -474,6 +473,7 @@
@media (min-width: $breakpoint-small) {
min-height: 2.5rem;
padding-right: var(--spacing-m);
}
}
@ -601,8 +601,10 @@
stroke: var(--color-text);
}
&:not([aria-expanded='true']) {
display: none;
@media (min-width: $breakpoint-small) {
&:not([aria-expanded='true']) {
display: none;
}
}
}

26
ui/scss/component/_header.scss
View file

@ -101,35 +101,27 @@
}
.header__navigation-item--profile-pic {
margin-left: var(--spacing-m);
.channel-thumbnail {
height: var(--height-button);
width: var(--height-button);
margin-right: 0;
transition: border-radius var(--animation-duration);
border-radius: calc(var(--height-button) / 2);
img {
transition: border-radius var(--animation-duration);
border-radius: calc(var(--height-button) / 2);
}
}
&:hover {
opacity: 0.7;
.channel-thumbnail {
border-radius: var(--border-radius);
img {
border-radius: var(--border-radius);
}
}
}
}
.header__navigation-item--balance {
@extend .button--link;
margin-left: var(--spacing-m);
@extend .button--file-action;
margin: 0 var(--spacing-s);
color: var(--color-text);
&:hover {
color: var(--color-text);
}
}
.header__navigation-item--forward {

2
ui/scss/init/_color.scss
View file

@ -49,7 +49,7 @@
--color-input-color: #111111;
--color-input-label: var(--color-gray-5);
--color-input-placeholder: #212529;
--color-input-bg: #f4f4f4;
--color-input-bg: var(--color-gray-1);
--color-input-bg-copyable: #434b53;
--color-input-border: var(--color-border);
--color-input-border-active: var(--color-secondary);