[frontend] Settings navigation design (#1652)

* change header image alignment

(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)

* big mess navigation refactor

* bit of cleanup

* minor css tweaks

* fix error rendering code for remote emoji

* refactor navigation structure code

* refactor styling

* fix className

* stash

* restructure navigation generation

* url wildcard formatting

* remove un-implemented User menu entry

* remove commented lines

* clarify permissions check

* invert permissions logic for clarity
This commit is contained in:
f0x52 2023-03-29 12:18:45 +02:00 committed by GitHub
commit 0746ef741a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 627 additions and 312 deletions

View file

@ -29,12 +29,13 @@ const { useTextInput } = require("../../../lib/form");
const query = require("../../../lib/query");
const { useEmojiByCategory } = require("../category-select");
const { useBaseUrl } = require("../../../lib/navigation/util");
const Loading = require("../../../components/loading");
const { Error } = require("../../../components/error");
const { TextInput } = require("../../../components/form/inputs");
module.exports = function EmojiOverview({ baseUrl }) {
module.exports = function EmojiOverview({ }) {
const {
data: emoji = [],
isLoading,
@ -51,7 +52,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
} else {
content = (
<>
<EmojiList emoji={emoji} baseUrl={baseUrl} />
<EmojiList emoji={emoji} />
<NewEmojiForm emoji={emoji} />
</>
);
@ -70,7 +71,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
);
};
function EmojiList({ emoji, baseUrl }) {
function EmojiList({ emoji }) {
const filterField = useTextInput("filter");
const filter = filterField.value;
@ -116,7 +117,7 @@ function EmojiList({ emoji, baseUrl }) {
? (
<div className="entries scrolling">
{filteredEmoji.map(([category, entries]) => {
return <EmojiCategory key={category} category={category} entries={entries} baseUrl={baseUrl} />;
return <EmojiCategory key={category} category={category} entries={entries} />;
})}
</div>
)
@ -128,7 +129,8 @@ function EmojiList({ emoji, baseUrl }) {
);
}
function EmojiCategory({ category, entries, baseUrl }) {
function EmojiCategory({ category, entries }) {
const baseUrl = useBaseUrl();
return (
<div className="entry">
<b>{category}</b>