aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Timeline/ClientApp/package.json3
-rw-r--r--Timeline/ClientApp/src/app/index.sass3
-rw-r--r--Timeline/ClientApp/src/app/views/common/AppBar.tsx115
-rw-r--r--Timeline/ClientApp/src/app/views/common/LoadingPage.tsx4
-rw-r--r--Timeline/ClientApp/src/app/views/common/SearchInput.tsx8
5 files changed, 45 insertions, 88 deletions
diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index 144560e5..81232c71 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -18,12 +18,14 @@
"lodash": "^4.17.20",
"pepjs": "^0.5.2",
"react": "^16.13.1",
+ "react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"react-i18next": "^11.7.2",
"react-inlinesvg": "^2.0.0",
"react-responsive": "^8.1.0",
"react-router": "^5.2.0",
+ "react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.5.1",
"regenerator-runtime": "^0.13.7",
@@ -71,6 +73,7 @@
"@types/react-dom": "^16.9.8",
"@types/react-responsive": "^8.0.2",
"@types/react-router": "^5.1.8",
+ "@types/react-router-bootstrap": "^0.24.5",
"@types/react-router-dom": "^5.1.5",
"@types/reactstrap": "^8.5.1",
"@types/webpack-env": "^1.15.2",
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index efac4df5..92f8efaf 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -33,9 +33,6 @@ small
right: 0
bottom: 0
-.app-bar
- z-index: 1035
-
.avatar
width: 60px
diff --git a/Timeline/ClientApp/src/app/views/common/AppBar.tsx b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
index aefe0f27..464747c0 100644
--- a/Timeline/ClientApp/src/app/views/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
@@ -1,9 +1,7 @@
import React from "react";
-import { useHistory, matchPath } from "react-router";
-import { Link, NavLink } from "react-router-dom";
-import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap";
-import { useMediaQuery } from "react-responsive";
import { useTranslation } from "react-i18next";
+import { LinkContainer } from "react-router-bootstrap";
+import { Navbar, Nav } from "react-bootstrap";
import { useUser, useAvatar } from "@/services/user";
@@ -11,95 +9,54 @@ import TimelineLogo from "./TimelineLogo";
import BlobImage from "./BlobImage";
const AppBar: React.FC = (_) => {
- const history = useHistory();
const user = useUser();
const avatar = useAvatar(user?.username);
const { t } = useTranslation();
- const isUpMd = useMediaQuery({
- minWidth: getComputedStyle(document.documentElement).getPropertyValue(
- "--breakpoint-md"
- ),
- });
-
- const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
- const toggleMenu = React.useCallback((): void => {
- setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);
- }, []);
-
const isAdministrator = user && user.administrator;
- const rightArea = (
- <div className="ml-auto mr-2">
- {user != null ? (
- <NavLink to={`/users/${user.username}`}>
- <BlobImage
- className="avatar small rounded-circle bg-white"
- blob={avatar}
- />
- </NavLink>
- ) : (
- <NavLink className="text-light" to="/login">
- {t("nav.login")}
- </NavLink>
- )}
- </div>
- );
-
return (
- <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">
- <Link to="/" className="navbar-brand d-flex align-items-center">
- <TimelineLogo style={{ height: "1em" }} />
- Timeline
- </Link>
-
- {isUpMd ? null : rightArea}
+ <Navbar bg="primary" variant="dark" expand="md">
+ <LinkContainer to="/">
+ <Navbar.Brand className="d-flex align-items-center">
+ <TimelineLogo style={{ height: "1em" }} />
+ Timeline
+ </Navbar.Brand>
+ </LinkContainer>
- <NavbarToggler onClick={toggleMenu} />
- <Collapse isOpen={isMenuOpen} navbar>
- <Nav className="mr-auto" navbar>
- <NavItem
- className={
- matchPath(history.location.pathname, "/settings")
- ? "active"
- : undefined
- }
- >
- <NavLink className="nav-link" to="/settings">
- {t("nav.settings")}
- </NavLink>
- </NavItem>
+ <Navbar.Toggle />
+ <Navbar.Collapse>
+ <Nav className="mr-auto">
+ <LinkContainer to="/settings">
+ <Nav.Link>{t("nav.settings")}</Nav.Link>
+ </LinkContainer>
- <NavItem
- className={
- matchPath(history.location.pathname, "/about")
- ? "active"
- : undefined
- }
- >
- <NavLink className="nav-link" to="/about">
- {t("nav.about")}
- </NavLink>
- </NavItem>
+ <LinkContainer to="/about">
+ <Nav.Link>{t("nav.about")}</Nav.Link>
+ </LinkContainer>
{isAdministrator && (
- <NavItem
- className={
- matchPath(history.location.pathname, "/admin")
- ? "active"
- : undefined
- }
- >
- <NavLink className="nav-link" to="/admin">
- Administration
- </NavLink>
- </NavItem>
+ <LinkContainer to="/admin">
+ <Nav.Link>Administration</Nav.Link>
+ </LinkContainer>
+ )}
+ </Nav>
+ <Nav className="ml-auto mr-2">
+ {user != null ? (
+ <LinkContainer to={`/users/${user.username}`}>
+ <BlobImage
+ className="avatar small rounded-circle bg-white"
+ blob={avatar}
+ />
+ </LinkContainer>
+ ) : (
+ <LinkContainer to="/login">
+ <Nav.Link>{t("nav.login")}</Nav.Link>
+ </LinkContainer>
)}
</Nav>
- {isUpMd ? rightArea : null}
- </Collapse>
+ </Navbar.Collapse>
</Navbar>
);
};
diff --git a/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
index a849126d..590fafa0 100644
--- a/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
+++ b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
@@ -1,10 +1,10 @@
import React from "react";
-import { Spinner } from "reactstrap";
+import { Spinner } from "react-bootstrap";
const LoadingPage: React.FC = () => {
return (
<div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center">
- <Spinner style={{ height: "2.5rem", width: "2.5rem" }} color="primary" />
+ <Spinner variant="primary" animation="border" />
</div>
);
};
diff --git a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
index 5a0b0eaa..12e61a5c 100644
--- a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
+++ b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import clsx from "clsx";
-import { Spinner, Input, Button } from "reactstrap";
import { useTranslation } from "react-i18next";
+import { Spinner, Form, Button } from "react-bootstrap";
export interface SearchInputProps {
value: string;
@@ -37,7 +37,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
return (
<div className={clsx("form-inline my-2", props.className)}>
- <Input
+ <Form.Control
className="mr-sm-2"
value={props.value}
onChange={onInputChange}
@@ -49,9 +49,9 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
</div>
<div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
{props.loading ? (
- <Spinner />
+ <Spinner variant="primary" animation="border" />
) : (
- <Button outline color="primary" onClick={props.onButtonClick}>
+ <Button variant="outline-primary" onClick={props.onButtonClick}>
{props.buttonText ?? t("search")}
</Button>
)}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 17:58:59 +0000