diff options
Diffstat (limited to 'packages/gitbook-plugin-theme-default')
5 files changed, 164 insertions, 4 deletions
diff --git a/packages/gitbook-plugin-theme-default/less/LoadingBar.less b/packages/gitbook-plugin-theme-default/less/LoadingBar.less new file mode 100644 index 0000000..1fca2ea --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/LoadingBar.less @@ -0,0 +1,30 @@ +.LoadingBar { + pointer-events: none; + transition: 400ms linear all; + + .LoadingBar-Bar { + background: @color-primary; + height: 2px; + + position: fixed; + top: 0; + left: 0; + z-index: 10000; + display: none; + width: 100%; + border-radius: 0 1px 1px 0; + transition: width 350ms; + } + + .LoadingBar-Shadow { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 70px; + height: 2px; + border-radius: 50%; + opacity: .45; + box-shadow: @color-primary 1px 0 6px 1px; + } +} diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less index 6b50858..960477d 100644 --- a/packages/gitbook-plugin-theme-default/less/main.less +++ b/packages/gitbook-plugin-theme-default/less/main.less @@ -14,6 +14,7 @@ @import "Search.less"; @import "Body.less"; @import "Dropdown.less"; +@import "LoadingBar.less"; * { .box-sizing(border-box); diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index c8dc452..62f4f52 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/packages/gitbook-plugin-theme-default/less/variables.less @@ -1,3 +1,5 @@ +// Colors +@color-primary: hsl(207, 100%, 50%); // rgb(44, 106, 254); // Fonts @font-family-serif: Georgia, serif; @font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -16,7 +18,7 @@ @summary-article-padding-v: 10px; @summary-article-padding-h: 15px; @summary-article-color: hsl(207, 15%, 25%); -@summary-article-hover-color: hsl(207, 100%, 50%); +@summary-article-hover-color: @color-primary; @summary-article-active-color: @summary-article-color; @summary-article-active-background: #f5f5f5; // Page diff --git a/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js b/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js new file mode 100644 index 0000000..11e1ddb --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js @@ -0,0 +1,124 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; + +/** + * Displays a progress bar (YouTube-like) at the top of container + * Based on https://github.com/lonelyclick/react-loading-bar/blob/master/src/Loading.jsx + */ +const LoadingBar = React.createClass({ + propTypes: { + show: React.PropTypes.bool + }, + + getDefaultProps() { + return { + show: false + }; + }, + + getInitialState() { + return { + size: 0, + disappearDelayHide: false, // when dispappear, first transition then display none + percent: 0, + appearDelayWidth: 0 // when appear, first display block then transition width + }; + }, + + componentWillReceiveProps(nextProps) { + const { show } = nextProps; + + if (show) { + this.show(); + } else { + this.hide(); + } + }, + + shouldComponentUpdate(nextProps, nextState) { + return true; // !shallowEqual(nextState, this.state) + }, + + show() { + let { size, percent } = this.state; + + const appearDelayWidth = size === 0; + percent = calculatePercent(percent); + + this.setState({ + size: ++size, + appearDelayWidth, + percent + }); + + if (appearDelayWidth) { + setTimeout(() => { + this.setState({ + appearDelayWidth: false + }); + }); + } + }, + + hide() { + let { size } = this.state; + + if (--size < 0) { + this.setState({ size: 0 }); + return; + } + + this.setState({ + size: 0, + disappearDelayHide: true, + percent: 1 + }); + + setTimeout(() => { + this.setState({ + disappearDelayHide: false, + percent: 0 + }); + }, 500); + }, + + getBarStyle() { + const { disappearDelayHide, appearDelayWidth, percent } = this.state; + + return { + width: appearDelayWidth ? 0 : percent * 100 + '%', + display: disappearDelayHide || percent > 0 ? 'block' : 'none' + }; + }, + + getShadowStyle() { + const { percent, disappearDelayHide } = this.state; + + return { + display: disappearDelayHide || percent > 0 ? 'block' : 'none' + }; + }, + + render() { + return ( + <div className="LoadingBar"> + <div className="LoadingBar-Bar" style={this.getBarStyle()}> + <div className="LoadingBar-Shadow" + style={this.getShadowStyle()}> + </div> + </div> + </div> + ); + } +}); + +function calculatePercent(percent) { + percent = percent || 0; + + // How much of remaining bar we advance + const progress = 0.1 + Math.random() * 0.3; + + return percent + progress * (1 - percent); +} + +module.exports = LoadingBar; diff --git a/packages/gitbook-plugin-theme-default/src/components/Theme.js b/packages/gitbook-plugin-theme-default/src/components/Theme.js index bf00502..741b3cc 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Theme.js +++ b/packages/gitbook-plugin-theme-default/src/components/Theme.js @@ -3,6 +3,7 @@ const { React } = GitBook; const Sidebar = require('./Sidebar'); const Body = require('./Body'); +const LoadingBar = require('./LoadingBar'); const Theme = React.createClass({ propTypes: { @@ -10,16 +11,18 @@ const Theme = React.createClass({ page: GitBook.Shapes.Page, summary: GitBook.Shapes.Summary, readme: GitBook.Shapes.Readme, + history: GitBook.Shapes.History, sidebar: React.PropTypes.object, // Other props children: React.PropTypes.node }, render() { - const { page, summary, children, sidebar, readme } = this.props; + const { page, summary, children, sidebar, readme, history } = this.props; return ( <GitBook.FlexLayout column className="GitBook book"> + <LoadingBar show={history.loading} /> <GitBook.Head title={page.title} titleTemplate="%s - GitBook" /> @@ -43,6 +46,6 @@ const Theme = React.createClass({ } }); -module.exports = GitBook.connect(Theme, ({page, summary, sidebar, readme}) => { - return { page, summary, sidebar, readme }; +module.exports = GitBook.connect(Theme, ({page, summary, sidebar, readme, history}) => { + return { page, summary, sidebar, readme, history }; }); |