[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
superseriousbusiness · Mar 29, 2023 · 0746ef7 · 0746ef7
1 parent 6cf6613
commit 0746ef7
Show file tree

Hide file tree

Showing 20 changed files with 624 additions and 309 deletions.
diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
@@ -101,15 +101,15 @@ $input-border: $blue1;
 $input-error-border: $error3;
 $input-focus-border: $blue3;
 
-$settings-nav-bg: $bg-accent;
-$settings-nav-header-fg: $gray1;
-$settings-nav-header-bg: $orange1;
+$settings-nav-bg: $bg;
+$settings-nav-header-fg: $orange2;
 
 $settings-nav-bg-hover: $gray3;
-/* $settings-nav-fg-hover: $gray1; */
+$settings-nav-fg-hover: $fg;
 
-$settings-nav-bg-active: $gray2;
-/* $settings-nav-fg-active: $orange2; */
+$settings-nav-bg-active: $blue3;
+$settings-nav-border-active: $info-bg;
+$settings-nav-fg-active: $gray2;
 
 $error-fg: $error1;
 $error-bg: $error2;

diff --git a/web/source/css/base.css b/web/source/css/base.css
@@ -97,11 +97,10 @@ header {
 header a {
 	margin: 2rem;
 	display: flex;
-	flex-direction: column;
 	flex-wrap: wrap;
+	gap: 2rem;
 
 	img {
-		margin-bottom: 1rem;
 		align-self: center;
 		height: 6rem;
 	}
@@ -120,7 +119,6 @@ header a {
 }
 
 .excerpt-top {
-	margin-top: -1rem;
 	margin-bottom: 2rem;
 	font-style: italic;
 	font-weight: normal;
@@ -515,41 +513,37 @@ label {
 		margin-bottom: 0;
 	}
 
-	.contact-account-card {
-		/* display: inline-grid;
-		grid-template-columns: 4rem auto;
-		grid-template-rows: 4rem;
-		gap: 1rem;
-		padding: 0.5rem; */
-		display: inline-grid;
-		grid-template-columns: auto 1fr;
-		grid-template-rows: auto auto;
-		text-decoration: none;
-		gap: 0.5rem 1rem;
-		border-radius: $br;
-		padding: 0.5rem;
-		min-width: 40%;
-		margin-bottom: 0.3rem;
+}
 
-		background: $list-entry-bg;
+.account-card {
+	display: inline-grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto auto;
+	text-decoration: none;
+	gap: 0.5rem 1rem;
+	border-radius: $br;
+	padding: 0.5rem;
+	min-width: 40%;
+	margin-bottom: 0.3rem;
 
-		&:hover {
-			background: $list-entry-alternate-bg;
-		}
+	background: $list-entry-bg;
 
-		h3 {
-			align-self: end;
-			margin: 0;
-			color: $fg;
-		}
+	&:hover {
+		background: $list-entry-alternate-bg;
+	}
 
-		img.avatar {
-			border-radius: 0.5rem;
-			width: 5rem;
-			height: 5rem;
-			object-fit: cover;
-			grid-row: 1 / span 2;
-		}
+	h3 {
+		align-self: end;
+		margin: 0;
+		color: $fg;
+	}
+
+	img.avatar {
+		border-radius: 0.5rem;
+		width: 5rem;
+		height: 5rem;
+		object-fit: cover;
+		grid-row: 1 / span 2;
 	}
 }
 

diff --git a/web/source/settings/admin/emoji/local/detail.js b/web/source/settings/admin/emoji/local/detail.js
@@ -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,23 +37,23 @@ 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>
 		);
 	}
 };
 
 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 (

diff --git a/web/source/settings/admin/emoji/local/index.js b/web/source/settings/admin/emoji/local/index.js
@@ -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>
 	);
 };
diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
@@ -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>

