Merge pull request #2787 from weseek/imprv/editmode-slack-button-responsive

Imprv/editmode slack button responsive

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Collapse } from 'reactstrap';
+import { Collapse, Button } from 'reactstrap';
 
 import NavigationContainer from '../../services/NavigationContainer';
+import EditorContainer from '../../services/EditorContainer';
+import AppContainer from '../../services/AppContainer';
+import SlackNotification from '../SlackNotification';
+import SlackLogo from '../SlackLogo';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 import SavePageControls from '../SavePageControls';
@@ -14,6 +18,9 @@ const EditorNavbarBottom = (props) => {
 
   const [isExpanded, setExpanded] = useState(false);
 
+  const [isSlackExpanded, setSlackExpanded] = useState(false);
+  const hasSlackConfig = props.appContainer.getConfig().hasSlackConfig;
+
   const {
     navigationContainer,
   } = props;
@@ -27,6 +34,14 @@ const EditorNavbarBottom = (props) => {
     </button>
   );
 
+  const slackEnabledFlagChangedHandler = (isSlackEnabled) => {
+    props.editorContainer.setState({ isSlackEnabled });
+  };
+
+  const slackChannelsChangedHandler = (slackChannels) => {
+    props.editorContainer.setState({ slackChannels });
+  };
+
   // eslint-disable-next-line react/prop-types
   const renderExpandButton = () => (
     <div className="d-md-none ml-2">
@@ -45,12 +60,51 @@ const EditorNavbarBottom = (props) => {
 
   return (
     <div className={`${isCollapsedOptionsSelectorEnabled ? 'fixed-bottom' : ''} `}>
+      {/* Collapsed SlackNotification */}
+      {hasSlackConfig && (
+        <Collapse isOpen={isSlackExpanded && isDeviceSmallerThanMd}>
+          <nav className={`navbar navbar-expand-lg border-top ${additionalClasses.join(' ')}`}>
+            <SlackNotification
+              isSlackEnabled={props.editorContainer.state.isSlackEnabled}
+              slackChannels={props.editorContainer.state.slackChannels}
+              onEnabledFlagChange={slackEnabledFlagChangedHandler}
+              onChannelChange={slackChannelsChangedHandler}
+              id="idForEditorNavbarBottomForMobile"
+              popUp
+            />
+          </nav>
+        </Collapse>
+        )
+      }
       <div className={`navbar navbar-expand border-top px-2 ${additionalClasses.join(' ')}`}>
         <form className="form-inline">
           { isDrawerMode && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
         <form className="form-inline ml-auto">
+          {/* Responsive Design for the SlackNotification */}
+          {/* Button or the normal Slack banner */}
+          {hasSlackConfig && (isDeviceSmallerThanMd ? (
+            <Button
+              color="white"
+              className="border mr-2"
+              onClick={() => (setSlackExpanded(!isSlackExpanded))}
+            >
+              <SlackLogo />
+              <span className="fa fa-caret-up ml-2"></span>
+            </Button>
+          ) : (
+            <div className="mr-2">
+              <SlackNotification
+                isSlackEnabled={props.editorContainer.state.isSlackEnabled}
+                slackChannels={props.editorContainer.state.slackChannels}
+                onEnabledFlagChange={slackEnabledFlagChangedHandler}
+                onChannelChange={slackChannelsChangedHandler}
+                id="idForEditorNavbarBottom"
+                popUp={false}
+              />
+            </div>
+          ))}
           <SavePageControls />
           { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
         </form>
@@ -73,6 +127,8 @@ const EditorNavbarBottom = (props) => {
 
 EditorNavbarBottom.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 };
 
-export default withUnstatedContainers(EditorNavbarBottom, [NavigationContainer]);
+export default withUnstatedContainers(EditorNavbarBottom, [NavigationContainer, EditorContainer, AppContainer]);

src/client/js/components/SavePageControls.jsx

@@ -15,7 +15,6 @@ import AppContainer from '../services/AppContainer';
 import EditorContainer from '../services/EditorContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
-import SlackNotification from './SlackNotification';
 import GrantSelector from './SavePageControls/GrantSelector';
 
 const logger = loggerFactory('growi:SavePageControls');
@@ -26,25 +25,14 @@ class SavePageControls extends React.Component {
     super(props);
 
     const config = this.props.appContainer.getConfig();
-    this.hasSlackConfig = config.hasSlackConfig;
     this.isAclEnabled = config.isAclEnabled;
 
-    this.slackEnabledFlagChangedHandler = this.slackEnabledFlagChangedHandler.bind(this);
-    this.slackChannelsChangedHandler = this.slackChannelsChangedHandler.bind(this);
     this.updateGrantHandler = this.updateGrantHandler.bind(this);
 
     this.save = this.save.bind(this);
     this.saveAndOverwriteScopesOfDescendants = this.saveAndOverwriteScopesOfDescendants.bind(this);
   }
 
-  slackEnabledFlagChangedHandler(isSlackEnabled) {
-    this.props.editorContainer.setState({ isSlackEnabled });
-  }
-
-  slackChannelsChangedHandler(slackChannels) {
-    this.props.editorContainer.setState({ slackChannels });
-  }
-
   updateGrantHandler(data) {
     this.props.editorContainer.setState(data);
   }
@@ -76,6 +64,7 @@ class SavePageControls extends React.Component {
   }
 
   render() {
+
     const { t, pageContainer, editorContainer } = this.props;
 
     const isRootPage = pageContainer.state.path === '/';
@@ -84,19 +73,6 @@ class SavePageControls extends React.Component {
 
     return (
       <div className="d-flex align-items-center form-inline">
-        {this.hasSlackConfig
-          && (
-          <div className="mr-2">
-            <SlackNotification
-              isSlackEnabled={editorContainer.state.isSlackEnabled}
-              slackChannels={editorContainer.state.slackChannels}
-              onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
-              onChannelChange={this.slackChannelsChangedHandler}
-              id="idForSavePageControl"
-            />
-          </div>
-          )
-        }
 
         {this.isAclEnabled
           && (

src/client/js/components/SlackLogo.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const SlackLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 448"
+    height="20"
+    width="20"
+    fill="purple"
+  >
+    <path d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,
+    0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,
+    47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,
+    0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,
+    47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,
+    0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"
+    />
+  </svg>
+);
+
+export default SlackLogo;

src/client/js/components/SlackNotification.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -39,8 +38,8 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="grw-slack-notification">
-        <div className="input-group extended-setting">
+      <div className="grw-slack-notification w-100">
+        <div className="grw-input-group-slack-notification input-group extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
@@ -50,12 +49,12 @@ class SlackNotification extends React.Component {
                 checked={this.props.isSlackEnabled}
                 onChange={this.updateCheckboxHandler}
               />
-              <label className="custom-control-label" htmlFor={this.props.id}>
+              <label className={`custom-control-label align-center ${this.props.popUp ? 'mt-1' : ''}`} htmlFor={this.props.id}>
               </label>
             </div>
           </label>
           <input
-            className="form-control"
+            className="grw-form-control-slack-notification form-control align-top"
             type="text"
             value={this.props.slackChannels}
             placeholder="Input channels"
@@ -76,6 +75,7 @@ class SlackNotification extends React.Component {
 SlackNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
+  popUp: PropTypes.bool.isRequired,
   isSlackEnabled: PropTypes.bool.isRequired,
   slackChannels: PropTypes.string.isRequired,
   onEnabledFlagChange: PropTypes.func,

src/client/styles/scss/molecules/slack-notification.scss

@@ -1,5 +1,5 @@
 .grw-slack-notification {
-  $input-height-slack: 1.8rem;
+  $input-height-slack: 24px;
   border-color: $gray-200;
 
   border-style: solid;
@@ -16,6 +16,14 @@
       width: 180px;
     }
   }
+  // height settings for slack button's responsive design
+  // in the input and form-control element
+  .grw-form-control-slack-notification {
+    height: $input-height-slack;
+  }
+  .grw-input-group-slack-notification {
+    height: $input-height-slack;
+  }
 }
 //　TODO デザインの使用が確定して実装、本タスクのスコープ外
 // .grw-slack-notification-xd {