fix: settings on the global edit
This commit is contained in:
parent
98a6fb1013
commit
9e54e315fd
|
|
@ -105,7 +105,19 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
|
||||
const currentIntegrationText = useMemo(() => {
|
||||
if (current === 'global') {
|
||||
return '';
|
||||
return (
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<div className="relative">
|
||||
<SettingsIcon
|
||||
size={15}
|
||||
className="text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const currentIntegration = integrations.find((p) => p.id === current)!;
|
||||
|
|
@ -425,8 +437,8 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
<div
|
||||
id="social-empty"
|
||||
className={clsx(
|
||||
'pb-[16px]',
|
||||
current !== 'global' && 'hidden'
|
||||
'pb-[16px]'
|
||||
// current !== 'global' && 'hidden'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -436,11 +448,11 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
id="wrapper-settings"
|
||||
className={clsx(
|
||||
'pb-[20px] px-[20px] select-none',
|
||||
current === 'global' && 'hidden',
|
||||
showSettings && 'flex-1 flex pt-[20px]'
|
||||
showSettings && 'flex-1 flex pt-[20px]',
|
||||
current === 'global' && 'hidden'
|
||||
)}
|
||||
>
|
||||
<div className="bg-newSettings flex-1 flex flex-col rounded-[12px] gap-[12px] overflow-hidden">
|
||||
<div className="flex-1 flex flex-col rounded-[12px] gap-[12px] overflow-hidden bg-newSettings">
|
||||
<div
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
className={clsx(
|
||||
|
|
@ -465,9 +477,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
)}
|
||||
>
|
||||
<div
|
||||
id="social-settings"
|
||||
className="px-[12px] pb-[12px] absolute left-0 top-0 w-full h-full overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newBgColorInner scrollbar-track-newColColor"
|
||||
/>
|
||||
className="absolute left-0 top-0 w-full h-full flex flex-col overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newBgColorInner scrollbar-track-newColColor"
|
||||
>
|
||||
<div id="social-settings" className="flex flex-col gap-[20px] bg-newBgColor" />
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
{`#social-settings [data-id="${current}"] {display: block !important;}`}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import useSWR from 'swr';
|
|||
import { InternalChannels } from '@gitroom/frontend/components/launches/internal.channels';
|
||||
import { createPortal } from 'react-dom';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
|
||||
class Empty {
|
||||
@IsOptional()
|
||||
|
|
@ -91,7 +92,7 @@ export const withProvider = function <T extends object>(params: {
|
|||
dummy,
|
||||
setChars,
|
||||
setComments,
|
||||
setHide
|
||||
setHide,
|
||||
} = useLaunchStore(
|
||||
useShallow((state) => ({
|
||||
date: state.date,
|
||||
|
|
@ -141,7 +142,9 @@ export const withProvider = function <T extends object>(params: {
|
|||
}
|
||||
|
||||
if (current) {
|
||||
setComments(typeof params.comments === 'undefined' ? true : params.comments);
|
||||
setComments(
|
||||
typeof params.comments === 'undefined' ? true : params.comments
|
||||
);
|
||||
setEditor(selectedIntegration?.integration.editor);
|
||||
setPostComment(postComment);
|
||||
setTotalChars(
|
||||
|
|
@ -258,7 +261,12 @@ export const withProvider = function <T extends object>(params: {
|
|||
}}
|
||||
>
|
||||
<FormProvider {...form}>
|
||||
<div className={clsx('border border-borderPreview rounded-[12px] shadow-previewShadow', !current && 'hidden')}>
|
||||
<div
|
||||
className={clsx(
|
||||
'border border-borderPreview rounded-[12px] shadow-previewShadow',
|
||||
!current && 'hidden'
|
||||
)}
|
||||
>
|
||||
{current &&
|
||||
(tab === 0 ||
|
||||
(!SettingsComponent && !data?.internalPlugs?.length)) &&
|
||||
|
|
@ -303,19 +311,45 @@ export const withProvider = function <T extends object>(params: {
|
|||
))}
|
||||
{(SettingsComponent || !!data?.internalPlugs?.length) &&
|
||||
createPortal(
|
||||
<div data-id={props.id} className="hidden">
|
||||
<div data-id={props.id} className={isGlobal ? 'bg-newSettings pb-[12px] px-[12px]' : 'hidden bg-newSettings px-[12px] pb-[12px]'}>
|
||||
{isGlobal && (
|
||||
<style>{`#wrapper-settings {display: flex !important} #social-empty {display: block !important;}`}</style>
|
||||
)}
|
||||
{isGlobal && (
|
||||
<div className="flex py-[20px] items-center gap-[15px]">
|
||||
<div className="relative">
|
||||
<Image
|
||||
alt={selectedIntegration?.integration.name!}
|
||||
width={42}
|
||||
height={42}
|
||||
className="min-w-[42px] min-h-[42px] w-[42px] h-[42px] rounded-full"
|
||||
src={selectedIntegration?.integration.picture}
|
||||
/>
|
||||
<Image
|
||||
alt={selectedIntegration?.integration.identifier}
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-[16px] min-w-[16px] min-h-[16px] w-[16px] h-[16px] absolute bottom-0 end-0"
|
||||
src={`/icons/platforms/${selectedIntegration?.integration.identifier}.png`}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[20px]">{selectedIntegration?.integration.name}</div>
|
||||
</div>
|
||||
)}
|
||||
<SettingsComponent />
|
||||
{!!data?.internalPlugs?.length && !dummy && (
|
||||
<InternalChannels plugs={data?.internalPlugs} />
|
||||
)}
|
||||
</div>,
|
||||
document.querySelector('#social-settings') || document.createElement('div')
|
||||
document.querySelector('#social-settings') ||
|
||||
document.createElement('div')
|
||||
)}
|
||||
{current &&
|
||||
!SettingsComponent &&
|
||||
createPortal(
|
||||
<style>{`#wrapper-settings {display: none !important;} #social-empty {display: block !important;}`}</style>,
|
||||
document.querySelector('#social-settings') || document.createElement('div')
|
||||
document.querySelector('#social-settings') ||
|
||||
document.createElement('div')
|
||||
)}
|
||||
</div>
|
||||
</FormProvider>
|
||||
|
|
|
|||
Loading…
Reference in New Issue