diff --git a/web/source/settings/admin/emoji/remote/index.js b/web/source/settings/admin/emoji/remote/index.js
@@ -25,6 +25,7 @@ const ParseFromToot = require("./parse-from-toot");
 
 const query = require("../../../lib/query");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function RemoteEmoji() {
 	// local emoji are queried for shortcode collision detection
@@ -42,7 +43,7 @@ module.exports = function RemoteEmoji() {
 		<>
 			<h1>Custom Emoji (remote)</h1>
 			{error &&
-				<div className="error accent">{error}</div>
+				<Error error={error} />
 			}
 			{isLoading
 				? <Loading />

diff --git a/web/source/settings/admin/federation/import-export/form.jsx b/web/source/settings/admin/federation/import-export/form.jsx
@@ -79,7 +79,7 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 						showError={false}
 					/>
 					<label className="button with-icon">
-						<i class="fa fa-fw " aria-hidden="true" />
+						<i className="fa fa-fw " aria-hidden="true" />
 						Import file
 						<input
 							type="file"

diff --git a/web/source/settings/admin/federation/import-export/index.jsx b/web/source/settings/admin/federation/import-export/index.jsx
@@ -33,9 +33,7 @@ const useFormSubmit = require("../../../lib/form/submit");
 const ProcessImport = require("./process");
 const ImportExportForm = require("./form");
 
-const baseUrl = "/settings/admin/federation/import-export";
-
-module.exports = function ImportExport() {
+module.exports = function ImportExport({ baseUrl }) {
 	const form = {
 		domains: useTextInput("domains"),
 		exportType: useTextInput("exportType", { defaultValue: "plain", dontReset: true })

diff --git a/web/source/settings/admin/federation/index.js b/web/source/settings/admin/federation/index.js
@@ -22,13 +22,11 @@
 const React = require("react");
 const { Switch, Route } = require("wouter");
 
-const baseUrl = `/settings/admin/federation`;
-
 const InstanceOverview = require("./overview");
 const InstanceDetail = require("./detail");
 const InstanceImportExport = require("./import-export");
 
-module.exports = function Federation({ }) {
+module.exports = function Federation({ baseUrl }) {
 	return (
 		<Switch>
 			<Route path={`${baseUrl}/import-export/:list?`}>

diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx
@@ -34,8 +34,10 @@ const { TextArea } = require("../../components/form/inputs");
 
 const MutationButton = require("../../components/form/mutation-button");
 const Username = require("./username");
+const { useBaseUrl } = require("../../lib/navigation/util");
 
-module.exports = function ReportDetail({ baseUrl }) {
+module.exports = function ReportDetail({ }) {
+	const baseUrl = useBaseUrl();
 	let [_match, params] = useRoute(`${baseUrl}/:reportId`);
 	if (params?.reportId == undefined) {
 		return <Redirect to={baseUrl} />;

diff --git a/web/source/settings/admin/reports/index.jsx b/web/source/settings/admin/reports/index.jsx
@@ -28,23 +28,22 @@ const FormWithData = require("../../lib/form/form-with-data");
 
 const ReportDetail = require("./detail");
 const Username = require("./username");
+const { useBaseUrl } = require("../../lib/navigation/util");
 
-const baseUrl = "/settings/admin/reports";
-
-module.exports = function Reports() {
+module.exports = function Reports({ baseUrl }) {
 	return (
 		<div className="reports">
 			<Switch>
 				<Route path={`${baseUrl}/:reportId`}>
-					<ReportDetail baseUrl={baseUrl} />
+					<ReportDetail />
 				</Route>
-				<ReportOverview baseUrl={baseUrl} />
+				<ReportOverview />
 			</Switch>
 		</div>
 	);
 };
 
-function ReportOverview({ _baseUrl }) {
+function ReportOverview({ }) {
 	return (
 		<>
 			<h1>Reports</h1>
@@ -79,6 +78,7 @@ function ReportsList({ data: reports }) {
 }
 
 function ReportEntry({ report }) {
+	const baseUrl = useBaseUrl();
 	const from = report.account;
 	const target = report.target_account;
 

diff --git a/web/source/settings/components/nav-button.jsx b/web/source/settings/components/nav-button.jsx