style

resource/locales/en-US/translation.json

@@ -4,6 +4,7 @@
   "Delete": "Delete",
   "Duplicate": "Duplicate",
   "Copy": "Copy",
+  "Click to copy": "Click to copy",
   "Move": "Move",
   "Moved": "Moved",
   "Unlinked": "Unlinked",

resource/locales/ja/translation.json

@@ -4,6 +4,7 @@
   "Delete": "削除",
   "Duplicate": "複製",
   "Copy": "コピー",
+  "Click to copy": "クリックでコピー",
   "Move": "移動",
   "Moved": "移動しました",
   "Unlinked": "リダイレクト削除",

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

@@ -221,7 +221,7 @@ export default class MyDraftList extends React.Component {
     return (
       <div className="page-list-container-create">
         <button type="button" className="btn-danger mb-3" onClick={this.clearAllDrafts}>Delete All</button>
-        <ul className="page-list-ul page-list-ul-flat">
+        <ul className="p-0 m-0">
           {draftList}
         </ul>
         <Pagination bsSize="small">{paginationItems}</Pagination>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import Popover from 'react-bootstrap/lib/Popover';
@@ -33,18 +33,34 @@ class Draft extends React.Component {
   renderButton(isExist, markdown) {
     if (isExist) {
       return (
-        <button type="button" className="btn-primary mx-1" onClick={this.copyMarkdownToClipboard}>
-          <span className="icon-doc"></span> {this.props.t('Copy')}
-        </button>
+        <a
+          className="draft-copy"
+          data-toggle="tooltip"
+          data-placement="bottom"
+          title={this.props.t('Copy')}
+          onClick={this.copyMarkdownToClipboard}
+        >
+          <i className="icon-doc" />
+        </a>
       );
     }
 
     return (
-      <a href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer" className="p-0">
-        <button type="button" className="btn-primary mx-1">
-          <span className="icon-note"></span> {this.props.t('Edit')}
-        </button>
-      </a>
+      <Fragment>
+        <span className="label-draft label label-default">draft</span>
+        <a
+          href={`${this.props.path}#edit`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="draft-delete"
+          data-toggle="tooltip"
+          data-placement="bottom"
+          title={this.props.t('Edit')}
+          onClick={() => { return this.props.clearDraft(this.props.path) }}
+        >
+          <i className="icon-note" />
+        </a>
+      </Fragment>
     );
   }
 
@@ -90,17 +106,28 @@ class Draft extends React.Component {
     const { t } = this.props;
 
     return (
-      <li className="page-list-li d-flex align-items-center">
-        <OverlayTrigger placement="right" overlay={this.renderPopover(this.props.path, this.props.markdown)}>
-          <span onClick={this.copyMarkdownToClipboard}>
-            <span className="icon-doc"></span>
+      <li className="d-flex align-items-center">
+        <OverlayTrigger placement="bottom" overlay={this.renderPopover(this.props.path, this.props.markdown)}>
+          <span
+            data-toggle="tooltip"
+            data-placement="bottom"
+            title={t('Click to copy')}
+            onClick={this.copyMarkdownToClipboard}
+          >
+            <i className="icon-doc"></i>
             {this.props.path} {this.props.isExist ? `(${t('page exists')})` : ''}
           </span>
         </OverlayTrigger>
         {this.renderButton(this.props.isExist, this.props.markdown)}
-        <button type="button" className="btn-danger mx-1" onClick={() => { return this.props.clearDraft(this.props.path) }}>
-          <span className="icon-trash"></span> {t('Delete')}
-        </button>
+        <a
+          className="text-danger draft-delete"
+          data-toggle="tooltip"
+          data-placement="top"
+          title={t('Delete')}
+          onClick={() => { return this.props.clearDraft(this.props.path) }}
+        >
+          <i className="icon-trash" />
+        </a>
       </li>
     );
   }

src/client/styles/scss/_user.scss

@@ -68,11 +68,22 @@
   .user-page-content {
     #user-draft-list {
       li {
-        button {
-          min-width: 55px;
-          padding: 0 5px;
-          font-size: x-small;
-          border-radius: 10px;
+        .label-draft {
+          padding: 1px 5px;
+          margin: 0 0 0 4px;
+          font-weight: normal;
+        }
+
+        a {
+          &.draft-copy {
+            margin: 0 0 0 4px;
+            cursor: pointer;
+          }
+
+          &.draft-delete {
+            margin: 0 0 0 4px;
+            cursor: pointer;
+          }
         }
       }
     }