Merge pull request #777 from docat-org/feature/share-modal

Feature: Add Share modal in place of Hide UI button

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.

web/src/components/DocumentControlButtons.tsx

@@ -1,21 +1,50 @@
-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'
 
 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<boolean>(false)
+  const [shareModalUseLatest, setShareModalUseLatest] = useState<boolean>(false)
+  const [shareModalHideUi, setShareModalHideUi] = useState<boolean>(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 (
     <div className={styles.controls}>
       <Tooltip title="Project Overview" placement="top" arrow>
@@ -46,14 +75,79 @@ export default function DocumentControlButtons(props: Props): JSX.Element {
         </Select>
       </FormControl>
 
-      <Tooltip title="Hide Controls" placement="top" arrow>
+      <Tooltip title="Share Link" placement="top" arrow>
         <button
-          className={styles['hide-controls-button']}
-          onClick={props.onHideUi}
+          className={styles['share-button']}
+          onClick={() => {
+            setShareModalOpen(true)
+          }}
         >
-          <VisibilityOff sx={buttonStyle} />
+          <Share sx={buttonStyle} />
         </button>
       </Tooltip>
+
+      <Modal
+        open={shareModalOpen}
+        onClose={() => {
+          setShareModalOpen(false)
+        }}
+        aria-labelledby="share-modal-title"
+        aria-describedby="share-modal-description"
+      >
+        <div className={styles['share-modal']}>
+          <div className={styles['share-modal-link-container']}>
+            <p className={styles['share-modal-link']}>{getShareUrl()}</p>
+            <div className={styles['share-modal-copy-container']}>
+              <button
+                className={styles['share-modal-copy']}
+                onClick={() => {
+                  void (async () => {
+                    await navigator.clipboard.writeText(getShareUrl())
+                  })()
+                }}
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={shareModalHideUi}
+                  onChange={(e) => {
+                    setShareModalHideUi(e.target.checked)
+                  }}
+                />
+              }
+              label="Hide Version Selector"
+              className={styles['share-modal-label']}
+            />
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={shareModalUseLatest}
+                  onChange={(e) => {
+                    setShareModalUseLatest(e.target.checked)
+                  }}
+                />
+              }
+              label="Always use latest version"
+              className={styles['share-modal-label']}
+            />
+          </FormGroup>
+
+          <button
+            className={styles['share-modal-close']}
+            onClick={() => {
+              setShareModalOpen(false)
+            }}
+          >
+            Close
+          </button>
+        </div>
+      </Modal>
     </div>
   )
 }

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}
         />
       )}
     </>

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%;
   }
+}