Merge branch 'master' into imprv/display-pageaccessoriesmodal-in-case-of-mobile

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -102,7 +102,7 @@ class ProfileImageSettings extends React.Component {
     return (
       <React.Fragment>
         <div className="row">
-          <div className="col-md-3 offset-1 col-sm-4">
+          <div className="col-md-6 col-12 mb-3 mb-md-0">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input
@@ -122,11 +122,10 @@ class ProfileImageSettings extends React.Component {
                 </a>
               </div>
             </h4>
-
             <img src={this.generateGravatarSrc()} width="64" />
           </div>
 
-          <div className="col-md-3 offset-1 col-sm-4">
+          <div className="col-md-6 col-12">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input

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

@@ -16,7 +16,7 @@ import RevisionPathControls from '../Page/RevisionPathControls';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
-import ThreeStrandedButton from './ThreeStrandedButton';
+import { TwoStrandedButton, ThreeStrandedButton } from './ThreeStrandedButton';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
@@ -93,7 +93,7 @@ const GrowiSubNavigation = (props) => {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor, isPageExist,
   } = pageContainer.state;
 
-  const { isGuestUser } = appContainer;
+  const { isGuestUser, isMobile } = appContainer;
   const isEditorMode = editorMode !== 'view';
   // Tags cannot be edited while the new page and editorMode is view
   const isTagLabelHidden = (editorMode !== 'edit' && !isPageExist);
@@ -102,6 +102,25 @@ const GrowiSubNavigation = (props) => {
     navigationContainer.setEditorMode(viewType);
   }
 
+  function renderThreeStrandedButton() {
+    return (
+      <ThreeStrandedButton
+        onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+        isBtnDisabled={isGuestUser}
+        editorMode={editorMode}
+      />
+    );
+  }
+  function renderTwoStrandedButton() {
+    return (
+      <TwoStrandedButton
+        onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+        isBtnDisabled={isGuestUser}
+        editorMode={editorMode}
+      />
+    );
+  }
+
   return (
     <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
 
@@ -133,11 +152,9 @@ const GrowiSubNavigation = (props) => {
           </div>
           <div className={`${isEditorMode ? 'ml-2' : 'mt-2'}`}>
             {pageContainer.isAbleToShowThreeStrandedButton && (
-              <ThreeStrandedButton
-                onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
-                isBtnDisabled={isGuestUser}
-                editorMode={editorMode}
-              />
+              <>
+                {isMobile ? renderTwoStrandedButton() : renderThreeStrandedButton()}
+              </>
             )}
           </div>
         </div>

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

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
-const ThreeStrandedButton = (props) => {
+// [TODO: rename Threestranded Button by gw4545]
+export const ThreeStrandedButton = withTranslation()((props) => {
   const { t, isBtnDisabled, editorMode } = props;
 
 
@@ -57,7 +58,7 @@ const ThreeStrandedButton = (props) => {
     </>
   );
 
-};
+});
 
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
@@ -70,4 +71,86 @@ ThreeStrandedButton.defaultProps = {
   isBtnDisabled: false,
 };
 
-export default withTranslation()(ThreeStrandedButton);
+
+export const TwoStrandedButton = withTranslation()((props) => {
+  const { t, isBtnDisabled, editorMode } = props;
+
+
+  function threeStrandedButtonClickedHandler(viewType) {
+    if (isBtnDisabled) {
+      return;
+    }
+    if (props.onThreeStrandedButtonClicked != null) {
+      props.onThreeStrandedButtonClicked(viewType);
+    }
+  }
+
+  function viewButton() {
+    return (
+      <button
+        type="button"
+        className={`btn btn-outline-primary view-button ${editorMode === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+        onClick={() => { threeStrandedButtonClickedHandler('view') }}
+      >
+        <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
+        { t('view') }
+      </button>
+    );
+  }
+  function editButton() {
+    return (
+      <button
+        type="button"
+        className={`btn btn-outline-primary edit-button ${editorMode === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+      >
+        <i className="icon-note icon-fw grw-three-stranded-button-icon" />
+        { t('Edit') }
+      </button>
+    );
+  }
+  function hackMDButton() {
+    return (
+      <button
+        type="button"
+        className={`btn btn-outline-primary hackmd-button ${editorMode === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+      >
+        <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />
+        { t('hackmd.hack_md') }
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <div
+        className="btn-group grw-three-stranded-button"
+        role="group"
+        aria-label="three-stranded-button"
+        id="grw-three-stranded-button"
+      >
+        {editorMode === 'view' && <>{editButton()} {hackMDButton()}</>}
+        {editorMode === 'edit' && viewButton()}
+        {editorMode === 'hackmd' && viewButton()}
+      </div>
+      {isBtnDisabled && (
+        <UncontrolledTooltip placement="top" target="grw-three-stranded-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+      )}
+    </>
+  );
+
+});
+
+TwoStrandedButton.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  onThreeStrandedButtonClicked: PropTypes.func,
+  isBtnDisabled: PropTypes.bool,
+  editorMode: PropTypes.string,
+};
+
+TwoStrandedButton.defaultProps = {
+  isBtnDisabled: false,
+};