refactor(uve): explicit iframe sizing with DevTools-style canvas controls #35539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

rjvelazco merged 162 commits into main from issue-35514-uve-iframe-sizing-phase-1

May 8, 2026

...ail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.html

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ @@
                     dotAvatar />
             } @else if (app.icon) {
                 <dot-color-icon [color]="app.color ?? 'surface'" size="sm" variant="light">
-                    <span class="material-icons">{{ app.icon }}</span>
+                    <span class="material-symbols-outlined">{{ app.icon }}</span>
                 </dot-color-icon>
             } @else {
                 <p-avatar class="shadow-lg rounded-full" [label]="app.name" size="large" dotAvatar />
@@ Expand Down @@

.../components/dot-apps-configuration-header/dot-apps-configuration-header.component.spec.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -182,7 +182,9 @@ describe('DotAppsConfigurationHeaderComponent', () => { @@
                 expect(colorIcon).toBeTruthy();
                 expect(colorIcon.componentInstance.color()).toBe('#3b82f6');
                 expect(
-                    colorIcon.nativeElement.querySelector('.material-icons').textContent.trim()
+                    colorIcon.nativeElement
+                        .querySelector('.material-symbols-outlined')
+                        .textContent.trim()
                 ).toBe('search');
                 expect(newFixture.debugElement.query(By.css('p-avatar'))).toBeFalsy();
             });
@@ Expand Down @@

...s-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.ts

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import { Component, HostListener, inject, input, output } from '@angular/core';
+    import { Component, inject, input, output } from '@angular/core';
     import { ButtonModule } from 'primeng/button';
     import { TooltipModule } from 'primeng/tooltip';
@@ Expand All @@
         selector: 'dot-apps-configuration-item',
         templateUrl: './dot-apps-configuration-item.component.html',
         styleUrls: ['./dot-apps-configuration-item.component.scss'],
-        imports: [DotCopyLinkComponent, TooltipModule, DotMessagePipe, ButtonModule]
+        imports: [DotCopyLinkComponent, TooltipModule, DotMessagePipe, ButtonModule],
+        host: {
+            '[class.bg-gray-100]': '!site()?.configured',
+            '[class.text-gray-500]': '!site()?.configured',
+            '(click)': 'onClick($event)'
+        }
     })
     export class DotAppsConfigurationItemComponent {
         private dotMessageService = inject(DotMessageService);
@@ Expand All / @@ -25,8 +30,7 @@ export class DotAppsConfigurationItemComponent { @@
         export = output<DotAppsSite>();
         delete = output<DotAppsSite>();
-        @HostListener('click', ['$event'])
-        public onClick(event: MouseEvent): void {
+        onClick(event: MouseEvent): void {
             event.stopPropagation();
             this.edit.emit(this.site());
         }
@@ Expand Down @@

...cms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.html

-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ @@
                         dotAvatar />
                 } @else if (app.icon) {
                     <dot-color-icon [color]="app.color ?? 'surface'" size="sm" variant="light">
-                        <span class="material-icons">{{ app.icon }}</span>
+                        <span class="material-symbols-outlined">{{ app.icon }}</span>
                     </dot-color-icon>
                 } @else {
                     <p-avatar
@@ Expand Down @@

...-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.spec.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -170,7 +170,9 @@ describe('DotAppsCardComponent', () => { @@
                 expect(colorIcon).toBeTruthy();
                 expect(colorIcon.componentInstance.color()).toBe('#3b82f6');
                 expect(
-                    colorIcon.nativeElement.querySelector('.material-icons').textContent.trim()
+                    colorIcon.nativeElement
+                        .querySelector('.material-symbols-outlined')
+                        .textContent.trim()
                 ).toBe('search');
                 expect(fixture.debugElement.query(By.css('p-avatar'))).toBeFalsy();
             });
@@ Expand Down @@

core-web/apps/dotcms-ui/src/style.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ a:visited { @@
         @apply flex flex-col gap-1;
     }
-    .form .field label {
+    .form .field > label {
         @apply text-sm font-medium;
     }
@@ Expand Down @@

.../fields/dot-edit-content-file-field/components/dot-file-field/dot-file-field.component.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -472,11 +472,46 @@ export class DotFileFieldComponent @@
             this.#dialogRef?.close();
         }
+        /**
+         * Mount-time chatter suppression for `handleStoreValueChange`.
+         *
+         * The signalMethod's initial firing observes the store's default
+         * empty value before any user interaction, and after `writeValue`
+         * the `handleValueChange` -> `store.getAssetData` async hydration
+         * causes additional ticks (one or more empty-value ticks during
+         * the in-flight HTTP, then one with the resolved identifier).
+         * Propagating any of these dirties the parent form on mount.
+         *
+         * The rule: ignore every `handleStoreValueChange` tick until
+         * `writeValue` has run *and* (if it had a value) the store has
+         * caught up to it once. After that, every emission is user-driven.
+         */
+        #hasHydrated = false;
+        override writeValue(value: string): void {
+            super.writeValue(value);
+            // If Angular wrote a falsy value, there is no async hydration
+            // to wait for — the next tick is already user-territory.
+            if (!value) {
+                this.#hasHydrated = true;
+            }
+        }
         readonly handleStoreValueChange = signalMethod<string>((value) => {
             if (value === null || value === undefined || !this.onChange) {
                 return;
             }
+            if (!this.#hasHydrated) {
+                // Mark hydration complete the first time the store catches
+                // up to the value Angular pushed via `writeValue`. Skip
+                // propagating that round-trip emission itself.
+                if (value === this.$value()) {
+                    this.#hasHydrated = true;
+                }
+                return;
+            }
             this.onChange(value);
         });
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(uve): explicit iframe sizing with DevTools-style canvas controls #35539

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!