adjust styles of the button to edit tags

resource/locales/ja/translation.json

@@ -114,6 +114,7 @@
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",
   "Selecting authentication mechanism": "認証機構選択",
   "Add tags for this page": "タグを付ける",
+  "Edit tags for this page": "タグを編集する",
   "You have no tag, You can set tags on pages": "使用中のタグがありません",
 
 

src/client/js/components/Page/TagLabels.jsx

@@ -42,25 +42,27 @@ class TagLabels extends React.Component {
 
     for (let i = 0; i < this.state.tags.length; i++) {
       tagElements.push(
-        <span key={`${pageId}_${i}`}>
+        <span key={`${pageId}_${i}`} className="text-muted">
           <i className="tag-icon icon-tag mr-1"></i>
-          <a className="tag-name text-muted mr-2" href={`/_search?q=tag:${this.state.tags[i]}`} key={i.toString()}>{this.state.tags[i]}</a>
+          <a className="tag-name mr-2" href={`/_search?q=tag:${this.state.tags[i]}`} key={i.toString()}>{this.state.tags[i]}</a>
         </span>,
       );
 
     }
 
     return (
-      <div className="tag-viewer text-muted">
+      <div className="tag-viewer">
         {this.state.tags.length === 0 && (
-          <a className="display-of-notag text-muted" onClick={this.showEditor}>{ t('Add tags for this page') }</a>
+          <a className="btn btn-link btn-edit-tags no-tags p-0" onClick={this.showEditor}>
+            { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>
+          </a>
         )}
         {tagElements}
-        <i
-          className="manage-tags ml-2 icon-plus"
-          onClick={this.showEditor}
-        >
-        </i>
+        {this.state.tags.length > 0 && (
+          <a className="btn btn-link btn-edit-tags p-0" onClick={this.showEditor}>
+            <i className="manage-tags ml-2 icon-plus"></i> { t('Edit tags for this page') }
+          </a>
+        )}
 
         <TagEditor
           ref={(c) => { this.tagEditor = c }}

src/client/styles/scss/_page.scss

@@ -13,14 +13,8 @@
       margin-right: auto;
     }
 
-    .btn-tag {
-      display: block;
-      line-height: 20px;
-    }
-
     .btn-copy,
     .btn-copy-link,
-    .btn-tag,
     .btn-edit {
       @extend .text-muted;
       border: none;
@@ -31,12 +25,21 @@
       }
     }
 
+    .btn-edit-tags {
+      @extend .text-muted;
+      opacity: 0.5;
+
+      &.no-tags {
+        opacity: 0.7;
+      }
+    }
+
     // change button opacity
     &:hover {
       .btn.btn-copy,
       .btn-copy-link,
-      .btn-tag,
-      .btn.btn-edit {
+      .btn.btn-edit,
+      .btn.btn-edit-tags {
         opacity: unset;
       }
     }

src/client/styles/scss/_tag.scss

@@ -8,7 +8,7 @@
     margin-left: 5px;
   }
 
-  .display-of-notag,
+  .btn-edit-tags,
   .tag-icon {
     font-size: 10px;
   }