From ed0c821227027f985985c2cefed3e5c62fda348c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 4 Jan 2023 22:31:01 -0800 Subject: [PATCH 01/78] Add ContextMenu and ContextMenuItem --- components/ContextMenu/index.scss | 6 +++++ components/ContextMenu/index.tsx | 36 +++++++++++++++++++++++++++ components/ContextMenuItem/index.scss | 11 ++++++++ components/ContextMenuItem/index.tsx | 26 +++++++++++++++++++ 4 files changed, 79 insertions(+) create mode 100644 components/ContextMenu/index.scss create mode 100644 components/ContextMenu/index.tsx create mode 100644 components/ContextMenuItem/index.scss create mode 100644 components/ContextMenuItem/index.tsx diff --git a/components/ContextMenu/index.scss b/components/ContextMenu/index.scss new file mode 100644 index 00000000..c011889c --- /dev/null +++ b/components/ContextMenu/index.scss @@ -0,0 +1,6 @@ +.ContextMenu { + background: var(--menu-bg); + border-radius: $input-corner; + padding: $unit 0; + margin-top: $unit-fourth; +} diff --git a/components/ContextMenu/index.tsx b/components/ContextMenu/index.tsx new file mode 100644 index 00000000..c3787dd9 --- /dev/null +++ b/components/ContextMenu/index.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import classNames from 'classnames' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' + +import './index.scss' + +interface Props + extends React.DetailedHTMLProps< + React.DialogHTMLAttributes, + HTMLDivElement + > { + align?: 'start' | 'center' | 'end' +} + +export const ContextMenuContent = React.forwardRef( + function ContextMenu({ children, ...props }, forwardedRef) { + const classes = classNames( + { + ContextMenu: true, + }, + props.className + ) + + return ( + + + {children} + + + ) + } +) + +export const ContextMenu = DropdownMenu.Root +export const ContextMenuGroup = DropdownMenu.Group +export const ContextMenuTrigger = DropdownMenu.Trigger diff --git a/components/ContextMenuItem/index.scss b/components/ContextMenuItem/index.scss new file mode 100644 index 00000000..ee14622d --- /dev/null +++ b/components/ContextMenuItem/index.scss @@ -0,0 +1,11 @@ +.ContextItem { + color: var(--menu-text); + font-size: $font-regular; + padding: ($unit * 1.5) $unit-2x; + + &:hover { + background: var(--menu-bg-item-hover); + color: var(--text-primary); + cursor: pointer; + } +} diff --git a/components/ContextMenuItem/index.tsx b/components/ContextMenuItem/index.tsx new file mode 100644 index 00000000..15600c52 --- /dev/null +++ b/components/ContextMenuItem/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import classNames from 'classnames' +import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu' + +import './index.scss' + +interface Props + extends React.DetailedHTMLProps< + React.DialogHTMLAttributes, + HTMLDivElement + > {} + +const ContextMenuItem = React.forwardRef( + function ContextMenu({ children, ...props }, forwardedRef) { + const classes = classNames( + { + ContextItem: true, + }, + props.className + ) + + return {children} + } +) + +export default ContextMenuItem From 22ecc20d3a2c938f2945346125d7c0a3ad28e5e3 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 4 Jan 2023 22:31:08 -0800 Subject: [PATCH 02/78] Lighten menu background by 05 --- styles/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/variables.scss b/styles/variables.scss index 7a2e41eb..644fd05e 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -136,7 +136,7 @@ $dialog--bg--dark: $grey-25; // Color Definitions: Menu $menu--bg--light: $grey-100; -$menu--bg--dark: $grey-05; +$menu--bg--dark: $grey-10; $menu--text--light: $grey-90; $menu--text--dark: $grey-50; $menu--separator--light: $grey-90; From 726c0608c48433f5bee77770284a44dded36e5be Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 4 Jan 2023 22:31:18 -0800 Subject: [PATCH 03/78] Add new class for hovering buttons --- components/Button/index.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/Button/index.scss b/components/Button/index.scss index 4c6415e5..517d4261 100644 --- a/components/Button/index.scss +++ b/components/Button/index.scss @@ -61,6 +61,14 @@ } } + &.Options { + box-shadow: 0px 1px 3px rgb(0 0 0 / 14%); + position: absolute; + left: 8px; + top: 8px; + z-index: 3; + } + &:disabled { background-color: var(--button-bg-disabled); color: var(--button-text-disabled); From d4029942e56ff3312a3625b0a9e51004ce2c2c51 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 4 Jan 2023 22:31:42 -0800 Subject: [PATCH 04/78] Disable selecting the character image --- components/CharacterUnit/index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 0cf54982..2c630039 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -60,6 +60,8 @@ transition: all 0.18s ease-in-out; height: auto; width: 100%; + -webkit-user-select: none; /* Safari */ + user-select: none; &:hover .icon svg { fill: var(--icon-secondary-hover); From 6cd55e91664cb9381b384099410de89106115de8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 4 Jan 2023 22:33:30 -0800 Subject: [PATCH 05/78] Add ContextMenu to CharacterUnit with placeholders --- components/CharacterUnit/index.scss | 1 + components/CharacterUnit/index.tsx | 30 +++++++++++++++++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 2c630039..9741d1c9 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -5,6 +5,7 @@ gap: calc($unit / 2); // min-height: 320px; // max-width: 200px; + position: relative; margin-bottom: $unit * 4; &.editable .CharacterImage:hover { diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index 7dbce073..05925d14 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -4,12 +4,21 @@ import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' import classnames from 'classnames' -import { appState } from '~utils/appState' - +import Button from '~components/Button' import CharacterHovercard from '~components/CharacterHovercard' +import { + ContextMenu, + ContextMenuTrigger, + ContextMenuContent, +} from '~components/ContextMenu' +import ContextMenuItem from '~components/ContextMenuItem' import SearchModal from '~components/SearchModal' import UncapIndicator from '~components/UncapIndicator' + +import { appState } from '~utils/appState' + import PlusIcon from '~public/icons/Add.svg' +import SettingsIcon from '~public/icons/Settings.svg' import type { SearchableObject } from '~types' @@ -106,8 +115,25 @@ const CharacterUnit = (props: Props) => { ) + const contextMenu = () => { + return props.editable && gridCharacter && gridCharacter.id ? ( + + +