From 218a328cac8222b471b23285fe464431d904bbc8 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 25 Jun 2018 02:07:45 -0400 Subject: [PATCH] add back fixed header --- src/renderer/component/app/view.jsx | 2 +- src/renderer/component/header/index.js | 13 +++++-- src/renderer/component/header/view.jsx | 38 +++++++++++++++++++-- src/renderer/component/sideBar/index.js | 16 ++++----- src/renderer/component/sideBar/view.jsx | 43 +----------------------- src/renderer/scss/_gui.scss | 17 +++++----- src/renderer/scss/_vars.scss | 1 + src/renderer/scss/component/_header.scss | 26 ++++++++++++-- src/renderer/scss/component/_nav.scss | 12 +------ static/themes/dark.css | 3 ++ 10 files changed, 90 insertions(+), 81 deletions(-) diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx index 23ee922bb..a23a258ea 100644 --- a/src/renderer/component/app/view.jsx +++ b/src/renderer/component/app/view.jsx @@ -82,10 +82,10 @@ class App extends React.PureComponent { return (
openContextMenu(e)}> +
-
diff --git a/src/renderer/component/header/index.js b/src/renderer/component/header/index.js index 0b5c8066f..50ccac3ff 100644 --- a/src/renderer/component/header/index.js +++ b/src/renderer/component/header/index.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; -import { selectBalance } from 'lbry-redux'; +import { selectBalance, selectIsBackDisabled, selectIsForwardDisabled } from 'lbry-redux'; import { formatCredits } from 'util/formatCredits'; -import { doNavigate } from 'redux/actions/navigation'; +import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation'; import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app'; import { doDownloadUpgradeRequested } from 'redux/actions/app'; import Header from './view'; @@ -11,11 +11,18 @@ const select = state => ({ balance: selectBalance(state), isUpgradeAvailable: selectIsUpgradeAvailable(state), roundedBalance: formatCredits(selectBalance(state) || 0, 2), + isBackDisabled: selectIsBackDisabled(state), + isForwardDisabled: selectIsForwardDisabled(state), }); const perform = dispatch => ({ downloadUpgradeRequested: () => dispatch(doDownloadUpgradeRequested()), navigate: path => dispatch(doNavigate(path)), + back: () => dispatch(doHistoryBack()), + forward: () => dispatch(doHistoryForward()), }); -export default connect(select, perform)(Header); +export default connect( + select, + perform +)(Header); diff --git a/src/renderer/component/header/view.jsx b/src/renderer/component/header/view.jsx index 1cbdceb13..372380a8b 100644 --- a/src/renderer/component/header/view.jsx +++ b/src/renderer/component/header/view.jsx @@ -7,10 +7,14 @@ import * as icons from 'constants/icons'; type Props = { autoUpdateDownloaded: boolean, balance: string, - downloadUpgradeRequested: any => void, isUpgradeAvailable: boolean, - navigate: any => void, roundedBalance: string, + isBackDisabled: boolean, + isForwardDisabled: boolean, + back: () => void, + forward: () => void, + downloadUpgradeRequested: any => void, + navigate: any => void, }; const Header = (props: Props) => { @@ -21,6 +25,10 @@ const Header = (props: Props) => { isUpgradeAvailable, navigate, roundedBalance, + back, + isBackDisabled, + forward, + isForwardDisabled, } = props; const showUpgradeButton = @@ -28,6 +36,32 @@ const Header = (props: Props) => { return (
+
+
+
- -
    {navLinks.primary.map(({ label, path, active, icon }) => ( diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 4dcd38a7a..c240197da 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -157,14 +157,13 @@ p { } .page { - display: grid; - grid-template-rows: var(--header-height) calc(100vh - var(--header-height)); - grid-template-columns: var(--side-nav-width) auto; - grid-template-areas: - 'nav content' - 'nav content'; + position: absolute; + top: var(--header-height); + left: 0; + right: 0; + bottom: 0; + display: flex; background-color: var(--color-bg); - height: 100vh; @media only screen and (min-width: $medium-breakpoint) { grid-template-columns: var(--side-nav-width-m) auto; @@ -179,8 +178,8 @@ p { Page content */ .content { - grid-area: content; - overflow-y: auto; + flex: 1; + overflow: auto; } .main { diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 5d3b801af..bf4c71aa7 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -54,6 +54,7 @@ $large-breakpoint: 1921px; --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1); --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03); + --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05); /* Text */ --text-color: var(--color-black); diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss index 94eb62974..32058ec7c 100644 --- a/src/renderer/scss/component/_header.scss +++ b/src/renderer/scss/component/_header.scss @@ -1,17 +1,37 @@ .header { + position: fixed; + height: var(--header-height); + width: 100%; display: flex; z-index: 1; justify-content: space-between; - padding: $spacing-width $spacing-width 0 $spacing-width; + align-items: center; + padding: 0 $spacing-width; background-color: var(--color-bg); + box-shadow: var(--box-shadow-header); +} + +.header__navigation { + display: flex; + justify-content: space-between; +} + +.header__history { + display: flex; + padding: 0 $spacing-width * 1/2; + + @media only screen and (min-width: $medium-breakpoint) { + .btn { + padding: 0 $spacing-width * 1/6; + } + } } .header__actions-right { margin-left: auto; - padding-left: $spacing-vertical / 2; display: flex; .btn { - margin-left: $spacing-vertical * 1/3; + margin-left: $spacing-width * 1/3; } } diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss index ae6d28f80..154f699e1 100644 --- a/src/renderer/scss/component/_nav.scss +++ b/src/renderer/scss/component/_nav.scss @@ -1,5 +1,5 @@ .nav { - grid-area: nav; + width: var(--side-nav-width); background-color: var(--nav-bg-color); padding: $spacing-width; color: var(--nav-color); @@ -7,21 +7,11 @@ hr { width: 24px; margin: 36px 0; - // width: 40px; border: solid 1px var(--color-divider); margin: $spacing-vertical $spacing-vertical * 2/3; } } -.nav__actions-top { - display: flex; - justify-content: space-between; -} - -.nav__actions-history { - display: flex; -} - // Sidebar links .nav__primary { padding-top: 80px; diff --git a/static/themes/dark.css b/static/themes/dark.css index 9bf8cac02..2edfc8cd2 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -90,4 +90,7 @@ /* Scrollbar */ --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); --scrollbar-thumb-hover-bg: #8696AF; + + /* Shadows */ + --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2); }