diff --git a/web/index.css b/web/index.css
index d0ea06ccd4991afeb35b37337799b18b32836590..8877da6ffd948f690f8048ecc400341fe978e6ad 100644
--- a/web/index.css
+++ b/web/index.css
@@ -82,3 +82,11 @@ div.sticker {
object-fit: contain; }
div.sticker > img.visible {
display: initial; }
+
+div.settings-list {
+ display: flex; }
+ div.settings-list button {
+ width: 100%;
+ margin: .5rem;
+ padding: .5rem;
+ border-radius: .25rem; }
diff --git a/web/index.js b/web/index.js
index 348277ac3e31fa3c17abc87a3f744d1ffc60a2bc..c116130754d74ffa5c7d19a054bd1cbef7007e36 100644
--- a/web/index.js
+++ b/web/index.js
@@ -54,8 +54,8 @@ class App extends Component {
frequentlyUsed: {
...this.state.frequentlyUsed,
stickerIDs,
- stickers
- }
+ stickers,
+ },
})
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
}
@@ -158,15 +158,28 @@ class App extends Component {
<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓ï¸" />
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
+ <${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="res/settings.svg" altOverride="âš™ï¸ï¸" />
</nav>
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}
+ <${Settings} />
</div>
</main>`
}
}
+const reload = () => window.location.reload()
+
+const Settings = () => html`
+ <section class="stickerpack settings" id="pack-settings" data-pack-id="settings">
+ <h1>Settings</h1>
+ <div class="settings-list">
+ <button onClick=${reload}>Reload</button>
+ </div>
+ </section>
+`
+
// By default we just let the browser handle scrolling to sections, but webviews on Element iOS
// open the link in the browser instead of just scrolling there, so we need to scroll manually:
const scrollToSection = (evt, id) => {
diff --git a/web/index.sass b/web/index.sass
index a2e84fa3b2b6e9835381038d7bd555dd055ff938..d36e3f0629332acbaf68cab521ff3cf3894bf66d 100644
--- a/web/index.sass
+++ b/web/index.sass
@@ -105,3 +105,12 @@ div.sticker
&.visible
display: initial
+
+div.settings-list
+ display: flex
+
+ button
+ width: 100%
+ margin: .5rem
+ padding: .5rem
+ border-radius: .25rem
diff --git a/web/res/settings.svg b/web/res/settings.svg
new file mode 100644
index 0000000000000000000000000000000000000000..51f966f3581b24b7824ffd4e37205b4a16c3bc31
--- /dev/null
+++ b/web/res/settings.svg
@@ -0,0 +1 @@
+<svg height='100px' width='100px' fill="#000000" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><g i:extraneous="self"><g><path d="M5273.1,2400.1v-2c0-2.8-5-4-9.7-4s-9.7,1.3-9.7,4v2c0,1.8,0.7,3.6,2,4.9l5,4.9c0.3,0.3,0.4,0.6,0.4,1v6.4 c0,0.4,0.2,0.7,0.6,0.8l2.9,0.9c0.5,0.1,1-0.2,1-0.8v-7.2c0-0.4,0.2-0.7,0.4-1l5.1-5C5272.4,2403.7,5273.1,2401.9,5273.1,2400.1z M5263.4,2400c-4.8,0-7.4-1.3-7.5-1.8v0c0.1-0.5,2.7-1.8,7.5-1.8c4.8,0,7.3,1.3,7.5,1.8C5270.7,2398.7,5268.2,2400,5263.4,2400z"></path><path d="M5268.4,2410.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1H5268.4z"></path><path d="M5272.7,2413.7h-4.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1C5273.7,2414.1,5273.3,2413.7,5272.7,2413.7z"></path><path d="M5272.7,2417h-4.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1C5273.7,2417.5,5273.3,2417,5272.7,2417z"></path></g><g><path d="M50,30.5c-10.8,0-19.5,8.8-19.5,19.5S39.2,69.5,50,69.5c10.8,0,19.5-8.8,19.5-19.5S60.8,30.5,50,30.5z M50,63.6 c-7.5,0-13.6-6.1-13.6-13.6S42.5,36.4,50,36.4c7.5,0,13.6,6.1,13.6,13.6S57.5,63.6,50,63.6z"></path><path d="M94.8,39.1l-13-1.3c-0.2-0.6-0.5-1.1-0.7-1.7L89.4,26c1-1.2,0.9-2.9-0.2-3.9L78,10.8c-1.1-1.1-2.8-1.2-3.9-0.2l-10.1,8.3 c-0.6-0.3-1.1-0.5-1.7-0.7l-1.3-13c-0.2-1.5-1.4-2.7-2.9-2.7H42.1c-1.5,0-2.8,1.1-2.9,2.7l-1.3,13c-0.6,0.2-1.1,0.5-1.7,0.7 L26,10.6c-1.2-1-2.9-0.9-3.9,0.2L10.8,22c-1.1,1.1-1.2,2.8-0.2,3.9l8.3,10.1c-0.3,0.6-0.5,1.1-0.7,1.7l-13,1.3 c-1.5,0.2-2.7,1.4-2.7,2.9v15.9c0,1.5,1.1,2.8,2.7,2.9l13,1.3c0.2,0.6,0.5,1.1,0.7,1.7L10.6,74c-1,1.2-0.9,2.9,0.2,3.9L22,89.2 c1.1,1.1,2.8,1.2,3.9,0.2l10.1-8.3c0.6,0.3,1.1,0.5,1.7,0.7l1.3,13c0.2,1.5,1.4,2.7,2.9,2.7h15.9c1.5,0,2.8-1.1,2.9-2.7l1.3-13 c0.6-0.2,1.1-0.5,1.7-0.7L74,89.4c1.2,1,2.9,0.9,3.9-0.2L89.2,78c1.1-1.1,1.2-2.8,0.2-3.9l-8.3-10.1c0.3-0.6,0.5-1.1,0.7-1.7 l13-1.3c1.5-0.2,2.6-1.4,2.6-2.9V42.1C97.5,40.6,96.4,39.3,94.8,39.1z M91.6,55.3l-12.2,1.2c-1.2,0.1-2.2,0.9-2.5,2 c-0.5,1.5-1.1,2.9-1.8,4.4c-0.5,1-0.4,2.3,0.3,3.2l7.8,9.5l-7.4,7.4l-9.5-7.8c-0.9-0.7-2.2-0.9-3.2-0.3c-1.5,0.8-2.9,1.4-4.4,1.8 c-1.1,0.4-1.9,1.3-2,2.5l-1.2,12.2H44.7l-1.2-12.2c-0.1-1.2-0.9-2.2-2-2.5c-1.5-0.5-2.9-1.1-4.4-1.8c-1-0.5-2.3-0.4-3.2,0.3 l-9.5,7.8l-7.4-7.4l7.8-9.5c0.7-0.9,0.9-2.2,0.3-3.2c-0.8-1.5-1.4-2.9-1.8-4.4c-0.4-1.1-1.3-1.9-2.5-2L8.4,55.3V44.7l12.2-1.2 c1.2-0.1,2.2-0.9,2.5-2c0.5-1.5,1.1-2.9,1.8-4.4c0.5-1,0.4-2.3-0.3-3.2l-7.8-9.5l7.4-7.4l9.5,7.8c0.9,0.7,2.2,0.9,3.2,0.3 c1.5-0.8,2.9-1.4,4.4-1.8c1.1-0.4,1.9-1.3,2-2.5l1.2-12.2h10.5l1.2,12.2c0.1,1.2,0.9,2.2,2,2.5c1.5,0.5,2.9,1.1,4.4,1.8 c1,0.5,2.3,0.4,3.2-0.3l9.5-7.8l7.4,7.4l-7.8,9.5c-0.7,0.9-0.9,2.2-0.3,3.2c0.8,1.5,1.4,2.9,1.8,4.4c0.4,1.1,1.3,1.9,2.5,2 l12.2,1.2V55.3z"></path></g></g></g></svg>
\ No newline at end of file