SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[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
parent 6cf6613540
commit 0746ef741a
20 changed files with 627 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/source/settings/index.js
View File

@@ -23,61 +23,59 @@ const React = require("react");
const ReactDom = require("react-dom/client");
const { Provider } = require("react-redux");
const { PersistGate } = require("redux-persist/integration/react");
const { Switch, Route, Redirect } = require("wouter");
const query = require("./lib/query");
const { store, persistor } = require("./redux");
const { createNavigation, Menu, Item } = require("./lib/navigation");
const AuthorizationGate = require("./components/authorization");
const Loading = require("./components/loading");
const UserLogoutCard = require("./components/user-logout-card");
const { RoleContext } = require("./lib/navigation/util");
require("./style.css");
// TODO: nested categories?
const nav = {
"User": {
"Profile": require("./user/profile.js"),
"Settings": require("./user/settings.js"),
},
"Admin": {
adminOnly: true,
"Instance Settings": require("./admin/settings.js"),
"Actions": require("./admin/actions"),
"Federation": require("./admin/federation"),
"Reports": require("./admin/reports")
},
"Custom Emoji": {
adminOnly: true,
"Local": require("./admin/emoji/local"),
"Remote": require("./admin/emoji/remote"),
}
};
const { sidebar, panelRouter } = require("./lib/get-views")(nav);
const { Sidebar, ViewRouter } = createNavigation("/settings", [
Menu("User", [
Item("Profile", { icon: "fa-user" }, require("./user/profile")),
Item("Settings", { icon: "fa-cogs" }, require("./user/settings")),
]),
Menu("Moderation", {
url: "admin",
permissions: ["admin"]
}, [
Item("Reports", { icon: "fa-flag", wildcard: true }, require("./admin/reports")),
Menu("Federation", { icon: "fa-hubzilla" }, [
Item("Federation", { icon: "fa-hubzilla", url: "", wildcard: true }, require("./admin/federation")),
Item("Import/Export", { icon: "fa-floppy-o", wildcard: true }, require("./admin/federation/import-export")),
])
]),
Menu("Administration", {
url: "admin",
defaultUrl: "/settings/admin/settings",
permissions: ["admin"]
}, [
Item("Actions", { icon: "fa-bolt" }, require("./admin/actions")),
Menu("Custom Emoji", { icon: "fa-smile-o" }, [
Item("Local", { icon: "fa-home", wildcard: true }, require("./admin/emoji/local")),
Item("Remote", { icon: "fa-cloud" }, require("./admin/emoji/remote"))
]),
Item("Settings", { icon: "fa-sliders" }, require("./admin/settings"))
])
]);
function App({ account }) {
const isAdmin = account.role.name == "admin";
const [logoutQuery] = query.useLogoutMutation();
const permissions = [account.role.name];
return (
<>
<RoleContext.Provider value={permissions}>
<div className="sidebar">
{sidebar.all}
{isAdmin && sidebar.admin}
<button className="logout" onClick={logoutQuery}>
Log out
</button>
<UserLogoutCard />
<Sidebar />
</div>
<section className="with-sidebar">
<Switch>
{panelRouter.all}
{isAdmin && panelRouter.admin}
<Route>
<Redirect to="/settings/user" />
</Route>
</Switch>
<ViewRouter />
</section>
</>
</RoleContext.Provider>
);
}