Merge pull request #6516 from weseek/feat/rendering-fab

feat: Rendering Fab component

packages/app/src/components/Fab.jsx

@@ -13,6 +13,8 @@ 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');
 
 const Fab = () => {
@@ -71,9 +73,9 @@ const Fab = () => {
   }
 
   return (
-    <div className="grw-fab d-none d-md-block d-edit-none" data-testid="grw-fab">
+    <div className={`${styles['grw-fab']} grw-fab d-none d-md-block d-edit-none`} data-testid="grw-fab">
       {currentUser != null && renderPageCreateButton()}
-      <div data-testid="grw-fab-return-to-top" className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
+      <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}`}

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

@@ -0,0 +1,31 @@
+.grw-fab :global {
+  // workaround
+  // https://stackoverflow.com/a/57667536
+  .fadeInUp {
+    & :local {
+      animation: fab-fadeinup 1s 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
+  }
+}

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

@@ -19,6 +19,8 @@ const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
+// Fab
+const Fab = dynamic(() => import('../Fab'), { ssr: false });
 
 
 type Props = {
@@ -58,6 +60,8 @@ export const BasicLayout = ({
       <PageAccessoriesModal />
       {/* <HotkeysManager /> */}
 
+      <Fab />
+
       <ShortcutsModal />
       <SystemVersion showShortcutsButton />
     </RawLayout>