Monorepo for Aesthetic.Computer
aesthetic.computer
Refine painting owner menu button
+85
-52
+85
-52
system/public/aesthetic.computer/disks/painting.mjs
+85
-52
system/public/aesthetic.computer/disks/painting.mjs
···
41
41
let nukeBtn; // A button inside of the context menu to hide / delete the media.
42
42
let menuOpen = false;
43
43
44
-
let noadvance = false;
45
-
46
-
let btnBar = 32;
47
-
const butBottom = 6;
48
-
const butSide = 6;
44
+
let noadvance = false;
45
+
46
+
let btnBar = 32;
47
+
const butBottom = 6;
48
+
const butSide = 6;
49
+
const menuButtonLeft = 6;
50
+
const menuButtonTop = 24;
51
+
const menuPanelGap = 4;
49
52
50
53
let handle;
51
54
let imageCode, recordingCode;
···
89
92
dom: { html },
90
93
send,
91
94
store,
92
-
}) {
93
-
showMode = colon[0] === "show"; // A special lightbox mode with no bottom bar.
94
-
95
-
lastBroadcastedCode = undefined;
96
-
ellipsisTicker = new gizmo.EllipsisTicker();
95
+
}) {
96
+
showMode = colon[0] === "show"; // A special lightbox mode with no bottom bar.
97
+
menuBtn = null;
98
+
nukeBtn = null;
99
+
menuOpen = false;
100
+
isNuking = false;
101
+
102
+
lastBroadcastedCode = undefined;
103
+
ellipsisTicker = new gizmo.EllipsisTicker();
97
104
98
105
if (showMode) {
99
106
hud.labelBack();
···
351
358
slugPath = "@" + handle + "/painting/" + imageCode + ".png";
352
359
}
353
360
354
-
const currentHandle = getHandle();
355
-
const normalizedCurrentHandle = currentHandle?.startsWith("@") ? currentHandle.slice(1) : currentHandle;
356
-
357
-
if (handle === normalizedCurrentHandle && !showMode) {
358
-
menuBtn = new ui.Button();
359
-
}
361
+
const currentHandle = getHandle();
362
+
const normalizedCurrentHandle = currentHandle?.startsWith("@") ? currentHandle.slice(1) : currentHandle;
363
+
364
+
if (handle === normalizedCurrentHandle && !showMode) {
365
+
menuBtn = new ui.TextButtonSmall("Menu", {
366
+
left: menuButtonLeft,
367
+
top: menuButtonTop,
368
+
screen,
369
+
});
370
+
}
360
371
361
372
if (showMode || "icon" in query || "preview" in query) return;
362
373
···
566
577
screen.width,
567
578
screen.height - btnBar,
568
579
);
569
-
printBtn?.paint({ ink });
570
-
downloadBtn?.paint({ ink });
571
-
//mintBtn?.paint({ ink });
572
-
printBtn?.reposition({ right: 6, bottom: 6, screen });
573
-
downloadBtn?.reposition({ left: 6, bottom: 6, screen });
574
-
575
-
if (menuBtn) {
576
-
menuBtn.box = new geo.Box(5, 18, 18, 12);
577
-
menuBtn.paint((btn) => {
578
-
if (btn.down) ink(255, 255, 0, 32).box(btn.box);
579
-
ink(btn.down ? "yellow" : "white").write("...", {
580
-
x: btn.box.x,
581
-
y: btn.box.y,
582
-
});
583
-
});
584
-
}
585
-
586
-
if (menuOpen) {
587
-
ink(0, 200).box(0, 32, screen.width, screen.height);
588
-
ink(255, 64).line(0, 32, screen.width, 32);
589
-
if (!nukeBtn) nukeBtn = new ui.TextButton();
590
-
nukeBtn.box = new geo.Box(4);
591
-
592
-
// Button label based on state
593
-
const buttonLabel = isNuking ? "..." : (isNuked ? "Denuke" : "Nuke");
594
-
const buttonColors = isNuked
595
-
? ["darkgreen", "green", "green", "darkgreen"]
596
-
: ["maroon", "red", "red", "maroon"];
597
-
598
-
nukeBtn.reposition({ left: 6, y: 40, screen }, buttonLabel);
599
-
nukeBtn.paint({ ink }, buttonColors);
600
-
}
601
-
}
580
+
printBtn?.paint({ ink });
581
+
downloadBtn?.paint({ ink });
582
+
//mintBtn?.paint({ ink });
583
+
printBtn?.reposition({ right: 6, bottom: 6, screen });
584
+
downloadBtn?.reposition({ left: 6, bottom: 6, screen });
585
+
586
+
if (menuBtn) {
587
+
const menuLabel = menuOpen ? "Close" : "Menu";
588
+
const menuScheme = menuOpen
589
+
? [[40, 32, 0, 224], [255, 255, 0], [255, 255, 0]]
590
+
: [[0, 0, 0, 192], [255, 255, 255, 96], 255];
591
+
const menuRolloverScheme = [[16, 16, 16, 224], [255, 255, 255], 255];
592
+
593
+
menuBtn.reposition(
594
+
{ left: menuButtonLeft, top: menuButtonTop, screen },
595
+
menuLabel,
596
+
);
597
+
menuBtn.paint(
598
+
{ ink },
599
+
menuScheme,
600
+
[[80, 60, 0, 224], [255, 255, 0], [255, 255, 0]],
601
+
[[32, 32, 32, 160], [96, 96, 96], 96],
602
+
menuRolloverScheme,
603
+
);
604
+
}
605
+
606
+
if (menuOpen) {
607
+
const menuPanelTop = Math.round(
608
+
menuBtn ? menuBtn.btn.box.y + menuBtn.height + menuPanelGap : 32,
609
+
);
610
+
611
+
ink(0, 200).box(0, menuPanelTop, screen.width, screen.height);
612
+
ink(255, 64).line(0, menuPanelTop, screen.width, menuPanelTop);
613
+
if (!nukeBtn) nukeBtn = new ui.TextButton();
614
+
nukeBtn.box = new geo.Box(4);
615
+
616
+
// Button label based on state
617
+
const buttonLabel = isNuking
618
+
? isNuked
619
+
? "Restoring"
620
+
: "Nuking"
621
+
: isNuked
622
+
? "Denuke"
623
+
: "Nuke";
624
+
const buttonColors = isNuked
625
+
? ["darkgreen", "green", "green", "darkgreen"]
626
+
: ["maroon", "red", "red", "maroon"];
627
+
628
+
nukeBtn.reposition(
629
+
{ left: menuButtonLeft, y: menuPanelTop + 8, screen },
630
+
buttonLabel,
631
+
);
632
+
nukeBtn.paint({ ink }, buttonColors);
633
+
}
634
+
}
602
635
603
636
function paintPainting(p) {
604
637
const margin = 34;
···
680
713
1,
681
714
);
682
715
683
-
// Prev & Next Buttons
684
-
const prevNextMarg = 32;
685
-
const prevNextWidth = 32;
716
+
// Prev & Next Buttons
717
+
const prevNextMarg = menuBtn ? 40 : 32;
718
+
const prevNextWidth = 32;
686
719
687
720
if (!prevBtn) {
688
721
prevBtn = new ui.Button();