Skip to content

Commit 0d134c0

Browse files
nevo-davidnevo-david
committed
feat: editor bug fixes, some previews
1 parent 90da9d4 commit 0d134c0

28 files changed

+1908
-193
lines changed

‎apps/frontend/public/no-video-youtube.png‎

76.2 KB
Loading

‎apps/frontend/src/app/colors.scss‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,26 @@
2828
--new-menu-hover: #fff;
2929
--menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.5);
3030
--popup-color: rgba(65, 64, 66, 0.3);
31+
--border-preview: transparent;
32+
--preview-box-shadow: none;
33+
--linkedin-border: #2e3438;
34+
--linkedin-bg: #1b1f23;
35+
--linkedin-text: #c6c7c8;
36+
--facebook-bg: #242526;
37+
--facebook-bg-comment: #333334;
38+
--instagram-bg: #0b1014;
39+
--tiktok-item-bg: #2a2a2a;
40+
--tiktok-item-icon-bg: #FFF;
41+
--youtube-bg: #0F0F0F;
42+
--youtube-button: #F1F1F1;
43+
--youtube-action-color: #272727;
44+
--youtube-svg-border: #A0A0A0;
3145
}
3246
.light {
3347
--new-back-drop: #2d1b57;
34-
--new-settings: #ECEEF1;
35-
--new-sep: #D5D9DD;
36-
--new-border: #EAECEE;
48+
--new-settings: #eceef1;
49+
--new-sep: #d5d9dd;
50+
--new-border: #eaecee;
3751
--new-bgColor: #f0f2f4;
3852
--new-bgColorInner: #ffffff;
3953
--new-bgLineColor: #e7e9eb;
@@ -62,6 +76,23 @@
6276
-3px 13px 14px 0 rgba(55, 52, 75, 0.09),
6377
-1px 3px 8px 0 rgba(55, 52, 75, 0.1);
6478
--popup-color: rgba(55, 37, 97, 0.2);
79+
--border-preview: #f1f0f3;
80+
--preview-box-shadow: 0 386px 108px 0 rgba(38, 32, 64, 0),
81+
0 247px 99px 0 rgba(38, 32, 64, 0.01),
82+
0 139px 83px 0 rgba(38, 32, 64, 0.03),
83+
0 62px 62px 0 rgba(38, 32, 64, 0.04), 0 15px 34px 0 rgba(38, 32, 64, 0.05);
84+
--linkedin-border: #e9e5df;
85+
--linkedin-bg: #fff;
86+
--linkedin-text: #707070;
87+
--facebook-bg: #f1f0f3;
88+
--facebook-bg-comment: #f6f6f6;
89+
--instagram-bg: #fff;
90+
--tiktok-item-bg: #EEF1F0;
91+
--tiktok-item-icon-bg: #454645;
92+
--youtube-bg: #FFF;
93+
--youtube-button: #000;
94+
--youtube-action-color: #F1F1F1;
95+
--youtube-svg-border: #1A1A1A;
6596
}
6697
}
6798

‎apps/frontend/src/components/launches/general.preview.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const GeneralPreviewComponent: FC<{
4949
});
5050

