This commit is contained in:
Sean Yesmunt 2020-02-03 09:58:34 -05:00
parent cb8b682e28
commit ef3a3164b7
5 changed files with 41 additions and 27 deletions

View file

@ -915,12 +915,7 @@
"Support %amount% LBC": "Support %amount% LBC",
"You deposited %amount% LBC as a support!": "You deposited %amount% LBC as a support!",
"LBRY Link": "LBRY Link",
"Publish to %uri%": "Publish to %uri%",
"Your wallet": "Your wallet",
"Publish a file, or create a channel": "Publish a file, or create a channel",
"Your account": "Your account",
"Channel profile picture": "Channel profile picture",
"refreshing the app": "refreshing the app",
"Follower": "Follower",
"%repost_channel_link% reposted": "%repost_channel_link% reposted"
"Your account": "Your account"
}

View file

@ -9,7 +9,7 @@ const MAX_HISTORY_SIZE = 12;
type Props = {
isBackward: boolean,
history: {
entries: { key: string, title: string }[],
entries: Array<{ key: string, title: string, pathname: string }>,
go: number => void,
goBack: () => void,
goForward: () => void,
@ -44,19 +44,22 @@ const NavigationButton = (props: Props) => {
// creates an <li> intended for the button's <ul>
const makeItem = useCallback(
(entry, index) => {
(entry: { pathname: string, title: string, key: string }, index: number) => {
// difference between the current index and the index of the entry
const backwardDif = index - (currentIndex < MAX_HISTORY_SIZE ? currentIndex : MAX_HISTORY_SIZE);
const forwardDif = index + 1;
return (
<li
className="header__navigation-button"
role="link"
key={entry.key}
onMouseDown={() => {
setShowHistory(false);
go(isBackward ? backwardDif : forwardDif);
}}
>
{entry.title}
<span>{entry.title}</span>
<span className="header__navigation-button-help">{entry.pathname === '/' ? __('Home') : entry.pathname}</span>
</li>
);
},
@ -81,7 +84,7 @@ const NavigationButton = (props: Props) => {
iconSize={18}
disabled={slicedEntries.length === 0}
/>
{showHistory && <ul className={'header__navigaiton-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
{showHistory && <ul className={'header__navigation-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
</div>
);
};

View file

@ -87,17 +87,22 @@ function AppRouter(props: Props) {
uri,
title,
} = props;
const { channelName, streamName } = parseURI(uri);
const { entries } = history;
const entryIndex = history.index;
useEffect(() => {
if (typeof title !== 'undefined' && title !== '') {
document.title = title;
} else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
document.title = streamName;
} else if (typeof channelName !== 'undefined' && channelName !== '') {
document.title = channelName;
if (uri) {
const { channelName, streamName } = parseURI(uri);
if (typeof title !== 'undefined' && title !== '') {
document.title = title;
} else if (streamName) {
document.title = streamName;
} else if (channelName) {
document.title = channelName;
} else {
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
}
} else {
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
}
@ -108,7 +113,7 @@ function AppRouter(props: Props) {
return () => {
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
};
}, [channelName, entries, entryIndex, streamName, title]);
}, [entries, entryIndex, title, uri]);
useEffect(() => {
window.scrollTo(0, currentScroll);

View file

@ -148,19 +148,28 @@
margin: 0 var(--spacing-medium);
}
.header__navigaiton-dropdown {
.header__navigation-dropdown {
@extend .menu__list--header;
padding: 0;
position: absolute;
list-style-type: none;
background-color: var(--color-header-background);
margin-top: 19px;
}
li {
margin: 0;
padding: 2px 5px;
.header__navigation-button {
margin: 0;
padding: var(--spacing-miniscule) var(--spacing-medium);
display: flex;
align-items: center;
&:hover {
cursor: pointer;
background-color: var(--color-menu-background--active);
}
&:hover {
cursor: pointer;
background-color: var(--color-menu-background--active);
}
}
.header__navigation-button-help {
@extend .help;
margin-top: 0;
margin-left: var(--spacing-small);
}

View file

@ -55,6 +55,8 @@
margin-left: calc(var(--spacing-medium) * -1);
box-shadow: var(--card-box-shadow);
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.menu__link {