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

Notification: re-order header and actions to look like Uploads page.

Browse source
This commit is contained in:
infinite-persistence 2021-03-10 12:11:45 +08:00 committed by Sean Yesmunt
parent 7a66be1d54
commit 4cc2f28f3d
2 changed files with 43 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
ui/page/notifications/view.jsx
View file

@ -70,51 +70,46 @@ export default function NotificationsPage(props: Props) {
)} )}
{!fetching && ( {!fetching && (
<> <>
<div className="section__header--actions"> <div className="claim-list__header">
<div className={'claim-search__input-container'}> <h1 className="card__title">{__('Notifications')}</h1>
<FormField <div className="claim-list__alt-controls--wrap">
className={classnames('claim-search__dropdown', { {fetching && <Spinner type="small" />}
'claim-search__dropdown--selected': filterBy, <div className={'claim-search__input-container'}>
})} <FormField
label={__('Filter')} className={classnames('claim-search__dropdown', {
type="select" 'claim-search__dropdown--selected': filterBy,
name="filter" })}
value={filterBy || ALL_NOTIFICATIONS} type="select"
onChange={(e) => setFilterBy(e.target.value)} name="filter"
> value={filterBy || ALL_NOTIFICATIONS}
{NOTIFICATION_FILTER_TYPES.map((type) => ( onChange={(e) => setFilterBy(e.target.value)}
<option key={type} value={type}> >
{/* i18fixme */} {NOTIFICATION_FILTER_TYPES.map((type) => (
{type === ALL_NOTIFICATIONS && __('All')} <option key={type} value={type}>
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')} {/* i18fixme */}
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')} {type === ALL_NOTIFICATIONS && __('All')}
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')} {type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')} {type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')} {type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')} {type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
</option> {type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
))} {type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
</FormField> </option>
</div> ))}
</div> </FormField>
<Card </div>
isBodyList {unreadCount > 0 && (
title={
<span>
{__('Notifications')}
{fetching && <Spinner type="small" />}
</span>
}
titleActions={
unreadCount > 0 && (
<Button <Button
icon={ICONS.EYE} icon={ICONS.EYE}
onClick={doReadNotifications} onClick={doReadNotifications}
button="secondary" button="secondary"
label={__('Mark all as read')} label={__('Mark all as read')}
/> />
) )}
} </div>
</div>
<Card
isBodyList
body={ body={
<> <>
{filteredNotifications && filteredNotifications.length > 0 ? ( {filteredNotifications && filteredNotifications.length > 0 ? (

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

@ -61,6 +61,15 @@
} }
} }
.claim-list__alt-controls--wrap {
@extend .claim-list__alt-controls;
@media (max-width: $breakpoint-small) {
display: flex;
flex-wrap: wrap;
}
}
.claim-preview__wrapper { .claim-preview__wrapper {
@include font-sans; @include font-sans;
padding: var(--spacing-m); padding: var(--spacing-m);