support mobile

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -26,7 +26,6 @@ const OptionsSelector = dynamic(() => import('~/components/PageEditor/OptionsSel
 
 const EditorNavbarBottom = (): JSX.Element => {
 
-  const [isExpanded, setExpanded] = useState(false);
   const [isSlackExpanded, setSlackExpanded] = useState(false);
 
   const { data: editorMode } = useEditorMode();
@@ -57,23 +56,8 @@ const EditorNavbarBottom = (): JSX.Element => {
     setSlackChannelsStr(slackChannels);
   }, []);
 
-
-  const renderExpandButton = () => (
-    <div className="d-md-none ms-2">
-      <button
-        type="button"
-        className={`btn btn-outline-secondary btn-expand border-0 ${isExpanded ? 'expand' : ''}`}
-        onClick={() => setExpanded(!isExpanded)}
-      >
-        <i className="icon-arrow-up"></i>
-      </button>
-    </div>
-  );
-
-  const isCollapsedOptionsSelectorEnabled = !isDeviceLargerThanLg;
-
   return (
-    <div className={`${isCollapsedOptionsSelectorEnabled ? 'fixed-bottom' : ''} `} data-testid="grw-editor-navbar-bottom">
+    <div data-testid="grw-editor-navbar-bottom">
       {/* Collapsed SlackNotification */}
       {isSlackConfigured && (
         <Collapse isOpen={isSlackExpanded && !isDeviceLargerThanLg}>
@@ -95,7 +79,7 @@ const EditorNavbarBottom = (): JSX.Element => {
       }
       <div className={`flex-expand-horiz align-items-center px-2 px-md-3 ${moduleClass}`}>
         <form>
-          { isDeviceLargerThanMd && <OptionsSelector /> }
+          <OptionsSelector collapsed={!isDeviceLargerThanMd} />
         </form>
         <form className="row row-cols-lg-auto g-3 align-items-center ms-auto">
           {/* Responsive Design for the SlackNotification */}
@@ -125,21 +109,8 @@ const EditorNavbarBottom = (): JSX.Element => {
             </div>
           ))}
           <SavePageControls slackChannels={slackChannelsStr} />
-          { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
         </form>
       </div>
-      {/* Collapsed OptionsSelector */}
-      { isCollapsedOptionsSelectorEnabled && (
-        <Collapse isOpen={isExpanded}>
-          <div className="px-2"> {/* set padding for border-top */}
-            <div className={`navbar navbar-expand border-top px-0 ${moduleClass}`}>
-              <form className="ms-auto">
-                <OptionsSelector />
-              </form>
-            </div>
-          </div>
-        </Collapse>
-      ) }
     </div>
   );
 };

apps/app/src/components/PageEditor/OptionsSelector.module.scss

@@ -1,2 +1,8 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '@growi/ui/scss/atoms/btn-muted';
+
+// == Colors
+.grw-collapsed-editorconfig {
+  @include btn-muted.colorize(bs.$gray-500);
+}

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -15,6 +15,7 @@ import {
   type EditorTheme, type KeyMapMode, DEFAULT_THEME, DEFAULT_KEYMAP,
 } from '../../interfaces/editor-settings';
 
+import styles from './OptionsSelector.module.scss';
 
 type RaitoListProps = {
   onClick: () => void,
@@ -255,7 +256,7 @@ const OptionsStatus = {
 } as const;
 type OptionStatus = typeof OptionsStatus[keyof typeof OptionsStatus];
 
-export const OptionsSelector = (): JSX.Element => {
+export const OptionsSelector = ({ collapsed }: {collapsed?: boolean}): JSX.Element => {
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -270,10 +271,26 @@ export const OptionsSelector = (): JSX.Element => {
 
   return (
     <Dropdown isOpen={dropdownOpen} toggle={() => { setStatus(OptionsStatus.Home); setDropdownOpen(!dropdownOpen) }} direction="up" className="">
-      <DropdownToggle color="transparent" className="btn border border-secondary text-muted d-flex align-items-center justify-content-center p-1 m-1">
-        <span className="material-symbols-outlined py-0 fs-5"> settings </span>
-        <label className="ms-1 me-1">Editor Config</label>
-      </DropdownToggle>
+      {
+        collapsed ? (
+          <DropdownToggle
+            color="transparent"
+            className={`btn text-muted d-flex align-items-center justify-content-center p-1 m-1 border-0 ${styles['grw-collapsed-editorconfig']}`}
+          >
+            <span className="material-symbols-outlined py-0 fs-5"> settings </span>
+          </DropdownToggle>
+
+        ) : (
+          <DropdownToggle
+            color="transparent"
+            className="btn text-muted d-flex align-items-center justify-content-center p-1 m-1 border border secondary"
+          >
+            <span className="material-symbols-outlined py-0 fs-5"> settings </span>
+            <label className="ms-1 me-1">Editor Config</label>
+          </DropdownToggle>
+
+        )
+      }
       <DropdownMenu container="body">
         {
           status === OptionsStatus.Home && (