Merge pull request #87 from sajacy/shellux

Add dock-right shell, better questions ordering

src/components/extension-fallback.css

@@ -22,8 +22,16 @@
   & object {
     display: block; /* iframes are inline by default */
     border: none; /* Reset default border */
-    height: 100vh; /* Viewport-relative units */
-    width: 100vw;
+    @media (--narrow-screen) {
+      height: 100vh; /* Viewport-relative units */
+      width: 100vw;
+    }
+    @media (--wide-screen) {
+      position:absolute;
+      width:60vw;
+      height:100%;
+      overflow-y: scroll;
+    }
   }
 
 }

src/components/extension-shell.css

@@ -0,0 +1,139 @@
+:root {
+  --shell-header-height: var(--xlgrd); /* !! keep in sync with shell.js */
+  --shell-control-icon-width: var(--lgrd);
+}
+
+.shell {
+  z-index: 2;
+  position: fixed;
+  background-color: white;
+  bottom: 0;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: auto;
+  overflow-x: hidden;
+  left: 10vw;
+  /* note we use width here instead of setting right position so we can inherit it int he shell content */
+  width: 80vw;
+  border-top: 1px solid var(--ruling-color);
+  border-left: 1px solid var(--ruling-color);
+  border-right: 1px solid var(--ruling-color);
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+
+  @media (--narrow-screen) {
+    left: 0;
+    width: 100vw;
+  }
+}
+
+.shell--default {
+  max-height: 50%;
+  min-height: 50%;
+  transition: max-height 0.2s ease-in-out;
+}
+
+.shell--revealed {
+  height: var(--shell-header-height);
+  transition: height 0.2s ease-in-out;
+}
+
+.shell--minimized {
+  height: 0;
+  transition: height 0.2s ease-in-out;
+}
+
+.shell--maximized {
+  height: 100%;
+  transition: height 0.2s ease-in-out;
+}
+
+.shell__control-bar {
+  height: var(--shell-header-height);
+
+  position: relative;
+  z-index: 1000001;
+}
+.shell__controls {
+  background: white;
+  z-index: 1000001;
+  height: var(--shell-header-height);
+  box-sizing: border-box;
+  position: fixed;
+  /* left: calc(50vw - var(--shell-control-icon-width) - var(--shell-control-icon-width) / 2); */
+  left: 10vw;
+  width: 80vw;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--xsgrd) var(--sgrd);
+
+  @media (--narrow-screen) {
+    left: 0;
+    width: 100vw;
+  }
+  & .shell__controls__left {
+    display: flex;
+    align-items: center;
+    flex: 1 1 50%;
+  }
+  & .shell__controls__right {
+    display: flex;
+    align-items: center;
+    flex: 1 1 50%;
+    justify-content: flex-end;
+  }
+  & .shell__controls__center {
+    display: flex;
+    align-items: center;
+  }
+
+  & .shell__controls__button {
+    border-radius: 50%;
+    flex: 0 0 auto;
+    margin-left: 4px;
+    width: 24px !important;
+    min-width: 24px !important;
+    height: 24px;
+    color: var(--prereview-black);
+
+    & .shell__controls__button__icon-container {
+      width: 16px !important;
+      height: 16px;
+      border-radius: 50%;
+      min-width: 16px;
+      border: 2px solid var(--prereview-black);
+
+      /* width: 16px;
+      height: 16px; */
+    }
+
+    &.shell__controls__button--drag {
+      color: black;
+      background-color: white;
+      width: 24px !important;
+      height: 24px;
+      min-width: 24px;
+    }
+
+    /* Add enough space so that finger fits on mobile (otherwise minimize and maximize are too close */
+    @media (--narrow-screen) {
+      &.shell__controls__button--maximize {
+      }
+    }
+  }
+}
+
+.shell__mask {
+  z-index: 1;
+  position: fixed;
+  background-color: transparent;
+  height: calc(var(--shell-header-height) + 5px);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.shell__mask--full {
+  height: auto;
+  top: 0;
+}

src/components/pdf-viewer.css

@@ -1,6 +1,17 @@
 .pdf-viewer {
-  max-width: 900px; /* Keep in sync with JS */
-  margin: 0 auto;
+  position:absolute;
+  height:100%;
+  width:100%;
+  overflow-y: scroll;
+
+  .pdf-margin {
+    margin: 0 auto;
+    max-width: 900px; /* Keep in sync with JS */
+  }
+
+  @media (--wide-screen) {
+    width: 60vw;
+  }
 }
 
 @keyframes pdf-viewer__loading__text-ellipsis {

src/components/pdf-viewer.js

@@ -12,6 +12,13 @@ const CSS_MAX_WIDTH = 900; // keep in sync with CSS
  * few pages at the time
  */
 export default function PdfViewer({ pdfUrl, loading }) {
+  const containerEl = useRef(null);
+  const getWidth = () => {
+    const el = containerEl.current;
+    const containerWidth = !!el ? parseInt(getComputedStyle(el).width, 10) : CSS_MAX_WIDTH;
+    return Math.min(containerWidth, CSS_MAX_WIDTH);
+  };
+
   const [width, setWidth] = useState(getWidth());
   const [focused, setFocused] = useState(0);
   const [dims, setDims] = useState([]);
@@ -22,7 +29,8 @@ export default function PdfViewer({ pdfUrl, loading }) {
         const nextWidth = getWidth();
         setWidth(nextWidth);
 
-        const bottomScroll = window.scrollY + window.innerHeight;
+        const el = containerEl.current;
+        const bottomScroll = el.scrollTop + el.clientHeight;
         setFocused(findFocused(bottomScroll, dims, nextWidth));
       },
       150,
@@ -32,6 +40,7 @@ export default function PdfViewer({ pdfUrl, loading }) {
       }
     );
 
+    setWidth(getWidth());
     window.addEventListener('resize', throttled);
     return () => {
       throttled.cancel();
@@ -41,17 +50,18 @@ export default function PdfViewer({ pdfUrl, loading }) {
 
   useEffect(() => {
     function handleScroll(e) {
-      const bottomScroll = window.scrollY + window.innerHeight;
+      const el = containerEl.current;
+      const bottomScroll = el.scrollTop + el.clientHeight;
 
       const nextFocused = findFocused(bottomScroll, dims, width);
       if (focused !== nextFocused) {
         setFocused(nextFocused);
       }
     }
 
-    window.addEventListener('scroll', handleScroll);
+    containerEl.current.addEventListener('scroll', handleScroll);
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      containerEl.current.removeEventListener('scroll', handleScroll);
     };
   }, [focused, dims, width]);
 
@@ -64,60 +74,62 @@ export default function PdfViewer({ pdfUrl, loading }) {
   });
 
   return (
-    <div className="pdf-viewer">
-      <Document
-        file={`${process.env.API_URL}/api/pdf?url=${encodeURIComponent(
-          pdfUrl
-        )}`}
-        loading={loading}
-        onLoadSuccess={async pdf => {
-          let dims = [];
-          for (let i = 0; i < pdf.numPages; i++) {
-            const page = await pdf.getPage(i + 1);
-            const [, , w, h] = page.view;
-
-            dims.push({ w, h });
-          }
-          if (isMountedRef.current) {
-            setDims(dims);
-          }
-        }}
-      >
-        {dims.map((dim, i) =>
-          i === focused ||
-          i === focused - 1 ||
-          i === focused - 2 ||
-          i === focused + 1 ||
-          i === focused + 2 ? (
-            <Page
-              key={i}
-              width={width}
-              loading={
-                <VirtualPage
-                  width={width}
-                  height={getScaledPageHeight({
-                    desiredWidth: width,
-                    nativeWidth: dim.w,
-                    nativeHeight: dim.h
-                  })}
-                />
-              }
-              pageNumber={i + 1}
-              renderAnnotationLayer={false}
-            />
-          ) : (
-            <VirtualPage
-              key={i}
-              width={width}
-              height={getScaledPageHeight({
-                desiredWidth: width,
-                nativeWidth: dim.w,
-                nativeHeight: dim.h
-              })}
-            />
-          )
-        )}
-      </Document>
+    <div className="pdf-viewer" ref={containerEl}>
+      <div className="pdf-margin">
+        <Document
+          file={`${process.env.API_URL}/api/pdf?url=${encodeURIComponent(
+            pdfUrl
+          )}`}
+          loading={loading}
+          onLoadSuccess={async pdf => {
+            let dims = [];
+            for (let i = 0; i < pdf.numPages; i++) {
+              const page = await pdf.getPage(i + 1);
+              const [, , w, h] = page.view;
+
+              dims.push({ w, h });
+            }
+            if (isMountedRef.current) {
+              setDims(dims);
+            }
+          }}
+        >
+          {dims.map((dim, i) =>
+            i === focused ||
+            i === focused - 1 ||
+            i === focused - 2 ||
+            i === focused + 1 ||
+            i === focused + 2 ? (
+              <Page
+                key={i}
+                width={width}
+                loading={
+                  <VirtualPage
+                    width={width}
+                    height={getScaledPageHeight({
+                      desiredWidth: width,
+                      nativeWidth: dim.w,
+                      nativeHeight: dim.h
+                    })}
+                  />
+                }
+                pageNumber={i + 1}
+                renderAnnotationLayer={false}
+              />
+            ) : (
+              <VirtualPage
+                key={i}
+                width={width}
+                height={getScaledPageHeight({
+                  desiredWidth: width,
+                  nativeWidth: dim.w,
+                  nativeHeight: dim.h
+                })}
+              />
+            )
+          )}
+        </Document>
+      </div>
     </div>
   );
 }
@@ -127,9 +139,7 @@ PdfViewer.propTypes = {
   loading: PropTypes.element
 };
 
-function getWidth() {
-  return Math.min(window.innerWidth, CSS_MAX_WIDTH);
-}
+
 
 function getScaledPageHeight({ desiredWidth, nativeWidth, nativeHeight }) {
   return (desiredWidth * nativeHeight) / nativeWidth;