Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

Refine painting owner menu button

+85 -52
+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();