upgrade banner to header

This commit is contained in:
jessop 2019-09-04 19:40:01 -04:00 committed by Sean Yesmunt
parent c78887b4ba
commit 66aa3eaf48
6 changed files with 63 additions and 36 deletions

View file

@ -4,6 +4,9 @@ import { selectBalance, SETTINGS as LBRY_REDUX_SETTINGS } from 'lbry-redux';
import { formatCredits } from 'util/format-credits';
import { doSetClientSetting } from 'redux/actions/settings';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
import { doDownloadUpgradeRequested } from 'redux/actions/app';
import Header from './view';
const select = state => ({
@ -13,10 +16,13 @@ const select = state => ({
currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
isUpgradeAvailable: selectIsUpgradeAvailable(state),
});
const perform = dispatch => ({
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
doDownloadUpgradeRequested,
});
export default connect(

View file

@ -20,10 +20,24 @@ type Props = {
automaticDarkModeEnabled: boolean,
setClientSetting: (string, boolean | string) => void,
hideBalance: boolean,
autoUpdateDownloaded: boolean,
isUpgradeAvailable: boolean,
doDownloadUpgradeRequested: () => void,
};
const Header = (props: Props) => {
const { roundedBalance, history, setClientSetting, currentTheme, automaticDarkModeEnabled, hideBalance } = props;
const {
roundedBalance,
history,
setClientSetting,
currentTheme,
automaticDarkModeEnabled,
hideBalance,
autoUpdateDownloaded,
isUpgradeAvailable,
doDownloadUpgradeRequested,
} = props;
const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
function handleThemeToggle() {
if (automaticDarkModeEnabled) {
@ -129,6 +143,16 @@ const Header = (props: Props) => {
</Menu>
</div>
</div>
{/* @if TARGET='app' */}
{showUpgradeButton && (
<div className="header__banner-background">
<div className="header__banner-contents">
{__('Upgrade is ready')}
<Button button="alt" icon={ICONS.DOWNLOAD} label={__('Install now')} onClick={doDownloadUpgradeRequested} />
</div>
</div>
)}
{/* @endif */}
</header>
);
};

View file

@ -1,16 +1,3 @@
import { connect } from 'react-redux';
import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
import { doDownloadUpgradeRequested } from 'redux/actions/app';
import Page from './view';
const select = state => ({
autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
isUpgradeAvailable: selectIsUpgradeAvailable(state),
});
export default connect(
select,
{
doDownloadUpgradeRequested,
}
)(Page);
export default Page;

View file

@ -1,34 +1,16 @@
// @flow
import * as ICONS from 'constants/icons';
import * as React from 'react';
import classnames from 'classnames';
import Button from 'component/button';
type Props = {
children: React.Node | Array<React.Node>,
className: ?string,
autoUpdateDownloaded: boolean,
isUpgradeAvailable: boolean,
doDownloadUpgradeRequested: () => void,
};
function Page(props: Props) {
const { children, className, autoUpdateDownloaded, isUpgradeAvailable, doDownloadUpgradeRequested } = props;
const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
const { children, className } = props;
return (
<main className={classnames('main', className)}>
{/* @if TARGET='app' */}
{showUpgradeButton && (
<div className="main__status">
{__('Upgrade is ready')}
<Button button="alt" icon={ICONS.DOWNLOAD} label={__('Install now')} onClick={doDownloadUpgradeRequested} />
</div>
)}
{/* @endif */}
{children}
</main>
);
return <main className={classnames('main', className)}>{children}</main>;
}
export default Page;

View file

@ -91,6 +91,34 @@
}
}
}
.header__banner-background {
display: flex;
background-color: $lbry-teal-4;
[data-mode='dark'] & {
background-color: $lbry-teal-5;
color: $lbry-white;
}
}
.header__banner-contents {
display: flex;
max-width: var(--page-max-width);
width: 100%;
margin: auto;
padding: 0 var(--spacing-large);
justify-content: space-between;
background-color: $lbry-teal-4;
color: $lbry-white;
svg {
stroke: $lbry-white;
}
[data-mode='dark'] & {
background-color: $lbry-teal-5;
color: $lbry-white;
}
}
.header__navigation-item--back,
.header__navigation-item--forward {

View file

@ -685,4 +685,4 @@
"Catching up...": "Catching up...",
"%s blocks behind": "%s blocks behind",
"Support this creator": "Support this creator"
}
}