Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added tooltips for the minimized Mainmenu options

This commit is contained in:
DrMint 2022-02-20 17:56:22 +01:00
parent e2f8a72a37
commit 54f8170bac
5 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
package-lock.json generated
View File

@ -16,6 +16,7 @@
"react-dom": "17.0.2",
"react-redux": "^7.2.6",
"react-swipeable": "^6.2.0",
"react-tooltip": "^4.2.21",
"turndown": "^7.1.1"
},
"devDependencies": {
@ -3137,6 +3138,22 @@
"react": "^16.8.3 || ^17"
}
},
"node_modules/react-tooltip": {
"version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
"integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
"dependencies": {
"prop-types": "^15.7.2",
"uuid": "^7.0.3"
},
"engines": {
"npm": ">=6.13"
},
"peerDependencies": {
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -3663,6 +3680,14 @@
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
},
"node_modules/uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -5951,6 +5976,15 @@
"integrity": "sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==",
"requires": {}
},
"react-tooltip": {
"version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
"integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
"requires": {
"prop-types": "^15.7.2",
"uuid": "^7.0.3"
}
},
"readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -6320,6 +6354,11 @@
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
},
"uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
},
"v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

1
package.json
View File

@ -19,6 +19,7 @@
"react-dom": "17.0.2",
"react-redux": "^7.2.6",
"react-swipeable": "^6.2.0",
"react-tooltip": "^4.2.21",
"turndown": "^7.1.1"
},
"devDependencies": {

12
src/components/AppLayout.tsx
View File

@ -15,6 +15,7 @@ import {
setMainPanelReduced,
} from "redux/AppLayoutSlice";
import { RootState } from "redux/store";
import ReactTooltip from "react-tooltip";
type AppLayoutProps = {
subPanel?: React.ReactNode;
@ -222,6 +223,17 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
</div>
</div>
</div>
<ReactTooltip
id="MainPanelTooltip"
place="right"
type="light"
effect="solid"
delayShow={300}
delayHide={100}
disable={!mainPanelReduced || isMobile}
className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !transition-[top,left,width]"
/>
</div>
);
}

10
src/components/PanelComponents/NavOption.tsx
View File

@ -7,6 +7,7 @@ type NavOptionProps = {
icon?: string;
title: string;
subtitle?: string;
tooltipId?: string;
border?: boolean;
reduced?: boolean;
onClick?: MouseEventHandler<HTMLDivElement>;
@ -26,6 +27,15 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
<Link href={props.url} passHref>
<div
onClick={props.onClick}
data-html={true}
data-tip={`
<div class="px-4 py-3">
<h3 class="text-2xl">${props.title}</h3>
${props.subtitle ? `<p class="max-w-[10rem]">${props.subtitle}</p>` : ""}
</div>
`}
data-for={props.tooltipId}
data-multiline={true}
className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
props.icon ? "text-left" : "text-center"
} ${divCommon}`}

8
src/components/Panels/MainPanel.tsx
View File

@ -84,6 +84,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
icon="library_books"
title={langui.main_library}
subtitle={langui.main_library_description}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -93,6 +94,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
icon="travel_explore"
title={langui.main_wiki}
subtitle={langui.main_wiki_description}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -102,6 +104,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
icon="watch_later"
title={langui.main_chronicles}
subtitle={langui.main_chronicles_description}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -112,6 +115,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
url="/news"
icon="feed"
title={langui.main_news}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -120,6 +124,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
url="/merch"
icon="store"
title={langui.main_merch}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -128,6 +133,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
url="/gallery"
icon="collections"
title={langui.main_gallery}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -136,6 +142,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
url="/archives"
icon="inventory"
title={langui.main_archives}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
@ -144,6 +151,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
url="/about-us"
icon="info"
title={langui.main_about_us}
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>