gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-21 01:53:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start designing toolbar

Browse Source
This commit is contained in:
Samy Pesse
2016-09-27 17:08:34 +02:00
parent f1ef1902f3
commit bc5df83846
7 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook-core/src/components/Button.js
+4 -4
View File
@@ -1,5 +1,5 @@
const React = require('react');
//const classNames = require('classnames');
const classNames = require('classnames');
const Button = React.createClass({
propTypes: {
@@ -11,10 +11,10 @@ const Button = React.createClass({
},
render() {
const { children, active, onClick, className } = this.props;
/*const className = classNames('GitBook//Button', this.props.className, {
const { children, active, onClick } = this.props;
const className = classNames('GitBook/Button', this.props.className, {
active
});*/
});
return <button className={className} onClick={onClick}>{children}</button>;
}
packages/gitbook-plugin-theme-default/less/Button.less
+18
View File
@@ -0,0 +1,18 @@
.GitBook\/Button {
border: 0;
background-color: transparent;
background: @button-background;
color: @button-color;
text-align: center;
line-height: @line-height-base;
padding: 8px 4px;
outline: none;
&:hover {
color: @button-hover-color;
}
&:focus, &:hover {
outline: none;
}
}
packages/gitbook-plugin-theme-default/less/Toolbar.less
+3
View File
@@ -0,0 +1,3 @@
.Toolbar {
}
packages/gitbook-plugin-theme-default/less/main.less
+3
View File
@@ -4,9 +4,12 @@
@import "reset.less";
@import "variables.less";
@import "Button.less";
@import "Sidebar.less";
@import "Summary.less";
@import "Page.less";
@import "Toolbar.less";
body, html {
margin: 0px;
packages/gitbook-plugin-theme-default/less/variables.less
+10
View File
@@ -1,3 +1,9 @@
// Font sizes
@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base);
// Sidebar
@sidebar-background: rgb(250, 250, 250);
@sidebar-border-color: rgba(0, 0, 0, 0.0666667);
@@ -11,3 +17,7 @@
@page-width: 800px;
@page-color: #333333;
@page-line-height: 1.7;
// Button
@button-background: transparent;
@button-color: #ddd;
@button-hover-color: #ccc;
packages/gitbook-plugin-theme-default/src/components/Toolbar.js
+6 -2
View File
@@ -19,8 +19,12 @@ const Toolbar = React.createClass({
<GitBook.Button onClick={this.onToggle}>
<GitBook.Icon id="align-justify" />
</GitBook.Button>
<GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
<GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
<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>
);
}
packages/gitbook-plugin-theme-default/src/index.js
+1 -1
View File
@@ -33,7 +33,7 @@ let ThemeBody = React.createClass({
<Sidebar summary={summary} />
</GitBook.FlexBox>
) : null}
<GitBook.FlexBox col={9}>
<GitBook.FlexBox col={sidebar.open ? 9 : 12}>
<Body page={page} />
</GitBook.FlexBox>
</GitBook.FlexLayout>