Added tooltips for the minimized Mainmenu options
This commit is contained in:
DrMint
parent
e2f8a72a37
commit
54f8170bac
39
package-lock.json
generated
39
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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}`}
|
||||
|
||||
@ -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))}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user