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

bring back scroll restoration #2425

Merged
neb-b merged 2 commits from scroll into master 2019-04-19 20:58:29 +02:00
Conversation 0 Commits 2 Files changed 17 +139 -162
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 (
<div id="window" onContextMenu={e => openContextMenu(e)}>
<Header />
<section className="page">
{enhancedLayout && <Yrbl className="yrbl--enhanced" />}
<SideBar />
<div className="content" id="content">
<Router />
<ModalRouter />
</div>
</section>
<SideBar />
<div className="main-wrapper">
<Router />
</div>
<ModalRouter />
{enhancedLayout && <Yrbl className="yrbl--enhanced" />}
</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()
[ICONS.LBRY]: props => (
<svg stroke="currentColor" fill="currentColor" transform="scale(0.1)" {...props}>
<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" />
<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" />
<svg
stroke="currentColor"
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>
),
};

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

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

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

@ -164,7 +164,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
)}
</React.Fragment>
) : (
<div className="page__empty">
<div className="main--empty">
<section className="card card--section">
<header className="card__header">
<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}
{showLoader && (
<div className="page__empty">
<div className="main--empty">
<Spinner />
</div>
)}

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

@ -1,6 +1,6 @@
import * as PAGES from 'constants/pages';
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 HelpPage from 'page/help';
import ReportPage from 'page/report';
@ -21,32 +21,46 @@ import UserHistoryPage from 'page/userHistory';
import SendCreditsPage from 'page/sendCredits';
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() {
return (
<Switch>
<Route path="/" exact component={DiscoverPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
<Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
<Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
<Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
<Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
<Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
<Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
<Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
<Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
<Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
<Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
<Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
<Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
<Scroll>
<Switch>
<Route path="/" exact component={DiscoverPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
<Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
<Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
<Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
<Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
<Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
<Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
<Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
<Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
<Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
<Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
<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 */}
<Route path="/:claimName/:claimId" component={ShowPage} />
<Route path="/:claimName" component={ShowPage} />
</Switch>
{/* 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" component={ShowPage} />
</Switch>
</Scroll>
);
}

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

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

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

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

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

@ -1,6 +1,5 @@
@charset "utf-8";
// @import '~@lbry/color/lbry-color';
@import '~@lbry/components/sass/init/_color.scss';
@import '~@lbry/components/sass/init/_mixins.scss';
@import '~@lbry/components/sass/init/_variables.scss';
@ -33,7 +32,6 @@
@import 'component/modal';
@import 'component/navigation';
@import 'component/notice';
@import 'component/page';
@import 'component/pagination';
@import 'component/placeholder';
@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 {
// Video thumbnail with play/download button
top: 0;

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

@ -1,16 +1,16 @@
.header {
position: fixed;
width: 100%;
height: var(--header-height);
align-items: center;
background-color: $lbry-white;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1;
html[data-mode='dark'] & {
background-color: rgba($lbry-black, 0.9);
background-color: mix($lbry-black, $lbry-gray-3, 90%);
color: $lbry-white;
}
}
@ -22,7 +22,7 @@
// Main navigation collapses into a menu button
// at smaller screen widths
@media (min-width: 601px) {
width: 170px;
width: calc(var(--side-nav-width) - 1px);
}
@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;
display: flex;
justify-content: space-between;
// 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;
}
justify-content: flex-end;
border-left: 1px solid $lbry-gray-1;
}
// }
.header__navigation-item {
height: var(--header-height);
@ -96,6 +93,8 @@
width: var(--header-height);
svg {
stroke: $lbry-black;
&:only-child {
// Header icons are a little different because they are larger
top: 0.25rem;
@ -111,13 +110,11 @@
flex: 1;
font-weight: 800;
font-size: 1.2rem;
margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off
svg {
overflow: visible;
color: $lbry-white;
opacity: 1;
top: -0.8rem;
.lbry-icon {
height: 2rem;
width: 2rem;
top: 0.6rem;
}
}
@ -170,7 +167,8 @@
.header__navigation-item--back,
.header__navigation-item--forward,
.header__navigation-item--home,
.header__navigation-item--right-action {
.header__navigation-item--right-action,
.header__navigation-item--wallet {
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 {
display: flex;
flex-direction: column;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
}
&.main--contained {
max-width: 1000px;
}
.main--contained {
max-width: 900px;
}
&:not(.main--no-padding) {
padding: var(--spacing-vertical-large);
}
.main:not(.main--no-padding) {
padding: var(--spacing-vertical-large);
}
.main--file-page {
@ -39,3 +51,12 @@
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 {
background-color: $lbry-white;
border-right: 1px solid rgba($lbry-gray-1, 0.9);
font-size: 1.25rem;
padding-top: var(--spacing-vertical-large);
padding-right: var(--spacing-vertical-small);
position: relative;
position: fixed;
top: var(--header-height);
height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;
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'] & {
background-color: $lbry-black;
@ -18,7 +20,7 @@
// on smaller screen widths
@media (min-width: 601px) {
width: 171px; // 1px is for the border
width: var(--side-nav-width);
}
@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 {
// Width & spacing
--side-nav-width: 160px;
--side-nav-width-m: 240px;
--side-nav-width-l: 320px;
--side-nav-width: 180px;
--font-size-subtext-multiple: 0.92;
--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'
const history = createHashHistory();
history = createHashHistory();
// @endif
// @if TARGET='web'
const history = createBrowserHistory();
history = createBrowserHistory();
// @endif
const bulkThunk = createBulkThunkMiddleware();
const middleware = [routerMiddleware(history), thunk, bulkThunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;