Mirror
/
stickerpicker
mirror of https://github.com/maunium/stickerpicker.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add support for dark theme. Fixes #17

pull/26/head
Tulir Asokan 4 years ago
parent
32058373ff
commit
a0470519d7
5 changed files with 90 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      README.md
  2. 2
      web/index.html
  3. 53
      web/src/index.js
  4. 2
      web/style/index.css
  5. 49
      web/style/index.sass

5
README.md
View File

@ -30,7 +30,7 @@ This requires logging in with your account instead of a bot token.
"stickerpicker": { "stickerpicker": {
"content": { "content": {
"type": "m.stickerpicker", "type": "m.stickerpicker",
"url": "https://your.sticker.picker.url/index.html",
"url": "https://your.sticker.picker.url/?theme=$theme",
"name": "Stickerpicker", "name": "Stickerpicker",
"data": {} "data": {}
}, },
@ -44,6 +44,9 @@ This requires logging in with your account instead of a bot token.
If you do not yet have a `m.widgets` event, simply create it with that content. If you do not yet have a `m.widgets` event, simply create it with that content.
You can also [use the client-server API directly][1] instead of using Element Web. You can also [use the client-server API directly][1] instead of using Element Web.
The `theme=$theme` query parameter will make the widget conform to Element's theme automatically.
You can also use `light`, `dark` or `black` instead of `$theme` to always use a specific theme.
3. Open the sticker picker and enjoy the fast sticker picking experience. 3. Open the sticker picker and enjoy the fast sticker picking experience.
[1]: https://matrix.org/docs/spec/client_server/latest#put-matrix-client-r0-user-userid-account-data-type [1]: https://matrix.org/docs/spec/client_server/latest#put-matrix-client-r0-user-userid-account-data-type

2
web/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Maunium sticker picker</title> <title>Maunium sticker picker</title>
<link rel="modulepreload" href="src/widget-api.js"/> <link rel="modulepreload" href="src/widget-api.js"/>

53
web/src/index.js
View File

@ -20,14 +20,23 @@ const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${
// This is also used to fix scrolling to sections on Element iOS // This is also used to fix scrolling to sections on Element iOS
const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/) const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
export const parseQuery = str => Object.fromEntries(
str.split("&")
.map(part => part.split("="))
.map(([key, value = ""]) => [key, value]))
const supportedThemes = ["light", "dark", "black"]
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.defaultTheme = parseQuery(location.search.substr(1)).theme
this.state = { this.state = {
packs: [], packs: [],
loading: true, loading: true,
error: null, error: null,
stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"), stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
theme: localStorage.mauStickerThemeOverride || this.defaultTheme,
frequentlyUsed: { frequentlyUsed: {
id: "frequently-used", id: "frequently-used",
title: "Frequently used", title: "Frequently used",
@ -35,6 +44,12 @@ class App extends Component {
stickers: [], stickers: [],
}, },
} }
if (!supportedThemes.includes(this.state.theme)) {
this.state.theme = "light"
}
if (!supportedThemes.includes(this.defaultTheme)) {
this.defaultTheme = "light"
}
this.stickersByID = new Map(JSON.parse(localStorage.mauFrequentlyUsedStickerCache || "[]")) this.stickersByID = new Map(JSON.parse(localStorage.mauFrequentlyUsedStickerCache || "[]"))
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
@ -73,6 +88,16 @@ class App extends Component {
this.packListRef.scrollTop = this.packListRef.scrollHeight this.packListRef.scrollTop = this.packListRef.scrollHeight
} }
setTheme(theme) {
if (theme === "default") {
delete localStorage.mauStickerThemeOverride
this.setState({ theme: this.defaultTheme })
} else {
localStorage.mauStickerThemeOverride = theme
this.setState({ theme: theme })
}
}
reloadPacks() { reloadPacks() {
this.imageObserver.disconnect() this.imageObserver.disconnect()
this.sectionObserver.disconnect() this.sectionObserver.disconnect()
@ -189,21 +214,22 @@ class App extends Component {
} }
render() { render() {
const theme = `theme-${this.state.theme}`
if (this.state.loading) { if (this.state.loading) {
return html`<main class="spinner"><${Spinner} size=${80} green /></main>`
return html`<main class="spinner ${theme}"><${Spinner} size=${80} green /></main>`
} else if (this.state.error) { } else if (this.state.error) {
return html`<main class="error">
return html`<main class="error ${theme}">
<h1>Failed to load packs</h1> <h1>Failed to load packs</h1>
<p>${this.state.error}</p> <p>${this.state.error}</p>
</main>` </main>`
} else if (this.state.packs.length === 0) { } else if (this.state.packs.length === 0) {
return html`<main class="empty"><h1>No packs found 😿</h1></main>`
return html`<main class="empty ${theme}"><h1>No packs found 😿</h1></main>`
} }
return html`<main class="has-content">
return html`<main class="has-content ${theme}">
<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}> <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="recent" />
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)} ${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
<${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="res/settings.svg" altOverride="⚙️️" />
<${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="settings" />
</nav> </nav>
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}> <div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} /> <${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
@ -225,6 +251,15 @@ const Settings = ({ app }) => html`
value=${app.state.stickersPerRow} value=${app.state.stickersPerRow}
onInput=${evt => app.setStickersPerRow(evt.target.value)} /> onInput=${evt => app.setStickersPerRow(evt.target.value)} />
</div> </div>
<div>
<label for="theme">Theme: </label>
<select name="theme" id="theme" onChange=${evt => app.setTheme(evt.target.value)}>
<option value="default">Default</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="black">Black</option>
</select>
</div>
</div> </div>
</section> </section>
` `
@ -237,12 +272,12 @@ const scrollToSection = (evt, id) => {
evt.preventDefault() evt.preventDefault()
} }
const NavBarItem = ({ pack, iconOverride = null, altOverride = null }) => html`
const NavBarItem = ({ pack, iconOverride = null }) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title} <a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}
onClick=${isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined}> onClick=${isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined}>
<div class="sticker ${iconOverride ? "icon" : ""}">
<div class="sticker">
${iconOverride ? html` ${iconOverride ? html`
<img src=${iconOverride} alt=${altOverride} class="visible"/>
<span class="icon icon-${iconOverride}"/>
` : html` ` : html`
<img src=${makeThumbnailURL(pack.stickers[0].url)} <img src=${makeThumbnailURL(pack.stickers[0].url)}
alt=${pack.stickers[0].body} class="visible" /> alt=${pack.stickers[0].body} class="visible" />

2
web/style/index.css
View File

@ -1 +1 @@
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) auto}nav{display:flex;overflow-x:auto;height:calc(12vw + 2px);background-color:white}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}nav>a>div.sticker.icon>img{width:70%;height:70%;padding:15%}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:#eee}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) auto}main.theme-light{--highlight-color: #eee;--text-color: black;background-color:white}main.theme-dark{--highlight-color: #444;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--text-color: white;background-color:black}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}

