diff options
| author | Samy Pesse <samypesse@gmail.com> | 2016-10-06 23:04:20 +0200 |
|---|---|---|
| committer | Samy Pesse <samypesse@gmail.com> | 2016-10-06 23:04:20 +0200 |
| commit | 1d291ff2f057b3d4360d38b27c36e75eddeebb09 (patch) | |
| tree | 3b6418bfe897a889e1fa7eb4d0e1a361b5caf14e /packages/gitbook-plugin-theme-default/src/components | |
| parent | 58ae96b7f6a5cd3b7c1fd1d650fcaae4686f578d (diff) | |
| download | gitbook-1d291ff2f057b3d4360d38b27c36e75eddeebb09.zip gitbook-1d291ff2f057b3d4360d38b27c36e75eddeebb09.tar.gz gitbook-1d291ff2f057b3d4360d38b27c36e75eddeebb09.tar.bz2 | |
Fix style of toolbar and add title to it
Diffstat (limited to 'packages/gitbook-plugin-theme-default/src/components')
3 files changed, 30 insertions, 19 deletions
diff --git a/packages/gitbook-plugin-theme-default/src/components/Body.js b/packages/gitbook-plugin-theme-default/src/components/Body.js index b4d9fe6..4f51f0f 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Body.js +++ b/packages/gitbook-plugin-theme-default/src/components/Body.js @@ -6,15 +6,16 @@ const Toolbar = require('./Toolbar'); const Body = React.createClass({ propTypes: { - page: GitBook.Shapes.Page + page: GitBook.Shapes.Page, + readme: GitBook.Shapes.Readme }, render() { - const { page } = this.props; + const { page, readme } = this.props; return ( <div className="Body page-wrapper"> - <Toolbar /> + <Toolbar title={page.title} readme={readme} /> <Page page={page} /> </div> ); diff --git a/packages/gitbook-plugin-theme-default/src/components/Theme.js b/packages/gitbook-plugin-theme-default/src/components/Theme.js index 25f8e1d..bf00502 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Theme.js +++ b/packages/gitbook-plugin-theme-default/src/components/Theme.js @@ -9,13 +9,14 @@ const Theme = React.createClass({ // State page: GitBook.Shapes.Page, summary: GitBook.Shapes.Summary, + readme: GitBook.Shapes.Readme, sidebar: React.PropTypes.object, // Other props children: React.PropTypes.node }, render() { - const { page, summary, children, sidebar } = this.props; + const { page, summary, children, sidebar, readme } = this.props; return ( <GitBook.FlexLayout column className="GitBook book"> @@ -32,7 +33,7 @@ const Theme = React.createClass({ </GitBook.FlexBox> ) : null} <GitBook.FlexBox col={sidebar.open ? 9 : 12}> - <Body page={page} /> + <Body page={page} readme={readme} /> </GitBook.FlexBox> </GitBook.FlexLayout> </GitBook.FlexBox> @@ -42,6 +43,6 @@ const Theme = React.createClass({ } }); -module.exports = GitBook.connect(Theme, ({page, summary, sidebar}) => { - return { page, summary, sidebar }; +module.exports = GitBook.connect(Theme, ({page, summary, sidebar, readme}) => { + return { page, summary, sidebar, readme }; }); diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js index ca6b7f3..cb90549 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js +++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js @@ -5,7 +5,9 @@ const sidebar = require('../actions/sidebar'); const Toolbar = React.createClass({ propTypes: { - dispatch: React.PropTypes.func + title: React.PropTypes.string.isRequired, + dispatch: React.PropTypes.func, + readme: GitBook.Shapes.Readme }, onToggle() { @@ -14,18 +16,25 @@ const Toolbar = React.createClass({ }, render() { + const { title, readme } = this.props; + return ( - <div className="Toolbar book-toolbar"> - <GitBook.Button onClick={this.onToggle}> - <GitBook.Icon id="align-justify" /> - </GitBook.Button> - <div className="Toolbar-left"> - <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} /> - </div> - <div className="Toolbar-right"> - <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} /> - </div> - </div> + <GitBook.FlexLayout className="Toolbar"> + <GitBook.FlexBox className="Toolbar-left"> + <GitBook.Button onClick={this.onToggle}> + <GitBook.Icon id="align-justify" /> + </GitBook.Button> + <GitBook.InjectedComponentSet align="flex-start" matching={{ role: 'toolbar:buttons:left' }} /> + </GitBook.FlexBox> + <GitBook.FlexBox auto> + <h1 className="Toolbar-Title"> + <GitBook.Link to={readme.file}>{title}</GitBook.Link> + </h1> + </GitBook.FlexBox> + <GitBook.FlexBox className="Toolbar-right"> + <GitBook.InjectedComponentSet align="flex-end" matching={{ role: 'toolbar:buttons:right' }} /> + </GitBook.FlexBox> + </GitBook.FlexLayout> ); } }); |