diff --git a/web/index.css b/web/index.css index d0ea06c..8877da6 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 348277a..c116130 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 {
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} />
` } } +const reload = () => window.location.reload() + +const Settings = () => html` +
+

Settings

+
+ +
+
+` + // 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 a2e84fa..d36e3f0 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 0000000..51f966f --- /dev/null +++ b/web/res/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file