⚠ Načítání trvá příliš dlouho, mohlo dojít k chybě. Zkuste stránku načíst
znovu.
diff --git a/frontend/src/components/Menu.css.ts b/frontend/src/components/Menu.css.ts
index f198b9544..418342b3f 100644
--- a/frontend/src/components/Menu.css.ts
+++ b/frontend/src/components/Menu.css.ts
@@ -1,7 +1,52 @@
import { globalStyle, style } from "@vanilla-extract/css"
-globalStyle(".active", {
- fontWeight: "bold",
+import { vars } from "../theme/tokens"
+
+export const navLink = style({
+ display: "block",
+ transition: "all 0.15s ease-in-out",
+ borderRadius: vars.radius.md,
+ padding: "0.5rem 0.85rem",
+ textDecoration: "none",
+ color: "rgb(241 245 249 / 0.78)",
+ fontWeight: 500,
+ ":hover": {
+ backgroundColor: "rgb(255 255 255 / 0.12)",
+ textDecoration: "none",
+ color: "#ffffff",
+ },
+ // plny outline misto poloprusvitneho stinu - ring s alpha 0.45 mel vuci tmavemu
+ // navbaru jen ~2.3:1 (pod WCAG 1.4.11); blue-3 na #1f2b3c dava >3:1 a outline
+ // prezije i forced-colors rezim
+ ":focus-visible": {
+ outline: "2px solid var(--mantine-color-blue-3)",
+ outlineOffset: "2px",
+ },
+ "@media": {
+ "(min-width: 992px)": {
+ borderBottom: "2px solid transparent",
+ borderRadius: 0,
+ backgroundColor: "transparent",
+ padding: "0.75rem 0.5rem 0.625rem",
+ ":hover": {
+ borderBottomColor: "rgb(255 255 255 / 0.6)",
+ backgroundColor: "transparent",
+ color: "#ffffff",
+ },
+ },
+ },
+})
+
+globalStyle(`.active${navLink}`, {
+ backgroundColor: "rgb(255 255 255 / 0.18)",
+ color: "#ffffff",
+ fontWeight: 600,
+ "@media": {
+ "(min-width: 992px)": {
+ borderBottomColor: "#ffffff",
+ backgroundColor: "transparent",
+ },
+ },
})
export const navExternalLink = style({
@@ -12,15 +57,83 @@ globalStyle(`${navExternalLink} svg`, {
marginLeft: "0.2em",
})
-globalStyle(".navbar.navbar-expand-lg .btn", {
+export const navList = style({
+ display: "flex",
+ flexDirection: "column",
+ margin: 0,
+ padding: 0,
+ width: "100%",
+ listStyle: "none",
+ "@media": {
+ "(min-width: 992px)": {
+ flexDirection: "row",
+ gap: "0.25rem",
+ marginLeft: "auto",
+ width: "auto",
+ },
+ },
+})
+
+export const logoutButton = style({
+ // sjednoceny focus ring s navLink/spotlightButton: vychozi indigo ring Mantine
+ // (.mantine-focus-auto) ma vuci tmavemu navbaru jen ~3:1 (hranicni 1.4.11), blue-3
+ // je vyrazne viditelnejsi; vyssi specificita prebiji Mantine ring i pri shode poradi
+ selectors: {
+ "&.mantine-focus-auto:focus-visible": {
+ outline: "2px solid var(--mantine-color-blue-3)",
+ outlineOffset: "2px",
+ },
+ },
"@media": {
"(min-width: 992px)": {
- // pri klasickem menu pridej levou mezeru k odhlasovacimu tlacitku
marginLeft: "0.5rem",
},
"(max-width: 991.98px)": {
- // pri hamburger menu pridej horni mezeru k odhlasovacimu tlacitku
marginTop: "0.5rem",
+ width: "100%",
},
},
})
+
+export const spotlightButton = style({
+ display: "flex",
+ alignItems: "center",
+ gap: "0.5rem",
+ transition: "all 0.15s ease-in-out",
+ borderRadius: vars.radius.md,
+ padding: "0.4rem 0.75rem",
+ color: "rgb(241 245 249 / 0.78)",
+ fontSize: "0.875rem",
+ ":hover": {
+ backgroundColor: "rgb(255 255 255 / 0.12)",
+ color: "#ffffff",
+ },
+ // plny outline misto poloprusvitneho stinu - ring s alpha 0.45 mel vuci tmavemu
+ // navbaru jen ~2.3:1 (pod WCAG 1.4.11); blue-3 na #1f2b3c dava >3:1 a outline
+ // prezije i forced-colors rezim
+ ":focus-visible": {
+ outline: "2px solid var(--mantine-color-blue-3)",
+ outlineOffset: "2px",
+ },
+ "@media": {
+ "(min-width: 992px)": {
+ marginRight: "0.75rem",
+ border: "1px solid rgb(255 255 255 / 0.2)",
+ width: "18rem",
+ maxWidth: "30vw",
+ },
+ "(max-width: 991.98px)": {
+ marginBottom: "0.25rem",
+ padding: "0.5rem 0.85rem",
+ width: "100%",
+ },
+ },
+})
+
+export const spotlightButtonLabel = style({
+ flex: 1,
+ overflow: "hidden",
+ textAlign: "left",
+ textOverflow: "ellipsis",
+ whiteSpace: "nowrap",
+})
diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx
index 0adea4451..12db15172 100644
--- a/frontend/src/components/Menu.tsx
+++ b/frontend/src/components/Menu.tsx
@@ -1,25 +1,23 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faExternalLink } from "@rodlukas/fontawesome-pro-solid-svg-icons"
+import { Button, Kbd, UnstyledButton } from "@mantine/core"
+import { spotlight } from "@mantine/spotlight"
+import { faExternalLink, faSearch } from "@rodlukas/fontawesome-pro-solid-svg-icons"
import { Link, LinkProps } from "@tanstack/react-router"
import classNames from "classnames"
import * as React from "react"
-import { Button, Nav, NavItem, NavLink } from "reactstrap"
import APP_URLS from "../APP_URLS"
import AuthChecking from "../auth/AuthChecking"
import { useAuthContext } from "../auth/AuthContext"
+import { isApplePlatform } from "../global/utils"
import { fEmptyVoid, QA } from "../types/types"
+import ColorSchemeToggle from "./ColorSchemeToggle"
import * as styles from "./Menu.css"
-import SearchInput from "./SearchInput"
type Props = {
/** Funkce pro zavření otevřeného hamburger menu. */
closeNavbar: fEmptyVoid
- /** Funkce, která se zavolá při úpravě vyhledávaného výrazu. */
- onSearchChange: (newSearchVal: string) => void
- /** Hledaný výraz. */
- searchVal: string
}
type MyNavLinkProps = {
@@ -42,19 +40,22 @@ const MyNavLink: React.FC = ({
onClick={onCloseNavbar}
activeOptions={{ exact }}
activeProps={{
- className: classNames("nav-link", className, activeClassName),
+ className: classNames(styles.navLink, className, activeClassName),
}}
inactiveProps={{
- className: classNames("nav-link", className),
+ className: classNames(styles.navLink, className),
}}
/>
)
+// zkratka zobrazená v UI i v aria-labelu musí odpovídat skutečné klávese
+// na dané platformě (mod = ⌘ na Apple platformách, jinde Ctrl)
+const spotlightShortcutLabel = isApplePlatform() ? "⌘K" : "Ctrl K"
+
/** Komponenta zobrazující menu aplikace pro přihlášené uživatele. */
const Menu: React.FC = (props) => {
const authContext = useAuthContext()
const onClickLogout = () => {
- // pri odhlaseni chceme zavrit menu
props.closeNavbar()
authContext.logout()
}
@@ -63,76 +64,89 @@ const Menu: React.FC = (props) => {
<>
{authContext.isAuth && (
<>
-
-
-
+
))}
{props.memberships.length === 0 && (
- Žádní účastníci
+
+ Žádní účastníci
+
)}
-
+
)
}
diff --git a/frontend/src/components/Search.css.ts b/frontend/src/components/Search.css.ts
deleted file mode 100644
index fc633af64..000000000
--- a/frontend/src/components/Search.css.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { keyframes, style } from "@vanilla-extract/css"
-
-const fadeIn = keyframes({
- from: {
- opacity: 0,
- },
- to: {
- opacity: 1,
- },
-})
-
-export const searchOverlay = style({
- position: "fixed",
- zIndex: 1020, // Bootstrap navbar ma z-index 1030
- top: "56px", // vyska navbaru (56px) - desktop
- right: 0,
- bottom: 0,
- left: 0,
- display: "flex",
- alignItems: "flex-start",
- justifyContent: "center",
- backdropFilter: "blur(4px)",
- backgroundColor: "rgba(0, 0, 0, 0.5)",
- cursor: "default",
- overflowY: "auto",
- animation: `${fadeIn} 0.15s ease-out`,
- "@media": {
- "(max-width: 991.98px)": {
- zIndex: 1040, // vyssi nez navbar (1030), aby byl nad rozbalenym menu
- top: "106px", // vyska navbaru (56px) + search input (~50px)
- },
- },
-})
-
-export const searchContainer = style({
- position: "relative",
- zIndex: 1021,
- margin: "0 auto",
- marginBottom: "2rem",
- borderRadius: "0 0 0.375rem 0.375rem",
- boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05)",
- backgroundColor: "white",
- padding: "0 1rem 2rem",
- width: "100%",
- maxWidth: "900px",
- height: "auto",
- animation: `${fadeIn} 0.2s ease-out`,
-})
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
deleted file mode 100644
index b1554e2b9..000000000
--- a/frontend/src/components/Search.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { FuseResult } from "fuse.js"
-import * as React from "react"
-import { Badge, CloseButton, Col, Container, ListGroup, ListGroupItem, Row } from "reactstrap"
-
-import { useClientsActiveContext } from "../contexts/ClientsActiveContext"
-import ModalClients from "../forms/ModalClients"
-import { ClientActiveType } from "../types/models"
-import { fEmptyVoid } from "../types/types"
-
-import ClientEmail from "./ClientEmail"
-import ClientName from "./ClientName"
-import ClientPhone from "./ClientPhone"
-import Heading from "./Heading"
-import Loading from "./Loading"
-import * as styles from "./Search.css"
-
-type Props = {
- /** Výsledky vyhledávání klientů. */
- foundResults: FuseResult[]
- /** Hledaný výraz. */
- searchVal: string
- /** Funkce pro zahájení vyhledávání klientů. */
- search: fEmptyVoid
- /** Funkce zrušení vyhledávání klientů. */
- resetSearch: fEmptyVoid
-}
-
-/** Komponenta zobrazující výsledky vyhledávání - seznam klientů. */
-const Search: React.FC = ({ foundResults, searchVal, search, resetSearch }) => {
- const clientsActiveContext = useClientsActiveContext()
- const dialogRef = React.useRef(null)
-
- // Focus trap - zajistí, že focus zůstane uvnitř dialogu
- React.useEffect(() => {
- if (searchVal === "" || !dialogRef.current) {
- return undefined
- }
-
- const dialog = dialogRef.current
- const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-
- const getFocusableElements = (): HTMLElement[] => {
- return Array.from(dialog.querySelectorAll(selector)).filter(
- (el) => !el.hasAttribute("disabled") && !el.hasAttribute("aria-hidden"),
- )
- }
-
- const handleKeyDown = (e: KeyboardEvent): void => {
- if (e.key !== "Tab") {
- return
- }
-
- // Pokud je otevřený Bootstrap modal, necháme ho zpracovat Tab sám
- const openModal = document.querySelector(".modal.show")
- if (openModal) {
- return
- }
-
- const focusableElements = getFocusableElements()
- if (focusableElements.length === 0) {
- return
- }
-
- const firstElement = focusableElements[0]
- const lastElement = focusableElements.at(-1)!
- const activeElement = document.activeElement as HTMLElement
-
- // Pokud není žádný prvek ve focusu nebo je mimo dialog, nastav focus na první
- if (!activeElement || !dialog.contains(activeElement)) {
- e.preventDefault()
- firstElement.focus()
- return
- }
-
- // Cyklická navigace: poslední -> první (Tab) nebo první -> poslední (Shift+Tab)
- const isAtFirst = activeElement === firstElement
- const isAtLast = activeElement === lastElement
-
- if ((!e.shiftKey && isAtLast) || (e.shiftKey && isAtFirst)) {
- e.preventDefault()
- ;(e.shiftKey ? lastElement : firstElement).focus()
- }
- }
-
- document.addEventListener("keydown", handleKeyDown)
- return () => document.removeEventListener("keydown", handleKeyDown)
- }, [searchVal])
-
- React.useEffect(() => {
- if (searchVal === "") {
- return undefined
- }
- document.body.style.overflow = "hidden"
- return () => {
- document.body.style.overflow = ""
- }
- }, [searchVal])
-
- return (
- <>
- {searchVal !== "" && (
- {
- // Zavři dialog pouze pokud byl klik na overlay, ne na kontejner
- if (e.target === e.currentTarget) {
- resetSearch()
- }
- }}
- role="presentation"
- aria-label="Výsledky vyhledávání">
- {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-
e.stopPropagation()}
- onKeyDown={(e) => {
- if (e.key === "Escape" && !document.querySelector(".modal.show")) {
- resetSearch()
- }
- }}
- role="dialog"
- aria-modal="true"
- aria-labelledby="search-dialog-title">
-
-
- Nalezení klienti{" "}
-
- {foundResults.length}
-
-
- }
- buttons={
-
- }
- />
- {clientsActiveContext.isLoading && }
- {foundResults.length > 0 && !clientsActiveContext.isLoading && (
-
- {foundResults.map(({ item }) => (
-
-
- {" "}
-
-
-
-
- {item.note !== "" && (
-
- {" "}
- – {item.note}
-
- )}
-
-
- {item.phone && (
-
- )}
-
-
- {item.email && (
-
- )}
-
-
-
-
-
-
- ))}
-
- )}
- {foundResults.length === 0 && !clientsActiveContext.isLoading && (
- Žádní klienti nenalezeni
- )}
-
-
-