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>
);

230
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,133 +283,17 @@ 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}
</div>
) : (
!isVerifyPage &&
!hideCancel && (
<div className="header__menu">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Button
title={__('Go Back')}
button="alt"
// className="button--header-close"
icon={ICONS.REMOVE}
{...closeButtonNavigationProps}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
/>
</div>
)
)}
</>
)}
</div>
</header>
);
};
type HeaderMenuButtonProps = {
authenticated: boolean,
notificationsEnabled: boolean,
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;
return (
<div className="header__buttons">
{(authenticated || !IS_WEB) && (
<Menu>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Upload')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNEL_NEW}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
</MenuList>
</Menu>
)}
{notificationsEnabled && <NotificationHeaderButton />}
<Menu>
<MenuButton
aria-label={__('Settings')}
title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP} />
{__('Help')}
</MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem>
</MenuList>
</Menu>
{(authenticated || !IS_WEB) && (
<Menu>
<MenuButton
aria-label={__('Your account')}
title={__('Your account')}
className={classnames('header__navigation-item mobile-hidden', {
className={classnames('header__navigation-item', {
'menu__title header__navigation-item--icon': !activeChannelUrl,
'header__navigation-item--profile-pic': activeChannelUrl,
})}
@ -475,6 +355,108 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
</Menu>
)}
</div>
) : (
!isVerifyPage &&
!hideCancel && (
<div className="header__menu">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Button
title={__('Go Back')}
button="alt"
// className="button--header-close"
icon={ICONS.REMOVE}
{...closeButtonNavigationProps}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
/>
</div>
)
)}
</>
)}
</div>
</header>
);
};
type HeaderMenuButtonProps = {
authenticated: boolean,
notificationsEnabled: boolean,
history: { push: (string) => void },
handleThemeToggle: (string) => void,
currentTheme: string,
};
function HeaderMenuButtons(props: HeaderMenuButtonProps) {
const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme } = props;
return (
<div className="header__buttons">
{(authenticated || !IS_WEB) && (
<Menu>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Upload')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNEL_NEW}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
</MenuList>
</Menu>
)}
{notificationsEnabled && <NotificationHeaderButton />}
<Menu>
<MenuButton
aria-label={__('Settings')}
title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP} />
{__('Help')}
</MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem>
</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 ? (

53
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,15 +101,10 @@ 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>
{showUris && <div className="help--notice">{viewMode === VIEW_MUTED ? mutedHelpText : blockedHelpText}</div>}
{showUris ? (
<ClaimList
uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
showUnresolvedClaims
@ -134,6 +128,23 @@ function ListBlocked(props: Props) {
);
}}
/>
) : (
<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>

7
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
blockList:
globalBlockList.length > 0
? globalBlockList
.sort((a, b) => new Date(a.blockedAt) - new Date(b.blockedAt))
.map((blockedChannel) => blockedChannel.channelUri),
.map((blockedChannel) => blockedChannel.channelUri)
: null,
},
});
})

6
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,9 +601,11 @@
stroke: var(--color-text);
}
@media (min-width: $breakpoint-small) {
&:not([aria-expanded='true']) {
display: none;
}
}
}
.claim__menu-button--inline {

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);