5151
return (
52-
<div className={clsx('w-full md:w-[555px]')}>
52+
<div className={clsx('w-full p-[15px]')}>
5353
<div className="w-full h-full relative flex flex-col">
5454
{renderContent.map((value, index) => (
5555
<div

‎apps/frontend/src/components/launches/helpers/pick.platform.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ export const PickPlatforms: FC<{
254254
{integration.identifier === 'youtube' ? (
255255
<img
256256
src="/icons/platforms/youtube.svg"
257-
className="absolute z-10 -bottom-[5px] -end-[5px]"
257+
className="absolute z-10 bottom-0 -end-[5px]"
258258
width={20}
259259
/>
260260
) : (

‎apps/frontend/src/components/launches/launches.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ export const MenuComponent: FC<
288288
<ImageWithFallback
289289
fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
290290
src={integration.picture || '/no-picture.jpg'}
291-
className="rounded-[8px]"
291+
className="rounded-[8px] min-w-[36px] min-h-[36px]"
292292
alt={integration.identifier}
293293
width={36}
294294
height={36}
@@ -499,7 +499,7 @@ export const LaunchesComponent = () => {
499499
>
500500
<div
501501
className={clsx(
502-
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
502+
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
503503
)}
504504
>
505505
<div className="flex items-center">

‎apps/frontend/src/components/media/media.component.tsx‎

Lines changed: 74 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ import {
4646
VerticalDividerIcon,
4747
NoMediaIcon,
4848
} from '@gitroom/frontend/components/ui/icons';
49+
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
50+
import { useShallow } from 'zustand/react/shallow';
4951
const Polonto = dynamic(
5052
() => import('@gitroom/frontend/components/launches/polonto')
5153
);
@@ -432,7 +434,7 @@ export const MediaBox: FC<{
432434
onClick={addRemoveSelected(media)}
433435
>
434436
{!!selected.find((p: any) => p.id === media.id) ? (
435-
<div className="flex justify-center items-center text-[14px] font-[500] w-[24px] h-[24px] rounded-full bg-[#612BD3] absolute -bottom-[10px] -end-[10px]">
437+
<div className="text-white flex justify-center items-center text-[14px] font-[500] w-[24px] h-[24px] rounded-full bg-[#612BD3] absolute -bottom-[10px] -end-[10px]">
436438
{selected.findIndex((z: any) => z.id === media.id) + 1}
437439
</div>
438440
) : (
@@ -492,6 +494,7 @@ export const MediaBox: FC<{
492494
export const MultiMediaComponent: FC<{
493495
label: string;
494496
description: string;
497+
mediaNotAvailable?: boolean;
495498
dummy: boolean;
496499
allData: {
497500
content: string;
@@ -535,6 +538,7 @@ export const MultiMediaComponent: FC<{
535538
dummy,
536539
toolBar,
537540
information,
541+
mediaNotAvailable,
538542
} = props;
539543
const user = useUser();
540544
const modals = useModals();
@@ -688,46 +692,50 @@ export const MultiMediaComponent: FC<{
688692
</div>
689693
{!dummy && (
690694
<div className="flex gap-[8px] px-[12px] border-t border-newColColor w-full b1 text-textColor">
691-
<div className="flex py-[10px] b2 items-center gap-[4px]">
692-
<div
693-
onClick={showModal}
694-
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
695-
>
696-
<div className="flex gap-[8px] items-center">
697-
<div>
698-
<InsertMediaIcon />
699-
</div>
700-
<div className="text-[10px] font-[600] maxMedia:hidden block">
701-
{t('insert_media', 'Insert Media')}
695+
{!mediaNotAvailable && (
696+
<div className="flex py-[10px] b2 items-center gap-[4px]">
697+
<div
698+
onClick={showModal}
699+
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
700+
>
701+
<div className="flex gap-[8px] items-center">
702+
<div>
703+
<InsertMediaIcon />
704+
</div>
705+
<div className="text-[10px] font-[600] maxMedia:hidden block">
706+
{t('insert_media', 'Insert Media')}
707+
</div>
702708
</div>
703709
</div>
704-
</div>
705-
<div
706-
onClick={designMedia}
707-
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
708-
>
709-
<div className="flex gap-[5px] items-center">
710-
<div>
711-
<DesignMediaIcon />
712-
</div>
713-
<div className="text-[10px] font-[600] iconBreak:hidden block">
714-
{t('design_media', 'Design Media')}
710+
<div
711+
onClick={designMedia}
712+
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
713+
>
714+
<div className="flex gap-[5px] items-center">
715+
<div>
716+
<DesignMediaIcon />
717+
</div>
718+
<div className="text-[10px] font-[600] iconBreak:hidden block">
719+
{t('design_media', 'Design Media')}
720+
</div>
715721
</div>
716722
</div>
717-
</div>
718723

719-
<ThirdPartyMedia allData={allData} onChange={changeMedia} />
724+
<ThirdPartyMedia allData={allData} onChange={changeMedia} />
720725

721-
{!!user?.tier?.ai && (
722-
<>
723-
<AiImage value={text} onChange={changeMedia} />
724-
<AiVideo value={text} onChange={changeMedia} />
725-
</>
726-
)}
727-
</div>
728-
<div className="text-newColColor h-full flex items-center">
729-
<VerticalDividerIcon />
730-
</div>
726+
{!!user?.tier?.ai && (
727+
<>
728+
<AiImage value={text} onChange={changeMedia} />
729+
<AiVideo value={text} onChange={changeMedia} />
730+
</>
731+
)}
732+
</div>
733+
)}
734+
{!mediaNotAvailable && (
735+
<div className="text-newColColor h-full flex items-center">
736+
<VerticalDividerIcon />
737+
</div>
738+
)}
731739
{!!toolBar && (
732740
<div className="flex py-[10px] b2 items-center gap-[4px]">
733741
{toolBar}
@@ -778,16 +786,28 @@ export const MediaComponent: FC<{
778786
setCurrentMedia(settings);
779787
}
780788
}, []);
781-
const [modal, setShowModal] = useState(false);
782-
const [mediaModal, setMediaModal] = useState(false);
783789
const [currentMedia, setCurrentMedia] = useState(value);
790+
const modals = useModals();
784791
const mediaDirectory = useMediaDirectory();
785-
const closeDesignModal = useCallback(() => {
786-
setMediaModal(false);
787-
}, [modal]);
792+
788793
const showDesignModal = useCallback(() => {
789-
setMediaModal(true);
790-
}, [modal]);
794+
modals.openModal({
795+
title: 'Media Editor',
796+
askClose: false,
797+
closeOnEscape: true,
798+
fullScreen: true,
799+
size: 'calc(100% - 80px)',
800+
height: 'calc(100% - 80px)',
801+
children: (close) => (
802+
<Polonto
803+
width={width}
804+
height={height}
805+
setMedia={changeMedia}
806+
closeModal={close}
807+
/>
808+
),
809+
});
810+
}, []);
791811
const changeMedia = useCallback((m: { path: string; id: string }[]) => {
792812
setCurrentMedia(m[0]);
793813
onChange({
@@ -798,8 +818,18 @@ export const MediaComponent: FC<{
798818
});
799819
}, []);
800820
const showModal = useCallback(() => {
801-
setShowModal(!modal);
802-
}, [modal]);
821+
modals.openModal({
822+
title: 'Media Library',
823+
askClose: false,
824+
closeOnEscape: true,
825+
fullScreen: true,
826+
size: 'calc(100% - 80px)',
827+
height: 'calc(100% - 80px)',
828+
children: (close) => (
829+
<MediaBox setMedia={changeMedia} closeModal={close} type={type} />
830+
),
831+
});
832+
}, []);
803833
const clearMedia = useCallback(() => {
804834
setCurrentMedia(undefined);
805835
onChange({
@@ -811,17 +841,6 @@ export const MediaComponent: FC<{
811841
}, [value]);
812842
return (
813843
<div className="flex flex-col gap-[8px]">
814-
{modal && (
815-
<MediaBox setMedia={changeMedia} closeModal={showModal} type={type} />
816-
)}
817-
{mediaModal && !!user?.tier?.ai && (
818-
<Polonto
819-
width={width}
820-
height={height}
821-
setMedia={changeMedia}
822-
closeModal={closeDesignModal}
823-
/>
824-
)}
825844
<div className="text-[14px]">{label}</div>
826845
<div className="text-[12px]">{description}</div>
827846
{!!currentMedia && (

0 commit comments

Comments
 (0)