Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add viewer controls to storybook #383

Merged
merged 2 commits into from
Dec 15, 2023
Merged

Add viewer controls to storybook #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2e69bd
Add viewer controls to storybook
eyeseast Dec 14, 2023
10adce6
Check for doc
eyeseast Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/assets/fullscreen.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/pages/viewer/Body.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
enterAnnotateMode,
enterModifyMode,
enterSectionsMode,
} from "@/viewer/actions";
} from "@/viewer/actions.js";

let docElem;
let actionHeight;
Expand Down
5 changes: 3 additions & 2 deletions src/pages/viewer/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
export let compact = false;
export let embed = false;
export let showFullscreen = false;
export let document;

$: style = `height: ${FOOTER_HEIGHT}px;`;
</script>
Expand All @@ -28,8 +29,8 @@
<span class="hide ib adjustright" class:hideearly={embed}>
<Zoom />
</span>
{#if embed && showFullscreen}
<FullScreen />
{#if document && embed && showFullscreen}
<FullScreen url={document.canonicalUrl} />
{/if}
</div>
{/if}
Expand Down
11 changes: 7 additions & 4 deletions src/pages/viewer/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
<script lang="ts">
import { _ } from "svelte-i18n";
import { ChevronLeft24 } from "svelte-octicons";
import { createEventDispatcher } from "svelte";

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";
import { HEADER_HEIGHT } from "./constants.js";

export let document: any;
export let loaded: boolean;
export let title = true;
export let showOrg = true;
export let disableControls = false;
export let embed = false;

const dispatch = createEventDispatcher();
</script>

<header
Expand All @@ -29,7 +32,7 @@
{#if !embed}
<div class="back">
<Link back={true}>
{@html backArrowSvg}
<ChevronLeft24 />
</Link>
</div>
{/if}
Expand Down Expand Up @@ -57,7 +60,7 @@
<Search />
</div>
<div class="cell">
<Hamburger />
<Hamburger on:click={(e) => dispatch("toggle.sidebar")} />
</div>
</div>
</header>
Expand Down
10 changes: 5 additions & 5 deletions src/pages/viewer/SelectableWord.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
/>
{/if}

<style lang="scss">
<style>
.selectabletext {
position: absolute;
color: transparent;
Expand All @@ -119,11 +119,11 @@
transform-origin: left top;
white-space: pre;
font-family: monospace;
}

&::selection {
background: rgba(66, 147, 240, 0.3);
mix-blend-mode: multiply;
}
.selectabletext::selection {
background: rgba(66, 147, 240, 0.3);
mix-blend-mode: multiply;
}

.highlight {
Expand Down
187 changes: 95 additions & 92 deletions src/pages/viewer/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
export let showOrg = false;
export let displayAnnotate = false;
export let disableControls = false;
export let show = true;

const style = `top: ${HEADER_HEIGHT}px; bottom: ${FOOTER_HEIGHT}px; width: ${SIDEBAR_WIDTH}px;`;

Expand Down Expand Up @@ -124,111 +125,113 @@
}
</script>

<div
class="sidebar"
class:white={!signedIn}
class:disabled={disableControls}
on:mousedown={handleMouseDown}
{style}
>
{#if loaded}
<div class="title">
{#if !embed && document?.readable}
<div class="updating">
{$_("sidebar.updating")}
<Progress initializing={true} progress={0} compact={true} />
</div>
{/if}
{#if show}
<div
class="sidebar"
class:white={!signedIn}
class:disabled={disableControls}
on:mousedown={handleMouseDown}
{style}
>
{#if loaded}
<div class="title">
{#if !embed && document?.readable}
<div class="updating">
{$_("sidebar.updating")}
<Progress initializing={true} progress={0} compact={true} />
</div>
{/if}

{#if document?.description != null && document?.description.trim().length > 0}
<details class="dc" open>
<summary>
<h2 class="inlineheader">{document?.title}</h2>
</summary>
<HtmlField content={document?.description} />
</details>
{:else}
<h2>{document?.title}</h2>
{/if}
{#if document?.description != null && document?.description.trim().length > 0}
<details class="dc" open>
<summary>
<h2 class="inlineheader">{document?.title}</h2>
</summary>
<HtmlField content={document?.description} />
</details>
{:else}
<h2>{document?.title}</h2>
{/if}

<TableOfContents />
<TableOfContents />

<hr />
{#if !hidePdfLink}
<div>
<a
target="_blank"
rel="noopener noreferrer"
class="plausible-event-name=viewer-original-document"
href={document?.pdf}
>
{$_("sidebar.original")}
</a>
</div>
{/if}
{#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
<div>
<a
target="_blank"
rel="noopener noreferrer"
class="plausible-event-name=viewer-related-url"
href={document?.relatedArticleUrl}
>
{$_("sidebar.related")}
</a>
</div>
{/if}
<small>
<p>
{$_("sidebar.contributed", {
values: {
name: showOrg ? document?.orgString : document?.userOrgString,
},
})}
</p>
</small>
{#if document?.source !== null && document?.source.trim().length > 0}
<hr />
{#if !hidePdfLink}
<div>
<a
target="_blank"
rel="noopener noreferrer"
class="plausible-event-name=viewer-original-document"
href={document?.pdf}
>
{$_("sidebar.original")}
</a>
</div>
{/if}
{#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
<div>
<a
target="_blank"
rel="noopener noreferrer"
class="plausible-event-name=viewer-related-url"
href={document?.relatedArticleUrl}
>
{$_("sidebar.related")}
</a>
</div>
{/if}
<small>
<p>
{$_("sidebar.source", {
values: { source: document?.source },
{$_("sidebar.contributed", {
values: {
name: showOrg ? document?.orgString : document?.userOrgString,
},
})}
</p>
</small>
{/if}
{#if document?.editAccess}
<div>
<AccessIcon {document} showText={true} />
</div>
{/if}
{#if ocrEngine}
<small><p>OCR: {ocrEngine}</p></small>
{/if}
</div>
{#if document?.source !== null && document?.source.trim().length > 0}
<small>
<p>
{$_("sidebar.source", {
values: { source: document?.source },
})}
</p>
</small>
{/if}
{#if document?.editAccess}
<div>
<AccessIcon {document} showText={true} />
</div>
{/if}
{#if ocrEngine}
<small><p>OCR: {ocrEngine}</p></small>
{/if}
</div>

{#if signedIn}
<div class="actions">{$_("sidebar.actions")}</div>
{#if document?.editAccess}
{#each actions as { id, action, header, description, disabled }}
{#if signedIn}
<div class="actions">{$_("sidebar.actions")}</div>
{#if document?.editAccess}
{#each actions as { id, action, header, description, disabled }}
<SidebarAction
class={`plausible-event-name=sidebar-${id}`}
{disabled}
{action}
{header}
{description}
/>
{/each}
{:else}
<SidebarAction
class={`plausible-event-name=sidebar-${id}`}
{disabled}
{action}
{header}
{description}
class="plausible-event-name=sidebar-private-note"
action={enterAnnotateMode}
header={$_("sidebar.privateNote")}
description={$_("sidebar.privateNoteDesc")}
/>
{/each}
{:else}
<SidebarAction
class="plausible-event-name=sidebar-private-note"
action={enterAnnotateMode}
header={$_("sidebar.privateNote")}
description={$_("sidebar.privateNoteDesc")}
/>
{/if}
{/if}
{/if}
{/if}
</div>
</div>
{/if}

<style lang="scss">
.sidebar {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/viewer/SimpleBody.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import { layout, cancelAnnotation } from "@/viewer/layout.js";
import { layout } from "@/viewer/layout.js";
import { doc } from "@/viewer/document.js";

import AllText from "./AllText.svelte";
Expand Down
1 change: 0 additions & 1 deletion src/pages/viewer/TextBody.svelte
View file
Open in desktop

This file was deleted.

27 changes: 15 additions & 12 deletions src/pages/viewer/Viewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@
showOrg={$layout.title}
disableControls={$layout.disableControls}
embed={$viewer.embed}
on:toggle.sidebar={($layout.showSidebar = !$layout.showSidebar)}
/>
{#if $doc.mode == "image"}
<Body mode={$doc.mode} />
Expand All @@ -221,23 +222,25 @@
{:else if $doc.mode == "modify"}
<ThumbnailBody modify={true} />
{/if}
{#if $layout.showSidebar}
<Sidebar
document={$viewer.document}
signedIn={$viewer.me !== null}
loaded={$viewer.loaded}
embed={$layout.embed}
hidePdfLink={$layout.hidePdfLink}
showOrg={$layout.showOrg}
displayAnnotate={$layout.displayAnnotate}
disableControls={$layout.disableControls}
/>
{/if}

<Sidebar
document={$viewer.document}
signedIn={$viewer.me !== null}
loaded={$viewer.loaded}
embed={$layout.embed}
hidePdfLink={$layout.hidePdfLink}
showOrg={$layout.showOrg}
displayAnnotate={$layout.displayAnnotate}
disableControls={$layout.disableControls}
show={$layout.showSidebar}
/>

<Footer
disableControls={$layout.disableControls}
compact={$layout.compact}
embed={$layout.embed}
showFullscreen={$layout.showFullscreen}
document={$viewer.document}
/>
</Loader>
{/if}
Loading