Merge pull request #67 from Kitware/mobile_popup

fix(MobileOverlay): Add overlay if screen is detected as too small

Sources/index.js

@@ -18,6 +18,8 @@ import * as Controls from './controls';
 import ReaderFactory from './io/ReaderFactory';
 import UI from './ui';
 
+const MainComponent = UI.MobileOverlay(MainView);
+
 export const {
   registerReader,
   listReaders,
@@ -34,7 +36,7 @@ export function createViewer(container, proxyConfig = null) {
 
   const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
   const mainView = ReactDOM.render(
-    <MainView proxyManager={proxyManager} />,
+    <MainComponent proxyManager={proxyManager} />,
     container
   );
 

Sources/ui/MobileOverlay/Overlay.mcss

@@ -0,0 +1,25 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  background: $colors.menu;
+}
+
+.centered {
+  text-align: center;
+  font-size: 2em;
+  padding: 15px;
+}
+
+.glance {
+  max-width: 100%;
+}
+
+.kitware {
+  margin: 0 auto;
+  margin-top: 15px;
+  width: 55%;
+}

Sources/ui/MobileOverlay/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import icons from '../../icons';
+
+import style from './Overlay.mcss';
+
+const DEFAULT_WIDTH = 700; // px
+
+function Overlay(props) {
+  return (
+    <div className={style.overlay}>
+      <div className={style.centered}>
+        <img className={style.glance} src={icons.Logo} alt="ParaView Glance" />
+        <p>
+          This application is not yet optimized for mobile. Please use a
+          desktop.
+        </p>
+        <p>
+          For interactive 3D samples on mobile, check out&nbsp;
+          <a href="https://kitware.github.io/vtk-js/examples/">vtk.js</a>.
+        </p>
+        <div className={style.kitware}>
+          <a href="https://kitware.com/">
+            <img src={icons.KitwareLogo} alt="Kitware" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function MobileOverlay(Component, width = DEFAULT_WIDTH) {
+  // right now this is not dynamic; only applies on first run
+  const isMobile = window.innerWidth <= DEFAULT_WIDTH;
+
+  return function WrappedComponent(props) {
+    if (isMobile) {
+      return <Overlay />;
+    }
+    return <Component {...props} />;
+  };
+}

Sources/ui/index.js

@@ -2,6 +2,7 @@ import Button from './Button';
 import Messages from './Messages';
 import FaIcon from './FaIcon';
 import Menu from './Menu';
+import MobileOverlay from './MobileOverlay';
 import Progress from './Progress';
 import TitleModal from './TitleModal';
 
@@ -10,6 +11,7 @@ export default {
   Messages,
   FaIcon,
   Menu,
+  MobileOverlay,
   Progress,
   TitleModal,
 };