forked from mirrors/stickerpicker
Add simple settings section. Fixes #15
This commit is contained in:
Tulir Asokan
parent
6f71cfdd75
commit
9e72458ad0
4 changed files with 33 additions and 2 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
17
web/index.js
17
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) => {
|
||||
|
|
|
|||
|
|
@ -105,3 +105,12 @@ div.sticker
|
|||
|
||||
&.visible
|
||||
display: initial
|
||||
|
||||
div.settings-list
|
||||
display: flex
|
||||
|
||||
button
|
||||
width: 100%
|
||||
margin: .5rem
|
||||
padding: .5rem
|
||||
border-radius: .25rem
|
||||
|
|
|
|||
1
web/res/settings.svg
Normal file
1
web/res/settings.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3 KiB |
Loading…
Reference in a new issue