Просмотр исходного кода

WIP: use react-bootstrap Navbar

Yuki Takei 7 лет назад
Родитель
Сommit
2f12041dd5

+ 2 - 2
src/client/js/components/PageEditor/CodeMirrorEditor.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Modal from 'react-bootstrap/es/Modal';
-import Button from 'react-bootstrap/es/Button';
+import NavItem from 'react-bootstrap/es/NavItem';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
 
@@ -650,7 +650,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   getNavbarItems() {
-    return <Button bsSize="small" onClick={ this.showHandsonTableHandler }><img src="/images/icons/editor/table.svg" width="14" /></Button>;
+    return <NavItem bsSize="small" onClick={ this.showHandsonTableHandler }><img src="/images/icons/editor/table.svg" width="14" /></NavItem>;
   }
 
   render() {

+ 12 - 6
src/client/js/components/PageEditor/Editor.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Navbar from 'react-bootstrap/es/Navbar';
+import Nav from 'react-bootstrap/es/Nav';
+import NavItem from 'react-bootstrap/es/NavItem';
+import Button from 'react-bootstrap/es/Button';
+import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
+import Dropzone from 'react-dropzone';
+
 import AbstractEditor from './AbstractEditor';
 import CodeMirrorEditor from './CodeMirrorEditor';
 import TextAreaEditor from './TextAreaEditor';
 
-import Dropzone from 'react-dropzone';
 
 import pasteHelper from './PasteHelper';
 
@@ -196,13 +202,13 @@ export default class Editor extends AbstractEditor {
 
   renderNavbar() {
     return (
-      <div className="m-0 navbar navbar-default navbar-editor" style={{ minHeight: 'unset' }}>
-        <ul className="pr-4 nav nav-navbar navbar-right">
+      <Navbar className="mb-0 navbar-editor" fluid={true}>
+        <Nav pullRight>
           { this.getNavbarItems() != null && this.getNavbarItems().map((item, idx) => {
-            return <li key={idx}>{item}</li>;
+            return <div key={idx}>{item}</div>;
           }) }
-        </ul>
-      </div>
+        </Nav>
+      </Navbar>
     );
   }