From bd60935b1a0064c112b091c30797614ceebd75c0 Mon Sep 17 00:00:00 2001
From: DhanashreePetare <dhanashreepetare8125@gmail.com>
Date: Mon, 16 Feb 2026 01:26:56 +0530
Subject: [PATCH 1/3] feat: merge screenshot mode into make picture menu (#540)

---
 .../src/app/sections/lhcb/lhcb.component.html |  1 -
 .../make-picture/make-picture.component.html  |  8 ++++--
 .../make-picture/make-picture.component.scss  | 17 +++++++++++
 .../make-picture.component.test.ts            | 12 ++++++++
 .../make-picture/make-picture.component.ts    | 28 ++++++++++++++++++-
 .../components/ui-menu/ui-menu.component.html |  3 --
 6 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
index 7f9273047..b3d182fc2 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
@@ -17,7 +17,6 @@
   <app-performance-toggle></app-performance-toggle>
   <app-vr-toggle></app-vr-toggle>
   <app-ar-toggle></app-ar-toggle>
-  <app-ss-mode></app-ss-mode>
   <app-make-picture></app-make-picture>
   <app-io-options
     [eventDataImportOptions]="eventDataImportOptions"
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
index ddeaeee9b..378bc0e22 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
@@ -1,4 +1,7 @@
 <mat-menu class="mat-menu" #menu>
+  <button mat-menu-item (click)="toggleSSMode()">
+    {{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}
+  </button>
   <button mat-menu-item (click)="$event.stopPropagation()" class="size-input">
     <label>width</label>
     <input
@@ -41,8 +44,9 @@
 </mat-menu>
 <app-menu-toggle
   [matMenuTriggerFor]="menu"
-  tooltip="Creates a picture from the current view: directly saves a png of arbitrary size from the current view"
-  icon="png"
+  [active]="ssMode"
+  tooltip="Screenshot options: enter screenshot mode or save a picture from the current view"
+  icon="ss-mode"
 >
 </app-menu-toggle>
 <div>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
index bfb9534f2..a8a073156 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
@@ -28,3 +28,20 @@
   border: 2px solid var(--phoenix-text-color);
   border-radius: 8px;
 }
+
+#uiMenu,
+#phoenixMenu,
+#mainLogo,
+#statsElement {
+  transition: opacity 0.4s;
+}
+
+.ss-mode {
+  #uiMenu,
+  #phoenixMenu,
+  #mainLogo,
+  #statsElement {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.test.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.test.ts
index a4e5c77f0..2ad1821a6 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.test.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.test.ts
@@ -31,6 +31,10 @@ describe('MakePictureComponent', () => {
     component.ngOnInit();
   });
 
+  afterEach(() => {
+    document.body.classList.remove('ss-mode');
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -49,4 +53,12 @@ describe('MakePictureComponent', () => {
     component.makePicture();
     expect(mockEventDisplay.makeScreenShot).toHaveBeenCalled();
   });
+
+  it('should toggle screenshot mode', () => {
+    component.toggleSSMode();
+    expect(component.ssMode).toBe(true);
+    expect(document.body.classList.contains('ss-mode')).toBe(true);
+    component.toggleSSMode();
+    expect(component.ssMode).toBe(false);
+  });
 });
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts
index 191f87cd8..b2db4ddb3 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts
@@ -19,8 +19,15 @@ export class MakePictureComponent implements OnInit {
   width: number = 3840;
   height: number = 2160;
   disabled: boolean = false;
+  ssMode: boolean = false;
   constructor(private eventDisplay: EventDisplayService) {}
-  ngOnInit() {}
+  ngOnInit() {
+    document.onfullscreenchange = () => {
+      if (!document.fullscreenElement && this.ssMode) {
+        this.toggleSSMode();
+      }
+    };
+  }
 
   setWidth(value) {
     this.width = value;
@@ -33,9 +40,28 @@ export class MakePictureComponent implements OnInit {
   buttonText() {
     return 'Create picture';
   }
+  toggleSSMode() {
+    this.ssMode = !this.ssMode;
+    document.body.classList.toggle('ss-mode');
+    if (this.ssMode) {
+      // WORKAROUND - Adding the event listener directly somehow calls it on the first click
+      setTimeout(() => {
+        document.addEventListener('click', this.onDocumentClick);
+        document.addEventListener('touchstart', this.onDocumentClick);
+      }, 1);
+      document.documentElement.requestFullscreen?.();
+    } else {
+      document.removeEventListener('click', this.onDocumentClick);
+      document.removeEventListener('touchstart', this.onDocumentClick);
+    }
+  }
   makePicture() {
     this.eventDisplay
       .getThreeManager()
       .makeScreenShot(this.width, this.height, this.fitting);
   }
+
+  private onDocumentClick = () => {
+    document.exitFullscreen?.();
+  };
 }
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
index 4d1d3fcb2..b694b5eae 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
@@ -50,9 +50,6 @@
   <!-- Toggle for AR -->
   <app-ar-toggle></app-ar-toggle>
 
-  <!-- Toggle for screenshot mode -->
-  <app-ss-mode></app-ss-mode>
-
   <!-- Make pictures from scene -->
   <app-make-picture></app-make-picture>
 

From b0ebd40b547004f6ea05410914a9c16ff9d61044 Mon Sep 17 00:00:00 2001
From: DhanashreePetare <dhanashreepetare8125@gmail.com>
Date: Fri, 27 Feb 2026 21:40:06 +0530
Subject: [PATCH 2/3] refactor: add button styling for screenshot mode

---
 .../ui-menu/make-picture/make-picture.component.html        | 4 ++--
 .../ui-menu/make-picture/make-picture.component.scss        | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
index 378bc0e22..462e50948 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
@@ -1,6 +1,6 @@
 <mat-menu class="mat-menu" #menu>
-  <button mat-menu-item (click)="toggleSSMode()">
-    {{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}
+  <button mat-menu-item class="screenshot-mode" (click)="toggleSSMode()">
+    <span>{{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}</span>
   </button>
   <button mat-menu-item (click)="$event.stopPropagation()" class="size-input">
     <label>width</label>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
index a8a073156..429eaef0e 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
@@ -23,6 +23,12 @@
   display: block;
 }
 
+.screenshot-mode span {
+  padding: 5px 25px;
+  border: 2px solid var(--phoenix-text-color);
+  border-radius: 8px;
+}
+
 .make-picture span {
   padding: 5px 25px;
   border: 2px solid var(--phoenix-text-color);

From 41f1ebbf71ea891cb11bc51ca99bf923551e16df Mon Sep 17 00:00:00 2001
From: DhanashreePetare <dhanashreepetare8125@gmail.com>
Date: Sat, 28 Feb 2026 03:31:54 +0530
Subject: [PATCH 3/3] fix: align screenshot mode button styling

---
 .../ui-menu/make-picture/make-picture.component.html           | 2 +-
 .../ui-menu/make-picture/make-picture.component.scss           | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
index 462e50948..279d87566 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html
@@ -1,6 +1,6 @@
 <mat-menu class="mat-menu" #menu>
   <button mat-menu-item class="screenshot-mode" (click)="toggleSSMode()">
-    <span>{{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}</span>
+    {{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}
   </button>
   <button mat-menu-item (click)="$event.stopPropagation()" class="size-input">
     <label>width</label>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
index 429eaef0e..3af772095 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss
@@ -24,9 +24,10 @@
 }
 
 .screenshot-mode span {
-  padding: 5px 25px;
+  padding: 4px 8px;
   border: 2px solid var(--phoenix-text-color);
   border-radius: 8px;
+  display: inline-block;
 }
 
 .make-picture span {