From b221910e9590bffd3e9b0cb4722b1c11638786a0 Mon Sep 17 00:00:00 2001 From: Alexander Brandon Coles Date: Tue, 23 Dec 2025 13:27:10 -0300 Subject: [PATCH 1/3] [#69641] Configure Turbo to use custom dialogs Use Angular `ConfirmDialogService` for the time-being. --- .../exports/modal_dialog_component.html.erb | 2 +- frontend/src/turbo/confirm-dialog.ts | 45 +++++++++++++++++++ frontend/src/turbo/setup.ts | 2 + 3 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 frontend/src/turbo/confirm-dialog.ts diff --git a/app/components/work_packages/exports/modal_dialog_component.html.erb b/app/components/work_packages/exports/modal_dialog_component.html.erb index 9fdf0c14b6d3..d6f374e770e6 100644 --- a/app/components/work_packages/exports/modal_dialog_component.html.erb +++ b/app/components/work_packages/exports/modal_dialog_component.html.erb @@ -1,7 +1,7 @@ <%= render( Primer::Alpha::Dialog.new( title: I18n.t("export.dialog.title"), - size: :xlarge, + size: :medium_portrait, id: MODAL_ID, data: { controller: "work-packages--export--dialog" diff --git a/frontend/src/turbo/confirm-dialog.ts b/frontend/src/turbo/confirm-dialog.ts new file mode 100644 index 000000000000..ca49f6fbbd44 --- /dev/null +++ b/frontend/src/turbo/confirm-dialog.ts @@ -0,0 +1,45 @@ +//-- copyright +// OpenProject is an open source project management software. +// Copyright (C) the OpenProject GmbH +// +// This program is free software; you can redistribute it and/or +// modify it under the terms of the GNU General Public License version 3. +// +// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: +// Copyright (C) 2006-2013 Jean-Philippe Lang +// Copyright (C) 2010-2013 the ChiliProject Team +// +// This program is free software; you can redistribute it and/or +// modify it under the terms of the GNU General Public License +// as published by the Free Software Foundation; either version 2 +// of the License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program; if not, write to the Free Software +// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +// +// See COPYRIGHT and LICENSE files for more details. +//++ + +import { ConfirmDialogService } from 'core-app/shared/components/modals/confirm-dialog/confirm-dialog.service'; + +export function confirmDialog( + message:string, + formElement:HTMLFormElement, + submitter?:HTMLButtonElement|HTMLInputElement +) { + return window + .OpenProject + .getPluginContext() + .then((pluginContext) => pluginContext.injector.get(ConfirmDialogService)) + .then((service) => service.confirm({text: { title: I18n.t('js.modals.form_submit.title'), text: message }})) + .then( + () => { return true; }, + () => { return false; } + ); +} diff --git a/frontend/src/turbo/setup.ts b/frontend/src/turbo/setup.ts index 710c18d6276e..ed9d64d1b26b 100644 --- a/frontend/src/turbo/setup.ts +++ b/frontend/src/turbo/setup.ts @@ -12,7 +12,9 @@ import { TURBO_EVENTS } from './constants'; import { StreamActions } from '@hotwired/turbo'; import { addTurboAngularWrapper } from 'core-turbo/turbo-angular-wrapper'; import { TurboStreamElement } from 'core-typings/turbo'; +import { confirmDialog } from './confirm-dialog'; +(Turbo as any).config.forms.confirm = confirmDialog; Turbo.session.drive = true; Turbo.setProgressBarDelay(100); From 6d6cf89a9e3f2eae49f244b4ccad670ddcf1cd28 Mon Sep 17 00:00:00 2001 From: Alexander Brandon Coles Date: Tue, 23 Dec 2025 14:51:49 -0300 Subject: [PATCH 2/3] [WIP] Harmonize Angular/spot modals with Primer --- .../users/hover_card_component.sass | 4 +- app/views/account/_footer.html.erb | 2 +- app/views/account/_register.html.erb | 6 +- .../onboarding/_configuration_modal.html.erb | 8 +- .../onboarding/onboarding_tour_trigger.ts | 4 +- .../board/add-list-modal/add-list-modal.html | 58 ++++++------ .../board-configuration.modal.html | 41 +++++---- .../baseline/baseline.component.html | 33 ++++--- .../wp-reminder-modal/wp-reminder.modal.html | 49 +++++------ .../wp-share-modal/wp-share.modal.html | 45 +++++----- .../wp-table-configuration.modal.html | 51 ++++++----- .../static-attribute-help-text.modal.html | 41 +++++---- .../modal-single-date-picker.component.html | 30 +++---- .../wp-date-picker.modal.html | 2 +- .../grids/widgets/add/add.modal.html | 23 +++-- .../configuration.modal.html | 55 ++++++------ .../header-project-select.component.html | 4 +- .../modal/modal-overlay.component.html | 10 +-- .../confirm-dialog/confirm-dialog.modal.html | 86 ++++++++++-------- .../child-pages-macro.modal.html | 47 +++++----- .../code-block-macro.modal.html | 45 +++++----- .../wiki-include-page-macro.modal.html | 47 +++++----- .../wp-button-macro.modal.html | 43 ++++----- .../form-control/check-box.component.html | 10 +++ .../form-control/check-box.component.ts | 24 +++++ .../form-control/form-control.component.ts | 38 ++++++++ .../form-control/text-field.component.html | 22 +++++ .../form-control/text-field.component.ts | 31 +++++++ .../query-get-ical-url.modal.html | 36 ++++---- .../modal-wrapper/dynamic-content.modal.html | 2 +- .../modal-wrapper/dynamic-content.modal.ts | 2 +- .../password-confirmation.modal.html | 50 ++++++----- .../modals/save-modal/save-query.modal.html | 88 ++++++++++--------- .../modals/save-modal/save-query.modal.ts | 2 +- .../query-sharing-form.component.ts | 2 + .../share-modal/query-sharing-form.html | 61 ++++++------- .../share-modal/query-sharing.modal.html | 43 +++++---- .../view-settings.modal.html | 54 ++++++------ .../view-settings.modal.ts | 2 +- .../wp-destroy-modal/wp-destroy.modal.html | 45 +++++----- .../project-include.component.html | 36 ++++---- .../file-picker-modal.component.html | 66 +++++++------- .../location-picker-modal.component.html | 59 +++++++------ .../upload-conflict-modal.component.html | 20 ++--- .../stop-existing-timer-modal.component.html | 58 ++++++------ frontend/src/app/shared/shared.module.ts | 8 ++ .../sass/common/container-overrides.sass | 4 +- .../styles/sass/components/drop-modal.sass | 8 +- .../styles/sass/components/modal-overlay.sass | 2 +- .../sass/components/modal-overrides.sass | 2 +- .../spot/styles/sass/components/modal.sass | 2 +- .../work_packages/shared/_file_picker.sass | 2 +- .../deprecated/modal_preview/default.html.erb | 22 +++-- .../spec/features/support/board_page.rb | 4 +- .../spec/features/calendar_sharing_spec.rb | 20 ++--- modules/costs/spec/features/timer_spec.rb | 4 +- modules/grids/spec/support/pages/grid.rb | 2 +- .../features/managing_dashboard_page_spec.rb | 2 +- .../features/managing_overview_page_spec.rb | 2 +- .../deliveries/response_component.html.erb | 8 +- .../spec/features/manage_webhooks_spec.rb | 4 +- .../onboarding/onboarding_tour_spec.rb | 4 +- spec/features/users/invitation_spec.rb | 2 +- spec/features/work_packages/reminders_spec.rb | 58 ++++++------ .../wysiwyg/macros/child_pages_spec.rb | 12 +-- .../wysiwyg/macros/code_block_macro_spec.rb | 10 +-- .../macros/work_package_button_spec.rb | 8 +- .../support/components/confirmation_dialog.rb | 2 +- .../timelines/configuration_modal.rb | 2 +- .../components/work_packages/sort_by.rb | 4 +- .../table_configuration_modal.rb | 4 +- 71 files changed, 942 insertions(+), 745 deletions(-) create mode 100644 frontend/src/app/shared/components/modals/form-control/check-box.component.html create mode 100644 frontend/src/app/shared/components/modals/form-control/check-box.component.ts create mode 100644 frontend/src/app/shared/components/modals/form-control/form-control.component.ts create mode 100644 frontend/src/app/shared/components/modals/form-control/text-field.component.html create mode 100644 frontend/src/app/shared/components/modals/form-control/text-field.component.ts diff --git a/app/components/users/hover_card_component.sass b/app/components/users/hover_card_component.sass index 3e0f7e314eea..e2c9a0180e56 100644 --- a/app/components/users/hover_card_component.sass +++ b/app/components/users/hover_card_component.sass @@ -1,5 +1,5 @@ // Correct the z-index of the regular hover card container so that it is above the dropdown of user auto completers -.spot-modal-overlay:has(.op-user-hover-card) +.Overlay-overlay:has(.op-user-hover-card) z-index: 9600 // On the project list page, there is a bug when a hover card is invoked within the share dialog. The global spot @@ -7,7 +7,7 @@ // added on top of the other dialog background shaders. We don't want an additional spot modal background here, // so we disable it for this edge case. .controller-projects.action-index, .controller-meetings.action-show - .spot-modal-overlay:not(:has(.op-user-hover-card)) + .Overlay-overlay:not(:has(.op-user-hover-card)) background: transparent .op-user-hover-card diff --git a/app/views/account/_footer.html.erb b/app/views/account/_footer.html.erb index 6acfebaf3036..a5b0eb56421d 100644 --- a/app/views/account/_footer.html.erb +++ b/app/views/account/_footer.html.erb @@ -1,5 +1,5 @@
-
+
<% if footer = registration_footer %> <%= footer %> <% end %> diff --git a/app/views/account/_register.html.erb b/app/views/account/_register.html.erb index 586b3793027d..e45bae267a16 100644 --- a/app/views/account/_register.html.erb +++ b/app/views/account/_register.html.erb @@ -31,15 +31,15 @@ See COPYRIGHT and LICENSE files for more details. @user, url: account_register_path, data: { turbo: false }, - html: { class: "form -wide-labels spot-modal" } + html: { class: "form -wide-labels Overlay" } ) do |f| %> <%= back_url_hidden_field_tag use_referer: false %> <%= error_messages_for :user %> -
+
<%= I18n.t("onboarding.welcome", app_title: Setting.app_title) %>
-
+

