stryan/saintnet_stickers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow scrolling navbar with mouse wheel. Fixes #9

Browse Source
This commit is contained in:
Tulir Asokan 2020-09-06 18:52:25 +03:00
parent 8c45207b0f
commit bddb5608bc
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/index.js
View File

@ -38,7 +38,9 @@ class App extends Component {
this.state.frequentlyUsed.stickers = this._getStickersByID(this.state.frequentlyUsed.stickerIDs) this.state.frequentlyUsed.stickers = this._getStickersByID(this.state.frequentlyUsed.stickerIDs)
this.imageObserver = null this.imageObserver = null
this.packListRef = null this.packListRef = null
this.navRef = null
this.sendSticker = this.sendSticker.bind(this) this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this)
} }
_getStickersByID(ids) { _getStickersByID(ids) {
@ -137,6 +139,10 @@ class App extends Component {
widgetAPI.sendSticker(sticker) widgetAPI.sendSticker(sticker)
} }
navScroll(evt) {
this.navRef.scrollLeft += evt.deltaY * 12
}
render() { render() {
if (this.state.loading) { if (this.state.loading) {
return html`<main class="spinner"><${Spinner} size=${80} green /></main>` return html`<main class="spinner"><${Spinner} size=${80} green /></main>`
@ -149,7 +155,7 @@ class App extends Component {
return html`<main class="empty"><h1>No packs found 😿</h1></main>` return html`<main class="empty"><h1>No packs found 😿</h1></main>`
} }
return html`<main class="has-content"> return html`<main class="has-content">
<nav> <nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓️" /> <${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓️" />
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)} ${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
</nav> </nav>