remove Fab

apps/app/src/components/Fab.module.scss

@@ -1,63 +0,0 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
-.grw-fab :global {
-  position: fixed;
-  right: 1.5rem;
-  bottom: 3rem;
-  z-index: bs.$zindex-fixed;
-
-  transition: all 200ms linear;
-
-  .btn-create-page {
-    width: 60px;
-    height: 60px;
-    font-size: 24px;
-
-    box-shadow: 2px 3px 6px #0000005d;
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-  }
-
-  .btn-scroll-to-top {
-    width: 40px;
-    height: 40px;
-
-    opacity: 0.4;
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  // workaround
-  // https://stackoverflow.com/a/57667536
-  .fadeInUp {
-    & :local {
-      animation: fab-fadeinup 0.5s ease 0s;
-    }
-  }
-  .fadeOut {
-    & :local {
-      animation: fab-fadeout 0.5s ease 0s forwards;
-    }
-  }
-}
-
-@keyframes fab-fadeinup {
-  0% {
-    opacity: 0;
-    transform: translateY(100px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-@keyframes fab-fadeout {
-  100% {
-    opacity: 0
-  }
-}

apps/app/src/components/Fab.tsx

@@ -1,119 +0,0 @@
-import React, {
-  useState, useCallback, useRef, useEffect,
-} from 'react';
-
-import { animateScroll } from 'react-scroll';
-import { useRipple } from 'react-use-ripple';
-
-import { useSticky } from '~/client/services/side-effects/use-sticky';
-import { usePageCreateModal } from '~/stores/modal';
-import { useCurrentPagePath } from '~/stores/page';
-import { useIsAbleToChangeEditorMode } from '~/stores/ui';
-import loggerFactory from '~/utils/logger';
-
-import { CreatePageIcon } from './Icons/CreatePageIcon';
-import { ReturnTopIcon } from './Icons/ReturnTopIcon';
-
-import styles from './Fab.module.scss';
-
-const logger = loggerFactory('growi:cli:Fab');
-
-export const Fab = (): JSX.Element => {
-
-  const { data: isAbleToChangeEditorMode } = useIsAbleToChangeEditorMode();
-  const { data: currentPath = '' } = useCurrentPagePath();
-  const { open: openCreateModal } = usePageCreateModal();
-
-  const [animateClasses, setAnimateClasses] = useState<string>('invisible');
-  const [buttonClasses, setButtonClasses] = useState<string>('');
-  const [isStickyApplied, setIsStickyApplied] = useState(false);
-
-  // ripple
-  const createBtnRef = useRef(null);
-  useRipple(createBtnRef, { rippleColor: 'rgba(255, 255, 255, 0.3)' });
-
-  // Get sticky status
-  const isSticky = useSticky('#grw-fav-sticky-trigger');
-
-  // check if isSticky is already initialized then save it in isStickyApplied state
-  useEffect(() => {
-    if (isSticky) {
-      setIsStickyApplied(true);
-    }
-  }, [isSticky]);
-
-  // Apply new classes if only isSticky is initialized, otherwise no classes have changed
-  // Prevents the Fab button from showing on first load due to the isSticky effect
-  useEffect(() => {
-    if (isStickyApplied) {
-      const timer = setTimeout(() => {
-        if (isSticky) {
-          setAnimateClasses('visible');
-          setButtonClasses('');
-        }
-        else {
-          setAnimateClasses('invisible');
-        }
-      }, 500);
-
-      const newAnimateClasses = isSticky ? 'animated fadeInUp faster' : 'animated fadeOut faster';
-      const newButtonClasses = isSticky ? '' : 'disabled grw-pointer-events-none';
-
-      setAnimateClasses(newAnimateClasses);
-      setButtonClasses(newButtonClasses);
-
-      return () => clearTimeout(timer);
-    }
-  }, [isSticky, isStickyApplied]);
-
-  const PageCreateButton = useCallback(() => {
-    return (
-      <div
-        className={`rounded-circle position-absolute ${animateClasses}`}
-        style={{ bottom: '2.3rem', right: '4rem' }}
-        data-testid="grw-fab-page-create-button"
-      >
-        <button
-          type="button"
-          className={`btn btn-lg btn-create-page btn-primary rounded-circle p-0 ${buttonClasses}`}
-          ref={createBtnRef}
-          onClick={currentPath != null
-            ? () => openCreateModal(currentPath)
-            : undefined}
-        >
-          <CreatePageIcon />
-        </button>
-      </div>
-    );
-  }, [animateClasses, buttonClasses, currentPath, openCreateModal]);
-
-  const ScrollToTopButton = useCallback(() => {
-    const clickHandler = () => {
-      animateScroll.scrollToTop({ duration: 200 });
-    };
-
-    return (
-      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }} data-testid="grw-fab-return-to-top">
-        <button
-          type="button"
-          className={`btn btn-light btn-scroll-to-top rounded-circle p-0 ${buttonClasses}`}
-          onClick={clickHandler}
-        >
-          <ReturnTopIcon />
-        </button>
-      </div>
-    );
-  }, [animateClasses, buttonClasses]);
-
-  if (currentPath == null) {
-    return <></>;
-  }
-
-  return (
-    <div className={`${styles['grw-fab']} grw-fab d-none d-md-block d-edit-none`} data-testid="grw-fab-container">
-      {isAbleToChangeEditorMode && <PageCreateButton />}
-      <ScrollToTopButton />
-    </div>
-  );
-
-};

apps/app/src/components/Layout/BasicLayout.tsx

@@ -25,8 +25,6 @@ const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal').then(mod => mod.PageAccessoriesModal), { ssr: false });
 const DeleteBookmarkFolderModal = dynamic(() => import('../DeleteBookmarkFolderModal').then(mod => mod.DeleteBookmarkFolderModal), { ssr: false });
-// Fab
-const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false });
 
 
 type Props = {
@@ -66,8 +64,6 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <PagePresentationModal />
       <HotkeysManager />
 
-      <Fab />
-
       <ShortcutsModal />
       <SystemVersion showShortcutsButton />
     </RawLayout>

apps/app/src/components/Layout/ShareLinkLayout.tsx

@@ -12,9 +12,6 @@ const GrowiNavbarBottom = dynamic(() => import('../Navbar/GrowiNavbarBottom').th
 const ShortcutsModal = dynamic(() => import('../ShortcutsModal'), { ssr: false });
 const SystemVersion = dynamic(() => import('../SystemVersion'), { ssr: false });
 
-// Fab
-const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false });
-
 
 type Props = {
   children?: ReactNode
@@ -35,8 +32,6 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
 
       <GrowiNavbarBottom />
 
-      <Fab />
-
       <ShortcutsModal />
       <PageCreateModal />
       <SystemVersion showShortcutsButton />

apps/app/src/styles/theme/apply-colors.scss

@@ -665,18 +665,6 @@ mark.rbt-highlight-text {
   background-color: var(--bgcolor-global);
 }
 
-.grw-fab {
-  .btn-create-page {
-    svg {
-      fill: hsl.contrast(var(--primary));
-    }
-  }
-
-  .btn-scroll-to-top {
-    fill: $gray-900;
-  }
-}
-
 /*
   Slack Integration
 */

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-page.cy.ts

@@ -42,9 +42,6 @@ context('Access to page', () => {
     // https://redmine.weseek.co.jp/issues/111384
     // cy.get('.toc-link').should('be.visible');
 
-    // hide fab
-    cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
-
     // assert the element is in viewport
     cy.get('#headers').should('be.inViewport');
 

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--sticky-features.cy.ts

@@ -1,5 +1,5 @@
 context('Access to any page', () => {
-  const ssPrefix = 'subnav-and-fab-';
+  const ssPrefix = 'subnav-';
 
   beforeEach(() => {
     // login
@@ -13,7 +13,7 @@ context('Access to any page', () => {
     cy.collapseSidebar(true, true);
   });
 
-  it('Subnavigation and fab displays changes on scroll down and up', () => {
+  it('Subnavigation displays changes on scroll down and up', () => {
     cy.waitUntil(() => {
       // do
       // Scroll the window 250px down is enough to trigger sticky effect
@@ -21,8 +21,6 @@ context('Access to any page', () => {
       // wait until
       return cy.getByTestid('grw-subnav-switcher').then($elem => !$elem.hasClass('grw-subnav-switcher-hidden'));
     });
-    // wait until fab visible
-    cy.waitUntil(() => cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible')));
 
     cy.waitUntilSkeletonDisappear();
     cy.screenshot(`${ssPrefix}visible-on-scroll-down`);
@@ -34,13 +32,11 @@ context('Access to any page', () => {
       // wait until
       return cy.waitUntil(() => cy.getByTestid('grw-subnav-switcher').then($elem => $elem.hasClass('grw-subnav-switcher-hidden')));
     });
-    // wait until fab invisible
-    cy.waitUntil(() => cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('invisible')));
 
     cy.screenshot(`${ssPrefix}invisible-on-scroll-top`);
   });
 
-  it('Subnavigation and fab are not displayed when move to other pages', () => {
+  it('Subnavigation is not displayed when move to other pages', () => {
     cy.waitUntil(() => {
       // do
       // Scroll the window 250px down is enough to trigger sticky effect
@@ -48,7 +44,6 @@ context('Access to any page', () => {
       // wait until
       return () => cy.getByTestid('grw-subnav-switcher').then($elem => !$elem.hasClass('grw-subnav-switcher-hidden'));
     });
-    cy.waitUntil(() => cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible')));
 
     // Move to /Sandbox page
     cy.visit('/Sandbox');
@@ -56,51 +51,10 @@ context('Access to any page', () => {
     cy.waitUntilSkeletonDisappear();
     cy.collapseSidebar(true);
 
-    cy.waitUntil(() => cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('invisible')));
     cy.waitUntil(() => cy.getByTestid('grw-subnav-switcher').then($elem => $elem.hasClass('grw-subnav-switcher-hidden')));
     cy.screenshot(`${ssPrefix}not-visible-on-move-to-other-pages`);
   });
 
-  it('Able to open create page modal from fab', () => {
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window back to top
-      cy.scrollTo(0, 250);
-      // wait until
-      return cy.getByTestid('grw-fab-page-create-button')
-      .should('have.class', 'visible')
-      .within(() => {
-        cy.get('.btn-create-page').click();
-        return true;
-      });
-    });
-
-    cy.getByTestid('page-create-modal').should('be.visible').within(() => {
-      cy.screenshot(`${ssPrefix}new-page-modal-opened-from-fab`);
-      cy.get('button.close').click();
-    });
-  });
-
-  it('Able to scroll page to top from fab', () => {
-    // Initial scroll down
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-      cy.scrollTo(0, 250);
-      // wait until
-      return cy.getByTestid('grw-fab-return-to-top')
-        .should('have.class', 'visible')
-        .then(() => {
-          cy.waitUntil(() => {
-            cy.get('.btn-scroll-to-top').click();
-            return cy.getByTestid('grw-fab-return-to-top').should('have.class', 'invisible');
-          });
-        });
-    });
-    cy.waitUntilSkeletonDisappear();
-    cy.screenshot(`${ssPrefix}scroll-page-to-top`);
-  });
-
   it('Able to click buttons on subnavigation switcher when sticky', () => {
     cy.waitUntil(() => {
       // do

apps/app/test/cypress/e2e/21-basic-features-for-guest/21-basic-features-for-guest--access-to-page.cy.ts

@@ -14,9 +14,6 @@ context('Access to page by guest', () => {
     cy.visit('/Sandbox#headers');
     cy.collapseSidebar(true);
 
-    // hide fab
-    cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
-
     // assert the element is in viewport
     cy.get('#headers').should('be.inViewport');
 

apps/app/test/cypress/e2e/21-basic-features-for-guest/21-basic-features-for-guest--sticky-for-guest.cy.ts

@@ -1,5 +1,6 @@
-context('Access sticky sub navigation switcher and Fab for guest', () => {
+context('Access sticky sub navigation switcher for guest', () => {
   const ssPrefix = 'access-sticky-by-guest-';
+
   it('Sub navigation sticky changes when scrolling down and up', () => {
     cy.visit('/Sandbox');
     cy.waitUntilSkeletonDisappear();
@@ -26,33 +27,4 @@ context('Access sticky sub navigation switcher and Fab for guest', () => {
     cy.screenshot(`${ssPrefix}subnav-switcher-is-not-sticky-on-scroll-top`);
   });
 
-  it('Fab display changes when scrolling down and up', () => {
-    cy.visit('/Sandbox');
-    cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true, true);
-
-    // Visible
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-       cy.scrollTo(0, 250);
-
-      // wait until
-      return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('visible'));
-
-    });
-    cy.screenshot(`${ssPrefix}fab-is-visible-on-scroll-down`);
-
-    // Invisible
-    cy.waitUntil(() => {
-      // do
-      // Scroll page to top
-       cy.scrollTo(0, 0);
-
-       // wait until
-      return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('invisible'));
-    });
-    cy.screenshot(`${ssPrefix}fab-is-invisible-on-scroll-top`);
-
-  });
 });

apps/app/test/cypress/e2e/60-home/60-home--home.cy.ts

@@ -46,8 +46,6 @@ context('Access User settings', () => {
     });
     cy.visit('/me');
     cy.collapseSidebar(true, true);
-    // hide fab
-    cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
   });
 
   it('Access User information', () => {