Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

In-app help manual (#628)

Browse Source
This commit is contained in:
WithoutPants
2020-06-23 10:15:02 +10:00
committed by GitHub
parent 534d47500b
commit 83f8bc0832
19 changed files with 1555 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
ui/v2.5/src/components/MainNavbar.tsx
View File

@@ -12,6 +12,7 @@ import { Link, NavLink, useLocation } from "react-router-dom";
import { SessionUtils } from "src/utils";
import { Icon } from "src/components/Shared";
import { Manual } from "./Help/Manual";
interface IMenuItem {
message: MessageDescriptor;
@@ -91,6 +92,8 @@ const menuItems: IMenuItem[] = [
export const MainNavbar: React.FC = () => {
const location = useLocation();
const [expanded, setExpanded] = useState(false);
const [showManual, setShowManual] = useState(false);
// react-bootstrap typing bug
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const navbarRef = useRef<any>();
@@ -147,55 +150,65 @@ export const MainNavbar: React.FC = () => {
}
return (
<Navbar
collapseOnSelect
fixed="top"
variant="dark"
bg="dark"
className="top-nav"
expand="lg"
expanded={expanded}
onToggle={setExpanded}
ref={navbarRef}
>
<Navbar.Brand
as="div"
className="order-1 order-md-0"
onClick={() => setExpanded(false)}
<>
<Manual show={showManual} onClose={() => setShowManual(false)} />
<Navbar
collapseOnSelect
fixed="top"
variant="dark"
bg="dark"
className="top-nav"
expand="lg"
expanded={expanded}
onToggle={setExpanded}
ref={navbarRef}
>
<Link to="/">
<Button className="minimal brand-link d-none d-md-inline-block">
Stash
<Navbar.Brand
as="div"
className="order-1 order-md-0"
onClick={() => setExpanded(false)}
>
<Link to="/">
<Button className="minimal brand-link d-none d-md-inline-block">
Stash
</Button>
<Button className="minimal brand-icon d-inline d-md-none">
<img src="favicon.ico" alt="" />
</Button>
</Link>
</Navbar.Brand>
<Navbar.Toggle className="order-0" />
<Navbar.Collapse className="order-3 order-md-1">
<Nav className="mr-md-auto">
{menuItems.map((i) => (
<Nav.Link eventKey={i.href} as="div" key={i.href}>
<LinkContainer activeClassName="active" exact to={i.href}>
<Button className="minimal w-100">
<Icon icon={i.icon} />
<span>{intl.formatMessage(i.message)}</span>
</Button>
</LinkContainer>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
<Nav className="order-2 flex-row">
<div className="d-none d-sm-block">{newButton}</div>
<NavLink exact to="/settings" onClick={() => setExpanded(false)}>
<Button className="minimal settings-button" title="Settings">
<Icon icon="cog" />
</Button>
</NavLink>
<Button
className="minimal help-button"
onClick={() => setShowManual(true)}
title="Help"
>
<Icon icon="question-circle" />
</Button>
<Button className="minimal brand-icon d-inline d-md-none">
<img src="favicon.ico" alt="" />
</Button>
</Link>
</Navbar.Brand>
<Navbar.Toggle className="order-0" />
<Navbar.Collapse className="order-3 order-md-1">
<Nav className="mr-md-auto">
{menuItems.map((i) => (
<Nav.Link eventKey={i.href} as="div" key={i.href}>
<LinkContainer activeClassName="active" exact to={i.href}>
<Button className="minimal w-100">
<Icon icon={i.icon} />
<span>{intl.formatMessage(i.message)}</span>
</Button>
</LinkContainer>
</Nav.Link>
))}
{maybeRenderLogout()}
</Nav>
</Navbar.Collapse>
<Nav className="order-2 flex-row">
<div className="d-none d-sm-block">{newButton}</div>
<NavLink exact to="/settings" onClick={() => setExpanded(false)}>
<Button className="minimal settings-button">
<Icon icon="cog" />
</Button>
</NavLink>
{maybeRenderLogout()}
</Nav>
</Navbar>
</Navbar>
</>
);
};