Merge pull request #1329 from weseek/support/apply-bootstrap4-fix-draft

Support/apply bootstrap4 fix draft

src/client/js/components/MyDraftList/Draft.jsx

@@ -1,12 +1,11 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-// TODO: GW-333
-// import Panel from 'react-bootstrap/es/Panel';
 import {
+  Collapse,
   UncontrolledTooltip,
 } from 'reactstrap';
 
@@ -82,78 +81,97 @@ class Draft extends React.Component {
   }
 
   renderAccordionTitle(isExist) {
-    const iconClass = this.state.isPanelExpanded ? 'caret-opened' : '';
+    const { isPanelExpanded } = this.state;
+
+    const iconClass = isPanelExpanded ? 'caret-opened' : '';
 
     return (
-      <Fragment>
+      <span>
         <i className={`caret ${iconClass}`}></i>
-        <span className="mx-2">{this.props.path}</span>
+        <span className="mx-2" onClick={() => this.setState({ isPanelExpanded: !isPanelExpanded })}>
+          {this.props.path}
+        </span>
         { isExist && (
           <span>({this.props.t('page exists')})</span>
         ) }
         { !isExist && (
-          <span className="label-draft label label-default">draft</span>
+          <span className="badge badge-secondary">draft</span>
         ) }
-      </Fragment>
+
+        <a className="ml-2" href={this.props.path}><i className="icon icon-login"></i></a>
+      </span>
+    );
+  }
+
+  renderControls() {
+    const { t, path } = this.props;
+
+    const encodedPath = path.replace(/\//g, '-');
+    const tooltipTargetId = `draft-copied-tooltip_${encodedPath}`;
+
+    return (
+      <div className="icon-container">
+        {this.props.isExist
+          ? null
+          : (
+            <a
+              href={`${this.props.path}#edit`}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-toggle="tooltip"
+              title={this.props.t('Edit')}
+            >
+              <i className="mx-2 icon-note" />
+            </a>
+          )
+        }
+        <span id={tooltipTargetId}>
+          <CopyToClipboard text={this.props.markdown} onCopy={this.changeToolTipLabel}>
+            <a
+              className="text-center draft-copy"
+            >
+              <i className="mx-2 ti-clipboard" />
+            </a>
+          </CopyToClipboard>
+        </span>
+        <UncontrolledTooltip placement="top" target={tooltipTargetId} fade={false} trigger="hover">
+          { this.state.showCopiedMessage && (
+            <strong>copied!</strong>
+          ) }
+          { !this.state.showCopiedMessage && (
+            <span>{this.props.t('Copy')}</span>
+          ) }
+        </UncontrolledTooltip>
+        <a
+          className="text-danger text-center"
+          data-toggle="tooltip"
+          data-placement="top"
+          title={t('Delete')}
+          onClick={() => { return this.props.clearDraft(this.props.path) }}
+        >
+          <i className="mx-2 icon-trash" />
+        </a>
+      </div>
     );
   }
 
   render() {
-    const { t } = this.props;
+    const { isPanelExpanded } = this.state;
+
     return (
-      <div className="draft-list-item">
-        <Panel>
-          <Panel.Heading className="d-flex">
-            <Panel.Toggle>
-              {this.renderAccordionTitle(this.props.isExist)}
-            </Panel.Toggle>
-            <a href={this.props.path}><i className="icon icon-login"></i></a>
+      <div className="accordion draft-list-item" role="tablist">
+        <div className="card">
+
+          <div className="card-header d-flex" role="tab">
+            {this.renderAccordionTitle(this.props.isExist)}
+
             <div className="flex-grow-1"></div>
-            <div className="icon-container">
-              {this.props.isExist
-                ? null
-                : (
-                  <a
-                    href={`${this.props.path}#edit`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    data-toggle="tooltip"
-                    title={this.props.t('Edit')}
-                  >
-                    <i className="mx-2 icon-note" />
-                  </a>
-                )
-              }
-              <span id="draft-copied-tooltip">
-                <CopyToClipboard text={this.props.markdown} onCopy={this.changeToolTipLabel}>
-                  <a
-                    className="text-center draft-copy"
-                  >
-                    <i className="mx-2 ti-clipboard" />
-                  </a>
-                </CopyToClipboard>
-              </span>
-              <UncontrolledTooltip placement="top" target="draft-copied-tooltip">
-                { this.state.showCopiedMessage && (
-                  <strong>copied!</strong>
-                ) }
-                { !this.state.showCopiedMessage && (
-                  <span>{this.props.t('Copy')}</span>
-                ) }
-              </UncontrolledTooltip>
-              <a
-                className="text-danger text-center"
-                data-toggle="tooltip"
-                data-placement="top"
-                title={t('Delete')}
-                onClick={() => { return this.props.clearDraft(this.props.path) }}
-              >
-                <i className="mx-2 icon-trash" />
-              </a>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse onEnter={this.expandPanelHandler} onExit={this.collapsePanelHandler}>
-            <Panel.Body>
+
+            {this.renderControls()}
+          </div>
+
+          <Collapse isOpen={isPanelExpanded} onEntering={this.expandPanelHandler} onExiting={this.collapsePanelHandler}>
+            <div className="card-body">
               {/* loading spinner */}
               { this.state.isPanelExpanded && !this.state.isRendered && (
                 <div className="text-center">
@@ -164,9 +182,10 @@ class Draft extends React.Component {
               { this.state.isPanelExpanded && this.state.isRendered && (
                 <RevisionBody html={this.state.html} />
               ) }
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
+            </div>
+          </Collapse>
+
+        </div>
       </div>
     );
   }

src/client/styles/scss/_user.scss

@@ -66,27 +66,12 @@
   }
 }
 
-.user-page-content {
-  #user-draft-list {
-    #draft-list {
-      .panel-title {
-        width: 100%;
-
-        .label-draft {
-          padding: 1px 5px;
-          margin: 0 0 0 4px;
-          font-weight: normal;
-        }
-      }
-
-      a {
-        .icon-copy,
-        .draft-delete,
-        .icon-edit {
-          margin: 0 0 0 4px;
-          cursor: pointer;
-        }
-      }
+.draft-list-item {
+  .icon-container {
+    .icon-copy,
+    .draft-delete,
+    .icon-edit {
+      cursor: pointer;
     }
   }
 }