diff --git a/js/app.js b/js/app.js index d4583cb11..53475dde9 100644 --- a/js/app.js +++ b/js/app.js @@ -18,7 +18,8 @@ var App = React.createClass({ }, componentWillMount: function() { lbry.checkNewVersionAvailable(function(isAvailable) { - if (!isAvailable) { + + if (!isAvailable || sessionStorage.getItem('upgradeSkipped')) { return; } @@ -40,9 +41,12 @@ var App = React.createClass({ var updateUrl = 'https://lbry.io/get/lbry.deb'; } - if (window.confirm(message)) { + if (window.confirm(message)) + { lbry.stop(); window.location = updateUrl; + } else { + sessionStorage.setItem('upgradeSkipped', true); }; }); }); diff --git a/js/component/drawer.js b/js/component/drawer.js index 5d4e29077..d2c2de6f2 100644 --- a/js/component/drawer.js +++ b/js/component/drawer.js @@ -1,3 +1,13 @@ +var DrawerItem = React.createClass({ + render: function() { + return + } +}); + +var drawerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled + height: '36px' +}; + var Drawer = React.createClass({ getInitialState: function() { return { @@ -16,15 +26,16 @@ var Drawer = React.createClass({ return ( ); } diff --git a/js/component/header.js b/js/component/header.js index 865b8b0f5..217f0f755 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -1,83 +1,9 @@ -var topBarStyle = { - 'float': 'right', - 'position': 'absolute', - 'right': 0, - 'top': 0 - }, - balanceStyle = { - 'marginRight': '5px', - 'position': 'relative', - 'top': '1px', - }, - menuDropdownStyle = { - position: 'absolute', - top: '26px', - right: '0px', -}; - -var TopBar = React.createClass({ - getInitialState: function() { - return { - balance: 0, - }; - }, - componentDidMount: function() { - lbry.getBalance(function(balance) { - this.setState({ - balance: balance - }); - }.bind(this)); - }, - onClose: function() { - window.location.href = "?start"; - }, - render: function() { - var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management - return ( - - } style={balanceStyle} /> - - -
- - - - - {isLinux ? - : null} - -
- - ); - } -}); - -var subPageLogoStyle = { - maxWidth: '150px', - display: 'block', - marginTop: '36px', -}; - -var SubPageLogo = React.createClass({ - render: function() { - return ; - } -}); - -var headerStyle = { - padding: '12px 12px 36px', - position: 'relative' - }, - headerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled - height: '48px' - }; - var Header = React.createClass({ render: function() { return ( -
+ ); } diff --git a/js/component/link.js b/js/component/link.js index 8162d70c1..5c8dcf36d 100644 --- a/js/component/link.js +++ b/js/component/link.js @@ -6,12 +6,14 @@ var Link = React.createClass({ }, render: function() { var href = this.props.href ? this.props.href : 'javascript:;', - icon = this.props.icon ? : '', - className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') + - (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className; + icon = this.props.icon ? : '', + className = (this.props.className ? this.props.className : '') + + (this.props.button ? ' button-block button-' + this.props.button : '') + + (this.props.hidden ? ' hidden' : '') + + (this.props.disabled ? ' disabled' : ''); return ( - {this.props.icon ? icon : '' } {this.props.label} @@ -48,13 +50,14 @@ var ToolTipLink = React.createClass({ render: function() { var href = this.props.href ? this.props.href : 'javascript:;', icon = this.props.icon ? : '', - className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') + - (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className; - + className = this.props.className + + (this.props.button ? ' button-block button-' + this.props.button : '') + + (this.props.hidden ? ' hidden' : '') + + (this.props.disabled ? ' disabled' : ''); return ( - {this.props.icon ? icon : '' } {this.props.label} diff --git a/js/page/home.js b/js/page/home.js index aacf2378d..54d64a0c0 100644 --- a/js/page/home.js +++ b/js/page/home.js @@ -335,6 +335,7 @@ var Discover = React.createClass({ var HomePage = React.createClass({ componentDidMount: function() { + document.title = "Discover"; lbry.getStartNotice(function(notice) { if (notice) { alert(notice); diff --git a/js/page/settings.js b/js/page/settings.js index 9b705144d..b8ef78cef 100644 --- a/js/page/settings.js +++ b/js/page/settings.js @@ -58,6 +58,9 @@ var SettingsPage = React.createClass({ settings: null } }, + componentDidMount: function() { + document.title = "Settings"; + }, componentWillMount: function() { lbry.getSettings(function(settings) { this.setState({ diff --git a/scss/_canvas.scss b/scss/_canvas.scss index d26ff9999..7ca959e85 100644 --- a/scss/_canvas.scss +++ b/scss/_canvas.scss @@ -25,11 +25,22 @@ body min-height: 100vh; left: 0; top: 0; - .button-text + .drawer-item { display: block; + padding: $spacing-vertical / 2; + font-size: 1.2em; + .icon + { + margin-right: 6px; + } } } +#drawer-handle +{ + padding: $spacing-vertical / 2; + max-height: $header-height; +} #window.drawer-closed { @@ -41,6 +52,21 @@ body .open-drawer-link { display: none; } } +#header +{ + background: $color-primary; + color: white; + height: $header-height; + padding: $spacing-vertical / 2; +} + +.open-drawer-link, .close-drawer-link +{ + display: inline-block; + font-size: 1.5em; + padding: 0 18px 0 6px; +} + .page { margin-left: auto; margin-right: auto; diff --git a/scss/_global.scss b/scss/_global.scss index a7c4c64f6..74edd975a 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -15,6 +15,8 @@ $mobile-width-threshold: 801px; $max-content-width: 1000px; $max-text-width: 660px; +$header-height: $spacing-vertical * 1.5; + @mixin clearfix() {