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

Merge pull request #2425 from lbryio/scroll

Browse source 
bring back scroll restoration
This commit is contained in:
Sean Yesmunt 2019-04-19 14:58:28 -04:00 committed by GitHub
commit 39ec33f38a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 139 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/ui/component/app/view.jsx
View file

@ -69,14 +69,14 @@ class App extends React.PureComponent<Props> {
return ( return (
<div id="window" onContextMenu={e => openContextMenu(e)}> <div id="window" onContextMenu={e => openContextMenu(e)}>
<Header /> <Header />
<section className="page"> <SideBar />
{enhancedLayout && <Yrbl className="yrbl--enhanced" />}
<SideBar /> <div className="main-wrapper">
<div className="content" id="content"> <Router />
<Router /> </div>
<ModalRouter />
</div> <ModalRouter />
</section> {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
</div> </div>
); );
} }

13
src/ui/component/common/icon-custom.jsx
View file

@ -118,9 +118,16 @@ export const customIcons = {
), ),
// The LBRY icon is different from the base icon set so don't use buildIcon() // The LBRY icon is different from the base icon set so don't use buildIcon()
[ICONS.LBRY]: props => ( [ICONS.LBRY]: props => (
<svg stroke="currentColor" fill="currentColor" transform="scale(0.1)" {...props}> <svg
<path d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z" /> stroke="currentColor"
<path d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z" /> fill="currentColor"
x="0px"
y="0px"
viewBox="0 0 322 254"
className="icon lbry-icon"
>
<path d="M296,85.9V100l-138.8,85.3L52.6,134l0.2-7.9l104,51.2L289,96.1v-5.8L164.2,30.1L25,116.2v38.5l131.8,65.2 l137.6-84.4l3.9,6l-141.1,86.4L18.1,159.1v-46.8l145.8-90.2C163.9,22.1,296,85.9,296,85.9z" />
<path d="M294.3,150.9l2-12.6l-12.2-2.1l0.8-4.9l17.1,2.9l-2.8,17.5L294.3,150.9L294.3,150.9z" />
</svg> </svg>
), ),
}; };

15
src/ui/component/header/view.jsx
View file

@ -37,9 +37,14 @@ const Header = (props: Props) => {
return ( return (
<header className="header"> <header className="header">
<div className="header__navigation"> <div className="header__navigation">
<Button
className="header__navigation-item header__navigation-item--lbry"
label={__('LBRY')}
iconRight={ICONS.LBRY}
navigate="/"
/>
{/* @if TARGET='app' */} {/* @if TARGET='app' */}
<div className="header__navigation-app"> <div className="header__navigation-app">
<Icon className="lbry-icon" icon={ICONS.LBRY} />
<div className="header__navigation-arrows"> <div className="header__navigation-arrows">
<Button <Button
className="header__navigation-item header__navigation-item--back" className="header__navigation-item header__navigation-item--back"
@ -59,14 +64,6 @@ const Header = (props: Props) => {
</div> </div>
</div> </div>
{/* @endif */} {/* @endif */}
{/* @if TARGET='web' */}
<Button
className="header__navigation-item header__navigation-item--lbry"
label={__('LBRY')}
iconRight={ICONS.LBRY}
navigate="/"
/>
{/* @endif */}
</div> </div>
<WunderBar /> <WunderBar />

2
src/ui/component/navigationHistory/view.jsx
View file

@ -164,7 +164,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
)} )}
</React.Fragment> </React.Fragment>
) : ( ) : (
<div className="page__empty"> <div className="main--empty">
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <header className="card__header">
<h2 className="card__title"> <h2 className="card__title">

2
src/ui/component/page/view.jsx
View file

@ -93,7 +93,7 @@ class Page extends React.PureComponent<Props, State> {
> >
{!loading && children} {!loading && children}
{showLoader && ( {showLoader && (
<div className="page__empty"> <div className="main--empty">
<Spinner /> <Spinner />
</div> </div>
)} )}

64
src/ui/component/router/view.jsx
View file

@ -1,6 +1,6 @@
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch, withRouter } from 'react-router-dom';
import SettingsPage from 'page/settings'; import SettingsPage from 'page/settings';
import HelpPage from 'page/help'; import HelpPage from 'page/help';
import ReportPage from 'page/report'; import ReportPage from 'page/report';
@ -21,32 +21,46 @@ import UserHistoryPage from 'page/userHistory';
import SendCreditsPage from 'page/sendCredits'; import SendCreditsPage from 'page/sendCredits';
import NavigationHistory from 'page/navigationHistory'; import NavigationHistory from 'page/navigationHistory';
const Scroll = withRouter(function ScrollWrapper(props) {
const { pathname } = props.location;
useEffect(() => {
// Auto scroll to the top of a window for new pages
// The browser will handle scrolling if it needs to, but
// for new pages, react-router maintains the current y scroll position
window.scrollTo(0, 0);
}, [pathname]);
return props.children;
});
export default function AppRouter() { export default function AppRouter() {
return ( return (
<Switch> <Scroll>
<Route path="/" exact component={DiscoverPage} /> <Switch>
<Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} /> <Route path="/" exact component={DiscoverPage} />
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} /> <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
<Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} /> <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
<Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} /> <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
<Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} /> <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} /> <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
<Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} /> <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
<Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} /> <Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
<Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} /> <Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} /> <Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} /> <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} /> <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} /> <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
<Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} /> <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
<Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} /> <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
<Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} /> <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
<Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} /> <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
<Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} /> <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
<Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
{/* Below need to go at the end to make sure we don't match any of our pages first */} {/* Below need to go at the end to make sure we don't match any of our pages first */}
<Route path="/:claimName/:claimId" component={ShowPage} /> <Route path="/:claimName/:claimId" component={ShowPage} />
<Route path="/:claimName" component={ShowPage} /> <Route path="/:claimName" component={ShowPage} />
</Switch> </Switch>
</Scroll>
); );
} }

2
src/ui/component/subscribeSuggested/view.jsx
View file

@ -14,7 +14,7 @@ class SuggestedSubscriptions extends PureComponent<Props> {
if (loading) { if (loading) {
return ( return (
<div className="page__empty"> <div className="main--empty">
<Spinner delayed /> <Spinner delayed />
</div> </div>
); );

2
src/ui/page/fileListDownloaded/view.jsx
View file

@ -23,7 +23,7 @@ class FileListDownloaded extends React.PureComponent<Props> {
{hasDownloads ? ( {hasDownloads ? (
<FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} /> <FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} />
) : ( ) : (
<div className="page__empty"> <div className="main--empty">
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <header className="card__header">
<h2 className="card__title"> <h2 className="card__title">

2
src/ui/page/fileListPublished/view.jsx
View file

@ -32,7 +32,7 @@ class FileListPublished extends React.PureComponent<Props> {
page={PAGES.PUBLISHED} page={PAGES.PUBLISHED}
/> />
) : ( ) : (
<div className="page__empty"> <div className="main--empty">
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <header className="card__header">
<h2 className="card__title"> <h2 className="card__title">

2
src/ui/scss/all.scss
View file

@ -1,6 +1,5 @@
@charset "utf-8"; @charset "utf-8";
// @import '~@lbry/color/lbry-color';
@import '~@lbry/components/sass/init/_color.scss'; @import '~@lbry/components/sass/init/_color.scss';
@import '~@lbry/components/sass/init/_mixins.scss'; @import '~@lbry/components/sass/init/_mixins.scss';
@import '~@lbry/components/sass/init/_variables.scss'; @import '~@lbry/components/sass/init/_variables.scss';
@ -33,7 +32,6 @@
@import 'component/modal'; @import 'component/modal';
@import 'component/navigation'; @import 'component/navigation';
@import 'component/notice'; @import 'component/notice';
@import 'component/page';
@import 'component/pagination'; @import 'component/pagination';
@import 'component/placeholder'; @import 'component/placeholder';
@import 'component/scrollbar'; @import 'component/scrollbar';

7
src/ui/scss/component/_content.scss
View file

@ -1,10 +1,3 @@
.content {
flex: 1 0 var(--file-page-min-width);
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.content__cover { .content__cover {
// Video thumbnail with play/download button // Video thumbnail with play/download button
top: 0; top: 0;

56
src/ui/scss/component/_header.scss
View file

@ -1,16 +1,16 @@
.header { .header {
position: fixed;
width: 100%; width: 100%;
height: var(--header-height); height: var(--header-height);
align-items: center; align-items: center;
background-color: $lbry-white; background-color: $lbry-white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: fixed;
z-index: 1; z-index: 1;
html[data-mode='dark'] & { html[data-mode='dark'] & {
background-color: rgba($lbry-black, 0.9); background-color: rgba($lbry-black, 0.9);
background-color: mix($lbry-black, $lbry-gray-3, 90%);
color: $lbry-white; color: $lbry-white;
} }
} }
@ -22,7 +22,7 @@
// Main navigation collapses into a menu button // Main navigation collapses into a menu button
// at smaller screen widths // at smaller screen widths
@media (min-width: 601px) { @media (min-width: 601px) {
width: 170px; width: calc(var(--side-nav-width) - 1px);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -31,28 +31,25 @@
} }
} }
.header__navigation-app { // .header__navigation-app {
// flex: 1;
// display: flex;
// justify-content: space-between;
// LBRY logo in the top left corner
.lbry-icon {
height: var(--header-height);
width: 1rem;
overflow: visible;
}
.header__navigation-arrows {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
border-left: 1px solid $lbry-gray-1;
// LBRY logo in the top left corner
.lbry-icon {
height: 1rem;
width: 1rem;
padding-left: 3.5rem;
padding-top: 1.5rem;
margin-right: 3.6rem;
overflow: visible;
}
.header__navigation-arrows {
flex: 1;
display: flex;
justify-content: flex-end;
border-left: 1px solid $lbry-gray-1;
}
} }
// }
.header__navigation-item { .header__navigation-item {
height: var(--header-height); height: var(--header-height);
@ -96,6 +93,8 @@
width: var(--header-height); width: var(--header-height);
svg { svg {
stroke: $lbry-black;
&:only-child { &:only-child {
// Header icons are a little different because they are larger // Header icons are a little different because they are larger
top: 0.25rem; top: 0.25rem;
@ -111,13 +110,11 @@
flex: 1; flex: 1;
font-weight: 800; font-weight: 800;
font-size: 1.2rem; font-size: 1.2rem;
margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off
svg { .lbry-icon {
overflow: visible; height: 2rem;
color: $lbry-white; width: 2rem;
opacity: 1; top: 0.6rem;
top: -0.8rem;
} }
} }
@ -170,7 +167,8 @@
.header__navigation-item--back, .header__navigation-item--back,
.header__navigation-item--forward, .header__navigation-item--forward,
.header__navigation-item--home, .header__navigation-item--home,
.header__navigation-item--right-action { .header__navigation-item--right-action,
.header__navigation-item--wallet {
display: none; display: none;
} }

39
src/ui/scss/component/_main.scss
View file

@ -1,16 +1,28 @@
.main-wrapper {
position: absolute;
top: var(--header-height);
left: var(--side-nav-width);
min-height: calc(100% - var(--header-height));
width: calc(100% - var(--side-nav-width));
background-color: mix($lbry-white, $lbry-gray-1, 70%);
html[data-mode='dark'] & {
background-color: $lbry-black;
}
}
.main { .main {
display: flex;
flex-direction: column;
margin: auto; margin: auto;
overflow: hidden; }
position: relative;
z-index: 1;
&.main--contained { .main--contained {
max-width: 1000px; max-width: 900px;
} }
&:not(.main--no-padding) { .main:not(.main--no-padding) {
padding: var(--spacing-vertical-large); padding: var(--spacing-vertical-large);
}
} }
.main--file-page { .main--file-page {
@ -39,3 +51,12 @@
grid-area: related; grid-area: related;
} }
} }
.main--empty {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}

16
src/ui/scss/component/_navigation.scss
View file

@ -1,13 +1,15 @@
.navigation { .navigation {
background-color: $lbry-white; position: fixed;
border-right: 1px solid rgba($lbry-gray-1, 0.9); top: var(--header-height);
font-size: 1.25rem; height: calc(100vh - var(--header-height));
padding-top: var(--spacing-vertical-large);
padding-right: var(--spacing-vertical-small);
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: overlay; overflow-y: overlay;
background-color: $lbry-white;
border-right: 1px solid rgba($lbry-gray-1, 0.9);
padding-top: var(--spacing-vertical-large);
padding-right: var(--spacing-vertical-small);
font-size: 1.2rem;
html[data-mode='dark'] & { html[data-mode='dark'] & {
background-color: $lbry-black; background-color: $lbry-black;
@ -18,7 +20,7 @@
// on smaller screen widths // on smaller screen widths
@media (min-width: 601px) { @media (min-width: 601px) {
width: 171px; // 1px is for the border width: var(--side-nav-width);
} }
@media (max-width: 600px) { @media (max-width: 600px) {

53
src/ui/scss/component/_page.scss
View file

@ -1,53 +0,0 @@
.page {
top: var(--header-height);
left: 0;
bottom: 0;
right: 0;
background-color: mix($lbry-white, $lbry-gray-1, 70%);
display: flex;
position: absolute;
z-index: 0;
html[data-mode='dark'] & {
background-color: $lbry-black;
}
&::after {
width: 100%;
height: 1px;
top: 0;
left: 0;
background-color: $lbry-gray-1;
content: '';
position: absolute;
z-index: 1;
html[data-mode='dark'] & {
background-color: $lbry-black;
}
}
@media only screen and (min-width: $medium-breakpoint) {
grid-template-columns: var(--side-nav-width-m) auto;
}
@media only screen and (min-width: $large-breakpoint) {
grid-template-columns: var(--side-nav-width-l) auto;
}
}
.page__header {
padding: var(--spacing-vertical-medium) var(--spacing-vertical-medium) 0
var(--spacing-vertical-medium);
}
.page__empty {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}

4
src/ui/scss/init/_vars.scss
View file

@ -7,9 +7,7 @@ $large-breakpoint: 1921px;
:root { :root {
// Width & spacing // Width & spacing
--side-nav-width: 160px; --side-nav-width: 180px;
--side-nav-width-m: 240px;
--side-nav-width-l: 320px;
--font-size-subtext-multiple: 0.92; --font-size-subtext-multiple: 0.92;
--spacing-vertical-miniscule: calc(2rem / 5); --spacing-vertical-miniscule: calc(2rem / 5);

6
src/ui/store.js
View file

@ -36,12 +36,14 @@ function enableBatching(reducer) {
}; };
} }
let history;
// @if TARGET='app' // @if TARGET='app'
const history = createHashHistory(); history = createHashHistory();
// @endif // @endif
// @if TARGET='web' // @if TARGET='web'
const history = createBrowserHistory(); history = createBrowserHistory();
// @endif // @endif
const bulkThunk = createBulkThunkMiddleware(); const bulkThunk = createBulkThunkMiddleware();
const middleware = [routerMiddleware(history), thunk, bulkThunk]; const middleware = [routerMiddleware(history), thunk, bulkThunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;