Fix style of toolbar and add title to it

packages/gitbook-core/src/components/Link.js

@@ -28,7 +28,6 @@ const Link = React.createClass({
         }
 
         href = currentFile.relative(href);
-
         return <a href={href} {...props}>{children}</a>;
     }
 });

packages/gitbook-core/src/models/File.js

@@ -32,12 +32,22 @@ class File extends Record(DEFAULTS) {
         );
     }
 
+    /**
+     * Return true if file is an instance of File
+     * @param {Mixed} file
+     * @return {Boolean}
+     */
     static is(file) {
         return (file instanceof File);
     }
 
+    /**
+     * Create a file instance
+     * @param {Mixed|File} file
+     * @return {File}
+     */
     static create(file) {
-        return file instanceof File ?
+        return File.is(file) ?
             file : new File(file);
     }
 }

packages/gitbook-core/src/models/Readme.js

@@ -0,0 +1,21 @@
+const { Record } = require('immutable');
+const File = require('./File');
+
+const DEFAULTS = {
+    file: new File()
+};
+
+class Readme extends Record(DEFAULTS) {
+    constructor(state = {}) {
+        super({
+            file: File.create(state.file)
+        });
+    }
+
+    static create(state) {
+        return state instanceof Readme ?
+            state : new Readme(state);
+    }
+}
+
+module.exports = Readme;

packages/gitbook-core/src/reducers/readme.js

@@ -1,21 +1,5 @@
-const { Record } = require('immutable');
-const File = require('../models/file');
-
-class ReadmeState extends Record({
-    file: new File()
-}) {
-    constructor(state = {}) {
-        super({
-            file: new File(state.file)
-        });
-    }
-
-    static create(state) {
-        return state instanceof ReadmeState ?
-            state : new ReadmeState(state);
-    }
-}
+const Readme = require('../models/Readme');
 
 module.exports = (state, action) => {
-    return ReadmeState.create(state);
+    return Readme.create(state);
 };

packages/gitbook-core/src/shapes/Readme.js

@@ -0,0 +1,11 @@
+const React  = require('react');
+
+const {
+    shape
+} = React.PropTypes;
+
+const File = require('./File');
+
+module.exports = shape({
+    file:  File.isRequired
+});

packages/gitbook-core/src/shapes/index.js

@@ -8,6 +8,7 @@ module.exports = {
     Context:        require('./Context'),
     Page:           require('./Page'),
     File:           require('./File'),
+    Readme:         require('./Readme'),
     Summary:        require('./Summary'),
     SummaryPart:    require('./SummaryPart'),
     SummaryArticle: require('./SummaryArticle')

packages/gitbook-plugin-search/src/actions/search.js

@@ -73,7 +73,6 @@ function handleQuery(q) {
 function refresh() {
     return (dispatch, getState) => {
         const q = getState().search.query;
-        console.log('refresh search with', q);
         if (q) {
             dispatch(handleQuery(q));
         }

packages/gitbook-plugin-theme-default/less/Toolbar.less

@@ -1,3 +1,27 @@
 .Toolbar {
+    .Toolbar-Title {
+        padding: 0px 20px;
+        margin: 0;
+        font-size: 20px;
+        font-weight: 200;
+        text-align: center;
+        line-height: 50px;
+        opacity: 0;
+        .transition(~"opacity ease .2s");
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: @button-hover-color;
 
+        a, a:hover {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    &:hover {
+        .Toolbar-Title {
+            opacity: 1;
+        }
+    }
 }

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>
         );

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 };
 });

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>
         );
     }
 });