Skip to content

Commit 7984ea5

Browse files
jesusmpcjesusmpc
committed
chore: wip
1 parent 4e2875e commit 7984ea5

16 files changed

+774
-235
lines changed

‎code/app/globals.css‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,3 +216,169 @@
216216
opacity: 1;
217217
}
218218
}
219+
220+
.checkered {
221+
height: 100%;
222+
background:
223+
-webkit-linear-gradient(
224+
45deg,
225+
rgba(0, 0, 0, 0.0980392) 25%,
226+
transparent 25%,
227+
transparent 75%,
228+
rgba(0, 0, 0, 0.0980392) 75%,
229+
rgba(0, 0, 0, 0.0980392) 0
230+
),
231+
-webkit-linear-gradient(
232+
45deg,
233+
rgba(0, 0, 0, 0.0980392) 25%,
234+
transparent 25%,
235+
transparent 75%,
236+
rgba(0, 0, 0, 0.0980392) 75%,
237+
rgba(0, 0, 0, 0.0980392) 0
238+
),
239+
white;
240+
background:
241+
-moz-linear-gradient(
242+
45deg,
243+
rgba(0, 0, 0, 0.0980392) 25%,
244+
transparent 25%,
245+
transparent 75%,
246+
rgba(0, 0, 0, 0.0980392) 75%,
247+
rgba(0, 0, 0, 0.0980392) 0
248+
),
249+
-moz-linear-gradient(
250+
45deg,
251+
rgba(0, 0, 0, 0.0980392) 25%,
252+
transparent 25%,
253+
transparent 75%,
254+
rgba(0, 0, 0, 0.0980392) 75%,
255+
rgba(0, 0, 0, 0.0980392) 0
256+
),
257+
white;
258+
background:
259+
linear-gradient(
260+
45deg,
261+
rgba(0, 0, 0, 0.0980392) 25%,
262+
transparent 25%,
263+
transparent 75%,
264+
rgba(0, 0, 0, 0.0980392) 75%,
265+
rgba(0, 0, 0, 0.0980392) 0
266+
),
267+
linear-gradient(
268+
45deg,
269+
rgba(0, 0, 0, 0.0980392) 25%,
270+
transparent 25%,
271+
transparent 75%,
272+
rgba(0, 0, 0, 0.0980392) 75%,
273+
rgba(0, 0, 0, 0.0980392) 0
274+
),
275+
white;
276+
background-repeat: repeat, repeat;
277+
background-position:
278+
0px 0,
279+
10px 10px;
280+
-webkit-transform-origin: 0 0 0;
281+
transform-origin: 0 0 0;
282+
-webkit-background-origin: padding-box, padding-box;
283+
background-origin: padding-box, padding-box;
284+
-webkit-background-clip: border-box, border-box;
285+
background-clip: border-box, border-box;
286+
-webkit-background-size:
287+
20px 20px,
288+
20px 20px;
289+
background-size:
290+
20px 20px,
291+
20px 20px;
292+
-webkit-box-shadow: none;
293+
box-shadow: none;
294+
text-shadow: none;
295+
-webkit-transition: none;
296+
-moz-transition: none;
297+
-o-transition: none;
298+
transition: none;
299+
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
300+
transform: scaleX(1) scaleY(1) scaleZ(1);
301+
}
302+
303+
.checkered-alt {
304+
height: 100%;
305+
background:
306+
-webkit-linear-gradient(
307+
45deg,
308+
rgba(0, 0, 0, 0.0980392) 25%,
309+
transparent 25%,
310+
transparent 75%,
311+
rgba(0, 0, 0, 0.0980392) 75%,
312+
rgba(0, 0, 0, 0.0980392) 0
313+
),
314+
-webkit-linear-gradient(
315+
45deg,
316+
rgba(0, 0, 0, 0.0980392) 25%,
317+
transparent 25%,
318+
transparent 75%,
319+
rgba(0, 0, 0, 0.0980392) 75%,
320+
rgba(0, 0, 0, 0.0980392) 0
321+
),
322+
black;
323+
background:
324+
-moz-linear-gradient(
325+
45deg,
326+
rgba(0, 0, 0, 0.0980392) 25%,
327+
transparent 25%,
328+
transparent 75%,
329+
rgba(0, 0, 0, 0.0980392) 75%,
330+
rgba(0, 0, 0, 0.0980392) 0
331+
),
332+
-moz-linear-gradient(
333+
45deg,
334+
rgba(0, 0, 0, 0.0980392) 25%,
335+
transparent 25%,
336+
transparent 75%,
337+
rgba(0, 0, 0, 0.0980392) 75%,
338+
rgba(0, 0, 0, 0.0980392) 0
339+
),
340+
black;
341+
background:
342+
linear-gradient(
343+
45deg,
344+
rgba(0, 0, 0, 0.0980392) 25%,
345+
transparent 25%,
346+
transparent 75%,
347+
rgba(0, 0, 0, 0.0980392) 75%,
348+
rgba(0, 0, 0, 0.0980392) 0
349+
),
350+
linear-gradient(
351+
45deg,
352+
rgba(0, 0, 0, 0.0980392) 25%,
353+
transparent 25%,
354+
transparent 75%,
355+
rgba(0, 0, 0, 0.0980392) 75%,
356+
rgba(0, 0, 0, 0.0980392) 0
357+
),
358+
black;
359+
background-repeat: repeat, repeat;
360+
background-position:
361+
0px 0,
362+
10px 10px;
363+
-webkit-transform-origin: 0 0 0;
364+
transform-origin: 0 0 0;
365+
-webkit-background-origin: padding-box, padding-box;
366+
background-origin: padding-box, padding-box;
367+
-webkit-background-clip: border-box, border-box;
368+
background-clip: border-box, border-box;
369+
-webkit-background-size:
370+
20px 20px,
371+
20px 20px;
372+
background-size:
373+
20px 20px,
374+
20px 20px;
375+
-webkit-box-shadow: none;
376+
box-shadow: none;
377+
text-shadow: none;
378+
-webkit-transition: none;
379+
-moz-transition: none;
380+
-o-transition: none;
381+
transition: none;
382+
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
383+
transform: scaleX(1) scaleY(1) scaleZ(1);
384+
}

