From 4135a48ca0df25b47405578aa3face8e2049ee85 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Fri, 12 Nov 2021 12:25:48 +0100 Subject: [PATCH] Autofix modals. (#788) * Autofix modals. * Fix build. --- .../features/apps/pages/app.component.html | 2 +- .../assets/pages/assets-page.component.html | 2 +- .../content-history-page.component.html | 4 +- .../pages/content/content-page.component.html | 8 +- .../editor/field-copy-button.component.html | 2 +- .../contents/contents-page.component.html | 6 +- .../custom-view-editor.component.scss | 3 - .../shared/forms/array-editor.component.html | 2 +- .../shared/forms/component.component.html | 2 +- .../shared/list/content.component.html | 2 +- .../shared/preview-button.component.html | 2 +- .../pages/dashboard-config.component.html | 2 +- .../rules/pages/rule/rule-page.component.html | 6 +- .../rules/pages/rules/rule.component.html | 2 +- .../pages/rules/rules-page.component.html | 4 +- .../pages/schema/fields/field.component.html | 2 +- .../types/string-validation.component.html | 2 +- .../pages/schema/schema-page.component.html | 4 +- .../asset-scripts-page.component.html | 2 +- .../pages/backups/backups-page.component.html | 2 +- .../pages/clients/clients-page.component.html | 4 +- .../contributors-page.component.html | 4 +- .../languages/languages-page.component.html | 4 +- .../pages/plans/plans-page.component.html | 2 +- .../pages/roles/roles-page.component.html | 4 +- .../workflows/workflows-page.component.html | 2 +- .../forms/editors/autocomplete.component.html | 2 +- .../forms/editors/autocomplete.component.ts | 3 +- .../forms/editors/dropdown.component.html | 2 +- .../forms/editors/tag-editor.component.html | 2 +- .../angular/language-selector.component.html | 2 +- .../modals/modal-placement.directive.ts | 44 ++++++++-- .../modals/onboarding-tooltip.component.ts | 3 +- .../angular/modals/tooltip.directive.ts | 6 +- .../app/framework/services/dialog.service.ts | 3 +- .../framework/utils/modal-positioner.spec.ts | 18 ++-- .../app/framework/utils/modal-positioner.ts | 85 +++++++++++++++---- .../asset-folder-dropdown.component.html | 2 +- .../assets/asset-folder.component.html | 2 +- .../pages/internal/apps-menu.component.html | 2 +- .../internal/profile-menu.component.html | 2 +- 41 files changed, 173 insertions(+), 86 deletions(-) diff --git a/frontend/app/features/apps/pages/app.component.html b/frontend/app/features/apps/pages/app.component.html index ea7d13ea2..4f0bb5c56 100644 --- a/frontend/app/features/apps/pages/app.component.html +++ b/frontend/app/features/apps/pages/app.component.html @@ -29,7 +29,7 @@ -
+
- +
diff --git a/frontend/app/features/content/pages/content/content-history-page.component.html b/frontend/app/features/content/pages/content/content-history-page.component.html index 25282d500..e55e089ec 100644 --- a/frontend/app/features/content/pages/content/content-history-page.component.html +++ b/frontend/app/features/content/pages/content/content-history-page.component.html @@ -32,7 +32,7 @@ -
+
{{ 'common.statusChangeTo' | sqxTranslate }} {{info.status}} @@ -77,7 +77,7 @@ -
+
{{ 'common.statusChangeTo' | sqxTranslate }} diff --git a/frontend/app/features/content/pages/content/content-page.component.html b/frontend/app/features/content/pages/content/content-page.component.html index 3b7f6bf44..69bc38342 100644 --- a/frontend/app/features/content/pages/content/content-page.component.html +++ b/frontend/app/features/content/pages/content/content-page.component.html @@ -65,7 +65,7 @@ -
+
- + - + - + diff --git a/frontend/app/features/content/pages/content/editor/field-copy-button.component.html b/frontend/app/features/content/pages/content/editor/field-copy-button.component.html index 27ecbbcdc..22aac33ca 100644 --- a/frontend/app/features/content/pages/content/editor/field-copy-button.component.html +++ b/frontend/app/features/content/pages/content/editor/field-copy-button.component.html @@ -4,7 +4,7 @@ -
+
-
+
- + - +
diff --git a/frontend/app/features/content/pages/contents/custom-view-editor.component.scss b/frontend/app/features/content/pages/contents/custom-view-editor.component.scss index 9f16730f8..9aa28731b 100644 --- a/frontend/app/features/content/pages/contents/custom-view-editor.component.scss +++ b/frontend/app/features/content/pages/contents/custom-view-editor.component.scss @@ -1,7 +1,4 @@ .container { - max-height: 400px; - overflow-x: hidden; - overflow-y: auto; padding: .5rem 1rem; } diff --git a/frontend/app/features/content/shared/forms/array-editor.component.html b/frontend/app/features/content/shared/forms/array-editor.component.html index bcbcaca12..91162cf1b 100644 --- a/frontend/app/features/content/shared/forms/array-editor.component.html +++ b/frontend/app/features/content/shared/forms/array-editor.component.html @@ -72,7 +72,7 @@ -
+
{{schema.displayName}} diff --git a/frontend/app/features/content/shared/forms/component.component.html b/frontend/app/features/content/shared/forms/component.component.html index ccf75e746..4ec81c67f 100644 --- a/frontend/app/features/content/shared/forms/component.component.html +++ b/frontend/app/features/content/shared/forms/component.component.html @@ -23,7 +23,7 @@ -
+
{{schema.displayName}} diff --git a/frontend/app/features/content/shared/list/content.component.html b/frontend/app/features/content/shared/list/content.component.html index 52d23b1ed..0b84d980b 100644 --- a/frontend/app/features/content/shared/list/content.component.html +++ b/frontend/app/features/content/shared/list/content.component.html @@ -27,7 +27,7 @@ -
+
{{ 'common.statusChangeTo' | sqxTranslate }} diff --git a/frontend/app/features/content/shared/preview-button.component.html b/frontend/app/features/content/shared/preview-button.component.html index 3e2a9f875..0b917d648 100644 --- a/frontend/app/features/content/shared/preview-button.component.html +++ b/frontend/app/features/content/shared/preview-button.component.html @@ -10,7 +10,7 @@ -
+
{{name}}
diff --git a/frontend/app/features/dashboard/pages/dashboard-config.component.html b/frontend/app/features/dashboard/pages/dashboard-config.component.html index dac4c5609..6526f08cd 100644 --- a/frontend/app/features/dashboard/pages/dashboard-config.component.html +++ b/frontend/app/features/dashboard/pages/dashboard-config.component.html @@ -4,7 +4,7 @@ -
+
diff --git a/frontend/app/features/rules/pages/rule/rule-page.component.html b/frontend/app/features/rules/pages/rule/rule-page.component.html index c11820ad7..5f9de384e 100644 --- a/frontend/app/features/rules/pages/rule/rule-page.component.html +++ b/frontend/app/features/rules/pages/rule/rule-page.component.html @@ -153,16 +153,16 @@
- + - + - + diff --git a/frontend/app/features/rules/pages/rules/rule.component.html b/frontend/app/features/rules/pages/rules/rule.component.html index 0faad3d2d..5b264d0e4 100644 --- a/frontend/app/features/rules/pages/rules/rule.component.html +++ b/frontend/app/features/rules/pages/rules/rule.component.html @@ -16,7 +16,7 @@ -
+
{{ 'common.edit' | sqxTranslate }} diff --git a/frontend/app/features/rules/pages/rules/rules-page.component.html b/frontend/app/features/rules/pages/rules/rules-page.component.html index a109a67fb..e895bad40 100644 --- a/frontend/app/features/rules/pages/rules/rules-page.component.html +++ b/frontend/app/features/rules/pages/rules/rules-page.component.html @@ -43,11 +43,11 @@
- + - + diff --git a/frontend/app/features/schemas/pages/schema/fields/field.component.html b/frontend/app/features/schemas/pages/schema/fields/field.component.html index 52fc94287..97d460d98 100644 --- a/frontend/app/features/schemas/pages/schema/fields/field.component.html +++ b/frontend/app/features/schemas/pages/schema/fields/field.component.html @@ -46,7 +46,7 @@ -
+
{{ 'schemas.field.enable' | sqxTranslate }} diff --git a/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html index 061404f5c..535d1e571 100644 --- a/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html +++ b/frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html @@ -36,7 +36,7 @@ -
+

{{ 'schemas.fieldTypes.string.suggestions' | sqxTranslate }}

diff --git a/frontend/app/features/schemas/pages/schema/schema-page.component.html b/frontend/app/features/schemas/pages/schema/schema-page.component.html index f4bca16a8..e01e8c228 100644 --- a/frontend/app/features/schemas/pages/schema/schema-page.component.html +++ b/frontend/app/features/schemas/pages/schema/schema-page.component.html @@ -46,7 +46,7 @@ -
+
@@ -118,7 +118,7 @@
- +
diff --git a/frontend/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html b/frontend/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html index cda52d89e..a60803542 100644 --- a/frontend/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html +++ b/frontend/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html @@ -37,7 +37,7 @@
- +
diff --git a/frontend/app/features/settings/pages/backups/backups-page.component.html b/frontend/app/features/settings/pages/backups/backups-page.component.html index 55c892a88..45d26b1df 100644 --- a/frontend/app/features/settings/pages/backups/backups-page.component.html +++ b/frontend/app/features/settings/pages/backups/backups-page.component.html @@ -34,7 +34,7 @@
- +
diff --git a/frontend/app/features/settings/pages/clients/clients-page.component.html b/frontend/app/features/settings/pages/clients/clients-page.component.html index ea06301ff..b2a88da34 100644 --- a/frontend/app/features/settings/pages/clients/clients-page.component.html +++ b/frontend/app/features/settings/pages/clients/clients-page.component.html @@ -28,11 +28,11 @@
- + - +
diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.html b/frontend/app/features/settings/pages/contributors/contributors-page.component.html index 0464577d7..7bd72802c 100644 --- a/frontend/app/features/settings/pages/contributors/contributors-page.component.html +++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.html @@ -62,11 +62,11 @@
- + - +
diff --git a/frontend/app/features/settings/pages/languages/languages-page.component.html b/frontend/app/features/settings/pages/languages/languages-page.component.html index 73934896b..2f94c1414 100644 --- a/frontend/app/features/settings/pages/languages/languages-page.component.html +++ b/frontend/app/features/settings/pages/languages/languages-page.component.html @@ -27,11 +27,11 @@
- + - +
diff --git a/frontend/app/features/settings/pages/plans/plans-page.component.html b/frontend/app/features/settings/pages/plans/plans-page.component.html index e222a1e12..46db26e0c 100644 --- a/frontend/app/features/settings/pages/plans/plans-page.component.html +++ b/frontend/app/features/settings/pages/plans/plans-page.component.html @@ -37,7 +37,7 @@
- +
diff --git a/frontend/app/features/settings/pages/roles/roles-page.component.html b/frontend/app/features/settings/pages/roles/roles-page.component.html index c311c2290..7c36d827f 100644 --- a/frontend/app/features/settings/pages/roles/roles-page.component.html +++ b/frontend/app/features/settings/pages/roles/roles-page.component.html @@ -41,11 +41,11 @@
- + - +
diff --git a/frontend/app/features/settings/pages/workflows/workflows-page.component.html b/frontend/app/features/settings/pages/workflows/workflows-page.component.html index 893d35ec9..dacec5b03 100644 --- a/frontend/app/features/settings/pages/workflows/workflows-page.component.html +++ b/frontend/app/features/settings/pages/workflows/workflows-page.component.html @@ -38,7 +38,7 @@
- +
diff --git a/frontend/app/framework/angular/forms/editors/autocomplete.component.html b/frontend/app/framework/angular/forms/editors/autocomplete.component.html index 0b914bfce..4c7349207 100644 --- a/frontend/app/framework/angular/forms/editors/autocomplete.component.html +++ b/frontend/app/framework/angular/forms/editors/autocomplete.component.html @@ -16,7 +16,7 @@
-
+
-
+
diff --git a/frontend/app/framework/angular/forms/editors/tag-editor.component.html b/frontend/app/framework/angular/forms/editors/tag-editor.component.html index 2f534032e..1958b6c54 100644 --- a/frontend/app/framework/angular/forms/editors/tag-editor.component.html +++ b/frontend/app/framework/angular/forms/editors/tag-editor.component.html @@ -29,7 +29,7 @@
-
+
-
+
diff --git a/frontend/app/framework/angular/modals/modal-placement.directive.ts b/frontend/app/framework/angular/modals/modal-placement.directive.ts index 737411d7a..c2d7fac3b 100644 --- a/frontend/app/framework/angular/modals/modal-placement.directive.ts +++ b/frontend/app/framework/angular/modals/modal-placement.directive.ts @@ -7,6 +7,7 @@ import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core'; import { positionModal, ResourceOwner } from '@app/framework/internal'; +import { RelativePosition } from '@app/shared'; import { timer } from 'rxjs'; @Directive({ @@ -33,14 +34,23 @@ export class ModalPlacementDirective extends ResourceOwner implements AfterViewI public offset = 2; @Input() - public position = 'bottom-right'; + public position: RelativePosition | 'full' = 'bottom-right'; + + @Input() + public scrollX = false; + + @Input() + public scrollY = false; + + @Input() + public scrollMargin = 10; @Input() public update = true; constructor( private readonly renderer: Renderer2, - private readonly element: ElementRef, + private readonly element: ElementRef, ) { super(); } @@ -103,13 +113,37 @@ export class ModalPlacementDirective extends ResourceOwner implements AfterViewI this.renderer.setStyle(modalRef, 'width', `${w}px`); this.renderer.setStyle(modalRef, 'height', `${h}px`); } else { - const viewH = document.documentElement!.clientHeight; - const viewW = document.documentElement!.clientWidth; + if (this.scrollX) { + modalRect.width = modalRef.scrollWidth; + } + + if (this.scrollY) { + modalRect.height = modalRef.scrollHeight; + } + + const viewportHeight = document.documentElement!.clientHeight; + const viewportWidth = document.documentElement!.clientWidth; - const position = positionModal(targetRect, modalRect, this.position, this.offset, this.update, viewW, viewH); + const position = positionModal(targetRect, modalRect, this.position, this.offset, this.update, viewportWidth, viewportHeight); x = position.x; y = position.y; + + if (this.scrollX) { + const maxWidth = position.xMax > 0 ? `${position.xMax - 10}px` : 'none'; + + this.renderer.setStyle(modalRef, 'overflow-x', 'auto'); + this.renderer.setStyle(modalRef, 'max-width', maxWidth); + this.renderer.setStyle(modalRef, 'min-width', 0); + } + + if (this.scrollY) { + const maxHeight = position.yMax > 0 ? `${position.yMax - 10}px` : 'none'; + + this.renderer.setStyle(modalRef, 'overflow-y', 'auto'); + this.renderer.setStyle(modalRef, 'max-height', maxHeight); + this.renderer.setStyle(modalRef, 'min-height', 0); + } } this.renderer.setStyle(modalRef, 'top', `${y}px`); diff --git a/frontend/app/framework/angular/modals/onboarding-tooltip.component.ts b/frontend/app/framework/angular/modals/onboarding-tooltip.component.ts index c6735f7cc..d04e3e313 100644 --- a/frontend/app/framework/angular/modals/onboarding-tooltip.component.ts +++ b/frontend/app/framework/angular/modals/onboarding-tooltip.component.ts @@ -7,6 +7,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { DialogModel, fadeAnimation, OnboardingService, StatefulComponent, Types } from '@app/framework/internal'; +import { RelativePosition } from '@app/shared'; import { timer } from 'rxjs'; @Component({ @@ -29,7 +30,7 @@ export class OnboardingTooltipComponent extends StatefulComponent implements OnD public after = 1000; @Input() - public position = 'left'; + public position: RelativePosition = 'left-center'; public tooltipModal = new DialogModel(); diff --git a/frontend/app/framework/angular/modals/tooltip.directive.ts b/frontend/app/framework/angular/modals/tooltip.directive.ts index 38b907a6d..cdaf75d1b 100644 --- a/frontend/app/framework/angular/modals/tooltip.directive.ts +++ b/frontend/app/framework/angular/modals/tooltip.directive.ts @@ -6,7 +6,7 @@ */ import { Directive, ElementRef, HostListener, Input, OnDestroy, Renderer2 } from '@angular/core'; -import { DialogService, Tooltip } from '@app/framework/internal'; +import { DialogService, RelativePosition, Tooltip } from '@app/framework/internal'; @Directive({ selector: '[title]:not(sqx-layout),[shortcut]', @@ -17,7 +17,7 @@ export class TooltipDirective implements OnDestroy { private shortcutTimer: any; @Input() - public shortcutPosition = 'bottom-left'; + public shortcutPosition: RelativePosition = 'bottom-left'; @Input() public shortcut?: string | undefined; @@ -26,7 +26,7 @@ export class TooltipDirective implements OnDestroy { public shortcutDelay = 2000; @Input() - public titlePosition = 'top-right'; + public titlePosition: RelativePosition = 'top-right'; @Input() public titleDelay = 1000; diff --git a/frontend/app/framework/services/dialog.service.ts b/frontend/app/framework/services/dialog.service.ts index dd650b63a..04839cbd3 100644 --- a/frontend/app/framework/services/dialog.service.ts +++ b/frontend/app/framework/services/dialog.service.ts @@ -7,6 +7,7 @@ import { Injectable } from '@angular/core'; import { Observable, ReplaySubject, Subject, throwError } from 'rxjs'; +import { RelativePosition } from './../utils/modal-positioner'; import { ErrorDto } from './../utils/error'; import { Types } from './../utils/types'; import { LocalStoreService } from './local-store.service'; @@ -60,7 +61,7 @@ export class Tooltip { constructor( public readonly target: any, public readonly text: string | null | undefined, - public readonly position: string, + public readonly position: RelativePosition, public readonly multiple?: boolean, public readonly shortcut?: string, ) { diff --git a/frontend/app/framework/utils/modal-positioner.spec.ts b/frontend/app/framework/utils/modal-positioner.spec.ts index 46eb7799e..29912fa4d 100644 --- a/frontend/app/framework/utils/modal-positioner.spec.ts +++ b/frontend/app/framework/utils/modal-positioner.spec.ts @@ -22,25 +22,25 @@ describe('position', () => { const targetRect = buildRect(200, 200, 100, 100); const tests = [ - { position: 'top', x: 235, y: 160 }, - { position: 'top-left', x: 200, y: 160 }, - { position: 'top-right', x: 270, y: 160 }, - { position: 'bottom', x: 235, y: 310 }, + { position: 'bottom-center', x: 235, y: 310 }, { position: 'bottom-left', x: 200, y: 310 }, { position: 'bottom-right', x: 270, y: 310 }, - { position: 'left', x: 160, y: 235 }, - { position: 'left-top', x: 160, y: 200 }, { position: 'left-bottom', x: 160, y: 270 }, - { position: 'right', x: 310, y: 235 }, - { position: 'right-top', x: 310, y: 200 }, + { position: 'left-center', x: 160, y: 235 }, + { position: 'left-top', x: 160, y: 200 }, { position: 'right-bottom', x: 310, y: 270 }, + { position: 'right-center', x: 310, y: 235 }, + { position: 'right-top', x: 310, y: 200 }, + { position: 'top-center', x: 235, y: 160 }, + { position: 'top-left', x: 200, y: 160 }, + { position: 'top-right', x: 270, y: 160 }, ]; tests.forEach(test => { it(`should calculate modal position for ${test.position}`, () => { const modalRect = buildRect(0, 0, 30, 30); - const result = positionModal(targetRect, modalRect, test.position, 10, false, 0, 0); + const result = positionModal(targetRect, modalRect, test.position as any, 10, false, 1000, 1000); expect(result.x).toBe(test.x); expect(result.y).toBe(test.y); diff --git a/frontend/app/framework/utils/modal-positioner.ts b/frontend/app/framework/utils/modal-positioner.ts index 1d8581d2f..e0e39fb00 100644 --- a/frontend/app/framework/utils/modal-positioner.ts +++ b/frontend/app/framework/utils/modal-positioner.ts @@ -5,23 +5,48 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -const POSITION_TOP_CENTER = 'top'; -const POSITION_TOP_LEFT = 'top-left'; -const POSITION_TOP_RIGHT = 'top-right'; -const POSITION_BOTTOM_CENTER = 'bottom'; +export type RelativePosition = + 'bottom-center' | + 'bottom-left' | + 'bottom-right' | + 'left-bottom' | + 'left-center' | + 'left-top' | + 'right-bottom' | + 'right-center' | + 'right-top' | + 'top-center' | + 'top-left' | + 'top-right'; + +const POSITION_BOTTOM_CENTER = 'bottom-center'; const POSITION_BOTTOM_LEFT = 'bottom-left'; const POSITION_BOTTOM_RIGHT = 'bottom-right'; -const POSITION_LEFT_CENTER = 'left'; -const POSITION_LEFT_TOP = 'left-top'; const POSITION_LEFT_BOTTOM = 'left-bottom'; -const POSITION_RIGHT_CENTER = 'right'; -const POSITION_RIGHT_TOP = 'right-top'; +const POSITION_LEFT_CENTER = 'left-center'; +const POSITION_LEFT_TOP = 'left-top'; const POSITION_RIGHT_BOTTOM = 'right-bottom'; +const POSITION_RIGHT_CENTER = 'right-center'; +const POSITION_RIGHT_TOP = 'right-top'; +const POSITION_TOP_CENTER = 'top-center'; +const POSITION_TOP_LEFT = 'top-left'; +const POSITION_TOP_RIGHT = 'top-right'; -export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativePosition: string, offset: number, fix: boolean, viewportWidth: number, viewportHeight: number): { x: number; y: number } { +export type PositionResult = { + x: number; + y: number; + xMax: number; + yMax: number; +}; + +export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativePosition: RelativePosition, offset: number, fix: boolean, clientWidth: number, clientHeight: number): PositionResult { let y = 0; let x = 0; + // Available space in x/y direction. + let xMax = 0; + let yMax = 0; + switch (relativePosition) { case POSITION_LEFT_TOP: case POSITION_RIGHT_TOP: { @@ -38,11 +63,18 @@ export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativeP case POSITION_BOTTOM_RIGHT: { y = targetRect.bottom + offset; - if (fix && y + modalRect.height > viewportHeight) { + yMax = clientHeight - y; + // Unset yMax if we have enough space. + if (modalRect.height <= yMax) { + yMax = 0; + } else if (fix) { + // Find a position at the other side of the rect (top). const candidate = targetRect.top - modalRect.height - offset; if (candidate > 0) { y = candidate; + // Reset space to zero (full space), becuase we fix only if we have the space. + yMax = 0; } } break; @@ -52,11 +84,18 @@ export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativeP case POSITION_TOP_RIGHT: { y = targetRect.top - modalRect.height - offset; - if (fix && y < 0) { + yMax = targetRect.top - offset; + // Unset yMax if we have enough space. + if (modalRect.height <= yMax) { + yMax = 0; + } else if (fix) { + // Find a position at the other side of the rect (bottom). const candidate = targetRect.bottom + offset; - if (candidate + modalRect.height < viewportHeight) { + if (candidate + modalRect.height < clientHeight) { y = candidate; + // Reset space to zero (full space), becuase we fix only if we have the space. + yMax = 0; } } break; @@ -83,11 +122,18 @@ export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativeP case POSITION_RIGHT_BOTTOM: { x = targetRect.right + offset; - if (fix && x + modalRect.width > viewportWidth) { + xMax = clientWidth - x; + // Unset xMax if we have enough space. + if (modalRect.width <= xMax) { + xMax = 0; + } else if (fix) { + // Find a position at the other side of the rect (left). const candidate = targetRect.left - modalRect.width - offset; if (candidate > 0) { x = candidate; + // Reset space to zero (full space), becuase we fix only if we have the space. + xMax = 0; } } break; @@ -97,11 +143,18 @@ export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativeP case POSITION_LEFT_BOTTOM: { x = targetRect.left - modalRect.width - offset; - if (fix && x < 0) { + xMax = targetRect.left - offset; + // Unset xMax if we have enough space. + if (modalRect.width <= xMax) { + xMax = 0; + } else if (fix) { + // Find a position at the other side of the rect (right). const candidate = targetRect.right + offset; - if (candidate + modalRect.width < viewportWidth) { + if (candidate + modalRect.width < clientWidth) { x = candidate; + // Reset space to zero (full space), becuase we fix only if we have the space. + xMax = 0; } } break; @@ -112,5 +165,5 @@ export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativeP break; } - return { x, y }; + return { x, y, xMax, yMax }; } diff --git a/frontend/app/shared/components/assets/asset-folder-dropdown.component.html b/frontend/app/shared/components/assets/asset-folder-dropdown.component.html index 438e09e08..307dcb6e3 100644 --- a/frontend/app/shared/components/assets/asset-folder-dropdown.component.html +++ b/frontend/app/shared/components/assets/asset-folder-dropdown.component.html @@ -11,7 +11,7 @@
-
+
-
+
{{ 'common.rename' | sqxTranslate }} diff --git a/frontend/app/shell/pages/internal/apps-menu.component.html b/frontend/app/shell/pages/internal/apps-menu.component.html index caf0ba605..0e3184ab3 100644 --- a/frontend/app/shell/pages/internal/apps-menu.component.html +++ b/frontend/app/shell/pages/internal/apps-menu.component.html @@ -12,7 +12,7 @@ -
+
diff --git a/frontend/app/shell/pages/internal/profile-menu.component.html b/frontend/app/shell/pages/internal/profile-menu.component.html index 9db21dc4e..3864250c0 100644 --- a/frontend/app/shell/pages/internal/profile-menu.component.html +++ b/frontend/app/shell/pages/internal/profile-menu.component.html @@ -9,7 +9,7 @@ -
+
{{ 'profile.userEmail' | sqxTranslate }}