WIP: reorganize GrowiSubNavigation

resource/locales/en_US/translation.json

@@ -119,7 +119,6 @@
   "Shareable link": "Shareable link",
   "The whitelist of registration permission E-mail address": "The whitelist of registration permission E-mail address",
   "Add tags for this page": "Add tags for this page",
-  "Edit tags for this page": "Edit tags for this page",
   "You have no tag, You can set tags on pages": "You have no tag, You can set tags on pages",
   "Show latest": "Show latest",
   "Load latest": "Load latest",

resource/locales/ja_JP/translation.json

@@ -118,7 +118,6 @@
   "Shareable link": "このページの共有用URL",
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",
   "Add tags for this page": "タグを付ける",
-  "Edit tags for this page": "タグを編集する",
   "You have no tag, You can set tags on pages": "使用中のタグがありません",
   "Show latest": "最新のページを表示",
   "Load latest": "最新版を読み込む",

resource/locales/zh_CN/translation.json

@@ -125,7 +125,6 @@
 	"Shareable link": "可分享链接",
 	"The whitelist of registration permission E-mail address": "注册许可电子邮件地址的白名单",
 	"Add tags for this page": "添加标签",
-	"Edit tags for this page": "编辑标签",
 	"You have no tag, You can set tags on pages": "你没有标签，可以在页面上设置标签",
 	"Show latest": "显示最新",
 	"Load latest": "家在最新",
@@ -697,4 +696,4 @@
 		"Registration successful": "注册成功",
 		"Setup": "安装程序"
 	}
-}
+}

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -79,14 +79,16 @@ const GrowiSubNavigation = (props) => {
   const additionalClassNames = ['grw-subnavbar'];
 
   return (
-    <div className={`d-flex align-items-center justify-content-between px-3 py-1 ${additionalClassNames.join(' ')}`}>
+    <div className={`d-flex align-items-center justify-content-between ${additionalClassNames.join(' ')}`}>
 
       {/* Page Path */}
       <div>
-        <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
         { !isPageNotFound && !isPageForbidden && (
-          <TagLabels />
+          <div className="mb-2">
+            <TagLabels />
+          </div>
         ) }
+        <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
 
       <div className="d-flex align-items-center">

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

@@ -98,38 +98,42 @@ class TagLabels extends React.Component {
     const { pageId } = this.props.pageContainer.state;
 
     const tags = this.getEditTargetData();
+    const isTagsEmpty = tags.length === 0;
 
     const tagElements = tags.map((tag) => {
       return (
         <span key={`${pageId}_${tag}`} className="text-muted">
-          <i className="tag-icon icon-tag mr-1"></i>
           <a className="tag-name mr-2" href={`/_search?q=tag:${tag}`} key={`${pageId}_${tag}_link`}>{tag}</a>
         </span>
       );
     });
 
     return (
-      <div className="tag-labels">
-        {tags.length === 0 && (
-          <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.showEditor}>
-            { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>
+      <>
+        <form className="tag-labels form-inline">
+          <i className="tag-icon icon-tag mr-2"></i>
+
+          {tagElements}
+
+          <a className={`btn btn-link btn-edit-tags p-0 text-muted ${isTagsEmpty ? 'no-tags' : ''}`} onClick={this.showEditor}>
+            { isTagsEmpty
+              ? (
+                <>{ t('Add tags for this page') }<i className="ml-1 icon-plus"></i></>
+              )
+              : (
+                <i className="ml-2 icon-plus"></i>
+              )
+            }
           </a>
-        )}
-        {tagElements}
-        {tags.length > 0 && (
-          <a className="btn btn-link btn-edit-tags p-0 text-muted" onClick={this.showEditor}>
-            <i className="manage-tags ml-2 icon-plus"></i> { t('Edit tags for this page') }
-          </a>
-        )}
+        </form>
 
         <TagEditor
           ref={(c) => { this.tagEditor = c }}
           appContainer={this.props.appContainer}
           show={this.state.showTagEditor}
           onTagsUpdated={this.tagsUpdatedHandler}
-        >
-        </TagEditor>
-      </div>
+        />
+      </>
     );
   }
 

src/client/styles/scss/_subnav.scss

@@ -21,6 +21,9 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 .grw-subnavbar {
+  min-height: 115px;
+  padding: 15px 30px;
+
   &:hover {
     .btn-copy,
     .btn-edit,

src/client/styles/scss/_tag.scss

@@ -10,14 +10,14 @@
     cursor: pointer;
   }
 
-  .tag-icon:not(:first-child) {
-    margin-left: 5px;
-  }
+  // .tag-icon:not(:first-child) {
+  //   margin-left: 5px;
+  // }
 
-  .btn.btn-edit-tags,
-  .tag-icon {
-    font-size: 10px;
-  }
+  // .btn.btn-edit-tags,
+  // .tag-icon {
+  //   font-size: 10px;
+  // }
 
   .tag-name {
     margin-left: 1px;