<%= t(:label_register) %>

<% if @user.ldap_auth_source_id.nil? %> diff --git a/app/views/onboarding/_configuration_modal.html.erb b/app/views/onboarding/_configuration_modal.html.erb index dccdee84e34b..78f148306b97 100644 --- a/app/views/onboarding/_configuration_modal.html.erb +++ b/app/views/onboarding/_configuration_modal.html.erb @@ -29,13 +29,13 @@ See COPYRIGHT and LICENSE files for more details.
<%= labelled_tabular_form_for current_user, url: { action: "user_settings", controller: "onboarding" }, html: { id: "user-form" } do |f| %> -
+
<%= I18n.t("onboarding.welcome", app_title: Setting.app_title) %>, <%= current_user.name %>
-
+
<%= I18n.t("onboarding.select_language") %>
@@ -45,9 +45,9 @@ See COPYRIGHT and LICENSE files for more details.
-
+
diff --git a/frontend/src/app/core/setup/globals/onboarding/onboarding_tour_trigger.ts b/frontend/src/app/core/setup/globals/onboarding/onboarding_tour_trigger.ts index 69326dc7c83a..312de46f48a4 100644 --- a/frontend/src/app/core/setup/globals/onboarding/onboarding_tour_trigger.ts +++ b/frontend/src/app/core/setup/globals/onboarding/onboarding_tour_trigger.ts @@ -40,8 +40,8 @@ export function detectOnboardingTour():void { sessionStorage.setItem(onboardingTourStorageKey, 'readyToStart'); // Start automatically when modal is closed by backdrop click or cancel button - waitForElement('.spot-modal-overlay_active', 'body', () => { - const elementsByClassName = document.getElementsByClassName('spot-modal-overlay_active'); + waitForElement('.Overlay-overlay_active', 'body', () => { + const elementsByClassName = document.getElementsByClassName('Overlay-overlay_active'); Array.from(elementsByClassName).forEach((modalOverlay) => { modalOverlay.addEventListener('click', (evt) => { if (evt.target === modalOverlay) { diff --git a/frontend/src/app/features/boards/board/add-list-modal/add-list-modal.html b/frontend/src/app/features/boards/board/add-list-modal/add-list-modal.html index a7abe42e89b6..5d0fe020d799 100644 --- a/frontend/src/app/features/boards/board/add-list-modal/add-list-modal.html +++ b/frontend/src/app/features/boards/board/add-list-modal/add-list-modal.html @@ -1,12 +1,17 @@ -
-
{{ text.title }}
- -
+
+
+
+

{{text.title}}

+
+
+
-
+
@if (showWarning && warningText) {
@@ -48,23 +53,26 @@
-
-
- - -
+ +
+ +
-
+ diff --git a/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.html b/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.html index 76ab53bb4db7..8d7f581b7d4f 100644 --- a/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.html +++ b/frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.html @@ -1,27 +1,36 @@ -
-
{{text.title}}
- -
+
+
+
+

{{text.title}}

+
+
+
-
+
-
-
+
+ > + + {{ text.cancelButton }} + + + > + + {{ text.applyButton }} + +
-
-
+ diff --git a/frontend/src/app/features/work-packages/components/wp-baseline/baseline/baseline.component.html b/frontend/src/app/features/work-packages/components/wp-baseline/baseline/baseline.component.html index 5282ea3a8a64..aca6ae547d42 100644 --- a/frontend/src/app/features/work-packages/components/wp-baseline/baseline/baseline.component.html +++ b/frontend/src/app/features/work-packages/components/wp-baseline/baseline/baseline.component.html @@ -178,23 +178,22 @@ /> } @if (showActionBar) { -
-
- - -
+
+ +
} diff --git a/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.html b/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.html index 021be9da9bd4..58f06e019c40 100644 --- a/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.html +++ b/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.html @@ -1,34 +1,27 @@ -
-
-
+
+
+
+

+

{{ text.subtitle }}

+
+
+ +
- -
-

-

-
+
-
+ diff --git a/frontend/src/app/features/work-packages/components/wp-share-modal/wp-share.modal.html b/frontend/src/app/features/work-packages/components/wp-share-modal/wp-share.modal.html index 53254f7df3ed..8d424219073e 100644 --- a/frontend/src/app/features/work-packages/components/wp-share-modal/wp-share.modal.html +++ b/frontend/src/app/features/work-packages/components/wp-share-modal/wp-share.modal.html @@ -1,30 +1,29 @@ -
-
-
+
+
+
+

+ {{ text.title }} +

+
+
+ +
-
-
+
-
+ diff --git a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html index ea33c84c4090..2ef4d8fe3322 100644 --- a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html +++ b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal.html @@ -1,12 +1,17 @@ -
-
{{text.title}}
- -
+
+
+
+

{{text.title}}

+
+
+
-
+
@if (!!prependModalComponent) { @@ -20,21 +25,21 @@ }
-
-
- - -
+
+ +
-
+ diff --git a/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.modal.html b/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.modal.html index d6b04bb8809c..ea88821175f2 100644 --- a/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.modal.html +++ b/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.modal.html @@ -1,30 +1,29 @@ -
-
- {{ title }} +
+
+
+

{{ title }}

+
+
-
- -
+
{{ content }}
-
-
- -
+
+
-
+ diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html index 1a723e7befb3..d463af571409 100644 --- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html +++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html @@ -69,22 +69,20 @@
-
-
- - -
+
+ +
diff --git a/frontend/src/app/shared/components/datepicker/wp-date-picker-modal/wp-date-picker.modal.html b/frontend/src/app/shared/components/datepicker/wp-date-picker-modal/wp-date-picker.modal.html index c70d3ff4e445..2dc5d0f28156 100644 --- a/frontend/src/app/shared/components/datepicker/wp-date-picker-modal/wp-date-picker.modal.html +++ b/frontend/src/app/shared/components/datepicker/wp-date-picker-modal/wp-date-picker.modal.html @@ -1,5 +1,5 @@
diff --git a/frontend/src/app/shared/components/grids/widgets/add/add.modal.html b/frontend/src/app/shared/components/grids/widgets/add/add.modal.html index ee535004b612..8e22cff52641 100644 --- a/frontend/src/app/shared/components/grids/widgets/add/add.modal.html +++ b/frontend/src/app/shared/components/grids/widgets/add/add.modal.html @@ -1,12 +1,17 @@ -
-
{{text.title}}
- -
+
+
+
+

{{ text.title }}

+
+
+
-
+