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 && (
<>
<div className="section__header--actions">
<div className={'claim-search__input-container'}>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected': filterBy,
})}
label={__('Filter')}
type="select"
name="filter"
value={filterBy || ALL_NOTIFICATIONS}
onChange={(e) => setFilterBy(e.target.value)}
>
{NOTIFICATION_FILTER_TYPES.map((type) => (
<option key={type} value={type}>
{/* i18fixme */}
{type === ALL_NOTIFICATIONS && __('All')}
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
</option>
))}
</FormField>
</div>
</div>
<Card
isBodyList
title={
<span>
{__('Notifications')}
{fetching && <Spinner type="small" />}
</span>
}
titleActions={
unreadCount > 0 && (
<div className="claim-list__header">
<h1 className="card__title">{__('Notifications')}</h1>
<div className="claim-list__alt-controls--wrap">
{fetching && <Spinner type="small" />}
<div className={'claim-search__input-container'}>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected': filterBy,
})}
type="select"
name="filter"
value={filterBy || ALL_NOTIFICATIONS}
onChange={(e) => setFilterBy(e.target.value)}
>
{NOTIFICATION_FILTER_TYPES.map((type) => (
<option key={type} value={type}>
{/* i18fixme */}
{type === ALL_NOTIFICATIONS && __('All')}
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
</option>
))}
</FormField>
</div>
{unreadCount > 0 && (
<Button
icon={ICONS.EYE}
onClick={doReadNotifications}
button="secondary"
label={__('Mark all as read')}
/>
)
}
)}
</div>
</div>
<Card
isBodyList
body={
<>
{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 {
@include font-sans;
padding: var(--spacing-m);