feat: Add issue link

xsky-fe · Jun 28, 2019 · 307b03d · 307b03d
1 parent c656471
commit 307b03d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/docs/src/components/IssueIcon.js b/docs/src/components/IssueIcon.js
diff --git a/docs/src/components/SideNav/style.scss b/docs/src/components/SideNav/style.scss
@@ -8,12 +8,15 @@
       overflow: scroll;
       padding-bottom: 60px;
     }
+    &.navbar-default {
+      background-color: transparent;
+    }
     &.navbar {
       position: fixed;
       width: inherit;
       height: calc(100vh - 51px);
-      border-right: 1px solid #ececec;
       border: 0;
+      border-right: 1px solid #ececec;
       border-radius: 0;
     }
     .navbar-nav > li {
@@ -23,7 +26,10 @@
         padding: 8px 0px 8px 10px;
       }
     }
-    .Sidebar__Header {
+    &__Header {
+      &.navbar-nav {
+        float: none;
+      }
       .nav a {
         display: block;
         cursor: pointer;

diff --git a/docs/src/components/TopBar/index.js b/docs/src/components/TopBar/index.js
@@ -1,9 +1,10 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
-import { Navbar, Nav } from 'react-bootstrap';
+import { Navbar, Nav, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { SideNavItems } from '../SideNav';
 import GitHubIcon from '../GitHubIcon';
+import IssueIcon from '../IssueIcon';
 import logo from '../../images/logo.png';
 import useWindowWidth from '../../utils/hooks/get-window-width';
 import './style.scss';
@@ -61,13 +62,31 @@ const TopBar = (props) => {
           <Nav pullRight>
             <li>
               <a target="_blank" rel="noopener noreferrer"  href="https://github.com/xsky-fe/wizard-ui">
-                <span className="github-icon">
+                <span className="svg-icon">
                   <GitHubIcon />
                 </span>
                 GITHUB
               </a>
             </li>
           </Nav>
+          <Nav pullRight>
+            <li>
+              <OverlayTrigger
+                placement="left"
+                overlay={(
+                  <Tooltip id="tooltip">
+                    提交 Issue
+                  </Tooltip>
+                )}
+              >
+                <a target="_blank" rel="noopener noreferrer"  href="https://github.com/xsky-fe/wizard-ui/issues/new">
+                   <span className="svg-icon">
+                    <IssueIcon />
+                  </span>
+                </a>
+              </OverlayTrigger>
+            </li>
+          </Nav>
         </Navbar.Collapse>
       </Navbar>
     </div>

diff --git a/docs/src/components/TopBar/style.scss b/docs/src/components/TopBar/style.scss
@@ -12,7 +12,7 @@
       color: #6b58c4;
     }
   }
-  .github-icon {
+  .svg-icon {
     margin-right: 8px;
     display: inline-block;
     height: 16px;
@@ -27,6 +27,11 @@
 }
 @media(min-width: 768px) {
   .TopBar {
+    .navbar-default {
+      background-color: #fff;
+      border: 0;
+      box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, .15);
+    }
     .Sidebar__Header {
       &.navbar-nav {
         margin: 0;

diff --git a/docs/src/templates/components-post.js b/docs/src/templates/components-post.js
@@ -30,7 +30,7 @@ class BlogPostTemplate extends React.Component {
           <Col xs={24} md={4} xl={4}>
             <SideNav location={this.props.location} />
           </Col>
-          <Col xs={24} md={16} xl={16}>
+          <Col xs={24} md={17} xl={17}>
             <div className="Main__Body">
               <Header post={post}/>
               <MDXProvider components={components}>
@@ -50,7 +50,7 @@ class BlogPostTemplate extends React.Component {
               )}
             </div>
           </Col>
-          <Col md={4} xl={4}>
+          <Col md={3} xl={3}>
             <Toc headings={headings} location={this.props.location}/>
           </Col>
         </Row>