Skip to content

Commit 9f581fb

Browse files
mehmoodakmehmoodak
authored
Reader: Improves reader sidebar (#101990)
- Add a title and description at the top of the sidebar. - Use the Reader "glasses" icon for Recent instead of the checkmark - Buttons are 40px tall, same default size as core components. - There's a new sub-text for "Recent", "Latest from your subscriptions". - Small chevron is used for collapsibles. - "Manage subscriptions", if we keep it on this page, is separated from the main menu items, with a 32px gap. - Makes line-height and spacing of stream title and helptext tighter.
1 parent ba42948 commit 9f581fb

File tree

14 files changed

+90
-62
lines changed

14 files changed

+90
-62
lines changed

‎client/assets/icons/reader/reader-icon.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface ReaderIconProps {
2+
className?: string;
3+
height?: number;
4+
viewBox?: string;
5+
width?: number;
6+
}
7+
8+
export default function ReaderIcon( props: ReaderIconProps ): JSX.Element {
9+
const { className, height = 11, viewBox = '0 0 24 11', width = 24 } = props;
10+
11+
return (
12+
<svg
13+
className={ className }
14+
width={ width }
15+
height={ height }
16+
viewBox={ viewBox }
17+
fill="none"
18+
xmlns="http://www.w3.org/2000/svg"
19+
>
20+
<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
21+
</svg>
22+
);
23+
}

‎client/components/navigation-header/style.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@
5252
> div:first-child {
5353
display: flex;
5454
flex-direction: column;
55-
gap: 4px;
5655
}
5756
}
5857

‎client/layout/global-sidebar/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ $brand-text: "SF Pro Text", $sans;
158158
}
159159

160160
li.sidebar__separator {
161-
margin: 0 0 24px;
161+
margin: 0 0 32px;
162162
}
163163

164164
.sidebar__expandable-arrow {

‎client/layout/masterbar/logged-in.jsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
99
import { parse } from 'qs';
1010
import { Component } from 'react';
1111
import { connect } from 'react-redux';
12+
import ReaderIcon from 'calypso/assets/icons/reader/reader-icon';
1213
import AsyncLoad from 'calypso/components/async-load';
1314
import Gravatar from 'calypso/components/gravatar';
1415
import { getStatsPathForTab } from 'calypso/lib/route';
@@ -627,18 +628,7 @@ class MasterbarLoggedIn extends Component {
627628
tipTarget="reader"
628629
className="masterbar__reader"
629630
url="/reader"
630-
icon={
631-
<svg
632-
width="24"
633-
height="11"
634-
viewBox="0 0 24 11"
635-
fill="none"
636-
xmlns="http://www.w3.org/2000/svg"
637-
className="masterbar__menu-icon masterbar_svg-reader"
638-
>
639-
<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
640-
</svg>
641-
}
631+
icon={ <ReaderIcon className="masterbar__menu-icon masterbar_svg-reader" /> }
642632
onClick={ this.clickReader }
643633
isActive={ this.isActive( 'reader', true ) }
644634
tooltip={ translate( 'Read the blogs and topics you follow' ) }

‎client/layout/sidebar/expandable-heading.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Count, Gridicon, MaterialIcon } from '@automattic/components';
22
import { Button } from '@wordpress/components';
3+
import { Icon, chevronDownSmall } from '@wordpress/icons';
34
import { useTranslate } from 'i18n-calypso';
45
import PropTypes from 'prop-types';
56
import TranslatableString from 'calypso/components/translatable/proptype';
@@ -58,11 +59,11 @@ const ExpandableSidebarHeading = ( {
5859
} }
5960
aria-label={ expanded ? translate( 'Collapse menu' ) : translate( 'Expand menu' ) }
6061
icon={
61-
<MaterialIcon icon="keyboard_arrow_down" className="sidebar__expandable-arrow" />
62+
<Icon icon={ chevronDownSmall } className="sidebar__expandable-arrow" size={ 24 } />
6263
}
6364
/>
6465
) : (
65-
<MaterialIcon icon="keyboard_arrow_down" className="sidebar__expandable-arrow" />
66+
<Icon icon={ chevronDownSmall } className="sidebar__expandable-arrow" size={ 24 } />
6667
) ) }
6768
</SidebarHeading>
6869
);

