Skip to content

Icon updates #163

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

Merged
mradamcox merged 5 commits into from
Nov 18, 2023
Merged

Icon updates #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9e17a80
complete phosphor icon implementation
mradamcox Nov 18, 2023
f4f77df
implement fake full screen (ffs)
mradamcox Nov 18, 2023
077a75d
refresh lookups after undo prep session #148
mradamcox Nov 18, 2023
6654f46
retain thumbnail of split documents #151
mradamcox Nov 18, 2023
a65e0fe
add confirmation modal for session cancel #116
mradamcox Nov 18, 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
9 changes: 1 addition & 8 deletions ohmg/frontend/svelte/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions ohmg/frontend/svelte/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-icons-pack": "^2.1.0"
"svelte": "^3.0.0"
},
"dependencies": {
"@petamoriken/float16": "3.4.7",
"ol": "^6.15.1",
"ol-ext": "^3.2.28",
"ol-hashed": "^2.1.0",
"@petamoriken/float16": "3.4.7",
"sirv-cli": "^1.0.0",
"svelte-markdown": "^0.2.3",
"svelte-tablesort": "^1.1.0"
Expand Down
52 changes: 29 additions & 23 deletions ohmg/frontend/svelte/src/lib/Georeference.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
<script>
import IconContext from 'phosphor-svelte/lib/IconContext';
import ArrowSquareOut from "phosphor-svelte/lib/ArrowSquareOut";
import { iconProps } from "../js/utils"
import X from "phosphor-svelte/lib/X";
import Check from "phosphor-svelte/lib/Check";
import ArrowsClockwise from "phosphor-svelte/lib/ArrowsClockwise";
import ArrowsOutSimple from "phosphor-svelte/lib/ArrowsOutSimple";
import ArrowsInSimple from "phosphor-svelte/lib/ArrowsInSimple";
import ArrowSquareOut from "phosphor-svelte/lib/ArrowSquareOut";
import Trash from "phosphor-svelte/lib/Trash";
import Stack from "phosphor-svelte/lib/Stack";
import GearSix from "phosphor-svelte/lib/GearSix";

import {onMount} from 'svelte';

import Icon from 'svelte-icons-pack/Icon.svelte';
import FiCheck from 'svelte-icons-pack/fi/FiCheck';
import FiX from 'svelte-icons-pack/fi/FiX';
import FiRefreshCcw from 'svelte-icons-pack/fi/FiRefreshCcw';
import FiMinimize2 from 'svelte-icons-pack/fi/FiMinimize2';
import FiMaximize2 from 'svelte-icons-pack/fi/FiMaximize2';
import FiExternalLink from 'svelte-icons-pack/fi/FiExternalLink';
import FiTrash2 from 'svelte-icons-pack/fi/FiTrash2';
import FiLayers from 'svelte-icons-pack/fi/FiLayers';
import FiSettings from 'svelte-icons-pack/fi/FiSettings';

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
Expand Down Expand Up @@ -936,7 +933,7 @@ const iconLinks = [
<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} on:beforeunload={() => {if (!leaveOkay) {confirmLeave()}}} on:unload={cleanup}/>
<IconContext values={iconProps}>
<TitleBar TITLE={DOCUMENT.title} SIDE_LINKS={[]} ICON_LINKS={iconLinks}/>
<p>Create 3 or more ground control points to georeference this document. To create a ground control point, first click on a location in the left panel, then find and click on the corresponding location in right panel. <a href="https://ohmg.dev/docs/making-the-mosaics/georeferencing" target="_blank">Learn more <Icon src={FiExternalLink} /></a></p>
<p>Create 3 or more ground control points to georeference this document. To create a ground control point, first click on a location in the left panel, then find and click on the corresponding location in right panel. <a href="https://ohmg.dev/docs/making-the-mosaics/georeferencing" target="_blank">Learn more <ArrowSquareOut /></a></p>

<Modal id="modal-expiration">
<p>This georeferencing session is expiring, and will be cancelled soon.</p>
Expand All @@ -945,13 +942,22 @@ const iconLinks = [
getModal('modal-expiration').close()}
}>Give me more time!</button>
</Modal>

