Merge pull request #2680 from weseek/imprv/create-three-stranded-button-new

Imprv/create three stranded button new

resource/locales/en_US/translation.json

@@ -1,5 +1,6 @@
 {
   "Help": "Help",
+  "view": "View",
   "Edit": "Edit",
   "Delete": "Delete",
   "delete_all": "Delete all",
@@ -424,6 +425,7 @@
     "open_sandbox": "Open Sandbox"
   },
   "hackmd": {
+    "hack_md": "HackMD",
     "not_set_up": "HackMD is not set up.",
     "start_to_edit": "Start to edit with HackMD",
     "clone_page_content": "Click to clone page content and start to edit.",

resource/locales/ja_JP/translation.json

@@ -1,5 +1,6 @@
 {
   "Help": "ヘルプ",
+  "view": "View",
   "Edit": "編集",
   "Delete": "削除",
   "delete_all": "全て削除",
@@ -426,6 +427,7 @@
     "open_sandbox": "Sandbox を開く"
   },
   "hackmd":{
+    "hack_md": "HackMD",
     "not_set_up": "HackMD はセットアップされていません",
     "start_to_edit": "HackMD を開始する",
     "clone_page_content": "ページを複製して編集を開始します",

resource/locales/zh_CN/translation.json

@@ -1,5 +1,6 @@
 {
-	"Help": "帮助",
+  "Help": "帮助",
+  "view": "View",
 	"Edit": "编辑",
 	"Delete": "删除",
 	"delete_all": "删除所有",
@@ -395,6 +396,7 @@
 		"open_sandbox": "开放式沙箱"
 	},
 	"hackmd": {
+    "hack_md": "HackMD",
 		"not_set_up": "HackMD is not set up.",
 		"start_to_edit": "Start to edit with HackMD",
 		"clone_page_content": "Click to clone page content and start to edit.",

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

@@ -18,6 +18,7 @@ import RevisionPathControls from '../Page/RevisionPathControls';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
+import ThreeStrandedButton from './ThreeStrandedButton';
 
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
@@ -186,14 +187,9 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end justify-content-center">
           <div className="d-flex">
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-            <div className="mt-2">
-              {/* TODO: impl View / Edit / HackMD button group */}
-              {/* <div className="btn-group" role="group" aria-label="Basic example">
-              <button type="button" className="btn btn-outline-primary">Left</button>
-              <button type="button" className="btn btn-outline-primary">Middle</button>
-              <button type="button" className="btn btn-outline-primary">Right</button>
-            </div> */}
-            </div>
+          </div>
+          <div className="mt-2">
+            <ThreeStrandedButton />
           </div>
         </div>
 

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+const ThreeStrandedButton = (props) => {
+
+  const { t } = props;
+
+  function threeStrandedButtonClickedHandler(viewType) {
+    if (props.onThreeStrandedButtonClicked != null) {
+      props.onThreeStrandedButtonClicked(viewType);
+    }
+  }
+
+  return (
+    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
+      <button type="button" className="btn btn-outline-primary view-button" onClick={() => { threeStrandedButtonClickedHandler('view') }}>
+        <i className="icon-control-play icon-fw" />
+        { t('view') }
+      </button>
+      <button type="button" className="btn btn-outline-primary edit-button" onClick={() => { threeStrandedButtonClickedHandler('edit') }}>
+        <i className="icon-note icon-fw" />
+        { t('Edit') }
+      </button>
+      <button type="button" className="btn btn-outline-primary hackmd-button" onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}>
+        <i className="fa fa-fw fa-file-text-o" />
+        { t('hackmd.hack_md') }
+      </button>
+    </div>
+  );
+
+};
+
+ThreeStrandedButton.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  onThreeStrandedButtonClicked: PropTypes.func,
+};
+
+export default withTranslation()(ThreeStrandedButton);

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -207,6 +207,15 @@ ul.pagination {
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.grw-three-stranded-button {
+  .btn-outline-primary {
+    &:hover {
+      color: $primary;
+      background-color: $gray-700;
+    }
+  }
+}
+
 // Search drop down
 #search-typeahead-asynctypeahead {
   background-color: $bgcolor-global;

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -132,6 +132,15 @@ $table-hover-bg: $bgcolor-table-hover;
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.grw-three-stranded-button {
+  .btn-outline-primary {
+    &:hover {
+      color: $primary;
+      background-color: $gray-200;
+    }
+  }
+}
+
 .grw-drawer-toggler {
   @extend .btn-light;
   color: $gray-500;