more cleanup / restoration
This commit is contained in:
Jeremy Kauffman
parent
71771aeb6f
commit
543b912ddb
10 changed files with 102 additions and 101 deletions
31
ui/js/app.js
31
ui/js/app.js
|
|
@ -220,30 +220,6 @@ var App = React.createClass({
|
|||
errorInfo: <ul className="error-modal__error-list">{errorInfoList}</ul>,
|
||||
});
|
||||
},
|
||||
getHeaderLinks: function()
|
||||
{
|
||||
switch(this.state.viewingPage)
|
||||
{
|
||||
case 'wallet':
|
||||
case 'send':
|
||||
case 'receive':
|
||||
case 'rewards':
|
||||
return {
|
||||
'?wallet': 'Overview',
|
||||
'?send': 'Send',
|
||||
'?receive': 'Receive',
|
||||
'?rewards': 'Rewards',
|
||||
};
|
||||
case 'downloaded':
|
||||
case 'published':
|
||||
return {
|
||||
'?downloaded': 'Downloaded',
|
||||
'?published': 'Published',
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getContentAndAddress: function()
|
||||
{
|
||||
switch(this.state.viewingPage)
|
||||
|
|
@ -278,16 +254,15 @@ var App = React.createClass({
|
|||
}
|
||||
},
|
||||
render: function() {
|
||||
let [address, wunderBarIcon, mainContent] = this.getContentAndAddress(),
|
||||
headerLinks = this.getHeaderLinks();
|
||||
let [address, wunderBarIcon, mainContent] = this.getContentAndAddress();
|
||||
|
||||
return (
|
||||
this._fullScreenPages.includes(this.state.viewingPage) ?
|
||||
mainContent :
|
||||
<div id="window">
|
||||
<Header onOpenDrawer={this.openDrawer} address={address} wunderBarIcon={wunderBarIcon}
|
||||
onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} />
|
||||
<div id="main-content" className={ headerLinks ? 'with-sub-nav' : 'no-sub-nav' }>
|
||||
onSearch={this.onSearch} viewingPage={this.state.viewingPage} />
|
||||
<div id="main-content">
|
||||
{mainContent}
|
||||
</div>
|
||||
<Modal isOpen={this.state.modal == 'upgrade'} contentLabel="Update available"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {Icon, CreditAmount} from './common.js';
|
|||
|
||||
var Header = React.createClass({
|
||||
_balanceSubscribeId: null,
|
||||
_isMounted: false,
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
|
|
@ -11,18 +12,21 @@ var Header = React.createClass({
|
|||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._isMounted = true;
|
||||
this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
|
||||
this.setState({ balance: balance });
|
||||
if (this._isMounted) {
|
||||
this.setState({balance: balance});
|
||||
}
|
||||
});
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this._isMounted = false;
|
||||
if (this._balanceSubscribeId) {
|
||||
lbry.balanceUnsubscribe(this._balanceSubscribeId)
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
return <div>
|
||||
<header id="header">
|
||||
return <header id="header">
|
||||
<div className="header__item">
|
||||
<Link onClick={() => { history.back() }} button="alt button--flat" icon="icon-arrow-left" />
|
||||
</div>
|
||||
|
|
@ -45,10 +49,6 @@ var Header = React.createClass({
|
|||
<Link button="alt button--flat" href="?settings" icon="icon-gear" />
|
||||
</div>
|
||||
</header>
|
||||
{this.props.links ?
|
||||
<SubHeader links={this.props.links} viewingPage={this.props.viewingPage} /> :
|
||||
''}
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -93,7 +93,8 @@ let WunderBar = React.createClass({
|
|||
onFocus: function() {
|
||||
this._stateBeforeSearch = this.state;
|
||||
let newState = {
|
||||
icon: "icon-search"
|
||||
icon: "icon-search",
|
||||
isActive: true
|
||||
}
|
||||
// this._input.value = ""; //trigger placeholder
|
||||
this._focusPending = true;
|
||||
|
|
@ -104,7 +105,7 @@ let WunderBar = React.createClass({
|
|||
this.setState(newState);
|
||||
},
|
||||
onBlur: function() {
|
||||
this.setState(this._stateBeforeSearch);
|
||||
this.setState(Object.assign({}, this._stateBeforeSearch, { isActive: false }));
|
||||
this._input.value = this.state.address;
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
|
|
@ -118,7 +119,7 @@ let WunderBar = React.createClass({
|
|||
this._input = ref;
|
||||
},
|
||||
render: function() {
|
||||
return <div className="wunderbar">
|
||||
return <div className={"wunderbar" + (this.state.isActive ? " wunderbar--active" : "")}>
|
||||
{this.state.icon ? <Icon fixed icon={this.state.icon} /> : '' }
|
||||
<input className="wunderbar__input" type="search" placeholder="Type a LBRY address or search term"
|
||||
ref={this.onReceiveRef}
|
||||
|
|
@ -131,9 +132,9 @@ let WunderBar = React.createClass({
|
|||
}
|
||||
})
|
||||
|
||||
var SubHeader = React.createClass({
|
||||
export let SubHeader = React.createClass({
|
||||
render: function() {
|
||||
var links = [],
|
||||
let links = [],
|
||||
viewingUrl = '?' + this.props.viewingPage;
|
||||
|
||||
for (let link of Object.keys(this.props.links)) {
|
||||
|
|
@ -144,7 +145,7 @@ var SubHeader = React.createClass({
|
|||
);
|
||||
}
|
||||
return (
|
||||
<nav className="sub-header">
|
||||
<nav className={'sub-header' + (this.props.modifier ? ' sub-header--' + this.props.modifier : '')}>
|
||||
{links}
|
||||
</nav>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,12 +3,22 @@ import lbry from '../lbry.js';
|
|||
import lbryuri from '../lbryuri.js';
|
||||
import {Link} from '../component/link.js';
|
||||
import {FormField} from '../component/form.js';
|
||||
import {SubHeader} from '../component/header.js';
|
||||
import {FileTileStream} from '../component/file-tile.js';
|
||||
import rewards from '../rewards.js';
|
||||
import lbryio from '../lbryio.js';
|
||||
import {BusyMessage, Thumbnail} from '../component/common.js';
|
||||
|
||||
|
||||
export let FileListNav = React.createClass({
|
||||
render: function() {
|
||||
return <SubHeader modifier="constrained" viewingPage={this.props.viewingPage} links={{
|
||||
'?downloaded': 'Downloaded',
|
||||
'?published': 'Published',
|
||||
}} />;
|
||||
}
|
||||
});
|
||||
|
||||
export let FileListDownloaded = React.createClass({
|
||||
_isMounted: false,
|
||||
|
||||
|
|
@ -37,25 +47,20 @@ export let FileListDownloaded = React.createClass({
|
|||
this._isMounted = false;
|
||||
},
|
||||
render: function() {
|
||||
let content = "";
|
||||
if (this.state.fileInfos === null) {
|
||||
return (
|
||||
<main className="page">
|
||||
<BusyMessage message="Loading" />
|
||||
</main>
|
||||
);
|
||||
content = <BusyMessage message="Loading" />;
|
||||
} else if (!this.state.fileInfos.length) {
|
||||
return (
|
||||
<main className="page">
|
||||
<span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>
|
||||
</main>
|
||||
);
|
||||
content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>;
|
||||
} else {
|
||||
return (
|
||||
<main className="page">
|
||||
<FileList fileInfos={this.state.fileInfos} hidePrices={true} />
|
||||
</main>
|
||||
);
|
||||
content = <FileList fileInfos={this.state.fileInfos} hidePrices={true} />;
|
||||
}
|
||||
return (
|
||||
<main className="constrained-page">
|
||||
<FileListNav viewingPage="downloaded" />
|
||||
{content}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -102,27 +107,22 @@ export let FileListPublished = React.createClass({
|
|||
this._isMounted = false;
|
||||
},
|
||||
render: function () {
|
||||
let content = null;
|
||||
if (this.state.fileInfos === null) {
|
||||
return (
|
||||
<main className="page">
|
||||
<BusyMessage message="Loading" />
|
||||
</main>
|
||||
);
|
||||
content = <BusyMessage message="Loading" />;
|
||||
}
|
||||
else if (!this.state.fileInfos.length) {
|
||||
return (
|
||||
<main className="page">
|
||||
<span>You haven't published anything to LBRY yet.</span> Try <Link href="?publish" label="publishing" />!
|
||||
</main>
|
||||
);
|
||||
content = <span>You haven't published anything to LBRY yet. Try <Link href="?publish" label="publishing" />!</span>;
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<main className="page">
|
||||
<FileList fileInfos={this.state.fileInfos} />
|
||||
</main>
|
||||
);
|
||||
content = <FileList fileInfos={this.state.fileInfos} />;
|
||||
}
|
||||
return (
|
||||
<main className="constrained-page">
|
||||
<FileListNav viewingPage="published" />
|
||||
{content}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from 'react';
|
||||
import lbry from '../lbry.js';
|
||||
import {Link} from '../component/link.js';
|
||||
import {SettingsNav} from './settings.js';
|
||||
import {version as uiVersion} from 'json!../../package.json';
|
||||
|
||||
var HelpPage = React.createClass({
|
||||
|
|
@ -49,7 +50,8 @@ var HelpPage = React.createClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="page">
|
||||
<main className="constrained-page">
|
||||
<SettingsNav viewingPage="help" />
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h3>Read the FAQ</h3>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import lbryio from '../lbryio.js';
|
|||
import {CreditAmount, Icon} from '../component/common.js';
|
||||
import rewards from '../rewards.js';
|
||||
import Modal from '../component/modal.js';
|
||||
import {WalletNav} from './wallet.js';
|
||||
import {RewardLink} from '../component/link.js';
|
||||
|
||||
const RewardTile = React.createClass({
|
||||
|
|
@ -56,14 +57,15 @@ var RewardsPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<main className="constrained-page">
|
||||
<WalletNav viewingPage="rewards"/>
|
||||
<div>
|
||||
{!this.state.userRewards
|
||||
? (this.state.failed ? <div className="empty">Failed to load rewards.</div> : '')
|
||||
: this.state.userRewards.map(({RewardType, RewardTitle, RewardDescription, TransactionID, RewardAmount}) => {
|
||||
return <RewardTile key={RewardType} onRewardClaim={this.loadRewards} type={RewardType} title={RewardTitle} description={RewardDescription} claimed={!!TransactionID} value={RewardAmount} />;
|
||||
})}
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import React from 'react';
|
||||
import {FormField, FormRow} from '../component/form.js';
|
||||
import {SubHeader} from '../component/header.js';
|
||||
import lbry from '../lbry.js';
|
||||
|
||||
export let SettingsNav = React.createClass({
|
||||
render: function() {
|
||||
return <SubHeader modifier="constrained" viewingPage={this.props.viewingPage} links={{
|
||||
'?settings': 'Settings',
|
||||
'?help' : 'Help'
|
||||
}} />;
|
||||
}
|
||||
});
|
||||
|
||||
var SettingsPage = React.createClass({
|
||||
_onSettingSaveSuccess: function() {
|
||||
// This is bad.
|
||||
|
|
@ -92,7 +102,8 @@ var SettingsPage = React.createClass({
|
|||
</section>
|
||||
*/
|
||||
return (
|
||||
<main>
|
||||
<main className="constrained-page">
|
||||
<SettingsNav viewingPage="settings" />
|
||||
<section className="card">
|
||||
<div className="card__content">
|
||||
<h3>Download Directory</h3>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
import lbry from '../lbry.js';
|
||||
import {Link} from '../component/link.js';
|
||||
import Modal from '../component/modal.js';
|
||||
import {SubHeader} from '../component/header.js';
|
||||
import {FormField, FormRow} from '../component/form.js';
|
||||
import {Address, BusyMessage, CreditAmount} from '../component/common.js';
|
||||
|
||||
|
|
@ -263,6 +264,16 @@ var TransactionList = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
export let WalletNav = React.createClass({
|
||||
render: function() {
|
||||
return <SubHeader modifier="constrained" viewingPage={this.props.viewingPage} links={{
|
||||
'?wallet': 'Overview',
|
||||
'?send': 'Send',
|
||||
'?receive': 'Receive',
|
||||
'?rewards': 'Rewards'
|
||||
}} />;
|
||||
}
|
||||
});
|
||||
|
||||
var WalletPage = React.createClass({
|
||||
_balanceSubscribeId: null,
|
||||
|
|
@ -294,6 +305,7 @@ var WalletPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page">
|
||||
<WalletNav viewingPage={this.props.viewingPage} />
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h3>Balance</h3>
|
||||
|
|
|
|||
|
|
@ -33,23 +33,12 @@ body
|
|||
|
||||
#main-content
|
||||
{
|
||||
&.no-sub-nav
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $height-header;
|
||||
main.constrained-page
|
||||
{
|
||||
min-height: calc(100vh - 60px); //should be -$height-header, but I'm dumb I guess? It wouldn't work
|
||||
main { margin-top: $height-header; }
|
||||
}
|
||||
&.with-sub-nav
|
||||
{
|
||||
min-height: calc(100vh - 60px); //should be -$height-header, but I'm dumb I guess? It wouldn't work
|
||||
}
|
||||
main
|
||||
{
|
||||
padding: $spacing-vertical;
|
||||
&.constrained-page
|
||||
{
|
||||
max-width: $width-page-constrained;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
max-width: $width-page-constrained;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -126,10 +126,11 @@ p
|
|||
|
||||
.sort-section {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
|
||||
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
font-size: 0.85em;
|
||||
color: $color-help;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../global";
|
||||
|
||||
$color-header: #666;
|
||||
|
||||
$color-header-active: darken($color-header, 20%);
|
||||
|
||||
$header-icon-size: 1.5em;
|
||||
|
||||
|
|
@ -52,6 +52,9 @@ $header-icon-size: 1.5em;
|
|||
top: $spacing-vertical / 2 - 4px; //hacked
|
||||
}
|
||||
}
|
||||
|
||||
.wunderbar--active .icon-search { color: $color-primary; }
|
||||
|
||||
.wunderbar__input {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
width: 100%;
|
||||
|
|
@ -64,15 +67,21 @@ $header-icon-size: 1.5em;
|
|||
@include border-radius(2px);
|
||||
border: 1px solid #ccc;
|
||||
&:focus {
|
||||
color: $color-header-active;
|
||||
box-shadow: $box-shadow-focus;
|
||||
border-color: $color-header;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
nav.sub-header
|
||||
{
|
||||
text-transform: uppercase;
|
||||
padding: $spacing-vertical / 2;
|
||||
padding: 0 0 $spacing-vertical;
|
||||
&.sub-header--constrained {
|
||||
max-width: $width-page-constrained;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
> a
|
||||
{
|
||||
$sub-header-selected-underline-height: 2px;
|
||||
|
|
@ -89,15 +98,14 @@ nav.sub-header
|
|||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
$color-selected-subheader: darken($color-header, 20%);
|
||||
&.sub-header-selected
|
||||
{
|
||||
border-bottom: $sub-header-selected-underline-height solid $color-selected-subheader;
|
||||
color: $color-selected-subheader;
|
||||
border-bottom: $sub-header-selected-underline-height solid $color-header-active;
|
||||
color: $color-header-active;
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
color: $color-selected-subheader;
|
||||
color: $color-header-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue