Skip to content

Commit 484c53e

Browse files
mohit-nagarajmohit-nagaraj
committed
minor layout tab changes
1 parent e054934 commit 484c53e

File tree

1 file changed

+92
-86
lines changed

1 file changed

+92
-86
lines changed

‎src/renderer/src/App.jsx‎

Lines changed: 92 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ function App() {
7575
loadSettings()
7676
}, [])
7777
useEffect(() => {
78-
;(async () => {
78+
; (async () => {
7979
// 1· Get screen size (unchanged)
8080
if (window.electron?.getScreenInfo) {
8181
const { width, height } = await window.electron.getScreenInfo()
@@ -386,12 +386,12 @@ function App() {
386386
{/* Local File Upload Box */}
387387
<Card className="p-4 flex flex-col items-center justify-between gap-2">
388388
<div className="flex w-full items-center justify-between gap-2">
389-
<div className="w-full text-left font-semibold text-2xl">Local File</div>
390-
{loading && localFile ? (
391-
<div className="text-sm text-muted-foreground">Loading...</div>
392-
) : (
393-
<Button size={"sm"} className={"ml-auto cursor-pointer"} onClick={handleImportLocalButton}>Import</Button>
394-
)}
389+
<div className="w-full text-left font-semibold text-2xl">Local File</div>
390+
{loading && localFile ? (
391+
<div className="text-sm text-muted-foreground">Loading...</div>
392+
) : (
393+
<Button size={"sm"} className={"ml-auto cursor-pointer"} onClick={handleImportLocalButton}>Import</Button>
394+
)}
395395
</div>
396396
<div className="w-full min-h-48 border border-dashed border-gray-300 dark:border-gray-600 rounded-md flex flex-col items-center justify-center p-6">
397397
<Label htmlFor="local-file" className="cursor-pointer ">
@@ -405,48 +405,48 @@ function App() {
405405
onChange={handleImportLocal}
406406
className="hidden"
407407
/>
408-
409-
<img
410-
src={localPreview?? downloadImg}
411-
alt="preview"
412-
className="w-24 h-24 object-cover rounded-md mt-4"
413-
style={{marginTop: '3px', marginBottom: '-15px'}}
414-
/>
415-
408+
409+
<img
410+
src={localPreview ?? downloadImg}
411+
alt="preview"
412+
className="w-24 h-24 object-cover rounded-md mt-4"
413+
style={{ marginTop: '3px', marginBottom: '-15px' }}
414+
/>
415+
416416
</div>
417417
</Card>
418418

419419
{/* URL Import Box */}
420420
<Card className="p-4 flex flex-col items-center justify-between gap-4">
421-
<div className="flex w-full items-center justify-between gap-2">
422-
<div className="w-full text-left font-semibold text-2xl">Direct Link</div>
423-
<Button className={"ml-auto cursor-pointer"} size={"sm"} onClick={handleImportUrl}>Import</Button>
421+
<div className="flex w-full items-center justify-between gap-2">
422+
<div className="w-full text-left font-semibold text-2xl">Direct Link</div>
423+
<Button className={"ml-auto cursor-pointer"} size={"sm"} onClick={handleImportUrl}>Import</Button>
424424

425-
</div>
426-
<div className="w-full min-h-48 flex flex-col items-center">
425+
</div>
426+
<div className="w-full min-h-48 flex flex-col items-center">
427427

428-
<Input
429-
value={importUrl}
430-
onChange={e => {
431-
setImportUrl(e.target.value)
432-
setImgError(false)
433-
}}
434-
placeholder="https://..."
435-
/>
436-
<img
437-
src={importUrl && !imgError ? importUrl : internetImg}
438-
alt="internet"
439-
className="w-24 h-24 object-cover rounded-md"
440-
style={{marginTop: '30px'}}
441-
onError={() => setImgError(true)}
442-
/>
443-
</div>
428+
<Input
429+
value={importUrl}
430+
onChange={e => {
431+
setImportUrl(e.target.value)
432+
setImgError(false)
433+
}}
434+
placeholder="https://..."
435+
/>
436+
<img
437+
src={importUrl && !imgError ? importUrl : internetImg}
438+
alt="internet"
439+
className="w-24 h-24 object-cover rounded-md"
440+
style={{ marginTop: '30px' }}
441+
onError={() => setImgError(true)}
442+
/>
443+
</div>
444444
</Card>
445445
</div>
446446

447447
<div className="my-6" />
448448

449-
<div className="mt-10" style={{marginTop:"16px"}}>
449+
<div className="mt-10" style={{ marginTop: "16px" }}>
450450
<div className="font-semibold mb-2 text-2xl">Search online</div>
451451
<div className="flex items-center gap-2 mb-4">
452452
<Input
@@ -493,17 +493,17 @@ function App() {
493493
size="icon"
494494
variant="outline"
495495
onClick={() => handleDelete(sticker)}
496-
className="absolute top-1 right-1 bg-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10"
496+
className="absolute top-1 right-1 bg-transparent opacity-0 group-hover:opacity-100 duration-300 transition-opacity z-10"
497497
aria-label="Delete"
498498
>
499499
<Trash className="w-2 h-2 text-red-500" />
500500
</Button>
501501
<div
502-
className="text-xs text-center w-24 absolute bottom-[10px] truncate transition-opacity duration-200 group-hover:opacity-0"
502+
className="text-xs text-center w-24 absolute bottom-[10px] truncate transition-opacity duration-400 group-hover:opacity-0"
503503
>
504504
{`Sticker ${i + 1}`}
505505
</div>
506-
<div className="flex gap-2 absolute bottom-[6px] opacity-0 group-hover:opacity-100">
506+
<div className="flex gap-2 absolute bottom-[6px] opacity-0 duration-400 group-hover:opacity-100">
507507
<Button
508508
size="sm"
509509
className="h-6 px-2 text-xs bg-pink-600 hover:bg-pink-700"
@@ -522,58 +522,64 @@ function App() {
522522
</div>
523523
))}
524524
</div>
525+
<div className="w-full flex justify-center mb-2">
526+
<div className="inline-block text-muted-foreground/80 text-md px-3 py-1 rounded-full border bg-card/70 border-card shadow-sm">
527+
Screen Preview
528+
</div>
529+
</div>
525530
{activeSticker && (
526531
<div
527-
className="relative mx-auto"
532+
className="relative mx-auto p-2 rounded-xl border bg-card/60 backdrop-blur-md shadow-lg"
528533
style={{
529-
width: previewWidth,
530-
height: previewHeight,
531-
background: '#111',
532-
borderRadius: 2,
533-
overflow: 'hidden'
534+
width: previewWidth + 2,
535+
height: previewHeight + 2,
536+
overflow: 'hidden',
537+
boxSizing: 'content-box'
534538
}}
535539
>
536-
<canvas
537-
ref={handleCanvasRef}
538-
width={previewWidth}
539-
height={previewHeight}
540-
className="absolute top-0 left-0 w-full h-full z-0"
541-
/>
542-
<video ref={handleVideoRef} />
543-
<Rnd
544-
size={{
545-
width: layout.widthPct ? layout.widthPct * previewWidth : layout.width,
546-
height: layout.heightPct ? layout.heightPct * previewHeight : layout.height
547-
}}
548-
position={{
549-
x: layout.xPct ? layout.xPct * previewWidth : layout.x,
550-
y: layout.yPct ? layout.yPct * previewHeight : layout.y
551-
}}
552-
onDragStop={(e, d) =>
553-
handleLayoutChange(
554-
d.x,
555-
d.y,
556-
layout.widthPct ? layout.widthPct * previewWidth : layout.width,
557-
layout.heightPct ? layout.heightPct * previewHeight : layout.height
558-
)
559-
}
560-
onResizeStop={(e, dir, ref, delta, pos) =>
561-
handleLayoutChange(
562-
pos.x,
563-
pos.y,
564-
parseInt(ref.style.width),
565-
parseInt(ref.style.height)
566-
)
567-
}
568-
bounds="parent"
569-
style={{ zIndex: 1 }}
570-
>
571-
<img
572-
src={toFileUrl(activeSticker.path)}
573-
alt="active"
574-
className="w-full h-full z-1"
540+
<div className="relative w-full h-full rounded-lg overflow-hidden" style={{width: previewWidth, height: previewHeight}}>
541+
<canvas
542+
ref={handleCanvasRef}
543+
width={previewWidth}
544+
height={previewHeight}
545+
className="absolute top-0 left-0 w-full h-full z-0 rounded-lg"
575546
/>
576-
</Rnd>
547+
<video ref={handleVideoRef} />
548+
<Rnd
549+
size={{
550+
width: layout.widthPct ? layout.widthPct * previewWidth : layout.width,
551+
height: layout.heightPct ? layout.heightPct * previewHeight : layout.height
552+
}}
553+
position={{
554+
x: layout.xPct ? layout.xPct * previewWidth : layout.x,
555+
y: layout.yPct ? layout.yPct * previewHeight : layout.y
556+
}}
557+
onDragStop={(e, d) =>
558+
handleLayoutChange(
559+
d.x,
560+
d.y,
561+
layout.widthPct ? layout.widthPct * previewWidth : layout.width,
562+
layout.heightPct ? layout.heightPct * previewHeight : layout.height
563+
)
564+
}
565+
onResizeStop={(e, dir, ref, delta, pos) =>
566+
handleLayoutChange(
567+
pos.x,
568+
pos.y,
569+
parseInt(ref.style.width),
570+
parseInt(ref.style.height)
571+
)
572+
}
573+
bounds="parent"
574+
style={{ zIndex: 1 }}
575+
>
576+
<img
577+
src={toFileUrl(activeSticker.path)}
578+
alt="active"
579+
className="w-full h-full z-1"
580+
/>
581+
</Rnd>
582+
</div>
577583
</div>
578584
)}
579585
</TabsContent>

0 commit comments

Comments
 (0)