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

added Sean's changes back in

Browse source
This commit is contained in:
Dalton 2020-02-12 19:48:28 -06:00 committed by Sean Yesmunt
parent 5e38108e3d
commit 895154dab9
4 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/component/navigationButton/view.jsx
View file

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

21
ui/component/router/view.jsx
View file

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

27
ui/scss/component/_header.scss
View file

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

2
ui/scss/component/menu-button.scss
View file

@ -55,6 +55,8 @@
margin-left: calc(var(--spacing-medium) * -1); margin-left: calc(var(--spacing-medium) * -1);
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
animation: menu-animate-in var(--animation-duration) var(--animation-style); 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 { .menu__link {