upgrade banner to header
This commit is contained in:
parent
c78887b4ba
commit
66aa3eaf48
6 changed files with 63 additions and 36 deletions
|
@ -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(
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -685,4 +685,4 @@
|
|||
"Catching up...": "Catching up...",
|
||||
"%s blocks behind": "%s blocks behind",
|
||||
"Support this creator": "Support this creator"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue