From 277dbd907fa0d39af75b234e3cf08bd2ab4661cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= Date: Mon, 25 May 2026 23:00:57 +0300 Subject: [PATCH] =?UTF-8?q?Intranet=20stil=20d=C3=BCzenlemeleri?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/views/intranet/SocialWall/PostItem.tsx | 2 +- .../intranet/widgets/AnnouncementModal.tsx | 536 +++++++++-------- ui/src/views/intranet/widgets/EventModal.tsx | 552 +++++++++--------- ui/src/views/intranet/widgets/SurveyModal.tsx | 137 ++--- 4 files changed, 621 insertions(+), 606 deletions(-) diff --git a/ui/src/views/intranet/SocialWall/PostItem.tsx b/ui/src/views/intranet/SocialWall/PostItem.tsx index d5c1d74..b081f24 100644 --- a/ui/src/views/intranet/SocialWall/PostItem.tsx +++ b/ui/src/views/intranet/SocialWall/PostItem.tsx @@ -299,7 +299,7 @@ const PostItem: React.FC = ({ post, onLike, onComment, onDelete, className="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-colors" title={translate('::App.Platform.Intranet.SocialWall.PostItem.DeletePost')} > - + )} diff --git a/ui/src/views/intranet/widgets/AnnouncementModal.tsx b/ui/src/views/intranet/widgets/AnnouncementModal.tsx index 884a771..3c8818e 100644 --- a/ui/src/views/intranet/widgets/AnnouncementModal.tsx +++ b/ui/src/views/intranet/widgets/AnnouncementModal.tsx @@ -1,7 +1,17 @@ import React, { useEffect, useState } from 'react' +import { createPortal } from 'react-dom' import { useLocalization } from '@/utils/hooks/useLocalization' import { motion, AnimatePresence } from 'framer-motion' -import { FaTimes, FaEye, FaClipboard, FaChevronLeft, FaChevronRight } from 'react-icons/fa' +import { + FaTimes, + FaEye, + FaClipboard, + FaChevronLeft, + FaChevronRight, + FaExpand, +} from 'react-icons/fa' +import { Dialog } from '@/components/ui' +import { useDialogContext } from '@/components/ui/Dialog/Dialog' import { AnnouncementDto } from '@/proxy/intranet/models' import useLocale from '@/utils/hooks/useLocale' import { currentLocalDate } from '@/utils/dateUtils' @@ -14,9 +24,11 @@ interface AnnouncementModalProps { onClose: () => void } -const AnnouncementModal: React.FC = ({ announcement, onClose }) => { +function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalProps) { const { translate } = useLocalization() const currentLocale = useLocale() + const { isMaximized } = useDialogContext() + const [activePhoto, setActivePhoto] = useState(0) const [lightboxOpen, setLightboxOpen] = useState(false) const [lightboxIndex, setLightboxIndex] = useState(0) @@ -48,7 +60,10 @@ const AnnouncementModal: React.FC = ({ announcement, onC const category = announcement.category || 'general' const imgSrc = (img: string) => - img.startsWith('data:') || img.startsWith('http://') || img.startsWith('https://') || img.startsWith('/') + img.startsWith('data:') || + img.startsWith('http://') || + img.startsWith('https://') || + img.startsWith('/') ? img : `data:image/jpeg;base64,${img}` @@ -65,266 +80,287 @@ const AnnouncementModal: React.FC = ({ announcement, onC return ( <> - -
- e.stopPropagation()} - > - {/* Header */} -
-
-
-
- - {category === 'general' && - `📢 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.General')}`} - {category === 'hr' && - `👥 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.HR')}`} - {category === 'it' && - `💻 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.IT')}`} - {category === 'event' && - `🎉 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.Event')}`} - {category === 'urgent' && - `🚨 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.Urgent')}`} + + {/* Header */} +
+
+
+
+ + {category === 'general' && + `📢 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.General')}`} + {category === 'hr' && + `👥 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.HR')}`} + {category === 'it' && + `💻 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.IT')}`} + {category === 'event' && + `🎉 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.Event')}`} + {category === 'urgent' && + `🚨 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.Urgent')}`} + + {announcement.isPinned && ( + + 📌 {translate('::App.Platform.Intranet.AnnouncementDetailModal.Pinned')} - {announcement.isPinned && ( - - 📌 {translate('::App.Platform.Intranet.AnnouncementDetailModal.Pinned')} - - )} -
-

- {announcement.title} -

-
- -
- - {/* Author Info */} -
- -
-

- {announcementUserName} -

-
- {currentLocalDate(announcement.publishDate, currentLocale || 'tr')} - • - - - {announcement.viewCount}{' '} - {translate('::App.Platform.Intranet.AnnouncementDetailModal.Views')} - -
+ )}
+

+ {announcement.title} +

- {/* Content */} -
- {/* Images if exist */} - {images.length > 0 && - (() => { - const getGridClass = (count: number) => { - if (count === 1) return '' - if (count === 2) return 'grid grid-cols-2 gap-2' - if (count === 3) return 'grid grid-cols-3 gap-2' - return 'grid grid-cols-2 gap-2' - } - const getImgClass = (count: number, idx: number) => { - if (count === 1) return 'w-full rounded-lg object-cover max-h-96' - if (count === 3 && idx === 0) return 'col-span-3 w-full rounded-lg object-cover max-h-64' - if (count >= 4 && idx === 0) return 'col-span-2 w-full rounded-lg object-cover max-h-64' - return 'w-full rounded-lg object-cover h-40' - } - return ( -
- {images.map((img, idx) => ( + {/* Author Info */} +
+ +
+

{announcementUserName}

+
+ {currentLocalDate(announcement.publishDate, currentLocale || 'tr')} + • + + + {announcement.viewCount}{' '} + {translate('::App.Platform.Intranet.AnnouncementDetailModal.Views')} + +
+
+
+
+ + {/* Content */} +
+ {/* Full Content */} +
+ {/* Expiry Date */} + {announcement.expiryDate && ( +

+ + {translate('::App.Platform.Intranet.AnnouncementDetailModal.ExpiryDate')}: + {' '} + {currentLocalDate(announcement.expiryDate, currentLocale || 'tr')} +

+ )} + +

+ {announcement.content} +

+
+ + {/* Images if exist */} + {images.length > 0 && ( +
+
+ {`${announcement.title} openLightbox(activePhoto)} + /> + + {images.length > 1 && ( + <> + + + + )} +
+ {images.length > 1 && ( +
+ {images.map((img, idx) => ( + + ))} +
+ )} +
+ )} + + {/* Attachments */} + {attachments.length > 0 && ( +
+

+ + {translate('::App.Platform.Intranet.AnnouncementDetailModal.Attachments')} ( + {attachments.length}) +

+ +
+ )} + + {/* Departments */} + {announcement.departments && announcement.departments.length > 0 && ( +
+

+ {translate('::App.Platform.Intranet.AnnouncementDetailModal.TargetDepartments')} +

+
+ {announcement.departments?.map((dept, idx) => ( + + {dept} + + ))} +
+
+ )} +
+ + + + + + + {/* Lightbox */} + {createPortal( + + {lightboxOpen && ( + <> + +
+ + {images.length > 1 && ( + <> + + + + )} + e.stopPropagation()} + /> + {images.length > 1 && ( +
+ {images.map((_, idx) => ( +
- ) - })()} - - {/* Full Content */} -
-

- {announcement.content} -

-
- - {/* Attachments */} - {attachments.length > 0 && ( -
-

- - {translate('::App.Platform.Intranet.AnnouncementDetailModal.Attachments')} ( - {attachments.length}) -

- + )}
- )} - - {/* Departments */} - {announcement.departments && announcement.departments.length > 0 && ( -
-

- {translate('::App.Platform.Intranet.AnnouncementDetailModal.TargetDepartments')} -

-
- {announcement.departments?.map((dept, idx) => ( - - {dept} - - ))} -
-
- )} - - {/* Expiry Date */} - {announcement.expiryDate && ( -
-

- - {translate('::App.Platform.Intranet.AnnouncementDetailModal.ExpiryDate')}: - {' '} - {currentLocalDate(announcement.expiryDate, currentLocale || 'tr')} -

-
- )} -
- - {/* Footer */} -
- -
- -
- - {/* Lightbox */} - - {lightboxOpen && ( - <> - -
- - {images.length > 1 && ( - <> - - - - )} - e.stopPropagation()} - /> - {images.length > 1 && ( -
- {images.map((_, idx) => ( -
- )} -
- - )} - + + )} + , + document.body, + )} ) } +const AnnouncementModal: React.FC = ({ announcement, onClose }) => { + return ( + + + + ) +} + export default AnnouncementModal diff --git a/ui/src/views/intranet/widgets/EventModal.tsx b/ui/src/views/intranet/widgets/EventModal.tsx index 56e8936..27e918b 100644 --- a/ui/src/views/intranet/widgets/EventModal.tsx +++ b/ui/src/views/intranet/widgets/EventModal.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef } from 'react' +import { createPortal } from 'react-dom' import { motion, AnimatePresence } from 'framer-motion' import { FaTimes, @@ -12,6 +13,8 @@ import { FaPaperPlane, FaHeart, } from 'react-icons/fa' +import { Dialog } from '@/components/ui' +import { useDialogContext } from '@/components/ui/Dialog/Dialog' import { EventCommentDto, EventDto } from '@/proxy/intranet/models' import useLocale from '@/utils/hooks/useLocale' import { currentLocalDate } from '@/utils/dateUtils' @@ -40,10 +43,11 @@ const imgSrc = (img: string) => { return `data:image/jpeg;base64,${img}` } -const EventModal: React.FC = ({ event, onClose }) => { +function EventModalContent({ event, onClose }: EventModalProps) { const currentLocale = useLocale() const photos = (event.photos || '').split('|').filter(Boolean) const { translate } = useLocalization() + const { isMaximized } = useDialogContext() // Photo slider state const [activePhoto, setActivePhoto] = useState(0) @@ -135,309 +139,293 @@ const EventModal: React.FC = ({ event, onClose }) => { return ( <> - {/* Backdrop */} - - - {/* Modal */} -
- e.stopPropagation()} - > - {/* Header */} -
-
-
-

- {event.name} -

-
+ + {/* Header */} +
+
+
+

+ {event.name} +

+
+ + + {currentLocalDate(event.date, currentLocale || 'tr')} + + {event.place && ( - - {currentLocalDate(event.date, currentLocale || 'tr')} + + {event.place} - {event.place && ( - - - {event.place} - - )} - {event.participantsCount > 0 && ( - - - {event.participantsCount} - - )} -
- -
-
- - {event.user && ( -
- - - {event.user.fullName} - -
)} + {event.participantsCount > 0 && ( + + + {event.participantsCount} + + )} +
+ +
- + + {event.user && ( +
+ + + {event.user.fullName} + +
+ )}
+
- {/* Scrollable body */} -
- {/* Photo Gallery */} - {photos.length > 0 && ( -
- {/* Main photo */} -
- {`${event.name} openLightbox(activePhoto)} - /> - - {photos.length > 1 && ( - <> - - - - )} -
- {/* Thumbnail strip */} - {photos.length > 1 && ( -
- {photos.map((photo, idx) => ( - - ))} -
- )} -
- )} - - {/* Description */} - {event.description && ( -
-

- {event.description} -

-
- )} - - {/* Comments Section */} -
-

- - {translate('::App.Intranet.Events.Comments')} ({comments.length}) -

- - {/* Comment List */} -
- {comments.length === 0 ? ( -

- {translate('::App.Intranet.Events.EventComment')} -

- ) : ( - comments.map((comment) => ( -
- {comment.user && ( - - )} -
-
-

- {comment.user?.fullName ?? 'Kullanıcı'} -

-

- {comment.content} -

-
-

- {dayjs(comment.creationTime).fromNow()} -

-
-
- )) - )} -
-
- - {/* Comment Input */} -
-