<Modal id="modal-anonymous">
<p>Feel free to experiment with the interface, but submit your work you must
<a href="/account/login">sign in</a> or
<a href="/account/signup">sign up</a>.
</p>
</Modal>
<Modal id="modal-cancel">
<p>Are you sure you want to cancel this session?</p>
<button on:click={() => {
process("cancel");
getModal('modal-cancel').close()
}}>Yes</button>
<button on:click={() => {
getModal('modal-cancel').close()}
}>No - keep working</button>
</Modal>

<div id="map-container" class="svelte-component-main">
{#if disableInterface}
Expand Down Expand Up @@ -986,19 +992,19 @@ const iconLinks = [
</div>
<div class="control-btn-group">
<button class="control-btn tool-ui" title="Save control points" disabled={!enableSave} on:click={() => { process("submit") }}>
<Icon src={FiCheck} />
<Check />
</button>
<button class="control-btn tool-ui" title="Cancel georeferencing" disabled={!enableButtons} on:click={() => { process("cancel") }}>
<Icon src={FiX} />
<button class="control-btn tool-ui" title="Cancel georeferencing" disabled={!enableButtons} on:click={() => { getModal('modal-cancel').open() }}>
<X />
</button>
<button class="control-btn tool-ui" title="Reset interface" disabled={unchanged} on:click={loadIncomingGCPs}>
<Icon src={FiRefreshCcw} />
<ArrowsClockwise />
</button>
<button class="control-btn tool-ui" title={inFullscreen ? "Exit fullscreen" : "Enter fullscreen"} on:click={() => {inFullscreen = toggleFullscreen('map-container')}}>
{#if inFullscreen}
<Icon src={FiMinimize2} />
<ArrowsInSimple />
{:else}
<Icon src={FiMaximize2} />
<ArrowsOutSimple />
{/if}
</button>
</div>
Expand Down Expand Up @@ -1077,7 +1083,7 @@ const iconLinks = [
{/each}
</select>
<button class="control-btn tool-ui" title="Remove control point {activeGCP} (d)" on:click={removeActiveGCP}>
<Icon src={FiTrash2} />
<Trash />
</button>
<button class="control-btn" on:click={() => {showNotePanel=!showNotePanel}}>
Note
Expand All @@ -1088,10 +1094,10 @@ const iconLinks = [
<div style="display:flex; flex-direction:row; text-align:right;">
<div class="control-btn-group">
<button class="control-btn tool-ui" on:click={() => {showSettingsPanel=!showSettingsPanel}}>
<Icon src={FiSettings} />
<GearSix />
</button>
<button class="control-btn tool-ui" on:click={() => {showLayerPanel=!showLayerPanel}}>
<Icon src={FiLayers} />
<Stack />
</button>
</div>
<!--
Expand Down
7 changes: 6 additions & 1 deletion ohmg/frontend/svelte/src/lib/Home.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<script>
import SvelteMarkdown from 'svelte-markdown'

import IconContext from 'phosphor-svelte/lib/IconContext';
import { iconProps } from "../js/utils"
import ArrowSquareOut from 'phosphor-svelte/lib/ArrowSquareOut'

import MapBrowse from './components/MapBrowse.svelte';
Expand Down Expand Up @@ -30,7 +33,7 @@ if (urlSegs[urlSegs.length - 2] == 'about') {
}

</script>

<IconContext values={iconProps}>
<main>
<div>
<h1>OldInsuranceMaps.net</h1>
Expand Down Expand Up @@ -141,6 +144,8 @@ Many thanks also to our individual sponsors: Kevin H., Andrew M., and Peter M. T
</div>
</div>
</main>
</IconContext>

<style>

main {
Expand Down
29 changes: 14 additions & 15 deletions ohmg/frontend/svelte/src/lib/Resource.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@ import { slide } from 'svelte/transition';

import IconContext from 'phosphor-svelte/lib/IconContext';
import { iconProps } from "../js/utils"
import Icon from 'svelte-icons-pack/Icon.svelte';
import FiScissors from 'svelte-icons-pack/fi/FiScissors';
import FiCheck from 'svelte-icons-pack/fi/FiCheck';
import FiCheckSquare from 'svelte-icons-pack/fi/FiCheckSquare';
import FiEdit from 'svelte-icons-pack/fi/FiEdit';
import FiRotateCcw from 'svelte-icons-pack/fi/FiRotateCcw';
import FiExternalLink from 'svelte-icons-pack/fi/FiExternalLink';
import FaSolidMapPin from 'svelte-icons-pack/fa/FaSolidMapPin';
import FiTrash2 from 'svelte-icons-pack/fi/FiTrash2';

import Scissors from "phosphor-svelte/lib/Scissors";
import CheckSquareOffset from "phosphor-svelte/lib/CheckSquareOffset";
import ArrowCounterClockwise from "phosphor-svelte/lib/ArrowCounterClockwise";
import ArrowSquareOut from "phosphor-svelte/lib/ArrowSquareOut";
import MapPin from "phosphor-svelte/lib/MapPin";
import Trash from "phosphor-svelte/lib/Trash";

import 'ol/ol.css';

Expand Down Expand Up @@ -246,22 +244,22 @@ let reinitMap = [{}]
disabled={!splitBtnEnabled}
onclick="window.location.href='{RESOURCE.urls.split}'"
class="control-btn{splitNeeded == true ? ' btn-chosen': ''}">
<Icon src={FiScissors} />
<Scissors />
</button>
<button
title="This document does not need to be split"
disabled={!noSplitBtnEnabled}
on:click={() => {setSplit("no_split")}}
class="control-btn{splitNeeded == false ? ' btn-chosen': ''}">
<Icon src={FiCheckSquare} />
<CheckSquareOffset />
</button>
{#if USER_AUTHENTICATED}
<button
class="control-btn"
title={undoBtnTitle}
disabled={!undoBtnEnabled}
on:click={() => {setSplit("undo")}}>
<Icon src={FiRotateCcw} />
<ArrowCounterClockwise />
</button>
{/if}
</div>
Expand Down Expand Up @@ -318,15 +316,15 @@ let reinitMap = [{}]
title={georeferenceBtnTitle}
disabled={!georeferenceBtnEnable}
onclick="window.location.href='{RESOURCE.urls.georeference}'">
<Icon src={FaSolidMapPin} />{georeferenceBtnTitle}
<MapPin />{georeferenceBtnTitle}
</button>
{#if USER_STAFF}
<button
class="control-btn"
title="Remove all georeferencing for this resource"
disabled={RESOURCE.status != "georeferenced"}
on:click={unGeoreference}>
<Icon src={FiTrash2} />
<Trash />
</button>
{/if}
</div>
Expand Down Expand Up @@ -415,7 +413,7 @@ let reinitMap = [{}]
<a href="https://docs.qgis.org/3.22/en/docs/user_manual/managing_data_source/opening_data.html#using-xyz-tile-services">QGIS</a>, and
<a href="https://esribelux.com/2021/04/16/xyz-tile-layers-in-arcgis-platform/">ArcGIS</a>.
{#if ohmUrl}
<br><a href="{ohmUrl}" alt="View in OHM iD editor" target="_blank">View in Open Historical Map iD editor<Icon src={FiExternalLink} /></a> (direct link).
<br><a href="{ohmUrl}" alt="View in OHM iD editor" target="_blank">View in Open Historical Map iD editor<ArrowSquareOut /></a> (direct link).
{/if}
</p>
{/if}
Expand All @@ -430,6 +428,7 @@ let reinitMap = [{}]
</div>
</main>
</IconContext>

<style>

main {
Expand Down
43 changes: 26 additions & 17 deletions ohmg/frontend/svelte/src/lib/Split.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import {onMount} from 'svelte';

import IconContext from 'phosphor-svelte/lib/IconContext';
import { iconProps } from "../js/utils"
import Icon from 'svelte-icons-pack/Icon.svelte';
import FiRefreshCcw from 'svelte-icons-pack/fi/FiRefreshCcw';
import FiExternalLink from 'svelte-icons-pack/fi/FiExternalLink';
import FiMinimize2 from 'svelte-icons-pack/fi/FiMinimize2';
import FiMaximize2 from 'svelte-icons-pack/fi/FiMaximize2';
import FiCheckSquare from 'svelte-icons-pack/fi/FiCheckSquare';
import FiScissors from 'svelte-icons-pack/fi/FiScissors';
import FiRotateCcw from 'svelte-icons-pack/fi/FiRotateCcw';
import FiX from 'svelte-icons-pack/fi/FiX';

import ArrowSquareOut from "phosphor-svelte/lib/ArrowSquareOut";
import ArrowsOutSimple from "phosphor-svelte/lib/ArrowsOutSimple";
import ArrowsInSimple from "phosphor-svelte/lib/ArrowsInSimple";
import CheckSquareOffset from "phosphor-svelte/lib/CheckSquareOffset";
import Scissors from "phosphor-svelte/lib/Scissors";
import ArrowCounterClockwise from "phosphor-svelte/lib/ArrowCounterClockwise";
import X from "phosphor-svelte/lib/X";

import 'ol/ol.css';
import Map from 'ol/Map';
Expand Down Expand Up @@ -405,9 +404,19 @@ let inFullscreen = false;
<Modal id="modal-finished">
<p>This document has already been prepared!</p>
</Modal>
<Modal id="modal-cancel">
<p>Are you sure you want to cancel this session?</p>
<button on:click={() => {
process("cancel");
getModal('modal-cancel').close()
}}>Yes</button>
<button on:click={() => {
getModal('modal-cancel').close()}
}>No - keep working</button>
</Modal>

<TitleBar TITLE={DOCUMENT.title} SIDE_LINKS={[]} ICON_LINKS={iconLinks}/>
<p>{currentTxt} <a href="https://ohmg.dev/docs/making-the-mosaics/preparation" target="_blank">Learn more <Icon src={FiExternalLink} /></a></p>
<p>{currentTxt} <a href="https://ohmg.dev/docs/making-the-mosaics/preparation" target="_blank">Learn more<ArrowSquareOut /></a></p>
<div id="map-container" class="svelte-component-main">
{#if disableInterface}
<div class="interface-mask">
Expand Down Expand Up @@ -446,22 +455,22 @@ let inFullscreen = false;

<div class="control-btn-group">
<button class="control-btn tool-ui" title="Run split operation" disabled={divisions.length<=1 || !enableButtons} on:click={() => {process("split")}}>
<Icon src={FiScissors} />
<Scissors />
</button>
<button class="control-btn tool-ui" title="No split needed" disabled={divisions.length>0 || !enableButtons} on:click={() => {process("no_split")}}>
<Icon src={FiCheckSquare} />
<CheckSquareOffset />
</button>
<button class="control-btn tool-ui" title="Cancel this preparation" disabled={session_id == null || !enableButtons} on:click={() => {process("cancel")}}>
<Icon src={FiX} />
<button class="control-btn tool-ui" title="Cancel this preparation" disabled={session_id == null || !enableButtons} on:click={() => { getModal('modal-cancel').open() }}>
<X />
</button>
<button class="control-btn tool-ui" title="Reset interface" disabled={unchanged} on:click={resetInterface}>
<Icon src={FiRotateCcw} />
<ArrowCounterClockwise />
</button>
<button class="control-btn tool-ui" title={inFullscreen ? "Exit fullscreen" : "Enter fullscreen"} on:click={() => {inFullscreen = toggleFullscreen('map-container')}}>
{#if inFullscreen}
<Icon src={FiMinimize2} />
<ArrowsInSimple />
{:else}
<Icon src={FiMaximize2} />
<ArrowsOutSimple />
{/if}
</button>

Expand Down
Loading