mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-13 03:07:28 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[frontend] Settings navigation design (#1652)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

15
web/source/settings/admin/emoji/local/detail.js
View file

@ -28,6 +28,7 @@ const { useComboBoxInput, useFileInput, useValue } = require("../../../lib/form"
const { CategorySelect } = require("../category-select");
const useFormSubmit = require("../../../lib/form/submit");
const { useBaseUrl } = require("../../../lib/navigation/util");
const FakeToot = require("../../../components/fake-toot");
const FormWithData = require("../../../lib/form/form-with-data");
@ -36,16 +37,15 @@ const { FileInput } = require("../../../components/form/inputs");
const MutationButton = require("../../../components/form/mutation-button");
const { Error } = require("../../../components/error");
const base = "/settings/custom-emoji/local";
module.exports = function EmojiDetailRoute() {
let [_match, params] = useRoute(`${base}/:emojiId`);
module.exports = function EmojiDetailRoute({ }) {
const baseUrl = useBaseUrl();
let [_match, params] = useRoute(`${baseUrl}/:emojiId`);
if (params?.emojiId == undefined) {
return <Redirect to={base} />;
return <Redirect to={baseUrl} />;
} else {
return (
<div className="emoji-detail">
<Link to={base}><a>&lt; go back</a></Link>
<Link to={baseUrl}><a>&lt; go back</a></Link>
<FormWithData dataQuery={query.useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
</div>
);
@ -53,6 +53,7 @@ module.exports = function EmojiDetailRoute() {
};
function EmojiDetailForm({ data: emoji }) {
const baseUrl = useBaseUrl();
const form = {
id: useValue("id", emoji.id),
category: useComboBoxInput("category", { source: emoji }),
@ -78,7 +79,7 @@ function EmojiDetailForm({ data: emoji }) {
const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
if (deleteResult.isSuccess) {
return <Redirect to={base} />;
return <Redirect to={baseUrl} />;
}
return (

10
web/source/settings/admin/emoji/local/index.js
View file

@ -25,15 +25,13 @@ const { Switch, Route } = require("wouter");
const EmojiOverview = require("./overview");
const EmojiDetail = require("./detail");
const base = "/settings/custom-emoji/local";
module.exports = function CustomEmoji() {
module.exports = function CustomEmoji({ baseUrl }) {
return (
<Switch>
<Route path={`${base}/:emojiId`}>
<EmojiDetail baseUrl={base} />
<Route path={`${baseUrl}/:emojiId`}>
<EmojiDetail />
</Route>
<EmojiOverview baseUrl={base} />
<EmojiOverview />
</Switch>
);
};

12
web/source/settings/admin/emoji/local/overview.js
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>