From fa61a9ed3fc37cb14548ff6af5609a3bd0e464f1 Mon Sep 17 00:00:00 2001 From: Mads Nylund <73914541+MadsNyl@users.noreply.github.com> Date: Thu, 11 Apr 2024 08:55:07 +0200 Subject: [PATCH] Menu for shortcuts (#1006) * init * added shortcut navigations for external sites * Changed icon and added logout button --- CHANGELOG.md | 1 + package.json | 3 +- pnpm-lock.yaml | 148 ++++++++++++++++++ src/URLS.tsx | 7 +- .../miscellaneous/shortCutMenu/Admin.tsx | 61 ++++++++ .../miscellaneous/shortCutMenu/HotKey.tsx | 42 +++++ .../miscellaneous/shortCutMenu/Item.tsx | 29 ++++ .../miscellaneous/shortCutMenu/Logout.tsx | 22 +++ .../miscellaneous/shortCutMenu/Membership.tsx | 27 ++++ .../miscellaneous/shortCutMenu/Navigation.tsx | 88 +++++++++++ .../shortCutMenu/SectionWrapper.tsx | 17 ++ .../miscellaneous/shortCutMenu/Tools.tsx | 26 +++ .../miscellaneous/shortCutMenu/index.tsx | 86 ++++++++++ .../miscellaneous/shortCutMenu/shortcuts.ts | 37 +++++ src/components/navigation/Navigation.tsx | 3 +- src/components/ui/dialog.tsx | 4 +- src/components/ui/scroll-area.tsx | 46 ++++++ src/index.tsx | 2 + src/utils.tsx | 7 + 19 files changed, 651 insertions(+), 5 deletions(-) create mode 100644 src/components/miscellaneous/shortCutMenu/Admin.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/HotKey.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/Item.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/Logout.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/Membership.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/Navigation.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/SectionWrapper.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/Tools.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/index.tsx create mode 100644 src/components/miscellaneous/shortCutMenu/shortcuts.ts create mode 100644 src/components/ui/scroll-area.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index f4e9f1298..47dbd0bd7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### 🎨 - Designendringer ## Neste versjon +- ✨ **Shortcuts**. La til meny med shortcuts. ## Versjon 2023.10.04 - 🎨 **Footer**. La til NITO logo i footer under "samarbeid" diff --git a/package.json b/package.json index 95e5844cd..5f10889ed 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", @@ -85,8 +86,8 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.38.1", "@vitejs/plugin-react": "^4.2.0", - "eslint": "^8.56.0", "autoprefixer": "^10.4.18", + "eslint": "^8.56.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-import-helpers": "^1.3.1", "eslint-plugin-prettier": "^4.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f9495274e..b1b113b8d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: '@radix-ui/react-label': specifier: ^2.0.2 version: 2.0.2(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-scroll-area': + specifier: ^1.0.5 + version: 1.0.5(react-dom@17.0.2)(react@17.0.2) '@radix-ui/react-select': specifier: ^2.0.0 version: 2.0.0(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2) @@ -1929,6 +1932,19 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-compose-refs@1.0.1(react@17.0.2): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + react: 17.0.2 + dev: false + /@radix-ui/react-context-menu@2.1.5(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==} peerDependencies: @@ -1969,6 +1985,19 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-context@1.0.1(react@17.0.2): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + react: 17.0.2 + dev: false + /@radix-ui/react-dialog@1.0.5(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==} peerDependencies: @@ -2017,6 +2046,19 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-direction@1.0.1(react@17.0.2): + resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + react: 17.0.2 + dev: false + /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==} peerDependencies: @@ -2351,6 +2393,26 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-presence@1.0.1(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/react-compose-refs': 1.0.1(react@17.0.2) + '@radix-ui/react-use-layout-effect': 1.0.1(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-primitive@1.0.3(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -2372,6 +2434,25 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-primitive@1.0.3(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/react-slot': 1.0.2(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-progress@1.0.3(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==} peerDependencies: @@ -2482,6 +2563,33 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-scroll-area@1.0.5(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/number': 1.0.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(react@17.0.2) + '@radix-ui/react-context': 1.0.1(react@17.0.2) + '@radix-ui/react-direction': 1.0.1(react@17.0.2) + '@radix-ui/react-presence': 1.0.1(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-callback-ref': 1.0.1(react@17.0.2) + '@radix-ui/react-use-layout-effect': 1.0.1(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-select@2.0.0(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==} peerDependencies: @@ -2590,6 +2698,20 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-slot@1.0.2(react@17.0.2): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/react-compose-refs': 1.0.1(react@17.0.2) + react: 17.0.2 + dev: false + /@radix-ui/react-switch@1.0.3(@types/react-dom@17.0.11)(@types/react@17.0.37)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==} peerDependencies: @@ -2800,6 +2922,19 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-callback-ref@1.0.1(react@17.0.2): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + react: 17.0.2 + dev: false + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@17.0.37)(react@17.0.2): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} peerDependencies: @@ -2844,6 +2979,19 @@ packages: react: 17.0.2 dev: false + /@radix-ui/react-use-layout-effect@1.0.1(react@17.0.2): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + react: 17.0.2 + dev: false + /@radix-ui/react-use-previous@1.0.1(@types/react@17.0.37)(react@17.0.2): resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} peerDependencies: diff --git a/src/URLS.tsx b/src/URLS.tsx index c679fde0e..6559e08ab 100644 --- a/src/URLS.tsx +++ b/src/URLS.tsx @@ -60,7 +60,12 @@ const URLS = { jobpostsAdmin: '/admin/karriere/', newsAdmin: '/admin/nyheter/', bannerAdmin: '/admin/bannere/', - jubilee: 'jubileum.tihlde.org/', + jubilee: 'https://jubileum.tihlde.org/', + fondet: 'https://fondet.tihlde.org/', + kontRes: 'https://kontres.tihlde.org/', + github: 'https://github.com/TIHLDE', + pythons: 'https://pythons.tihlde.org/', + pythonsLadies: 'https://pythons-damer.tihlde.org/', }; export default URLS; diff --git a/src/components/miscellaneous/shortCutMenu/Admin.tsx b/src/components/miscellaneous/shortCutMenu/Admin.tsx new file mode 100644 index 000000000..112a4d327 --- /dev/null +++ b/src/components/miscellaneous/shortCutMenu/Admin.tsx @@ -0,0 +1,61 @@ +import URLS from 'URLS'; + +import { PermissionApp } from 'types/Enums'; + +import { HavePermission } from 'hooks/User'; + +import { ShortCutMenuProps } from '.'; +import ShortCutLink from './Item'; +import ShortCutSectionWrapper from './SectionWrapper'; + +const ShortCutAdmin = ({ setOpen }: Pick) => { + const links = [ + { + apps: [PermissionApp.EVENT], + title: 'Arrangementer', + path: URLS.eventAdmin, + }, + { + apps: [PermissionApp.GROUP], + title: 'Grupper', + path: URLS.groups.index, + }, + { + apps: [PermissionApp.JOBPOST], + title: 'Jobbannonser', + path: URLS.jobpostsAdmin, + }, + { + apps: [PermissionApp.USER], + title: 'Medlemmer', + path: URLS.userAdmin, + }, + { + apps: [PermissionApp.NEWS], + title: 'Nyheter', + path: URLS.newsAdmin, + }, + { + apps: [PermissionApp.STRIKE], + title: 'Prikker', + path: URLS.strikeAdmin, + }, + { + apps: [PermissionApp.BANNERS], + title: 'Bannere', + path: URLS.bannerAdmin, + }, + ]; + + return ( + + {links.map((link, index) => ( + + + + ))} + + ); +}; + +export default ShortCutAdmin; diff --git a/src/components/miscellaneous/shortCutMenu/HotKey.tsx b/src/components/miscellaneous/shortCutMenu/HotKey.tsx new file mode 100644 index 000000000..01022f54f --- /dev/null +++ b/src/components/miscellaneous/shortCutMenu/HotKey.tsx @@ -0,0 +1,42 @@ +import { ArrowBigUp, Command, Option } from 'lucide-react'; +import { ReactNode } from 'react'; + +type HotKeyProps = { + modifiers: Array<'shift' | 'alt' | 'ctrl' | undefined>; + letter: string; +}; + +const HotKey = ({ modifiers, letter }: HotKeyProps) => { + const getModifierKey = (modifier: 'shift' | 'alt' | 'ctrl' | undefined): ReactNode | undefined => { + switch (modifier) { + case 'shift': + return ; + case 'alt': + return