From 497a45f87a580c70e251b0355207761351c566c4 Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Wed, 20 Dec 2023 21:58:23 +0100
Subject: [PATCH] Frequently used displays exactly [n] lines
---
web/src/constants.js | 2 ++
web/src/index.js | 13 ++++++++++---
2 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/web/src/constants.js b/web/src/constants.js
index de75b5d..7d3d436 100644
--- a/web/src/constants.js
+++ b/web/src/constants.js
@@ -2,3 +2,5 @@ export const DEFAULT_PER_ROW = 4;
export const MIN_PER_ROW = 2;
export const MAX_PER_ROW = 10;
export const FREQUENTLY_USED_ROWS = 3;
+
+export const FREQUENTLY_USED_PACKID = 'frequently-used'
diff --git a/web/src/index.js b/web/src/index.js
index 573b6cd..ffa3f3d 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -61,7 +61,7 @@ const defaultSearchState = {
}
const makeFrequentlyUsedState = ({ stickerIDs, stickers } = {}) => ({
- id: "frequently-used",
+ id: constants.FREQUENTLY_USED_PACKID,
title: "Frequently used",
stickerIDs: stickerIDs ?? [],
stickers: stickers ?? [],
@@ -337,6 +337,12 @@ class App extends Component {
this.navRef.scrollLeft += evt.deltaY
}
+ maxToDisplayForPack(pack) {
+ return pack.id === constants.FREQUENTLY_USED_PACKID ?
+ constants.FREQUENTLY_USED_ROWS * this.state.stickersPerRow :
+ undefined
+ }
+
render() {
this.applyThemeToBody(this.state.theme)
@@ -394,6 +400,7 @@ class App extends Component {
pack=${pack}
send=${this.sendSticker}
hideGifIndicator=${this.state.userSettings.hideGifIndicator}
+ maxToDisplayForPack=${this.maxToDisplayForPack(pack)}
/>`)}
<${Settings} app=${this}/>
</div>
@@ -463,11 +470,11 @@ const NavBarItem = ({pack, iconOverride = null, onClickOverride = null, extraCla
</a>
`
-const Pack = ({ pack, send, hideGifIndicator }) => html`
+const Pack = ({ pack, send, hideGifIndicator, maxToDisplay }) => html`
<section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}>
<h1>${pack.title}</h1>
<div class="sticker-list">
- ${pack.stickers.map(sticker => html`
+ ${pack.stickers.slice(0, maxToDisplay).map(sticker => html`
<${Sticker} key=${sticker.id} sticker=${sticker} send=${send} hideGifIndicator=${hideGifIndicator} />
`)}
</div>
--
GitLab