oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved media viewer ui

Browse Source
This commit is contained in:
subnub
2025-02-20 19:47:23 -05:00
parent 3650864a2a
commit e4c1013de9
3 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Medias/Medias.tsx
+3 -6
View File
@@ -95,11 +95,8 @@ const Medias = memo(
})();
return (
<div
className="w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll select-none"
ref={scrollDivRef}
>
<div className="flex flex-row mb-5 justify-between items-center mt-2">
<div className="w-full overflow-y-scroll select-none" ref={scrollDivRef}>
<div className="flex flex-row justify-between items-center mt-2 p-[17px_15px] desktopMode:p-[17px_40px] mb-2">
<h2 className={classNames("m-0 text-xl font-medium")}>{title}</h2>
<div className="flex flex-row items-center">
<a className="mr-2" onClick={switchOrderSortBy}>
@@ -139,7 +136,7 @@ const Medias = memo(
{!isLoadingFiles && (
<div
className={classNames(
"grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[2px]"
"grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[2px] p-0 desktopMode:px-[40px]"
)}
>
<div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
src/components/MoverPopup/MoverPopup.tsx
+11 -7
View File
@@ -177,24 +177,28 @@ const MoverPopup = () => {
setSelectedFolder(parentList[parentList.length - 1]);
};
const closeMoverModal = (e: React.MouseEvent<HTMLElement>) => {
const target = e.target as HTMLElement;
if (target.id !== "outer-wrapper") return;
const closeModal = () => {
setAnimate(false);
setTimeout(() => dispatch(resetMoveModal()), 200);
};
const wrapperClick = (e: React.MouseEvent<HTMLElement>) => {
const target = e.target as HTMLElement;
if (target.id !== "outer-wrapper") return;
closeModal();
};
return (
<div
className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
id="outer-wrapper"
onClick={closeMoverModal}
onClick={wrapperClick}
>
<div className="absolute top-[20px] flex justify-between w-full">
<div className="absolute top-[20px] flex justify-end w-full">
<div>
<CloseIcon
className="w-6 h-6 cursor-pointer"
onClick={() => dispatch(resetMoveModal())}
className="w-6 h-6 cursor-pointer text-white mr-4"
onClick={closeModal}
/>
</div>
</div>
src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
+3 -3
View File
@@ -336,13 +336,13 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
</div>
<CircleLeftIcon
onClick={goToPreviousItem}
className="fixed left-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
className="bottom-2 sm:bottom-1/2 fixed left-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
/>
<CircleRightIcon
onClick={goToNextItem}
className="fixed right-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
className="bottom-2 sm:bottom-1/2 fixed right-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
/>
<div className="max-w-[80vw] max-h-[80vh] flex justify-center items-center z-10">
<div className="max-w-[95vw] sm:max-w-[80vw] max-h-[85vh] sm:max-h-[80vh] flex justify-center items-center z-10">
{isThumbnailLoading && !thumbnailError && <Spinner />}
{!file.metadata.isVideo && (
<img