mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-04-29 20:49:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5773] fix: editor image full screen modal (#8413)

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-12-22 15:50:02 +05:30
committed by GitHub
parent 57bbf3cf43
commit 72883e76a5
5 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { useState } from "react"; import { observer } from "mobx-react";
import { useState } from "react";
import { observer } from "mobx-react";
import { AlertTriangle } from "lucide-react";
// ui
import { useTranslation } from "@plane/i18n";
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ export function ImageAlignmentAction(props: Props) {
<Tooltip disabled={isTouchDevice} tooltipContent="Align">
<button
type="button"
className="h-full flex items-center gap-1 text-on-color/60 hover:text-on-color transition-colors"
className="h-full flex items-center gap-1 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
onClick={() => setIsDropdownOpen((prev) => !prev)}
>
{activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
@@ -47,7 +47,7 @@ export function ImageAlignmentAction(props: Props) {
<Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
<button
type="button"
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
onClick={() => {
handleChange(option.value);
setIsDropdownOpen(false);
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export function ImageDownloadAction(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
aria-label="Download image"
>
<Download className="size-3" />
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+15 -12
View File
@@ -193,11 +193,14 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
return (
<div
className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
"cursor-default": !isDragging,
"cursor-grabbing": isDragging,
})}
className={cn(
"fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
{
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
"cursor-default": !isDragging,
"cursor-grabbing": isDragging,
}
)}
role="dialog"
aria-modal="true"
aria-label="Fullscreen image viewer"
@@ -213,7 +216,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
className="absolute top-10 right-10 size-8 grid place-items-center"
aria-label="Close image viewer"
>
<CloseIcon className="size-8 text-on-color/60 hover:text-on-color transition-colors" />
<CloseIcon className="size-8 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors" />
</button>
<img
ref={setImageRef}
@@ -231,7 +234,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}}
onMouseDown={handleMouseDown}
/>
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
<div className="flex items-center">
<button
type="button"
@@ -242,13 +245,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("decrease");
}}
className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
disabled={magnification <= MIN_ZOOM}
aria-label="Zoom out"
>
<Minus className="size-4" />
</button>
<span className="text-13 w-12 text-center text-on-color">{Math.round(100 * magnification)}%</span>
<span className="text-13 w-12 text-center text-alpha-white-1200">{Math.round(100 * magnification)}%</span>
<button
type="button"
onClick={(e) => {
@@ -258,7 +261,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("increase");
}}
className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
disabled={magnification >= MAX_ZOOM}
aria-label="Zoom in"
>
@@ -269,7 +272,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(downloadSrc, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
aria-label="Download image"
>
<Download className="size-4" />
@@ -279,7 +282,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
aria-label="Open image in new tab"
>
<ExternalLink className="size-4" />
packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function ImageToolbarRoot(props: Props) {
<>
<div
className={cn(
"absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
"absolute top-1 right-1 h-7 z-20 bg-alpha-black-1000 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": shouldShowToolbar,
}