‎client/my-sites/sidebar/style.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,11 @@ $font-size: rem(14px);
233233
box-sizing: border-box;
234234
}
235235

236-
.sidebar__expandable-arrow,
236+
.sidebar__expandable-arrow {
237+
height: initial;
238+
width: initial;
239+
}
240+
237241
.gridicons-external {
238242
width: 20px;
239243
height: 20px;
@@ -389,10 +393,6 @@ $font-size: rem(14px);
389393
}
390394
}
391395

392-
.sidebar__menu.is-togglable .sidebar__expandable-arrow {
393-
margin-right: 10px;
394-
}
395-
396396
.notice {
397397
/* stylelint-disable-next-line scales/font-weights */
398398
font-weight: 300;
@@ -452,7 +452,7 @@ $font-size: rem(14px);
452452
padding: 12px 10px;
453453
margin: 0 12px;
454454
border-radius: 4px;
455-
max-height: 44px;
455+
max-height: 40px;
456456
}
457457

458458
.sidebar__expandable-content .sidebar__menu-link {

‎client/reader/components/icons/following-icon.jsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎client/reader/following/main.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import config from '@automattic/calypso-config';
22
import { FoldableCard } from '@automattic/components';
33
import clsx from 'clsx';
4-
import { translate, fixMe } from 'i18n-calypso';
4+
import { fixMe, translate } from 'i18n-calypso';
55
import { useEffect } from 'react';
66
import AsyncLoad from 'calypso/components/async-load';
77
import BloganuaryHeader from 'calypso/components/bloganuary-header';
@@ -63,9 +63,9 @@ function FollowingStream( { ...props } ) {
6363
<NavigationHeader
6464
title={ translate( 'Recent' ) }
6565
subtitle={ fixMe( {
66-
text: 'Fresh content from blogs you follow.',
67-
newCopy: translate( 'Fresh content from blogs you follow.' ),
68-
oldCopy: translate( "Stay current with the blogs you've subscribed to." ),
66+
text: 'Latest from your subscriptions.',
67+
newCopy: translate( 'Latest from your subscriptions.' ),
68+
oldCopy: translate( 'Fresh content from blogs you follow.' ),
6969
} ) }
7070
className={ clsx( 'following-stream-header', {
7171
'reader-dual-column': props.width > WIDE_DISPLAY_CUTOFF,

‎client/reader/sidebar/index.jsx

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -172,18 +172,21 @@ export class ReaderSidebar extends Component {
172172
<QueryReaderTeams />
173173
<QueryReaderOrganizations />
174174

175+
<li className="sidebar-header">
176+
<h3>{ translate( 'Reader' ) }</h3>
177+
<p>{ translate( 'Keep up with your interests.' ) }</p>
178+
</li>
179+
175180
<SidebarItem
176181
label={ translate( 'Search' ) }
177182
onNavigate={ this.handleReaderSidebarSearchClicked }
178-
customIcon={ <ReaderSearchIcon viewBox="-3 0 24 24" /> }
183+
customIcon={ <ReaderSearchIcon viewBox="0 0 24 24" /> }
179184
link="/reader/search"
180185
className={ ReaderSidebarHelper.itemLinkClass( '/reader/search', path, {
181186
'sidebar-streams__search': true,
182187
} ) }
183188
/>
184189

185-
<SidebarSeparator />
186-
187190
<li className="sidebar-streams__following">
188191
<ReaderSidebarRecent
189192
onClick={ this.props.toggleFollowingVisibility }
@@ -198,14 +201,14 @@ export class ReaderSidebar extends Component {
198201
} ) }
199202
label={ translate( 'Discover' ) }
200203
onNavigate={ this.handleReaderSidebarDiscoverClicked }
201-
customIcon={ <ReaderDiscoverIcon viewBox="-3 0 24 24" /> }
204+
customIcon={ <ReaderDiscoverIcon viewBox="0 0 24 24" /> }
202205
link="/discover"
203206
/>
204207

205208
<SidebarItem
206209
label={ translate( 'Likes' ) }
207210
onNavigate={ this.handleReaderSidebarLikeActivityClicked }
208-
customIcon={ <ReaderLikesIcon viewBox="-3 0 24 24" /> }
211+
customIcon={ <ReaderLikesIcon viewBox="0 0 24 24" /> }
209212
link="/activities/likes"
210213
className={ ReaderSidebarHelper.itemLinkClass( '/activities/likes', path, {
211214
'sidebar-activity__likes': true,
@@ -218,7 +221,7 @@ export class ReaderSidebar extends Component {
218221
} ) }
219222
label={ translate( 'Conversations' ) }
220223
onNavigate={ this.handleReaderSidebarConversationsClicked }
221-
customIcon={ <ReaderConversationsIcon iconSize={ 24 } viewBox="-3 0 24 24" /> }
224+
customIcon={ <ReaderConversationsIcon iconSize={ 24 } viewBox="0 0 24 24" /> }
222225
link="/reader/conversations"
223226
/>
224227

@@ -240,11 +243,17 @@ export class ReaderSidebar extends Component {
240243
currentTag={ this.state.currentTag }
241244
/>
242245

243-
<SidebarSeparator />
244-
245-
<li>
246-
<ReaderSidebarOrganizations organizations={ this.props.organizations } path={ path } />
247-
</li>
246+
{ this.props.organizations && (
247+
<>
248+
<SidebarSeparator />
249+
<li>
250+
<ReaderSidebarOrganizations
251+
organizations={ this.props.organizations }
252+
path={ path }
253+
/>
254+
</li>
255+
</>
256+
) }
248257

249258
{ isAutomatticTeamMember( teams ) && (
250259
<SidebarItem
@@ -254,27 +263,29 @@ export class ReaderSidebar extends Component {
254263
label="A8C Conversations"
255264
onNavigate={ this.handleReaderSidebarA8cConversationsClicked }
256265
link="/reader/conversations/a8c"
257-
customIcon={ <ReaderA8cConversationsIcon size={ 24 } viewBox="-5 -2 24 24" /> }
266+
customIcon={ <ReaderA8cConversationsIcon size={ 24 } viewBox="-2 -2 24 24" /> }
258267
/>
259268
) }
260269

270+
<SidebarSeparator />
271+
261272
<SidebarItem
262273
className={ ReaderSidebarHelper.itemLinkClass( '/reader/notifications', path, {
263274
'sidebar-streams__notifications': true,
264275
} ) }
265276
label={ translate( 'Notifications' ) }
266277
onNavigate={ this.handleReaderSidebarNotificationsClicked }
267-
customIcon={ <ReaderNotificationsIcon size={ 24 } viewBox="-5 -2 24 24" /> }
278+
customIcon={ <ReaderNotificationsIcon size={ 24 } viewBox="-2 -2 24 24" /> }
268279
link="/reader/notifications"
269280
/>
270281

271282
<SidebarItem
272283
className={ ReaderSidebarHelper.itemLinkClass( '/reader/subscriptions', path, {
273284
'sidebar-streams__manage-subscriptions': true,
274285
} ) }
275-
label={ translate( 'Manage subscriptions' ) }
286+
label={ translate( 'Manage Subscriptions' ) }
276287
onNavigate={ this.handleReaderSidebarManageSubscriptionsClicked }
277-
customIcon={ <ReaderManageSubscriptionsIcon size={ 24 } viewBox="-3 0 24 24" /> }
288+
customIcon={ <ReaderManageSubscriptionsIcon size={ 24 } viewBox="0 0 24 24" /> }
278289
link="/reader/subscriptions"
279290
/>
280291
</SidebarMenu>

‎client/reader/sidebar/reader-sidebar-lists/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export class ReaderSidebarLists extends Component {
4141
expanded={ isOpen }
4242
title={ translate( 'Lists' ) }
4343
onClick={ this.selectMenu }
44-
customIcon={ <ReaderListIcon viewBox="-3 0 24 24" /> }
44+
customIcon={ <ReaderListIcon viewBox="0 0 24 24" /> }
4545
disableFlyout
4646
className={ path.startsWith( '/reader/list' ) && 'sidebar__menu--selected' }
4747
expandableIconClick={ onClick }

‎client/reader/sidebar/reader-sidebar-organizations/list.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ export class ReaderSidebarOrganizationsList extends Component {
4343
renderIcon() {
4444
const { organization } = this.props;
4545
if ( organization.id === AUTOMATTIC_ORG_ID ) {
46-
return <ReaderA8cIcon size={ 24 } viewBox="-5 -2 24 24" />;
46+
return <ReaderA8cIcon size={ 24 } viewBox="-3 -2 24 24" />;
4747
}
48-
return <ReaderP2Icon viewBox="-3 0 24 24" />;
48+
return <ReaderP2Icon viewBox="0 0 24 24" />;
4949
}
5050

5151
renderAll() {

‎client/reader/sidebar/reader-sidebar-recent/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1+
import './style.scss';
12
import page from '@automattic/calypso-router';
23
import clsx from 'clsx';
34
import { localize } from 'i18n-calypso';
45
import React, { useState } from 'react';
56
import { useSelector } from 'react-redux';
7+
import ReaderIcon from 'calypso/assets/icons/reader/reader-icon';
68
import ExpandableSidebarMenu from 'calypso/layout/sidebar/expandable';
79
import Favicon from 'calypso/reader/components/favicon';
8-
import ReaderFollowingIcon from 'calypso/reader/components/icons/following-icon';
910
import { recordAction, recordGaEvent } from 'calypso/reader/stats';
1011
import { useRecordReaderTracksEvent } from 'calypso/state/reader/analytics/useRecordReaderTracksEvent';
1112
import getReaderFollowedSites from 'calypso/state/reader/follows/selectors/get-reader-followed-sites';
1213
import { getSelectedRecentFeedId } from 'calypso/state/reader-ui/sidebar/selectors';
1314
import { AppState } from 'calypso/types';
1415

15-
import './style.scss';
16-
1716
// Not complete, just useful fields for now
1817
type Site = {
1918
ID: number;
@@ -102,7 +101,7 @@ const ReaderSidebarRecent = ( {
102101
expanded={ isOpen }
103102
title={ translate( 'Recent' ) }
104103
onClick={ selectMenu }
105-
customIcon={ <ReaderFollowingIcon viewBox="-3 0 24 24" /> }
104+
customIcon={ <ReaderIcon className="sidebar__menu-icon" viewBox="0 0 24 11" /> }
106105
disableFlyout
107106
className={ clsx( 'reader-sidebar-recent', className, {
108107
'sidebar__menu--selected': ! isOpen && isRecentStream,

‎client/reader/sidebar/reader-sidebar-tags/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export class ReaderSidebarTags extends Component {
6565
expanded={ isOpen }
6666
title={ translate( 'Tags' ) }
6767
onClick={ this.selectMenu }
68-
customIcon={ <ReaderTagIcon viewBox="-3 0 24 24" /> }
68+
customIcon={ <ReaderTagIcon viewBox="0 0 24 24" /> }
6969
disableFlyout
7070
className={ path.startsWith( '/tag' ) && 'sidebar__menu--selected' }
7171
expandableIconClick={ onClick }

‎client/reader/sidebar/style.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "@automattic/typography/styles/variables";
2+
13
/* Override very specific css on an attribute */
24
.sidebar {
35
.accessible-focus div.global-sidebar & {
@@ -112,6 +114,22 @@ body.is-section-reader {
112114
}
113115

114116
.is-section-reader {
117+
.sidebar-header {
118+
margin: 0 12px 44px;
119+
padding: 0 10px;
120+
121+
h3 {
122+
font-weight: 500;
123+
font-size: $font-body-large;
124+
}
125+
126+
p {
127+
color: var(--studio-gray-50);
128+
font-size: $font-body-small;
129+
margin: 0;
130+
}
131+
}
132+
115133
.sidebar__menu {
116134
user-select: none;
117135
}

0 commit comments

Comments
 (0)