‎code/components/room-components/context-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function ContextMenuButton({
4949
return (
5050
<button
5151
className={cn(
52-
"!cursor-pointer w-[calc(100%-8px)] flex justify-between items-center gap-2 font-inter text-xs uppercase text-left whitespace-nowrap m-1 text-foreground px-2 py-1.5",
52+
"!cursor-pointer w-[calc(100%-8px)] flex justify-between items-center gap-2 font-inter text-xs text-left whitespace-nowrap m-1 text-foreground px-2 py-1.5",
5353
{
5454
["hover:bg-accent"]: !disabled,
5555
["!cursor-default hover:bg-white text-muted-foreground"]: disabled,

‎code/components/room-components/hooks/use-context-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,7 @@ function useContextMenu() {
446446
"image/png"
447447
);
448448

449-
sidebarToggle(SIDEBAR_ELEMENTS.images);
449+
sidebarToggle(null);
450450

451451
setImagesLLMPopupSelectedNodesV2(nodes.map((n) => n.instance));
452452
setImagesLLMPopupTypeV2("edit-prompt");

‎code/components/room-components/images-library/edit-image.image.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@ export const EditImage = ({ image, selected }: Readonly<EditImageProps>) => {
5151
<div
5252
key={image.imageId}
5353
className={cn(
54-
"group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200 cursor-pointer",
54+
"group block w-full bg-white object-cover relative border-0 border-zinc-200 overflow-hidden",
5555
{
56-
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300"]: true,
56+
["cursor-pointer hover:bg-black"]:
57+
["completed"].includes(image.status) && image.removalJobId === null,
5758
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-100"]:
5859
selected,
5960
}
@@ -77,7 +78,7 @@ export const EditImage = ({ image, selected }: Readonly<EditImageProps>) => {
7778
{["completed"].includes(image.status) && (
7879
// eslint-disable-next-line @next/next/no-img-element
7980
<img
80-
className="w-full block object-cover"
81+
className="w-full block object-cover relative transition-transform duration-500 group-hover:opacity-60"
8182
style={{
8283
aspectRatio: `${image.aspectRatio}`,
8384
}}

‎code/components/room-components/images-library/generated-image.image.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,10 @@ export const GeneratedImage = ({
5454
<div
5555
key={image.imageId}
5656
className={cn(
57-
"group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200 cursor-pointer",
57+
"group block w-full bg-white object-cover relative border-0 border-zinc-200 overflow-hidden",
5858
{
59-
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300"]: true,
59+
["cursor-pointer hover:bg-black"]:
60+
["completed"].includes(image.status) && image.removalJobId === null,
6061
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-100"]:
6162
selected,
6263
}
@@ -80,14 +81,14 @@ export const GeneratedImage = ({
8081
{["completed"].includes(image.status) && (
8182
// eslint-disable-next-line @next/next/no-img-element
8283
<img
83-
className="w-full block object-cover relative"
84+
className="w-full block object-cover relative transition-transform duration-500 group-hover:opacity-60"
8485
style={{
8586
aspectRatio: `${image.aspectRatio}`,
8687
}}
8788
id={image.imageId}
8889
data-image-id={image.imageId}
8990
draggable={
90-
imagesLLMPopupVisible || imagesLLMPopupVisibleV2
91+
imagesLLMPopupVisible || imagesLLMPopupVisibleV2 || selected
9192
? undefined
9293
: "true"
9394
}

‎code/components/room-components/images-library/images-library.tsx‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,9 @@ export const ImagesLibrary = () => {
376376
const newSelectedImages = [];
377377

378378
for (const image of images) {
379-
newSelectedImages.push(image);
379+
if (["completed"].includes(image.status) && image.removalJobId === null) {
380+
newSelectedImages.push(image);
381+
}
380382
}
381383

382384
setSelectedImages(newSelectedImages);
@@ -657,18 +659,7 @@ export const ImagesLibrary = () => {
657659
return (
658660
<div
659661
key={image.imageId}
660-
className={cn("w-full", {
661-
["cursor-pointer"]:
662-
showSelection &&
663-
!(
664-
["pending", "working"].includes(image.status) ||
665-
(image.removalJobId !== null &&
666-
image.removalStatus !== null &&
667-
["pending", "working"].includes(
668-
image.removalStatus
669-
))
670-
),
671-
})}
662+
className="w-full"
672663
onClick={() => {
673664
if (
674665
showSelection &&
@@ -687,17 +678,7 @@ export const ImagesLibrary = () => {
687678
>
688679
<ContextMenu>
689680
<ContextMenuTrigger>
690-
<div
691-
className={cn(
692-
"group relative w-full cursor-pointer",
693-
{
694-
["cursor-pointer"]: !(
695-
imagesLLMPopupVisible ||
696-
imagesLLMPopupVisibleV2
697-
),
698-
}
699-
)}
700-
>
681+
<div className="group relative w-full">
701682
{imageComponent}
702683
{showSelection &&
703684
!(

‎code/components/room-components/images-library/removed-background.image.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,10 @@ export const RemovedBackgroundImage = ({
5757
<div
5858
key={image.imageId}
5959
className={cn(
60-
"group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200cursor-pointer",
60+
"group block w-full bg-white object-cover relative border-0 border-zinc-200 overflow-hidden",
6161
{
62-
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300"]: true,
62+
["cursor-pointer hover:bg-black"]:
63+
["completed"].includes(image.status) && image.removalJobId === null,
6364
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-100"]:
6465
selected,
6566
}
@@ -80,22 +81,25 @@ export const RemovedBackgroundImage = ({
8081
</div>
8182
)}
8283
{["completed"].includes(image.status) && (
83-
// eslint-disable-next-line @next/next/no-img-element
84-
<img
85-
className="w-full block object-cover"
86-
style={{
87-
aspectRatio: `${image.aspectRatio}`,
88-
}}
89-
id={image.imageId}
90-
data-image-id={image.imageId}
91-
draggable={
92-
imagesLLMPopupVisible || imagesLLMPopupVisibleV2
93-
? undefined
94-
: "true"
95-
}
96-
src={imageUrl}
97-
alt="An image"
98-
/>
84+
<>
85+
<div className="absolute inset-0 checkered transition-transform duration-500 group-hover:opacity-60"></div>
86+
{/* eslint-disable-next-line @next/next/no-img-element */}
87+
<img
88+
className="w-full block object-cover relative transition-transform duration-500 group-hover:opacity-60"
89+
style={{
90+
aspectRatio: `${image.aspectRatio}`,
91+
}}
92+
id={image.imageId}
93+
data-image-id={image.imageId}
94+
draggable={
95+
imagesLLMPopupVisible || imagesLLMPopupVisibleV2
96+
? undefined
97+
: "true"
98+
}
99+
src={imageUrl}
100+
alt="An image"
101+
/>
102+
</>
99103
)}
100104
{(["pending", "working"].includes(image.status) ||
101105
(image.removalJobId !== null &&

‎code/components/room-components/images-library/uploaded.image.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,27 +53,25 @@ export const UploadedImage = ({
5353
<div
5454
key={image.imageId}
5555
className={cn(
56-
"group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200 cursor-pointer",
56+
"group block w-full object-cover bg-white relative border-0 border-zinc-200 overflow-hidden",
5757
{
58-
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300"]: true,
58+
["cursor-pointer hover:bg-black"]:
59+
["completed"].includes(image.status) && image.removalJobId === null,
5960
["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-100"]:
6061
selected,
6162
}
6263
)}
6364
>
6465
{/* eslint-disable-next-line @next/next/no-img-element */}
6566
<img
66-
className={cn("w-full block object-cover", {
67-
[" after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity"]:
68-
selected,
69-
})}
67+
className="w-full block object-cover relative transition-transform duration-500 group-hover:opacity-60"
7068
style={{
7169
aspectRatio: `${image.aspectRatio}`,
7270
}}
7371
id={image.imageId}
7472
data-image-id={image.imageId}
7573
draggable={
76-
imagesLLMPopupVisible || imagesLLMPopupVisibleV2 ? "false" : "true"
74+
imagesLLMPopupVisible || imagesLLMPopupVisibleV2 ? undefined : "true"
7775
}
7876
src={imageUrl}
7977
alt="An image"

0 commit comments

Comments
 (0)