binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
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"; import { AlertTriangle } from "lucide-react";
// ui // ui
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";

4
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file

@ -34,7 +34,7 @@ export function ImageAlignmentAction(props: Props) {
<Tooltip disabled={isTouchDevice} tooltipContent="Align"> <Tooltip disabled={isTouchDevice} tooltipContent="Align">
<button <button
type="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)} onClick={() => setIsDropdownOpen((prev) => !prev)}
> >
{activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />} {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}> <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
<button <button
type="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={() => { onClick={() => {
handleChange(option.value); handleChange(option.value);
setIsDropdownOpen(false); setIsDropdownOpen(false);

2
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
View file

@ -14,7 +14,7 @@ export function ImageDownloadAction(props: Props) {
<button <button
type="button" type="button"
onClick={() => window.open(src, "_blank")} 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" aria-label="Download image"
> >
<Download className="size-3" /> <Download className="size-3" />

27
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
View file

@ -193,11 +193,14 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
return ( return (
<div <div
className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", { className={cn(
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled, "fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
"cursor-default": !isDragging, {
"cursor-grabbing": isDragging, "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
})} "cursor-default": !isDragging,
"cursor-grabbing": isDragging,
}
)}
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label="Fullscreen image viewer" 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" className="absolute top-10 right-10 size-8 grid place-items-center"
aria-label="Close image viewer" 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> </button>
<img <img
ref={setImageRef} ref={setImageRef}
@ -231,7 +234,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}} }}
onMouseDown={handleMouseDown} 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"> <div className="flex items-center">
<button <button
type="button" type="button"
@ -242,13 +245,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
} }
handleMagnification("decrease"); 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} disabled={magnification <= MIN_ZOOM}
aria-label="Zoom out" aria-label="Zoom out"
> >
<Minus className="size-4" /> <Minus className="size-4" />
</button> </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 <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@ -258,7 +261,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
} }
handleMagnification("increase"); 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} disabled={magnification >= MAX_ZOOM}
aria-label="Zoom in" aria-label="Zoom in"
> >
@ -269,7 +272,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button <button
type="button" type="button"
onClick={() => window.open(downloadSrc, "_blank")} 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" aria-label="Download image"
> >
<Download className="size-4" /> <Download className="size-4" />
@ -279,7 +282,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button <button
type="button" type="button"
onClick={() => window.open(src, "_blank")} 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" aria-label="Open image in new tab"
> >
<ExternalLink className="size-4" /> <ExternalLink className="size-4" />

2
packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
View file

@ -31,7 +31,7 @@ export function ImageToolbarRoot(props: Props) {
<> <>
<div <div
className={cn( 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, "opacity-100 pointer-events-auto": shouldShowToolbar,
} }