Merge pull request #954 from weseek/imprv/draft-icon

icon on draft list

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

@@ -73,21 +73,23 @@ class Draft extends React.Component {
   }
 
   renderAccordionTitle(isExist) {
+    const iconClass = this.state.isOpen ? 'caret-opened' : '';
+
     if (isExist) {
       return (
         <Fragment>
-          <span>{this.props.path}</span>
-          <span className="mx-2">({this.props.t('page exists')})</span>
+          <i className={`caret ${iconClass}`}></i>
+          <span className="mx-2">{this.props.path}</span>
+          <span>({this.props.t('page exists')})</span>
         </Fragment>
       );
     }
 
     return (
       <Fragment>
-        <a href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer">{this.props.path}</a>
-        <span className="mx-2">
-          <span className="label-draft label label-default">draft</span>
-        </span>
+        <i className={`caret ${iconClass}`}></i>
+        <a className="mx-2" href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer">{this.props.path}</a>
+        <span className="label-draft label label-default">draft</span>
       </Fragment>
     );
   }
@@ -97,13 +99,13 @@ class Draft extends React.Component {
     const id = this.props.path.replace('/', '-');
 
     return (
-      <div className="timeline-body">
-        <div className="panel panel-timeline">
+      <div className="draft-list-item">
+        <div className="panel">
           <div className="panel-heading d-flex justify-content-between">
             <div className="panel-title" onClick={this.toggleContent} data-target={`#${id}`}>
               {this.renderAccordionTitle(this.props.isExist)}
             </div>
-            <div>
+            <div className="icon-container">
               {this.props.isExist
                 ? null
                 : (

src/client/styles/scss/_draft.scss

@@ -0,0 +1,32 @@
+.draft-list-item {
+  .panel {
+    border: 1px solid #ccc;
+
+    .panel-heading {
+      background-color: #ccc;
+
+      .caret {
+        transition: 0.4s;
+        transform: rotate(-90deg);
+
+        &.caret-opened {
+          transform: rotate(0deg);
+        }
+      }
+
+      .icon-container {
+        i {
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        .icon-container {
+          i {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}

src/client/styles/scss/style-app.scss

@@ -40,6 +40,7 @@
 @import 'handsontable';
 @import 'wiki';
 @import 'tag';
+@import 'draft';
 
 /*
  * for Guest User Mode