Merge pull request #1743 from weseek/support/bs4-fix-comment-editor

Support/bs4 fix comment editor

src/client/js/components/PageComment/CommentEditor.jsx

@@ -224,7 +224,7 @@ class CommentEditor extends React.Component {
 
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const cancelButton = (
-      <Button outline color="danger" size="xs" className="fcbtn btn-rounded" onClick={this.toggleEditor}>
+      <Button outline color="danger" size="xs" className="fcbtn rounded-pill" onClick={this.toggleEditor}>
         Cancel
       </Button>
     );
@@ -232,7 +232,7 @@ class CommentEditor extends React.Component {
       <Button
         outline
         color="primary"
-        className="fcbtn btn-rounded btn-1b"
+        className="fcbtn rounded-pill btn-1b"
         onClick={this.postHandler}
       >
         Comment
@@ -255,11 +255,13 @@ class CommentEditor extends React.Component {
                     Write
                   </NavLink>
                 </NavItem>
-                <NavItem>
-                  <NavLink type="button" className={activeTab === 2 ? 'active' : ''} onClick={() => this.handleSelect(2)}>
-                    Preview
-                  </NavLink>
-                </NavItem>
+                { this.state.isMarkdown && (
+                  <NavItem>
+                    <NavLink type="button" className={activeTab === 2 ? 'active' : ''} onClick={() => this.handleSelect(2)}>
+                      Preview
+                    </NavLink>
+                  </NavItem>
+                ) }
               </Nav>
               <TabContent activeTab={activeTab}>
                 <TabPane tabId={1}>
@@ -277,32 +279,37 @@ class CommentEditor extends React.Component {
                     onCtrlEnter={this.postHandler}
                   />
                 </TabPane>
-                { this.state.isMarkdown && (
-                  <TabPane tabId={2}>
-                    <div className="comment-form-preview">
-                      {commentPreview}
-                    </div>
-                  </TabPane>
-                ) }
+                <TabPane tabId={2}>
+                  <div className="comment-form-preview">
+                    {commentPreview}
+                  </div>
+                </TabPane>
               </TabContent>
             </div>
             <div className="comment-submit">
               <div className="d-flex">
-                <label style={{ flex: 1 }}>
+                <label className="mr-2">
                   { isBaloonStyle && activeTab === 1 && (
-                    <span>
+                    <span className="custom-control custom-checkbox">
                       <input
                         type="checkbox"
+                        className="custom-control-input"
                         id="comment-form-is-markdown"
                         name="isMarkdown"
                         checked={this.state.isMarkdown}
                         value="1"
                         onChange={this.updateStateCheckbox}
                       />
-                      <span className="ml-2">Markdown</span>
+                      <label
+                        className="ml-2 custom-control-label"
+                        htmlFor="comment-form-is-markdown"
+                      >
+                        Markdown
+                      </label>
                     </span>
                   ) }
                 </label>
+                <span className="flex-grow-1" />
                 <span className="d-none d-sm-inline">{ this.state.errorMessage && errorMessage }</span>
                 { this.state.hasSlackConfig
                   && (

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -549,7 +549,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   renderCheatsheetModalButton() {
     return (
-      <button type="button" className="btn-link gfm-cheatsheet-modal-link text-muted small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
+      <button type="button" className="btn-link gfm-cheatsheet-modal-link small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
         <i className="icon-question" /> Markdown
       </button>
     );
@@ -655,10 +655,12 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   getNavbarItems() {
+    const buttonColor = '';
     return [
       /* eslint-disable max-len */
       <Button
         key="nav-item-bold"
+        color={buttonColor}
         size="sm"
         title="Bold"
         onClick={this.createReplaceSelectionHandler('**', '**')}
@@ -667,6 +669,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-italic"
+        color={buttonColor}
         size="sm"
         title="Italic"
         onClick={this.createReplaceSelectionHandler('*', '*')}
@@ -675,6 +678,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-strikethrough"
+        color={buttonColor}
         size="sm"
         title="Strikethrough"
         onClick={this.createReplaceSelectionHandler('~~', '~~')}
@@ -683,6 +687,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-header"
+        color={buttonColor}
         size="sm"
         title="Heading"
         onClick={this.makeHeaderHandler}
@@ -691,6 +696,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-code"
+        color={buttonColor}
         size="sm"
         title="Inline Code"
         onClick={this.createReplaceSelectionHandler('`', '`')}
@@ -699,6 +705,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-quote"
+        color={buttonColor}
         size="sm"
         title="Quote"
         onClick={this.createAddPrefixToEachLinesHandler('> ')}
@@ -707,6 +714,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ul"
+        color={buttonColor}
         size="sm"
         title="List"
         onClick={this.createAddPrefixToEachLinesHandler('- ')}
@@ -715,6 +723,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ol"
+        color={buttonColor}
         size="sm"
         title="Numbered List"
         onClick={this.createAddPrefixToEachLinesHandler('1. ')}
@@ -723,6 +732,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-checkbox"
+        color={buttonColor}
         size="sm"
         title="Check List"
         onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
@@ -731,6 +741,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-link"
+        color={buttonColor}
         size="sm"
         title="Link"
         onClick={this.createReplaceSelectionHandler('[', ']()')}
@@ -739,6 +750,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-image"
+        color={buttonColor}
         size="sm"
         title="Image"
         onClick={this.createReplaceSelectionHandler('![', ']()')}
@@ -747,6 +759,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-table"
+        color={buttonColor}
         size="sm"
         title="Table"
         onClick={this.showHandsonTableHandler}
@@ -755,6 +768,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-drawio"
+        color={buttonColor}
         bsSize="small"
         title="draw.io"
         onClick={this.showDrawioHandler}

src/client/js/components/PageEditor/SimpleCheatsheet.jsx

@@ -11,7 +11,7 @@ class SimpleCheatsheet extends React.Component {
       <div className="card bg-default gfm-cheatsheet mb-0">
         <div className="card-body small p-b-0">
           <div className="row">
-            <div className="col-xs-6">
+            <div className="col-sm-6">
               <p>
                 # {t('sandbox.header_x', { index: '1' })}<br />
                 ## {t('sandbox.header_x', { index: '2' })}

src/client/styles/scss/_editor-overlay.scss

@@ -41,6 +41,7 @@
         min-width: 30em;
         font-family: monospace;
         color: $text-muted;
+        padding-bottom: 0;
       }
       ul > li {
         list-style: none;
@@ -48,6 +49,8 @@
     }
 
     .gfm-cheatsheet-modal-link {
+      background-color: transparent;
+      border: none;
       color: $text-muted;
       pointer-events: all;
       cursor: pointer;

src/client/styles/scss/_override-bootstrap.scss

@@ -43,6 +43,9 @@ h5 {
 .nav-tabs {
   .nav-item {
     margin-right: 0.15rem;
+    a.active {
+      cursor: default
+    }
   }
 }
 

src/client/styles/scss/theme/_apply-colors.scss

@@ -252,7 +252,7 @@ body.on-edit {
     }
 
     .nav.nav-tabs {
-      > li.active > a {
+      > li > a.active {
         background: transparent;
         border-bottom: solid 1px darken($bgcolor-global, 4%);
         border-bottom-color: darken($bgcolor-global, 4%);