diff --git a/README.md b/README.md
index 42425f3e25f0e5d336a6e17dc52aa8a0bdf00dfe..51af586c29583aa37688335cc1aa57324d30f40d 100644
--- a/README.md
+++ b/README.md
@@ -49,3 +49,5 @@ On an hosted instance of the sticker picker, it is possible to provide optional
- `?theme=[$theme|default|light|black|dark]`
- provides the theme to use for the sticker picker
- `$theme` matches the theme of your Element client
+- `?color=<hex code without the #>`
+ - provides a new accent color for the sticker picker
diff --git a/web/index.html b/web/index.html
index 527ea7bf1b5dae632c55e4283c4df5e37e1e83e2..b34b8992aa6ac2173ab894787d9a2c298fb000af 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,7 +14,9 @@
<link rel="stylesheet" href="style/index.css"/>
<link rel="stylesheet" href="style/spinner.css"/>
+
<script src="src/index.js" type="module"></script>
+ <script src="src/settings/load-accent-color.js" type="module"></script>
<script nomodule>document.body.innerText = "This sticker picker requires modern JavaScript"</script>
</head>
<body>
diff --git a/web/src/index.js b/web/src/index.js
index 50500db24ef3b5430228421a4247e297ddef6a73..fc0d69ad8bc845a7af37f4cd5c80c7b2926b5004 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -14,6 +14,7 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import {html, render, Component} from "../lib/htm/preact.js"
+import {getUrlParameter} from "./utils/get-url-parameter.js"
import {Spinner} from "./spinner.js"
import {SearchBox} from "./search-box.js"
import {giphyIsEnabled, GiphySearchTab, setGiphyAPIKey} from "./giphy.js"
@@ -25,11 +26,7 @@ import * as userSettings from "./user-settings.js"
// then ${PACK_BASE_URL}/${packFile} for each packFile in the packs object of the index.json file.
const PACKS_BASE_URL = "packs"
-let INDEX = `${PACKS_BASE_URL}/index.json`
-const params = new URLSearchParams(document.location.search)
-if (params.has('config')) {
- INDEX = params.get("config")
-}
+const INDEX = getUrlParameter("config") ?? `${PACKS_BASE_URL}/index.json`
// This is updated from packs/index.json
let HOMESERVER_URL = "https://matrix-client.matrix.org"
@@ -74,7 +71,7 @@ const sanitizeString = s => s.toLowerCase().trim()
class App extends Component {
constructor(props) {
super(props)
- this.defaultTheme = params.get("theme")
+ this.defaultTheme = getUrlParameter("theme")
this.state = {
...defaultState,
...defaultSearchState,
@@ -339,11 +336,7 @@ class App extends Component {
const noPacksForSearch = filterActive && packs.length === 0
if (this.state.loading) {
- return html`
- <main class="spinner ${theme}">
- <${Spinner} size=${80} green/>
- </main>
- `
+ return html`<main class="spinner ${theme}"><${Spinner} size=${80} /></main>`
} else if (this.state.error) {
return html`
<main class="error ${theme}">
diff --git a/web/src/settings/load-accent-color.js b/web/src/settings/load-accent-color.js
new file mode 100644
index 0000000000000000000000000000000000000000..760007198c91707cdc8aac4c7976d8aab3ec5a6d
--- /dev/null
+++ b/web/src/settings/load-accent-color.js
@@ -0,0 +1,7 @@
+import { getUrlParameter } from "../utils/get-url-parameter.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+ const accentColor = getUrlParameter("color");
+ const body = document.querySelector("body");
+ body.style.cssText = !!accentColor ? `--accent-color: #${accentColor}` : null;
+});
diff --git a/web/src/spinner.js b/web/src/spinner.js
index e89dd02bdd80afea846d028241105a19d5ca37e4..95691a5fc88d3b7c84a145964f07222bffb678d9 100644
--- a/web/src/spinner.js
+++ b/web/src/spinner.js
@@ -15,25 +15,27 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { html } from "../lib/htm/preact.js"
-export const Spinner = ({ size = 40, noCenter = false, noMargin = false, green = false }) => {
+export const Spinner = ({ size = 40, noCenter = false, noMargin = false }) => {
let margin = 0
+
if (!isNaN(+size)) {
size = +size
margin = noMargin ? 0 : `${Math.round(size / 6)}px`
size = `${size}px`
}
- const noInnerMargin = !noCenter || !margin
+
+ const effectiveMargin = !noCenter || !margin ? 0 : margin
+
const comp = html`
- <div style="width: ${size}; height: ${size}; margin: ${noInnerMargin ? 0 : margin} 0;"
- class="sk-chase ${green && "green"}">
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- <div class="sk-chase-dot" />
- </div>
- `
+ <div style="width: ${size}; height: ${size}; margin: ${effectiveMargin} 0" class="sk-chase">
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ <div class="sk-chase-dot" />
+ </div>
+ `
if (!noCenter) {
return html`<div style="margin: ${margin} 0;" class="sk-center-wrapper">${comp}</div>`
}
diff --git a/web/src/utils/get-url-parameter.js b/web/src/utils/get-url-parameter.js
new file mode 100644
index 0000000000000000000000000000000000000000..afd873bc964c4817bc1e44f013ee8380e14d8ad7
--- /dev/null
+++ b/web/src/utils/get-url-parameter.js
@@ -0,0 +1,4 @@
+export const getUrlParameter = (search) => {
+ const params = new URLSearchParams(window.location.search);
+ return params.get(search);
+};
diff --git a/web/style/index.css b/web/style/index.css
index dccd90412f17ed141c088746906da562eb819806..70613faa4304d4d1a8ec89c5b2ba7df2ce79c73f 100644
--- a/web/style/index.css
+++ b/web/style/index.css
@@ -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{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) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:#fff}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-dark .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:#000}main.theme-black .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}div.powered-by-giphy{padding:1rem}div.powered-by-giphy>img{width:100%}.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)}.icon.icon-search{--icon-image: url(../res/search.svg)}.icon.icon.icon-giphy{background:center/contain no-repeat url(../res/giphy-light.svg);mask:unset}.icon.icon-reset{--icon-image: url(../res/reset.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(calc(12vw + 2px) + calc(2 * 0.7rem + 2 * 0.5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}section.stickerpack#pack-giphy{display:flex;justify-content:space-between;flex-direction:column;min-height:100%}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.search-box{display:flex;margin:.5rem;padding:0;border-radius:.4rem;background-color:var(--search-box-color);opacity:.5;transition:all .1s;border:1px solid transparent}div.search-box input,div.search-box .icon-display{color:var(--text-color);outline:none;border:none;height:1rem;margin:0;padding:.7rem;background-color:transparent;-webkit-tap-highlight-color:transparent}div.search-box .icon-display{width:1rem}div.search-box .icon-display.reset-click-zone{cursor:pointer}div.search-box .icon-display .icon{display:block;width:1rem;height:1rem}div.search-box .icon-display .icon-search{opacity:.5}div.search-box input{flex-grow:1;font-size:1rem}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:not([type=checkbox]){width:100%}.gif-indicator{position:absolute;top:10px;left:10px;background-color:var(--highlight-color);color:var(--text-color);padding:5px;border-radius:3px;opacity:.7}
+*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row));--accent-color: #00C853;--spinner-bg-color: var(--accent-color)}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) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:#fff}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-dark .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:#000}main.theme-black .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}div.powered-by-giphy{padding:1rem}div.powered-by-giphy>img{width:100%}input[type=checkbox],input[type=range]{accent-color:var(--accent-color)}.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)}.icon.icon-search{--icon-image: url(../res/search.svg)}.icon.icon.icon-giphy{background:center/contain no-repeat url(../res/giphy-light.svg);mask:unset}.icon.icon-reset{--icon-image: url(../res/reset.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:var(--accent-color)}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(calc(12vw + 2px) + calc(2 * 0.7rem + 2 * 0.5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}section.stickerpack#pack-giphy{display:flex;justify-content:space-between;flex-direction:column;min-height:100%}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.search-box{display:flex;margin:.5rem;padding:0;border-radius:.4rem;background-color:var(--search-box-color);opacity:.5;transition:all .1s;border:1px solid transparent}div.search-box input,div.search-box .icon-display{color:var(--text-color);outline:none;border:none;height:1rem;margin:0;padding:.7rem;background-color:transparent;-webkit-tap-highlight-color:transparent}div.search-box .icon-display{width:1rem}div.search-box .icon-display.reset-click-zone{cursor:pointer}div.search-box .icon-display .icon{display:block;width:1rem;height:1rem}div.search-box .icon-display .icon-search{opacity:.5}div.search-box input{flex-grow:1;font-size:1rem}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:not([type=checkbox]){width:100%}.gif-indicator{position:absolute;top:10px;left:10px;background-color:var(--highlight-color);color:var(--text-color);padding:5px;border-radius:3px;opacity:.7}
diff --git a/web/style/index.sass b/web/style/index.sass
index 48d7ad3719a16b27063be9984feef6d93cc96caf..0b0f36342405731df873428014043ded994589e9 100644
--- a/web/style/index.sass
+++ b/web/style/index.sass
@@ -26,6 +26,8 @@ h1
\:root
--stickers-per-row: 4
--sticker-size: calc(100vw / var(--stickers-per-row))
+ --accent-color: #00C853
+ --spinner-bg-color: var(--accent-color)
$nav-sticker-size: 12vw
$nav-bottom-highlight: 2px
@@ -88,6 +90,9 @@ div.powered-by-giphy
> img
width: 100%
+input[type="checkbox"],input[type="range"]
+ accent-color: var(--accent-color)
+
.icon
width: 100%
height: 100%
@@ -109,7 +114,7 @@ div.powered-by-giphy
&.icon.icon-giphy
background: center / contain no-repeat url(../res/giphy-light.svg)
mask: unset
-
+
&.icon-reset
--icon-image: url(../res/reset.svg)
@@ -121,7 +126,7 @@ nav
border-bottom: $nav-bottom-highlight solid transparent
&.visible
- border-bottom-color: green
+ border-bottom-color: var(--accent-color)
> div.sticker
width: $nav-sticker-size
diff --git a/web/style/spinner.css b/web/style/spinner.css
index de03d9ceef65decf9e338aeb9457fa49149bf3c9..e7ffee4ce302cb004950686deb1a51404a275e82 100644
--- a/web/style/spinner.css
+++ b/web/style/spinner.css
@@ -1 +1 @@
-.sk-center-wrapper{width:100%;display:flex;justify-content:space-around}.sk-chase{position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase.green>.sk-chase-dot:before{background-color:#00c853}.sk-chase>.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2s infinite ease-in-out both}.sk-chase>.sk-chase-dot:before{content:"";display:block;width:25%;height:25%;border-radius:100%;animation:sk-chase-dot-before 2s infinite ease-in-out both;background-color:#fff}.sk-chase>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1)}}
+.sk-center-wrapper{width:100%;display:flex;justify-content:space-around}.sk-chase{position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase>.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2s infinite ease-in-out both}.sk-chase>.sk-chase-dot:before{content:"";display:block;width:25%;height:25%;border-radius:100%;animation:sk-chase-dot-before 2s infinite ease-in-out both;background-color:var(--accent-color)}.sk-chase>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1)}}
diff --git a/web/style/spinner.sass b/web/style/spinner.sass
index cbc9042f0e3a7da552d3acd2f3acada28165cd55..461aff3001390ac3b010ecab45135e6770c9f8ed 100644
--- a/web/style/spinner.sass
+++ b/web/style/spinner.sass
@@ -8,9 +8,6 @@
position: relative
animation: sk-chase 2.5s infinite linear both
- &.green > .sk-chase-dot:before
- background-color: #00C853
-
> .sk-chase-dot
width: 100%
height: 100%
@@ -26,7 +23,7 @@
height: 25%
border-radius: 100%
animation: sk-chase-dot-before 2.0s infinite ease-in-out both
- background-color: #FFF
+ background-color: var(--accent-color)
&:nth-child(1)
animation-delay: -1.1s