From 9f87d712b959ceb143a18a7cd64c0412da15e5ec Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 03:06:48 -0700 Subject: [PATCH 1/7] Case sensitivity sucks (#345) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path --- components/common/Editor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index 06bb5dd2..00404ae2 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -18,7 +18,7 @@ import ItalicIcon from 'remixicon-react/ItalicIcon' import StrikethroughIcon from 'remixicon-react/StrikethroughIcon' import UnorderedListIcon from 'remixicon-react/ListUnorderedIcon' import OrderedListIcon from '~public/icons/remix/list-ordered-2.svg' -import PaintbrushIcon from 'remixicon-react/PaintbrushLineIcon' +import PaintbrushIcon from 'remixicon-react/PaintBrushLineIcon' import H1Icon from 'remixicon-react/H1Icon' import H2Icon from 'remixicon-react/H2Icon' import H3Icon from 'remixicon-react/H3Icon' From 209f6b733f4b0747d031b11d6a1b6ac17d4d4138 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 03:08:51 -0700 Subject: [PATCH 2/7] Merge conflict bug (#346) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding --- components/party/EditPartyModal/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index cd9a2603..e794fdca 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -476,15 +476,6 @@ const EditPartyModal = ({ /> ) - const editorField = ( - - ) - const chargeAttackField = ( Date: Thu, 6 Jul 2023 03:34:14 -0700 Subject: [PATCH 3/7] Fix some loose styles (#347) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding * Fix styles --- components/common/Editor/index.module.scss | 21 +++++++++++++++------ styles/themes.scss | 16 ++++++++++++++++ styles/variables.scss | 22 ++++++++++++++++++++++ 3 files changed, 53 insertions(+), 6 deletions(-) diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index 6be160ed..0a2b476b 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -74,21 +74,21 @@ h1 { font-size: $font-xlarge; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } h2 { font-size: $font-large; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } h3 { font-size: $font-regular; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } @@ -96,6 +96,7 @@ border-radius: $item-corner-small; background: var(--highlight-bg); color: var(--highlight-text); + font-weight: $normal; padding: 1px $unit-fourth; } @@ -116,15 +117,18 @@ .mention { border-radius: $item-corner-small; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 1px 0px rgba(0, 0, 0, 0.25); - background: var(--card-bg); + 0 1px 0px var(--null-shadow); + background: var(--null-bg); color: var(--text-primary); font-weight: $medium; font-size: 15px; padding: 1px $unit-half; + transition: all 0.1s ease-out; &:hover { - background: var(--card-bg-hover); + background: var(--null-bg-hover); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), + 0 1px 0px var(--null-shadow-hover); text-decoration: none; cursor: pointer; } @@ -136,6 +140,7 @@ color: var(--fire-text); &:hover { + background: var(--fire-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--fire-shadow-hover); color: var(--fire-text-hover); @@ -149,6 +154,7 @@ color: var(--water-text); &:hover { + background: var(--water-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--water-shadow-hover); color: var(--water-text-hover); @@ -162,6 +168,7 @@ color: var(--earth-text); &:hover { + background: var(--earth-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--earth-shadow-hover); color: var(--earth-text-hover); @@ -188,6 +195,7 @@ color: var(--dark-text); &:hover { + background: var(--dark-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--dark-shadow-hover); color: var(--dark-text-hover); @@ -201,6 +209,7 @@ color: var(--light-text); &:hover { + background: var(--light-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--light-shadow-hover); color: var(--light-text-hover); diff --git a/styles/themes.scss b/styles/themes.scss index 9beac5a3..5f256bd6 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -159,6 +159,14 @@ --grid-border-color: #{$grid--border--color--light}; // Light - Element theming + --null-bg: #{$null--bg--light}; + --null-bg-hover: #{$null--bg--hover--light}; + --null-text: #{$null--text--light}; + --null-raid-text: #{$null--text--raid--light}; + --null-text-hover: #{$null--text--hover--light}; + --null-shadow: #{$null--shadow--light}; + --null-shadow-hover: #{$null--shadow--light--hover}; + --wind-bg: #{$wind--bg--light}; --wind-bg-hover: #{$wind--bg--hover--light}; --wind-text: #{$wind--text--light}; @@ -373,6 +381,14 @@ --grid-border-color: #{$grid--border--color--dark}; // Dark - Element theming + --null-bg: #{$null--bg--dark}; + --null-bg-hover: #{$null--bg--hover--dark}; + --null-text: #{$null--text--dark}; + --null-raid-text: #{$null--text--raid--dark}; + --null-text-hover: #{$null--text--hover--dark}; + --null-shadow: #{$null--shadow--dark}; + --null-shadow-hover: #{$null--shadow--dark--hover}; + --wind-bg: #{$wind--bg--dark}; --wind-bg-hover: #{$wind--bg--hover--dark}; --wind-text: #{$wind--text--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 415b5e41..8877117a 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -464,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3); $wind--shadow--light--hover: fade-out($wind-text-00, 0.3); $wind--shadow--dark--hover: fade-out($wind-text-00, 0.3); +// Color Definitions: Element / Null +$null--bg--light: $grey-75; +$null--bg--dark: $grey-40; + +$null--bg--hover--light: $grey-70; +$null--bg--hover--dark: $grey-30; + +$null--text--light: $grey-40; +$null--text--dark: $grey-90; + +$null--text--raid--light: $grey-40; +$null--text--raid--dark: $grey-90; + +$null--text--hover--light: $grey-20; +$null--text--hover--dark: $grey-90; + +$null--shadow--light: fade-out($grey-60, 0.3); +$null--shadow--dark: fade-out($grey-25, 0.3); + +$null--shadow--light--hover: fade-out($grey-50, 0.3); +$null--shadow--dark--hover: fade-out($grey-10, 0.3); + // Color Definitions: Element / Fire $fire--bg--light: $fire-bg-10; $fire--bg--dark: $fire-bg-10; From 65bc7100c4c7b4492266b09d9ea97335e736f90f Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 17:09:21 -0700 Subject: [PATCH 4/7] Deploy transcendence fixes (#351) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding * Fix styles * Update transcendence components to work with CSS modules (#350) * Update transcendence components to use CSS modules * Fix summon transcendence Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on. * Add toolbar localizations * Allow translation of Heading icons * Show localized placeholder for team name * Add placeholder extension * Add placeholder to party description * Ensure name modification works right Needed a null check? for some reason? --- components/common/Editor/index.module.scss | 8 +++ components/common/Editor/index.tsx | 11 +++- components/common/Popover/index.module.scss | 6 -- .../common/PopoverContent/index.module.scss | 5 ++ components/common/ToolbarButton/index.tsx | 8 ++- components/party/EditPartyModal/index.tsx | 5 +- components/summon/SummonGrid/index.tsx | 8 +-- .../TranscendenceFragment/index.module.scss | 14 ++--- .../uncap/TranscendenceFragment/index.tsx | 18 +++--- .../TranscendencePopover/index.module.scss | 62 +++++++++++++++++-- .../uncap/TranscendencePopover/index.tsx | 18 +++--- components/uncap/TranscendenceStar/index.tsx | 11 ++-- package-lock.json | 14 +++++ package.json | 1 + public/locales/en/common.json | 13 ++++ public/locales/ja/common.json | 13 ++++ utils/api.tsx | 11 ++++ 17 files changed, 177 insertions(+), 49 deletions(-) diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index 0a2b476b..fef838f1 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -36,6 +36,14 @@ outline: none; } + p.empty:first-child::before { + color: var(--text-tertiary); + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + } + &.bound { background-color: var(--input-bound-bg); diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index 00404ae2..f99c1d56 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -1,9 +1,12 @@ import { ComponentProps, useCallback, useEffect } from 'react' -import { useRouter } from 'next/router' import { useEditor, EditorContent } from '@tiptap/react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' + import StarterKit from '@tiptap/starter-kit' import Link from '@tiptap/extension-link' import Highlight from '@tiptap/extension-highlight' +import Placeholder from '@tiptap/extension-placeholder' import Typography from '@tiptap/extension-typography' import Youtube from '@tiptap/extension-youtube' import CustomMention from '~extensions/CustomMention' @@ -45,6 +48,8 @@ const Editor = ({ const router = useRouter() const locale = router.locale || 'en' + const { t } = useTranslation('common') + useEffect(() => { editor?.commands.setContent(formatContent(content)) }, [content]) @@ -72,6 +77,10 @@ const Editor = ({ }), Link, Highlight, + Placeholder.configure({ + emptyEditorClass: styles.empty, + placeholder: t('modals.edit_team.placeholders.description'), + }), Typography, CustomMention.configure({ renderLabel({ options, node }) { diff --git a/components/common/Popover/index.module.scss b/components/common/Popover/index.module.scss index 8096d900..67699f31 100644 --- a/components/common/Popover/index.module.scss +++ b/components/common/Popover/index.module.scss @@ -21,12 +21,6 @@ &.flush { padding: 0; } - - .Arrow { - fill: var(--dialog-bg); - filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18)); - margin-top: -1px; - } } .trigger { diff --git a/components/common/PopoverContent/index.module.scss b/components/common/PopoverContent/index.module.scss index e69de29b..31fd8e86 100644 --- a/components/common/PopoverContent/index.module.scss +++ b/components/common/PopoverContent/index.module.scss @@ -0,0 +1,5 @@ +.arrow { + fill: var(--dialog-bg); + filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18)); + margin-top: -1px; +} diff --git a/components/common/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx index 363d4187..7b780ac2 100644 --- a/components/common/ToolbarButton/index.tsx +++ b/components/common/ToolbarButton/index.tsx @@ -24,7 +24,13 @@ const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => { }) return ( - + diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index e794fdca..26103c51 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -297,7 +297,8 @@ const EditPartyModal = ({ // Methods: Modification checking function hasBeenModified() { const nameChanged = - name !== party.name && !(name === '' && party.name === undefined) + name !== party.name && + !(name === '' && (party.name === undefined || party.name === null)) const descriptionChanged = description !== party.description && !(description === '' && party.description === undefined) @@ -433,7 +434,7 @@ const EditPartyModal = ({ const nameField = ( { try { if (stage != previousTranscendenceStages[position]) - await api.endpoints.grid_summons - .update(id, payload) - .then((response) => { - storeGridSummon(response.data.grid_summon) - }) + await api.updateTranscendence('summon', id, stage).then((response) => { + storeGridSummon(response.data.grid_summon) + }) } catch (error) { console.error(error) diff --git a/components/uncap/TranscendenceFragment/index.module.scss b/components/uncap/TranscendenceFragment/index.module.scss index bab27223..8562c6b2 100644 --- a/components/uncap/TranscendenceFragment/index.module.scss +++ b/components/uncap/TranscendenceFragment/index.module.scss @@ -1,4 +1,4 @@ -.Fragment { +.fragment { $degrees: 72deg; $origWidth: 29px; @@ -28,11 +28,11 @@ cursor: pointer; } - &.Visible { + &.visible { opacity: 1; } - &.Stage1 { + &.stage1 { top: 3px; left: 18px; @@ -41,7 +41,7 @@ // } } - &.Stage2 { + &.stage2 { top: 10px; left: 27px; transform: rotate($degrees); @@ -51,7 +51,7 @@ // } } - &.Stage3 { + &.stage3 { top: 21px; left: 24px; transform: rotate($degrees * 2); @@ -61,7 +61,7 @@ // } } - &.Stage4 { + &.stage4 { top: 21px; left: 12px; transform: rotate($degrees * 3); @@ -71,7 +71,7 @@ // } } - &.Stage5 { + &.stage5 { top: 10px; left: 8px; transform: rotate($degrees * 4); diff --git a/components/uncap/TranscendenceFragment/index.tsx b/components/uncap/TranscendenceFragment/index.tsx index 769b3696..852353d5 100644 --- a/components/uncap/TranscendenceFragment/index.tsx +++ b/components/uncap/TranscendenceFragment/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import classnames from 'classnames' +import classNames from 'classnames' import styles from './index.module.scss' @@ -18,14 +18,14 @@ const TranscendenceFragment = ({ onClick, onHover, }: Props) => { - const classes = classnames({ - Fragment: true, - Visible: visible, - Stage1: stage === 1, - Stage2: stage === 2, - Stage3: stage === 3, - Stage4: stage === 4, - Stage5: stage === 5, + const classes = classNames({ + [styles.fragment]: true, + [styles.visible]: visible, + [styles.stage1]: stage === 1, + [styles.stage2]: stage === 2, + [styles.stage3]: stage === 3, + [styles.stage4]: stage === 4, + [styles.stage5]: stage === 5, }) function handleClick() { diff --git a/components/uncap/TranscendencePopover/index.module.scss b/components/uncap/TranscendencePopover/index.module.scss index fb09e919..311138fe 100644 --- a/components/uncap/TranscendencePopover/index.module.scss +++ b/components/uncap/TranscendencePopover/index.module.scss @@ -1,11 +1,20 @@ -.Transcendence.Popover { - align-items: center; +.transcendence { + display: flex; flex-direction: column; gap: $unit-half; - display: flex; + align-items: center; + justify-content: center; width: $unit-10x; height: $unit-10x; - justify-content: center; + + animation: scaleIn $duration-zoom ease-out; + background: var(--dialog-bg); + border-radius: $card-corner; + border: 0.5px solid rgba(0, 0, 0, 0.18); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); + outline: none; + padding: $unit; + transform-origin: var(--radix-popover-content-transform-origin); z-index: 32; &.open { @@ -18,7 +27,50 @@ font-weight: $medium; } - .Pending { + .pending { color: $yellow; } } + +@keyframes scaleIn { + 0% { + opacity: 0; + transform: scale(0); + } + 20% { + opacity: 0.2; + transform: scale(0.4); + } + 40% { + opacity: 0.4; + transform: scale(0.8); + } + 60% { + opacity: 0.6; + transform: scale(1); + } + 65% { + opacity: 0.65; + transform: scale(1.1); + } + 70% { + opacity: 0.7; + transform: scale(1); + } + 75% { + opacity: 0.75; + transform: scale(0.98); + } + 80% { + opacity: 0.8; + transform: scale(1.02); + } + 90% { + opacity: 0.9; + transform: scale(0.96); + } + 100% { + opacity: 1; + transform: scale(1); + } +} diff --git a/components/uncap/TranscendencePopover/index.tsx b/components/uncap/TranscendencePopover/index.tsx index 69c8fe38..8d11b484 100644 --- a/components/uncap/TranscendencePopover/index.tsx +++ b/components/uncap/TranscendencePopover/index.tsx @@ -2,8 +2,8 @@ import React, { PropsWithChildren, useEffect, useState } from 'react' import { useTranslation } from 'next-i18next' import classNames from 'classnames' +import { Popover } from '@radix-ui/react-popover' import { - Popover, PopoverAnchor, PopoverContent, } from '~components/common/PopoverContent' @@ -40,12 +40,8 @@ const TranscendencePopover = ({ const popoverRef = React.createRef() - const classes = classNames({ - Transcendence: true, - }) - const levelClasses = classNames({ - Pending: stage != currentStage, + [styles.pending]: stage != currentStage, }) useEffect(() => { @@ -77,16 +73,20 @@ const TranscendencePopover = ({ return ( {children} - + -

+

{t('level')}  {baseLevel + 10 * currentStage}

diff --git a/components/uncap/TranscendenceStar/index.tsx b/components/uncap/TranscendenceStar/index.tsx index 8f426549..7c3b3fa0 100644 --- a/components/uncap/TranscendenceStar/index.tsx +++ b/components/uncap/TranscendenceStar/index.tsx @@ -46,9 +46,12 @@ const TranscendenceStar = ({ [styles.stage5]: stage === 5, }) - const baseImageClasses = classnames(className, { - [styles.figure]: true, - }) + const baseImageClasses = classnames( + { + [styles.figure]: true, + }, + className?.split(' ').map((c) => styles[c]) + ) useEffect(() => { setVisibleStage(stage) @@ -87,7 +90,7 @@ const TranscendenceStar = ({ onMouseLeave={interactive ? handleMouseLeave : () => {}} tabIndex={tabIndex} > -
+
{[...Array(NUM_FRAGMENTS)].map((e, i) => { const loopStage = i + 1 return interactive ? ( diff --git a/package-lock.json b/package-lock.json index 27b232b2..f3cf9fe4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@tiptap/extension-highlight": "^2.0.3", "@tiptap/extension-link": "^2.0.3", "@tiptap/extension-mention": "^2.0.3", + "@tiptap/extension-placeholder": "^2.0.3", "@tiptap/extension-typography": "^2.0.3", "@tiptap/extension-youtube": "^2.0.3", "@tiptap/pm": "^2.0.3", @@ -7348,6 +7349,19 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-placeholder": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.0.3.tgz", + "integrity": "sha512-Z42jo0termRAf0S0L8oxrts94IWX5waU4isS2CUw8xCUigYyCFslkhQXkWATO1qRbjNFLKN2C9qvCgGf4UeBrw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0", + "@tiptap/pm": "^2.0.0" + } + }, "node_modules/@tiptap/extension-strike": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.3.tgz", diff --git a/package.json b/package.json index 202aa676..840c3cef 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@tiptap/extension-highlight": "^2.0.3", "@tiptap/extension-link": "^2.0.3", "@tiptap/extension-mention": "^2.0.3", + "@tiptap/extension-placeholder": "^2.0.3", "@tiptap/extension-typography": "^2.0.3", "@tiptap/extension-youtube": "^2.0.3", "@tiptap/pm": "^2.0.3", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 149ded99..529fe5b0 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -557,6 +557,19 @@ "tokens": { "remix": "Remixed" }, + "toolbar": { + "tooltips": { + "bold": "Bold", + "italic": "Italic", + "strike": "Strikethrough", + "highlight": "Highlight", + "link": "Add a link", + "youtube": "Add a Youtube video", + "heading": "Heading {{level}}", + "bulletList": "Bullet list", + "orderedList": "Numbered list" + } + }, "tooltips": { "copy_url": "Copy the URL to this team", "new": "Create a new team", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 94169382..8c9fe7e4 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -555,6 +555,19 @@ "tokens": { "remix": "リミックスされた" }, + "toolbar": { + "tooltips": { + "bold": "太字", + "italic": "斜体", + "strike": "取り消し線", + "highlight": "ハイライト", + "link": "リンクを挿入", + "youtube": "Youtube動画を埋め込む", + "heading": "見出し {{level}}", + "bulletList": "箇条書き", + "orderedList": "番号リスト" + } + }, "tooltips": { "copy_url": "この編成のURLをコピーする", "new": "新しい編成を作成する", diff --git a/utils/api.tsx b/utils/api.tsx index bd55cd0b..63ac5ba4 100644 --- a/utils/api.tsx +++ b/utils/api.tsx @@ -179,6 +179,17 @@ class Api { } }) } + + updateTranscendence(resource: 'character'|'summon', id: string, value: number) { + const pluralized = resource + 's' + const resourceUrl = `${this.url}/${pluralized}/update_uncap` + return axios.post(resourceUrl, { + [resource]: { + id: id, + transcendence_step: value + } + }) + } userInfo(id: string) { const resourceUrl = `${this.url}/users/info/${id}` From f7f723b3f406d3971bf5c3cd49344e5805813920 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 19:23:40 -0700 Subject: [PATCH 5/7] Tactical mobile fixes (#352) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding * Fix styles * Update transcendence components to work with CSS modules (#350) * Update transcendence components to use CSS modules * Fix summon transcendence Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on. * Add toolbar localizations * Allow translation of Heading icons * Show localized placeholder for team name * Add placeholder extension * Add placeholder to party description * Ensure name modification works right Needed a null check? for some reason? * Small fix for some modals on mobile This fixes the slide up animation and the end point so that modals are actually visible on mobile. Ones that scroll still don't work great. * Fix TableField components on mobile * Put viewport meta tag in _app * Some fixes for scrollable dialogs on mobile This is 100% not going to scale to devices that are not my iPhone 14 Pro Max, but I can't get env variables working in CSS and something is better than nothing for right now. --- components/about/AboutHead/index.tsx | 2 +- .../common/DialogContent/index.module.scss | 131 +++--------------- components/common/DialogContent/index.tsx | 12 +- .../common/DialogFooter/index.module.scss | 7 + components/common/Select/index.module.scss | 4 + components/common/Slider/index.module.scss | 4 + components/common/SliderTableField/index.tsx | 1 + .../common/TableField/index.module.scss | 8 ++ .../filters/FilterModal/index.module.scss | 1 + components/filters/FilterModal/index.tsx | 3 +- components/head/NewHead/index.tsx | 2 +- components/head/ProfileHead/index.tsx | 2 +- components/head/SavedHead/index.tsx | 2 +- components/head/TeamsHead/index.tsx | 1 - components/party/PartyHead/index.tsx | 2 +- pages/_app.tsx | 37 +++-- 16 files changed, 88 insertions(+), 131 deletions(-) diff --git a/components/about/AboutHead/index.tsx b/components/about/AboutHead/index.tsx index 0aa45ec7..e4092694 100644 --- a/components/about/AboutHead/index.tsx +++ b/components/about/AboutHead/index.tsx @@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => { name="description" content={t(`page.descriptions.${currentPage}`)} /> - + {/* OpenGraph */} diff --git a/components/common/DialogContent/index.module.scss b/components/common/DialogContent/index.module.scss index 375acb76..92df55c2 100644 --- a/components/common/DialogContent/index.module.scss +++ b/components/common/DialogContent/index.module.scss @@ -13,6 +13,14 @@ color: inherit; z-index: 10; + @include breakpoint(phone) { + place-items: flex-end; + overflow-y: hidden; + + &.filter { + } + } + .dialogContent { $multiplier: 4; @@ -51,11 +59,11 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; min-width: inherit; - min-height: 90vh; + min-height: inherit; transform: initial; left: 0; right: 0; - top: 5vh; + top: $unit-10x; height: auto; width: 100%; } @@ -101,110 +109,6 @@ overflow-y: auto; } } - - &.Conflict { - $weapon-diameter: 14rem; - - .Content { - display: flex; - flex-direction: column; - gap: $unit-4x; - padding: $unit-4x $unit-4x $unit-2x $unit-4x; - - & > p { - font-size: $font-regular; - line-height: 1.4; - - strong { - font-weight: $bold; - } - - &:lang(ja) { - line-height: 1.4; - } - } - } - - .weapon, - .character { - display: flex; - flex-direction: column; - gap: $unit; - text-align: center; - width: $weapon-diameter; - font-weight: $medium; - - img { - border-radius: 1rem; - width: $weapon-diameter; - height: auto; - } - - span { - line-height: 1.3; - } - } - - .Diagram { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: flex-start; - - &.CharacterDiagram { - align-items: center; - } - - ul { - align-items: center; - display: flex; - flex-direction: column; - gap: $unit-2x; - } - - .wrapper { - display: flex; - justify-content: center; - width: 100%; - } - - .arrow { - align-items: center; - color: $grey-55; - display: flex; - font-size: 4rem; - text-align: center; - height: $weapon-diameter; - justify-content: center; - } - } - - footer { - display: flex; - flex-direction: row; - gap: $unit; - - .Button { - font-size: $font-regular; - padding: ($unit * 1.5) ($unit * 2); - width: 100%; - - &.btn-disabled { - background: $grey-90; - color: $grey-70; - cursor: not-allowed; - } - - &:not(.btn-disabled) { - background: $grey-90; - color: $grey-50; - - &:hover { - background: $grey-80; - } - } - } - } - } } @keyframes openModalDesktop { @@ -221,11 +125,20 @@ @keyframes slideUp { 0% { - transform: translate(0%, 100%); + transform: translateY(400px); + animation-timing-function: ease-out; + } + 60% { + transform: translateY(-30px); + animation-timing-function: ease-in; + } + 80% { + transform: translateY(10px); + animation-timing-function: ease-out; } - 100% { - transform: translate(0, 0%); + transform: translateY(0px); + animation-timing-function: ease-in; } } } diff --git a/components/common/DialogContent/index.tsx b/components/common/DialogContent/index.tsx index 53703c7d..44823b3b 100644 --- a/components/common/DialogContent/index.tsx +++ b/components/common/DialogContent/index.tsx @@ -11,6 +11,7 @@ interface Props React.DialogHTMLAttributes, HTMLDivElement > { + wrapperClassName?: string headerref?: React.RefObject footerref?: React.RefObject scrollable?: boolean @@ -127,7 +128,16 @@ const DialogContent = React.forwardRef(function Dialog( return ( - + styles[className]) + )} + > { max={props.max} step={props.step} value={[props.value ? props.value : 0]} + className="table" onValueChange={handleValueChange} onValueCommit={handleValueCommit} /> diff --git a/components/common/TableField/index.module.scss b/components/common/TableField/index.module.scss index de900793..e48b5328 100644 --- a/components/common/TableField/index.module.scss +++ b/components/common/TableField/index.module.scss @@ -36,6 +36,14 @@ } } + &.switch { + @include breakpoint(phone) { + align-items: center; + flex-direction: row; + justify-content: space-between; + } + } + .left { align-items: center; display: flex; diff --git a/components/filters/FilterModal/index.module.scss b/components/filters/FilterModal/index.module.scss index e2b68ed2..c1a55e87 100644 --- a/components/filters/FilterModal/index.module.scss +++ b/components/filters/FilterModal/index.module.scss @@ -39,5 +39,6 @@ @include breakpoint(phone) { gap: $unit-4x; + margin-bottom: $unit * 24; } } diff --git a/components/filters/FilterModal/index.tsx b/components/filters/FilterModal/index.tsx index d46cd0cb..ce73f588 100644 --- a/components/filters/FilterModal/index.tsx +++ b/components/filters/FilterModal/index.tsx @@ -402,7 +402,8 @@ const FilterModal = (props: Props) => { {props.children} { {/* HTML */} {t('page.titles.new')} - + {/* OpenGraph */} diff --git a/components/head/ProfileHead/index.tsx b/components/head/ProfileHead/index.tsx index 293cab5a..7e3b61a8 100644 --- a/components/head/ProfileHead/index.tsx +++ b/components/head/ProfileHead/index.tsx @@ -20,7 +20,7 @@ const ProfileHead = ({ user }: Props) => { username: user.username, })} /> - + {/* OpenGraph */} diff --git a/components/head/SavedHead/index.tsx b/components/head/SavedHead/index.tsx index 75821047..b87f349f 100644 --- a/components/head/SavedHead/index.tsx +++ b/components/head/SavedHead/index.tsx @@ -9,7 +9,7 @@ const SavedHead = () => { return ( {t('page.titles.saved')} - + diff --git a/components/head/TeamsHead/index.tsx b/components/head/TeamsHead/index.tsx index 66624a2f..a2aca1d2 100644 --- a/components/head/TeamsHead/index.tsx +++ b/components/head/TeamsHead/index.tsx @@ -11,7 +11,6 @@ const TeamsHead = () => { {/* HTML */} {t('page.titles.discover')} - {/* OpenGraph */} diff --git a/components/party/PartyHead/index.tsx b/components/party/PartyHead/index.tsx index 7971de81..34590904 100644 --- a/components/party/PartyHead/index.tsx +++ b/components/party/PartyHead/index.tsx @@ -32,7 +32,7 @@ const PartyHead = ({ party, meta }: Props) => { raidName: party.raid ? party.raid.name[locale] : '', })} /> - + {/* OpenGraph */} diff --git a/pages/_app.tsx b/pages/_app.tsx index 60381287..6f3c64eb 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import { appWithTranslation } from 'next-i18next' +import Head from 'next/head' import Link from 'next/link' import { useTranslation } from 'next-i18next' import { get } from 'local-storage' @@ -131,20 +132,28 @@ function MyApp({ Component, pageProps }: AppProps) { } return ( - - - - - {!appState.version ? ( - serverUnavailable() - ) : ( - - )} - - - - - + <> + + + + + + + + {!appState.version ? ( + serverUnavailable() + ) : ( + + )} + + + + + + ) } From 19c852c13b9cfbe16f32d8a8b74ec5c84379986e Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 22:28:41 -0700 Subject: [PATCH 6/7] Hotfix to disable page tabs (#354) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding * Fix styles * Update transcendence components to work with CSS modules (#350) * Update transcendence components to use CSS modules * Fix summon transcendence Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on. * Add toolbar localizations * Allow translation of Heading icons * Show localized placeholder for team name * Add placeholder extension * Add placeholder to party description * Ensure name modification works right Needed a null check? for some reason? * Small fix for some modals on mobile This fixes the slide up animation and the end point so that modals are actually visible on mobile. Ones that scroll still don't work great. * Fix TableField components on mobile * Put viewport meta tag in _app * Some fixes for scrollable dialogs on mobile This is 100% not going to scale to devices that are not my iPhone 14 Pro Max, but I can't get env variables working in CSS and something is better than nothing for right now. * Disable tab pages --- pages/p/[party].tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 10b08b75..00bc379a 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -90,8 +90,8 @@ const PartyRoute: React.FC = ({ break } - if (router.asPath !== '/new' && router.asPath !== '/') - router.replace(path, undefined, { shallow: true }) + // if (router.asPath !== '/new' && router.asPath !== '/') + // router.replace(path, undefined, { shallow: true }) } // Set the initial data from props From d0b1b7fde2a75b12760a53bf5b00858289455eb5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 16 Jul 2023 01:43:40 -0700 Subject: [PATCH 7/7] Add items from July 2023 Flash Gala (#356) * Rich text editor and support for tagging objects (#340) * Preliminary work around making an Element type * Disabled Youtube code for now * Clean description with DOMPurify * Update GranblueElement with slug * Add new api endpoint for searching all resources * Add new variables and themes * Remove fixed height on html tag for now * Update README.md We renamed the folders for character images from `chara-` to `character-` * Add no results string * Add tiptap and associated packages * Update .gitignore * Update components that use character images * Add Editor component This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap. * Add mention components This adds the code required for us to mention objects in rich text fields like team descriptions. The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token. * Implements Editor in edit team and team footer This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only. * Remove min-width on tokens * Add rudimentary conversion for old descriptions Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update * Add support for displaying jobs in MentionList * Handle numbers and value=0 better * Keep description reactive This shouldn't work? The snapshot should be the reactive one? I don't fucking know * Send locale to api with search query * Delete getLocale.tsx We didn't actually use this * Fix build errors * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors * Fix icon path * Remove duplicate binding * Fix styles * Update transcendence components to work with CSS modules (#350) * Update transcendence components to use CSS modules * Fix summon transcendence Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on. * Add toolbar localizations * Allow translation of Heading icons * Show localized placeholder for team name * Add placeholder extension * Add placeholder to party description * Ensure name modification works right Needed a null check? for some reason? * Small fix for some modals on mobile This fixes the slide up animation and the end point so that modals are actually visible on mobile. Ones that scroll still don't work great. * Fix TableField components on mobile * Put viewport meta tag in _app * Some fixes for scrollable dialogs on mobile This is 100% not going to scale to devices that are not my iPhone 14 Pro Max, but I can't get env variables working in CSS and something is better than nothing for right now. * Disable tab pages * Update with items from July 2023 Flash Gala ### Weapons - Beach Grynoth - Splash Howl ### Characters - Vaseraga (Summer) - Enyo (Summer) * Correct version * Add uncap event --- components/about/UpdatesPage/index.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/components/about/UpdatesPage/index.tsx b/components/about/UpdatesPage/index.tsx index 7fe4ee3e..f1d44f0f 100644 --- a/components/about/UpdatesPage/index.tsx +++ b/components/about/UpdatesPage/index.tsx @@ -57,6 +57,26 @@ const UpdatesPage = () => { return (

{common('about.segmented_control.updates')}

+ +