From c4b3cc6fc53edbc9306644d5e08f18f839424e1b Mon Sep 17 00:00:00 2001 From: reglim Date: Fri, 26 Jan 2024 11:26:25 +0100 Subject: [PATCH] Feature: Add Share modal in place of Hide UI button --- README.md | 6 - web/src/components/DocumentControlButtons.tsx | 110 ++++++++++- web/src/pages/Docs.tsx | 6 - .../DocumentControlButtons.module.css | 172 +++++++++++++----- 4 files changed, 231 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index 4a275c04a..ec196d909 100644 --- a/README.md +++ b/README.md @@ -101,9 +101,3 @@ It is possible to configure some things after the fact. Supported config options: - headerHTML - -## Advanced Usage - -### Hide Controls - -If you would like to send link to a specific version of the documentation without the option to change the version, you can do so by clicking on the `Hide Controls` button. This will hide the control buttons and change the link, which can then be copied as usual. diff --git a/web/src/components/DocumentControlButtons.tsx b/web/src/components/DocumentControlButtons.tsx index f47a9963d..573e0c1d9 100644 --- a/web/src/components/DocumentControlButtons.tsx +++ b/web/src/components/DocumentControlButtons.tsx @@ -1,8 +1,17 @@ -import { Home, VisibilityOff } from '@mui/icons-material' -import { FormControl, MenuItem, Select, Tooltip } from '@mui/material' +import React, { useState } from 'react' import { Link } from 'react-router-dom' +import { Home, Share } from '@mui/icons-material' +import { + Checkbox, + FormControl, + FormControlLabel, + FormGroup, + MenuItem, + Modal, + Select, + Tooltip +} from '@mui/material' import type ProjectDetails from '../models/ProjectDetails' -import React from 'react' import styles from './../style/components/DocumentControlButtons.module.css' @@ -10,12 +19,32 @@ interface Props { version: string versions: ProjectDetails[] onVersionChange: (version: string) => void - onHideUi: () => void } export default function DocumentControlButtons(props: Props): JSX.Element { const buttonStyle = { width: '25px', height: '25px' } + const [shareModalOpen, setShareModalOpen] = useState(false) + const [shareModalUseLatest, setShareModalUseLatest] = useState(false) + const [shareModalHideUi, setShareModalHideUi] = useState(false) + + const getShareUrl = (): string => { + // adapt the current URL so we can leave Docs.tsx's state as refs + // (which means if the page was passed down as a prop it wouldn't update correctly) + + let url = window.location.href + + if (shareModalUseLatest) { + url = url.replace(props.version, 'latest') + } + + if (shareModalHideUi && !url.includes('?hide-ui=true')) { + url = `${url}?hide-ui=true` + } + + return url + } + return (
@@ -46,14 +75,79 @@ export default function DocumentControlButtons(props: Props): JSX.Element { - + + + { + setShareModalOpen(false) + }} + aria-labelledby="share-modal-title" + aria-describedby="share-modal-description" + > +
+
+

{getShareUrl()}

+
+ +
+
+ + + { + setShareModalHideUi(e.target.checked) + }} + /> + } + label="Hide Version Selector" + className={styles['share-modal-label']} + /> + { + setShareModalUseLatest(e.target.checked) + }} + /> + } + label="Always use latest version" + className={styles['share-modal-label']} + /> + + + +
+
) } diff --git a/web/src/pages/Docs.tsx b/web/src/pages/Docs.tsx index a416ae4ff..f48a028ab 100644 --- a/web/src/pages/Docs.tsx +++ b/web/src/pages/Docs.tsx @@ -140,11 +140,6 @@ export default function Docs(): JSX.Element { updateUrl(newVersion, hideUi) } - const onHideUi = (): void => { - setHideUi(true) - updateUrl(version, true) - } - useEffect(() => { const urlProject = params.project ?? '' const urlVersion = params.version ?? 'latest' @@ -218,7 +213,6 @@ export default function Docs(): JSX.Element { version={version} versions={versions} onVersionChange={onVersionChanged} - onHideUi={onHideUi} /> )} diff --git a/web/src/style/components/DocumentControlButtons.module.css b/web/src/style/components/DocumentControlButtons.module.css index 0e93115de..b250aa865 100644 --- a/web/src/style/components/DocumentControlButtons.module.css +++ b/web/src/style/components/DocumentControlButtons.module.css @@ -1,58 +1,144 @@ .controls { - position: fixed; - bottom: 32px; - right: 32px; - height: 50px; - display: flex; - } + position: fixed; + bottom: 32px; + right: 32px; + height: 50px; + display: flex; +} - .home-button, - .hide-controls-button { - height: 50px; - width: 50px; - color: white; - display: flex; - align-items: center; - justify-content: center; - border: none; - } +.home-button, +.share-button { + height: 50px; + width: 50px; + color: white; + display: flex; + align-items: center; + justify-content: center; + border: none; +} - .home-button { - background-color: var(--primary-foreground); - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - } +.home-button { + background-color: var(--primary-foreground); + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} - .hide-controls-button { - background-color: #868686; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - } +.share-button { + background-color: #868686; + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} - .version-select { - background: white; - border: 1px solid rgba(0, 0, 0, 0.42); - overflow: hidden; +.version-select { + background: white; + border: 1px solid rgba(0, 0, 0, 0.42); + overflow: hidden; + + padding: 9px; + width: 200px; + + font-size: 1.05em; + + border-radius: 0 !important; +} + +.version-select:focus-visible { + outline: none; +} + + +.share-modal { + display:flex; + flex-direction: column; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); - padding: 9px; - width: 200px; + width: 400px; + max-width: 80vw; + height: 200px; + overflow: hidden; - font-size: 1.05em; + background-color: #fff; + border: none; + border-radius: 0.5rem; + padding: 1rem; + outline: 0; +} - border-radius: 0 !important; +.share-modal > * { + margin-bottom: 1rem; +} + +.share-modal-link-container { + display: flex; +} + +.share-modal-link { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + border: 1px solid rgba(0, 0, 0, 0.42); + word-break: break-all; + user-select: all; + -moz-user-select: all; + -webkit-user-select: all; + font-size: small; +} + +.share-modal-copy-container { + display: flex; + align-items: center; + margin-left: 1rem; +} + +.share-modal-copy { + padding: 0.5rem 1rem; + border: none; + border-radius: 0.5rem; + background-color: var(--primary-foreground); + color: #fff; + cursor: pointer; +} + +.share-modal-close { + position: absolute; + bottom: 0.5rem; + right: 1rem; + border: none; + background-color: transparent; + cursor: pointer; + font-weight: bold; +} + +.share-modal-label span { + font-size: small !important; +} + +@media only screen and (max-width: 380px) { + .controls { + left: 32px; } - .version-select:focus-visible { - outline: none; + .version-select { + width: calc(100vw - 100px - 64px) + } + + .share-modal-link-container { + flex-direction: column; + align-items: center; } - @media only screen and (max-width: 380px) { - .controls { - left: 32px; - } + .share-modal-copy-container { + margin-left: 0; + margin-top: 1rem; + width: 100%; + justify-content: center; + } - .version-select { - width: calc(100vw - 100px - 64px) - } + .share-modal-copy { + width: 80%; } +}