Merge pull request #350 from MuckRock/viewer-storybook

Storybook for Viewer components

src/pages/viewer/Footer.svelte

@@ -1,112 +1,105 @@
-<script>
+<script lang="ts">
   // Controls
   import ViewDropdown from "./controls/ViewDropdown.svelte";
   import Paginator from "./controls/Paginator.svelte";
   import Zoom from "./controls/Zoom.svelte";
   import FullScreen from "./controls/FullScreen.svelte";
 
-  import { layout } from "@/viewer/layout.js";
+  import { FOOTER_HEIGHT } from "./constants.js";
 
-  $: style = `height: ${$layout.footerHeight}px;`;
+  export let disableControls = false;
+  export let compact = false;
+  export let embed = false;
+  export let showFullscreen = false;
+
+  $: style = `height: ${FOOTER_HEIGHT}px;`;
 </script>
 
-<style lang="scss">
+<style>
   footer {
     position: absolute;
     bottom: 0;
-    border-top: $viewerHeaderBorder;
-    z-index: $viewerFooterZ;
+    left: 0;
+    right: 0;
+    border-top: var(--viewerHeaderBorder);
+    z-index: var(--viewerFooterZ);
     text-align: center;
+  }
 
-    &.disabled {
-      pointer-events: none;
-      filter: brightness(90%);
-    }
+  footer.disabled {
+    pointer-events: none;
+    filter: brightness(90%);
   }
 
   .cell {
     display: table-cell;
     vertical-align: middle;
+  }
 
-    &.side {
-      width: 200px;
-      text-align: left;
-      padding: 0 0 0 16px;
+  .cell.side {
+    width: 200px;
+    text-align: left;
+    padding: 0 0 0 16px;
+  }
 
-      &.right {
-        text-align: right;
-        padding: 0 16px 0 0;
-      }
-    }
+  .cell.side.right {
+    text-align: right;
+    padding: 0 16px 0 0;
+  }
 
-    &.center {
-      text-align: center;
-    }
+  .cell.center {
+    text-align: center;
+  }
 
-    &.floatleft {
-      @media only screen and (max-width: $earlyBreak) {
-        position: absolute;
-        left: 0;
-        top: 6px;
-      }
-    }
+  .hide.ib {
+    display: inline-block;
+  }
 
-    &.floatright {
-      @media only screen and (max-width: $earlyBreak) {
-        position: absolute;
-        right: -14px;
-        top: 5px;
-        width: auto;
-      }
+  @media only screen and (max-width: 720px) {
+    .hide {
+      display: none;
     }
-
-    .adjustright {
-      @media only screen and (max-width: $earlyBreak) {
-        margin-top: -2px;
-        margin-right: 14px;
-      }
+    .hide.ib {
+      display: none;
     }
   }
 
-  .hide {
-    &.ib {
-      display: inline-block;
-
-      @media only screen and (max-width: 720px) {
-        display: none;
-      }
+  @media only screen and (max-width: 900px) {
+    .cell.floatright {
+      position: absolute;
+      right: -14px;
+      top: 5px;
+      width: auto;
     }
-
-    @media only screen and (max-width: 720px) {
-      display: none;
+    .cell.floatleft {
+      position: absolute;
+      left: 0;
+      top: 6px;
     }
-
-    &.hideearly {
-      @media only screen and (max-width: $earlyBreak) {
-        display: none;
-      }
+    .adjustright {
+      margin-top: -2px;
+      margin-right: 14px;
+    }
+    .hide.hideearly {
+      display: none;
     }
   }
 </style>
 
-<footer
-  class="vheader"
-  class:disabled={$layout.disableControls}
-  style="height: {$layout.footerHeight}px"
->
+<footer class="vheader" class:disabled={disableControls} {style}>
   <div class="vcontent">
-    {#if !$layout.compact}
+    {#if !compact}
       <div class="cell side hide floatleft" {style}>
         <ViewDropdown />
       </div>
       <div class="cell center" {style}>
         <Paginator />
       </div>
       <div class="cell side right floatright" {style}>
-        <span class="hide ib adjustright" class:hideearly={$layout.embed}>
+        <span class="hide ib adjustright" class:hideearly={embed}>
           <Zoom />
         </span>
-        {#if $layout.embed && $layout.showFullscreen}
+        {#if embed && showFullscreen}
           <FullScreen />
         {/if}
       </div>

src/pages/viewer/Header.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+
+  import Loader from "../../common/Loader.svelte";
+  import Link from "../../router/Link.svelte";
+  import backArrowSvg from "../../assets/back_arrow.svg?raw";
+
+  import Search from "./controls/Search.svelte";
+  import Hamburger from "./controls/Hamburger.svelte";
+
+  import { HEADER_HEIGHT } from "./constants";
+
+  export let document: any;
+  export let loaded: boolean;
+  export let title = true;
+  export let showOrg = true;
+  export let disableControls = false;
+  export let embed = false;
+</script>
+
+<style>
+  header {
+    z-index: var(--viewerHeaderZ);
+    position: relative;
+    border-bottom: var(--viewerHeaderBorder);
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
+  }
+  header.disabled {
+    pointer-events: none;
+    filter: brightness(90%);
+  }
+  .expand {
+    width: 100%;
+  }
+
+  .cell {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .back {
+    margin: 0 16px 0 16px;
+  }
+
+  .title {
+    color: var(--viewerFg, rgba(0, 0, 0, 0.8));
+    user-select: none;
+  }
+  .title > * {
+    display: inline-block;
+    margin: 0;
+  }
+
+  .title h1 {
+    font-size: 18px;
+    margin: 0 5px;
+    word-break: break-all;
+  }
+
+  .title .padleft {
+    margin-left: 30px;
+  }
+
+  .title h2 {
+    color: var(--viewerSecondary, rgba(0, 0, 0, 0.78));
+    font-size: 14px;
+    font-weight: normal;
+    margin: 0 5px;
+  }
+</style>
+
+<header
+  class="vheader"
+  class:disabled={disableControls}
+  style="height: {HEADER_HEIGHT}px"
+>
+  <div class="vcontent">
+    <!-- Expanding cell to hold title and optional back -->
+    <div class="cell">
+      {#if !embed}
+        <div class="back">
+          <Link back={true}>
+            {@html backArrowSvg}
+          </Link>
+        </div>
+      {/if}
+    </div>
+    <div class="cell expand">
+      {#if loaded}
+        <div class="title">
+          {#if !embed && document.readable}
+            <Loader active={true} pad={true} />
+          {/if}
+          {#if title}
+            <h1 class:padleft={embed}>{document.title}</h1>
+            <h2>
+              {$_("titleHeader.contributedBy", {
+                values: {
+                  name: showOrg ? document.orgString : document.userOrgString,
+                },
+              })}
+            </h2>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="cell">
+      <Search />
+    </div>
+    <div class="cell">
+      <Hamburger />
+    </div>
+  </div>
+</header>