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

"Back": change from "link" behavior to "up" behavior

Browse source 
The previous version treats each navigation as a link, ala Chrome Settings. I liked it because I can enter a settings section directly via URL, and can always back-track each section.

Anyway, changed it to the typical "up" behavior, traversing back the hierarchy of settings pages.
This commit is contained in:
infinite-persistence 2021-08-22 14:14:46 +08:00
parent 049a952765
commit 741e8f96cb
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
ui/component/settingsSideNavigation/view.jsx
View file

@ -25,25 +25,21 @@ type SideNavLink = {
const SIDE_LINKS: Array<SideNavLink> = [
{
title: 'Appearance',
link: `/$/${PAGES.SETTINGS}#${SETTINGS_GRP.APPEARANCE}`,
section: SETTINGS_GRP.APPEARANCE,
icon: ICONS.APPEARANCE,
},
{
title: 'Account',
link: `/$/${PAGES.SETTINGS}#${SETTINGS_GRP.ACCOUNT}`,
section: SETTINGS_GRP.ACCOUNT,
icon: ICONS.ACCOUNT,
},
{
title: 'Content settings',
link: `/$/${PAGES.SETTINGS}#${SETTINGS_GRP.CONTENT}`,
section: SETTINGS_GRP.CONTENT,
icon: ICONS.CONTENT,
},
{
title: 'System',
link: `/$/${PAGES.SETTINGS}#${SETTINGS_GRP.SYSTEM}`,
section: SETTINGS_GRP.SYSTEM,
icon: ICONS.SETTINGS,
},
@ -54,12 +50,7 @@ export default function SettingsSideNavigation() {
const isMediumScreen = useIsMediumScreen();
const isAbsolute = isMediumScreen;
const microNavigation = !sidebarOpen || isMediumScreen;
const { location } = useHistory();
// This sidebar could be called from Settings or from a Settings Sub Page.
// - "#" navigation = don't record to history, just scroll.
// - "/" navigation = record sub-page navigation to history.
const scrollInstead = location.pathname === `/$/${PAGES.SETTINGS}`;
const { location, goBack } = useHistory();
function scrollToSection(section: string) {
const TOP_MARGIN_PX = 20;
@ -69,6 +60,21 @@ export default function SettingsSideNavigation() {
}
}
function getOnClickHandler(section) {
if (section) {
if (location.pathname === `/$/${PAGES.SETTINGS}`) {
return () => scrollToSection(section);
} else if (location.pathname.startsWith(`/$/${PAGES.SETTINGS}/`)) {
return () => {
goBack();
setTimeout(() => scrollToSection(section), 5);
};
}
}
return undefined;
}
if (isMediumScreen) {
// I think it's ok to hide it for now on medium/small screens given that
// we are using a scrolling Settings Page that displays everything. If we
@ -97,16 +103,15 @@ export default function SettingsSideNavigation() {
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{SIDE_LINKS.map((linkProps) => {
return (
<li key={linkProps.route || linkProps.link}>
<li key={linkProps.title}>
<Button
{...linkProps}
label={__(linkProps.title)}
title={__(linkProps.title)}
navigate={scrollInstead ? undefined : linkProps.route || linkProps.link}
icon={linkProps.icon}
className={classnames('navigation-link', {})}
// $FlowFixMe
onClick={scrollInstead && linkProps.section ? () => scrollToSection(linkProps.section) : undefined}
onClick={getOnClickHandler(linkProps.section)}
/>
{linkProps.extra && linkProps.extra}
</li>
@ -131,18 +136,14 @@ export default function SettingsSideNavigation() {
// $FlowFixMe
const { link, route, ...passedProps } = linkProps;
return (
<li key={route || link}>
<li key={linkProps.title}>
<Button
{...passedProps}
navigate={scrollInstead ? undefined : route || link}
label={__(linkProps.title)}
title={__(linkProps.title)}
icon={linkProps.icon}
className={classnames('navigation-link', {})}
onClick={
// $FlowFixMe
scrollInstead && linkProps.section ? () => scrollToSection(linkProps.section) : undefined
}
onClick={getOnClickHandler(linkProps.section)}
/>
{linkProps.extra && linkProps.extra}
</li>