49
web/style/index.sass
View File

@ -23,6 +23,8 @@ $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight}) $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
main main
color: var(--text-color)
&.spinner &.spinner
margin-top: 5rem margin-top: 5rem
@ -42,25 +44,49 @@ main
display: grid display: grid
grid-template-rows: $nav-height auto grid-template-rows: $nav-height auto
main.theme-light
--highlight-color: #eee
--text-color: black
background-color: white
main.theme-dark
--highlight-color: #444
--text-color: white
background-color: #22262e
main.theme-black
--highlight-color: #222
--text-color: white
background-color: black
.icon
width: 100%
height: 100%
background-color: var(--text-color)
mask-size: contain
-webkit-mask-size: contain
mask-image: var(--icon-image)
-webkit-mask-image: var(--icon-image)
&.icon-settings
--icon-image: url(../res/settings.svg)
&.icon-recent
--icon-image: url(../res/recent.svg)
nav nav
display: flex display: flex
overflow-x: auto overflow-x: auto
height: $nav-height
background-color: white
> a > a
border-bottom: $nav-bottom-highlight solid transparent border-bottom: $nav-bottom-highlight solid transparent
&.visible &.visible
border-bottom-color: green border-bottom-color: green
> div.sticker > div.sticker
width: $nav-sticker-size width: $nav-sticker-size
height: $nav-sticker-size height: $nav-sticker-size
> div.sticker.icon > img
width: 70%
height: 70%
padding: 15%
div.pack-list, nav div.pack-list, nav
scrollbar-width: none scrollbar-width: none
@ -99,7 +125,7 @@ div.sticker
box-sizing: border-box box-sizing: border-box
&:hover &:hover
background-color: #eee
background-color: var(--highlight-color)
> img > img
display: none display: none
@ -109,6 +135,11 @@ div.sticker
&.visible &.visible
display: initial display: initial
> .icon
width: 70%
height: 70%
margin: 15%
div.settings-list div.settings-list
display: flex display: flex
flex-direction: column flex-direction: column

Write Preview
Loading…
Cancel
Save