From 08f8feaec50c63ffd2f51d5589b3015b60e8f859 Mon Sep 17 00:00:00 2001 From: f0x52 Date: Fri, 27 Jan 2023 09:09:26 +0100 Subject: [PATCH] [feature/frontend] filterable local emoji list (#1385) --- web/source/css/base.css | 16 +++-- .../settings/admin/emoji/local/overview.js | 62 +++++++++++++++++-- .../settings/admin/federation/overview.js | 32 +++++----- web/source/settings/style.css | 4 ++ 4 files changed, 89 insertions(+), 25 deletions(-) diff --git a/web/source/css/base.css b/web/source/css/base.css index 9289f18f8..cd65a617e 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -419,11 +419,6 @@ label { display: flex; flex-direction: column; - &.scrolling { - max-height: 40rem; - overflow: auto; - } - .header, .entry { padding: 0.5rem; } @@ -435,6 +430,17 @@ label { font-weight: bold; } + .entries { + display: flex; + flex-direction: column; + + &.scrolling { + height: 20rem; + max-height: 20rem; + overflow: auto; + } + } + input[type=checkbox] { margin-left: 0.5rem; } diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js index f8f61cea1..3a46c56c8 100644 --- a/web/source/settings/admin/emoji/local/overview.js +++ b/web/source/settings/admin/emoji/local/overview.js @@ -20,13 +20,18 @@ const React = require("react"); const { Link } = require("wouter"); +const syncpipe = require("syncpipe"); +const { matchSorter } = require("match-sorter"); const NewEmojiForm = require("./new-emoji"); +const { useTextInput } = require("../../../lib/form"); const query = require("../../../lib/query"); const { useEmojiByCategory } = require("../category-select"); + const Loading = require("../../../components/loading"); const { Error } = require("../../../components/error"); +const { TextInput } = require("../../../components/form/inputs"); module.exports = function EmojiOverview({ baseUrl }) { const { @@ -53,23 +58,70 @@ module.exports = function EmojiOverview({ baseUrl }) { return ( <> -

Custom Emoji (local)

+

Local Custom Emoji

+

+ To use custom emoji in your toots they have to be 'local' to the instance. + You can either upload them here directly, or copy from those already + present on other (known) instances through the Remote Emoji page. +

{content} ); }; function EmojiList({ emoji, baseUrl }) { + const filterField = useTextInput("filter"); + const filter = filterField.value; + const emojiByCategory = useEmojiByCategory(emoji); + /* Filter emoji based on shortcode match with user input, hiding empty categories */ + const { filteredEmoji, hidden } = React.useMemo(() => { + let hidden = emoji.length; + const filteredEmoji = syncpipe(emojiByCategory, [ + (_) => Object.entries(emojiByCategory), + (_) => _.map(([category, entries]) => { + let filteredEntries = matchSorter(entries, filter, { keys: ["shortcode"] }); + if (filteredEntries.length == 0) { + return null; + } else { + hidden -= filteredEntries.length; + return [category, filteredEntries]; + } + }), + (_) => _.filter((value) => value !== null) + ]); + + return { filteredEmoji, hidden }; + }, [filter, emojiByCategory, emoji.length]); + return (

Overview

+ {emoji.length > 0 + ? {emoji.length} custom emoji {hidden > 0 && `(${hidden} filtered)`} + : No custom emoji yet, you can add one below. + }
- {emoji.length == 0 && "No local emoji yet, add one below"} - {Object.entries(emojiByCategory).map(([category, entries]) => { - return ; - })} +
+ +
+
+ {filteredEmoji.length > 0 + ? ( +
+ {filteredEmoji.map(([category, entries]) => { + return ; + })} +
+ ) + :
No local emoji matched your filter.
+ } +
); diff --git a/web/source/settings/admin/federation/overview.js b/web/source/settings/admin/federation/overview.js index b655423a4..48f023ae6 100644 --- a/web/source/settings/admin/federation/overview.js +++ b/web/source/settings/admin/federation/overview.js @@ -76,21 +76,23 @@ module.exports = function InstanceOverview({ baseUrl }) { {blockedInstancesList.length} blocked instance{blockedInstancesList.length != 1 ? "s" : ""} {filtered > 0 && `(${filtered} filtered by search)`} -
- {filteredInstances.map((entry) => { - return ( - - - - {entry.domain} - - - {new Date(entry.created_at).toLocaleString()} - - - - ); - })} +
+
+ {filteredInstances.map((entry) => { + return ( + + + + {entry.domain} + + + {new Date(entry.created_at).toLocaleString()} + + + + ); + })} +
diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 745021418..d46df683a 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -405,6 +405,10 @@ span.form-info { .emoji-list { background: $list-entry-bg; + .header .form-field { + flex: 1 1 auto; + } + .entry { flex-direction: column;