impl FixedControls

src/client/js/base.jsx

@@ -6,6 +6,7 @@ import Xss from '@commons/service/xss';
 import GrowiNavbar from './components/Navbar/GrowiNavbar';
 import GrowiNavbarBottom from './components/Navbar/GrowiNavbarBottom';
 import Sidebar from './components/Sidebar';
+import FixedControls from './components/FixedControls';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
 import AppContainer from './services/AppContainer';
@@ -44,6 +45,8 @@ const componentMappings = {
 
   'grw-sidebar-wrapper': <Sidebar />,
 
+  'grw-fixed-controls-container': <FixedControls />,
+
   'staff-credit': <StaffCredit />,
 };
 

src/client/js/components/FixedControls.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import NavigationContainer from '../services/NavigationContainer';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const FixedControls = (props) => {
+  const { navigationContainer } = props;
+
+  return (
+    <div className="grw-fixed-controls-container d-none d-md-block animated fadeInUp faster">
+      <div className="rounded-circle position-absolute" style={{ bottom: '2.3rem', right: '3rem' }}>
+        <button
+          type="button"
+          className="btn btn-lg btn-create-page btn-primary rounded-circle waves-effect waves-light"
+          onClick={navigationContainer.openPageCreateModal}
+        >
+          <i className="icon-pencil"></i>
+        </button>
+      </div>
+      <div className="rounded-circle position-absolute" style={{ bottom: 0, right: 0 }}>
+        <button type="button" className="btn btn-light btn-scroll-to-top rounded-circle" onClick={() => navigationContainer.smoothScrollIntoView()}>
+          <i className="icon-control-start"></i>
+        </button>
+      </div>
+    </div>
+  );
+
+};
+
+FixedControls.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default withUnstatedContainers(FixedControls, [NavigationContainer]);

src/client/js/services/NavigationContainer.js

@@ -171,4 +171,18 @@ export default class NavigationContainer extends Container {
     this.setState({ isPageCreateModalShown: false });
   }
 
+  smoothScrollIntoView(element = null, offsetTop = 0) {
+    const targetElement = element || window.document.body;
+
+    // get the distance to the target element top
+    const rectTop = targetElement.getBoundingClientRect().top;
+
+    const top = window.pageYOffset + rectTop - offsetTop;
+
+    window.scrollTo({
+      top,
+      behavior: 'smooth',
+    });
+  }
+
 }

src/client/styles/scss/_admin.scss

@@ -169,10 +169,6 @@
       background-color: rgba($info, 0.1);
     }
   }
-
-  .grw-fixed-controls-container {
-    display: none;
-  }
 }
 
 .admin-navigation > a + a {

src/client/styles/scss/_layout.scss

@@ -58,13 +58,18 @@ body {
 
 .grw-fixed-controls-container {
   position: fixed;
-  right: 1em;
-  bottom: 3em;
+  right: 1.5rem;
+  bottom: 3rem;
+  z-index: $zindex-fixed;
 
   transition: all 200ms linear;
 
-  .grw-fixed-controls-button-container {
-    box-shadow: 0 3px 4px rgba($black, 0.3);
+  .btn-create-page {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+
+    box-shadow: 2px 3px 6px #0000005d;
   }
 }
 

src/client/styles/scss/_login.scss

@@ -159,10 +159,6 @@
       color: white;
     }
   }
-
-  .grw-fixed-controls-container {
-    display: none;
-  }
 }
 
 .login-page {

src/client/styles/scss/atoms/_buttons.scss

@@ -26,6 +26,15 @@
   }
 }
 
+.btn-scroll-to-top {
+  opacity: 0.4;
+
+  i {
+    display: inline-block;
+    transform: rotate(90deg);
+  }
+}
+
 .rounded-pill-weak {
   border-radius: 60px;
 }

src/server/views/invited.html

@@ -19,6 +19,8 @@
  {% endblock %}
  {% block head_warn_alert_siteurl_undefined %}
  {% endblock %}
+ {% block fixed-controls %}
+ {% endblock %}
 
 
 

src/server/views/login.html

@@ -19,6 +19,8 @@
 {% endblock %}
 {% block head_warn_alert_siteurl_undefined %}
 {% endblock %}
+{% block fixed-controls %}
+{% endblock %}
 
 {% block html_additional_headers %}
   <script src="{{ webpack_asset('js/nologin.js') }}" defer></script>