#10444 Improve dialog component design (#10510)

* #10444 Remove titleIcon and instead add modalStyle param the to Modal classes * #10444 Add modalStyle to template files that use dialog component * #10444 Use isWarnable button when using 'negative' modalStyle * #10444 Define modalStyle when using dialog component * #10444 Add modalStyle when using AjaxModal * #10444 Add modalStyle when using ConfirmationModal modal * #10444 Add modalStyle when using RedirectConfirmationModal modal * #10444 Add notes for modalStyle parameter to FormBuilderVocabulary.php and formButtons template * #10444 Add modalStyle when using RemoteActionConfirmationModal modal * #10444 Add modalStyle when using AjaxModal modal * #10444 Remove unexpected comma on ConfirmationModalHandler.js file * #10444 Update button click when showing an error on DOI modal * #10444 DOI cypress - use correct text when clicking the button * #10444 Use primary modal style when showing install confirmation modal * #10444 Remove modalStyle param when using AjaxModal class * #10444 Use modalStyle 'default' for Modal class * #10444 Use basic modalStyle for legacy use of Dialog component * #10444 Update documentation for Modal classes * #10444 DOI - Cypress: Click button that contains text OK instead of Close
pkp · Nov 17, 2024 · 8355f0c · 8355f0c
1 parent abaf70a
commit 8355f0c
Show file tree

Hide file tree

Showing 76 changed files with 124 additions and 141 deletions.
diff --git a/classes/controllers/grid/plugins/PluginGridHandler.php b/classes/controllers/grid/plugins/PluginGridHandler.php
@@ -129,7 +129,6 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'uploadPlugin'),
                         __('manager.plugins.upload'),
-                        'modal_add_file'
                     ),
                     __('manager.plugins.upload'),
                     'add'

diff --git a/classes/controllers/grid/users/reviewer/PKPReviewerGridHandler.php b/classes/controllers/grid/users/reviewer/PKPReviewerGridHandler.php
@@ -238,7 +238,6 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'showReviewerForm', null, $actionArgs),
                         __('editor.submission.addReviewer'),
-                        'modal_add_user'
                     ),
                     __('editor.submission.addReviewer'),
                     'add_user'

diff --git a/classes/form/FormBuilderVocabulary.php b/classes/form/FormBuilderVocabulary.php
@@ -41,6 +41,7 @@
  *   hideCancel (optional): Whether the submit button should be disabled
  *   cancelAction (optional): A LinkAction object to execute when cancel is clicked
  *   cancelUrl (optional): URL to redirect to when cancel is clicked
+ *   modalStyle (optional): The modal state/style that should be used. (default is 'basic')
  * Form elements are created with {fbvElement type="type"} plus any additional parameters.
  * Each specific element type may have other additional attributes (see their method comments)
  *  Parameters:
@@ -239,6 +240,7 @@ public function smartyFBVFormButtons($params, $smarty)
             'FBV_cancelUrlTarget' => $params['cancelUrlTarget'] ?? '',
             'FBV_translate' => $params['translate'] ?? true,
             'FBV_saveText' => $params['saveText'] ?? null,
+            'FBV_modalStyle' => $params['modalStyle'] ?? null,
         ]);
         return $smarty->fetch('form/formButtons.tpl');
     }

diff --git a/classes/linkAction/request/AjaxModal.php b/classes/linkAction/request/AjaxModal.php
@@ -25,7 +25,7 @@ class AjaxModal extends Modal
      *
      * @param string $url The URL of the AJAX resource to load into the modal.
      * @param string $title (optional) The localized modal title.
-     * @param string $titleIcon (optional) The icon to be used in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param bool $canClose (optional) Whether the modal will have a close button.
      * @param string $closeOnFormSuccessId (optional) Close the modal when the
      *  form with this id fires a formSuccess event.
@@ -35,12 +35,12 @@ class AjaxModal extends Modal
     public function __construct(
         $url,
         $title = null,
-        $titleIcon = null,
+        $modalStyle = 'basic',
         $canClose = true,
         $closeOnFormSuccessId = null,
         $closeCleanVueInstances = []
     ) {
-        parent::__construct($title, $titleIcon, $canClose, $closeOnFormSuccessId, $closeCleanVueInstances);
+        parent::__construct($title, $modalStyle, $canClose, $closeOnFormSuccessId, $closeCleanVueInstances);
 
         $this->_url = $url;
     }

diff --git a/classes/linkAction/request/ConfirmationModal.php b/classes/linkAction/request/ConfirmationModal.php
@@ -41,19 +41,18 @@ class ConfirmationModal extends Modal
      * @param string $dialogText The localized text to appear
      *  in the dialog modal.
      * @param string $title (optional) The localized modal title.
-     * @param string $titleIcon (optional) The icon to be used
-     *  in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param string $okButton (optional) The localized text to
      *  appear on the confirmation button.
      * @param string $cancelButton (optional) The localized text to
      *  appear on the cancel button.
      * @param bool $canClose (optional) Whether the modal will
      *  have a close button.
      */
-    public function __construct($dialogText, $title = null, $titleIcon = 'modal_confirm', $okButton = null, $cancelButton = null, $canClose = true)
+    public function __construct($dialogText, $title = null, $modalStyle = 'basic', $okButton = null, $cancelButton = null, $canClose = true)
     {
         $title = (is_null($title) ? __('common.confirm') : $title);
-        parent::__construct($title, $titleIcon, $canClose);
+        parent::__construct($title, $modalStyle, $canClose);
 
         $this->_okButton = (is_null($okButton) ? __('common.ok') : $okButton);
         $this->_cancelButton = (is_null($cancelButton) ? __('common.cancel') : $cancelButton);

diff --git a/classes/linkAction/request/JsEventConfirmationModal.php b/classes/linkAction/request/JsEventConfirmationModal.php
@@ -33,18 +33,17 @@ class JsEventConfirmationModal extends ConfirmationModal
      * @param string $event the name of the JS event.
      * @param array $extraArguments (optional) extra information to be passed as JSON data with the event.
      * @param string $title (optional) The localized modal title.
-     * @param string $titleIcon (optional) The icon to be used
-     *  in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param string $okButton (optional) The localized text to
      *  appear on the confirmation button.
      * @param string $cancelButton (optional) The localized text to
      *  appear on the cancel button.
      * @param bool $canClose (optional) Whether the modal will
      *  have a close button.
      */
-    public function __construct($dialogText, $event = 'confirmationModalConfirmed', $extraArguments = null, $title = null, $titleIcon = null, $okButton = null, $cancelButton = null, $canClose = true)
+    public function __construct($dialogText, $event = 'confirmationModalConfirmed', $extraArguments = null, $title = null, $modalStyle = 'basic', $okButton = null, $cancelButton = null, $canClose = true)
     {
-        parent::__construct($dialogText, $title, $titleIcon, $okButton, $cancelButton, $canClose);
+        parent::__construct($dialogText, $title, $modalStyle, $okButton, $cancelButton, $canClose);
 
         $this->_event = $event;
         $this->_extraArguments = $extraArguments;

diff --git a/classes/linkAction/request/Modal.php b/classes/linkAction/request/Modal.php
@@ -25,7 +25,7 @@ class Modal extends LinkActionRequest
     public $_title;
 
     /** @var string The icon to be displayed in the title bar. */
-    public $_titleIcon;
+    public $_modalStyle;
 
     /** @var bool Whether the modal has a close icon in the title bar. */
     public $_canClose;
@@ -43,7 +43,7 @@ class Modal extends LinkActionRequest
      * Constructor
      *
      * @param string $title (optional) The localized modal title.
-     * @param string $titleIcon (optional) The icon to be used in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param bool $canClose (optional) Whether the modal will have a close button.
      * @param string $closeOnFormSuccessId (optional) Close the modal when the
      *  form with this id fires a formSuccess event.
@@ -52,14 +52,14 @@ class Modal extends LinkActionRequest
      */
     public function __construct(
         $title = null,
-        $titleIcon = null,
+        $modalStyle = 'basic',
         $canClose = true,
         $closeOnFormSuccessId = null,
         $closeCleanVueInstances = []
     ) {
         parent::__construct();
         $this->_title = $title;
-        $this->_titleIcon = $titleIcon;
+        $this->_modalStyle = $modalStyle;
         $this->_canClose = $canClose;
         $this->_closeOnFormSuccessId = $closeOnFormSuccessId;
         $this->_closeCleanVueInstances = $closeCleanVueInstances;
@@ -82,13 +82,13 @@ public function getTitle()
     }
 
     /**
-     * Get the title bar icon.
+     * Get the modal style.
      *
      * @return string
      */
-    public function getTitleIcon()
+    public function getModalStyle()
     {
-        return $this->_titleIcon;
+        return $this->_modalStyle;
     }
 
     /**
@@ -128,7 +128,7 @@ public function getLocalizedOptions()
     {
         return [
             'title' => $this->getTitle(),
-            'titleIcon' => $this->getTitleIcon(),
+            'modalStyle' => $this->getModalStyle(),
             'canClose' => ($this->getCanClose() ? '1' : '0'),
             'closeOnFormSuccessId' => $this->_closeOnFormSuccessId,
             'closeCleanVueInstances' => $this->_closeCleanVueInstances,

diff --git a/classes/linkAction/request/RedirectConfirmationModal.php b/classes/linkAction/request/RedirectConfirmationModal.php
@@ -28,18 +28,17 @@ class RedirectConfirmationModal extends ConfirmationModal
      * @param string $title (optional) The localized modal title.
      * @param string $remoteUrl (optional) A URL to be
      *  redirected to when the confirmation button is clicked.
-     * @param string $titleIcon (optional) The icon to be used
-     *  in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param string $okButton (optional) The localized text to
      *  appear on the confirmation button.
      * @param string $cancelButton (optional) The localized text to
      *  appear on the cancel button.
      * @param bool $canClose (optional) Whether the modal will
      *  have a close button.
      */
-    public function __construct($dialogText, $title = null, $remoteUrl = null, $titleIcon = null, $okButton = null, $cancelButton = null, $canClose = true)
+    public function __construct($dialogText, $title = null, $remoteUrl = null, $modalStyle = 'basic', $okButton = null, $cancelButton = null, $canClose = true)
     {
-        parent::__construct($dialogText, $title, $titleIcon, $okButton, $cancelButton, $canClose);
+        parent::__construct($dialogText, $title, $modalStyle, $okButton, $cancelButton, $canClose);
 
         $this->_remoteUrl = $remoteUrl;
     }

diff --git a/classes/linkAction/request/RemoteActionConfirmationModal.php b/classes/linkAction/request/RemoteActionConfirmationModal.php
@@ -32,18 +32,17 @@ class RemoteActionConfirmationModal extends ConfirmationModal
      * @param string $title (optional) The localized modal title.
      * @param string $remoteAction (optional) A URL to be
      *  called when the confirmation button is clicked.
-     * @param string $titleIcon (optional) The icon to be used
-     *  in the modal title bar.
+     * @param string $modalStyle (optional) The modal state/style to be used. (default is 'basic')
      * @param string $okButton (optional) The localized text to
      *  appear on the confirmation button.
      * @param string $cancelButton (optional) The localized text to
      *  appear on the cancel button.
      * @param bool $canClose (optional) Whether the modal will
      *  have a close button.
      */
-    public function __construct($session, $dialogText, $title = null, $remoteAction = null, $titleIcon = null, $okButton = null, $cancelButton = null, $canClose = true)
+    public function __construct($session, $dialogText, $title = null, $remoteAction = null, $modalStyle = 'basic', $okButton = null, $cancelButton = null, $canClose = true)
     {
-        parent::__construct($dialogText, $title, $titleIcon, $okButton, $cancelButton, $canClose);
+        parent::__construct($dialogText, $title, $modalStyle, $okButton, $cancelButton, $canClose);
 
         $this->_remoteAction = $remoteAction;
         $this->_csrfToken = $session->token();

diff --git a/classes/plugins/PKPPubIdPlugin.php b/classes/plugins/PKPPubIdPlugin.php
@@ -77,7 +77,7 @@ public function getActions($request, $actionArgs)
                     'settings',
                     new AjaxModal(
                         $router->url($request, null, null, 'manage', null, $actionArgs),
-                        $this->getDisplayName()
+                        $this->getDisplayName(),
                     ),
                     __('manager.plugins.settings'),
                     null

diff --git a/classes/submission/reviewer/form/PKPReviewerReviewStep1Form.php b/classes/submission/reviewer/form/PKPReviewerReviewStep1Form.php
@@ -90,7 +90,7 @@ public function fetch($request, $template = null, $display = false)
             new ConfirmationModal(
                 __('reviewer.aboutDueDates.text'),
                 __('reviewer.aboutDueDates'),
-                'modal_information',
+                'primary',
                 null,
                 '',
                 false
@@ -104,7 +104,7 @@ public function fetch($request, $template = null, $display = false)
             'declineReview',
             new AjaxModal(
                 $request->url(null, null, 'showDeclineReview', [$reviewAssignment->getSubmissionId()]),
-                __('reviewer.submission.declineReview')
+                __('reviewer.submission.declineReview'),
             )
         );
         $templateMgr->assign('declineReviewAction', $declineReviewLinkAction);

diff --git a/controllers/api/file/linkAction/BaseAddFileLinkAction.php b/controllers/api/file/linkAction/BaseAddFileLinkAction.php
@@ -71,7 +71,6 @@ public function __construct(
                 $actionArgs
             ),
             $wizardTitle,
-            'modal_add_file'
         );
 
         // Configure the link action.

diff --git a/controllers/api/file/linkAction/DeleteFileLinkAction.php b/controllers/api/file/linkAction/DeleteFileLinkAction.php
@@ -47,7 +47,7 @@ public function __construct($request, $submissionFile, $stageId, $localeKey = 'g
                     null,
                     $this->getActionArgs($submissionFile, $stageId)
                 ),
-                'modal_delete'
+                'negative'
             ),
             __($localeKey),
             'delete'

diff --git a/controllers/api/file/linkAction/EditFileLinkAction.php b/controllers/api/file/linkAction/EditFileLinkAction.php
@@ -45,7 +45,6 @@ public function __construct($request, $submissionFile, $stageId)
                 $this->getActionArgs($submissionFile, $stageId)
             ),
             __('grid.action.editFile'),
-            'modal_information'
         );
 
         // Configure the file link action.

diff --git a/controllers/api/task/SendReminderLinkAction.php b/controllers/api/task/SendReminderLinkAction.php
@@ -36,7 +36,6 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'editReminder', null, $actionArgs),
             __($modalTitle),
-            'review_reminder'
         );
 
         // Configure the link action.

diff --git a/controllers/api/task/SendThankYouLinkAction.php b/controllers/api/task/SendThankYouLinkAction.php
@@ -36,7 +36,6 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'editThankReviewer', null, $actionArgs),
             __($modalTitle),
-            'modal_email'
         );
 
         // Configure the link action.

diff --git a/controllers/confirmationModal/linkAction/ViewCompetingInterestGuidelinesLinkAction.php b/controllers/confirmationModal/linkAction/ViewCompetingInterestGuidelinesLinkAction.php
@@ -34,7 +34,7 @@ public function __construct($request)
         $viewCompetingInterestsModal = new ConfirmationModal(
             $context->getLocalizedData('competingInterests'),
             __('reviewer.submission.competingInterests'),
-            null,
+            'primary',
             null,
             false,
             false

diff --git a/controllers/confirmationModal/linkAction/ViewReviewGuidelinesLinkAction.php b/controllers/confirmationModal/linkAction/ViewReviewGuidelinesLinkAction.php
@@ -46,7 +46,7 @@ public function __construct($request, $stageId)
         $viewGuidelinesModal = new ConfirmationModal(
             $this->getGuidelines(),
             __('reviewer.submission.guidelines'),
-            null,
+            'primary',
             null,
             false
         );

diff --git a/controllers/grid/admin/context/ContextGridHandler.php b/controllers/grid/admin/context/ContextGridHandler.php
@@ -86,7 +86,7 @@ public function initialize($request, $args = null)
                 new AjaxModal(
                     $router->url($request, null, null, 'createContext', null, null),
                     __('admin.contexts.create'),
-                    'modal_add_item',
+                    null,
                     true,
                     'context',
                     ['editContext']

diff --git a/controllers/grid/admin/context/ContextGridRow.php b/controllers/grid/admin/context/ContextGridRow.php
@@ -51,7 +51,7 @@ public function initialize($request, $template = null)
                 new AjaxModal(
                     $router->url($request, null, null, 'editContext', null, ['rowId' => $rowId]),
                     __('grid.action.edit'),
-                    'modal_edit',
+                    null,
                     true,
                     'context',
                     ['editContext']
@@ -67,7 +67,8 @@ public function initialize($request, $template = null)
                     $request->getSession(),
                     __('admin.contexts.confirmDelete', ['contextName' => $element->getLocalizedName()]),
                     null,
-                    $router->url($request, null, null, 'deleteContext', null, ['rowId' => $rowId])
+                    $router->url($request, null, null, 'deleteContext', null, ['rowId' => $rowId]),
+                    'negative'
                 ),
                 __('grid.action.remove'),
                 'delete'
@@ -88,7 +89,7 @@ public function initialize($request, $template = null)
                 new AjaxModal(
                     $router->url($request, $element->getPath(), null, 'users', null),
                     __('manager.users'),
-                    'modal_edit',
+                    null,
                     true
                 ),
                 __('manager.users'),

diff --git a/controllers/grid/announcements/AnnouncementTypeGridHandler.php b/controllers/grid/announcements/AnnouncementTypeGridHandler.php
@@ -115,7 +115,7 @@ public function initialize($request, $args = null)
                 new AjaxModal(
                     $router->url($request, null, null, 'addAnnouncementType', null, null),
                     __('grid.action.addAnnouncementType'),
-                    'modal_add_item',
+                    null,
                     true
                 ),
                 __('grid.action.addAnnouncementType'),

diff --git a/controllers/grid/announcements/AnnouncementTypeGridRow.php b/controllers/grid/announcements/AnnouncementTypeGridRow.php
@@ -53,7 +53,7 @@ public function initialize($request, $template = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'editAnnouncementType', null, $actionArgs),
                         __('grid.action.edit'),
-                        'modal_edit',
+                        null,
                         true
                     ),
                     __('grid.action.edit'),
@@ -68,7 +68,7 @@ public function initialize($request, $template = null)
                         __('common.confirmDelete'),
                         __('common.remove'),
                         $router->url($request, null, null, 'deleteAnnouncementType', null, $actionArgs),
-                        'modal_delete'
+                        'negative'
                     ),
                     __('grid.action.remove'),
                     'delete'

diff --git a/controllers/grid/eventLog/linkAction/EmailLinkAction.php b/controllers/grid/eventLog/linkAction/EmailLinkAction.php
@@ -37,7 +37,6 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'viewEmail', null, $actionArgs),
             $modalTitle,
-            'modal_email'
         );
 
         // Configure the link action.

diff --git a/controllers/grid/files/LibraryFileGridHandler.php b/controllers/grid/files/LibraryFileGridHandler.php
@@ -120,7 +120,6 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'addFile', null, $this->getActionArgs()),
                         __('grid.action.addFile'),
-                        'modal_add_file'
                     ),
                     __('grid.action.addFile'),
                     'add'

diff --git a/controllers/grid/files/LibraryFileGridRow.php b/controllers/grid/files/LibraryFileGridRow.php
@@ -97,7 +97,6 @@ public function initialize($request, $template = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'editFile', null, $actionArgs),
                         __('grid.action.edit'),
-                        'modal_edit'
                     ),
                     __('grid.action.edit'),
                     'edit'
@@ -111,7 +110,7 @@ public function initialize($request, $template = null)
                         __('common.confirmDelete'),
                         __('common.delete'),
                         $router->url($request, null, null, 'deleteFile', null, $actionArgs),
-                        'modal_delete'
+                        'negative'
                     ),
                     __('grid.action.delete'),
                     'delete'

diff --git a/controllers/grid/files/fileList/linkAction/SelectFilesLinkAction.php b/controllers/grid/files/fileList/linkAction/SelectFilesLinkAction.php
@@ -40,7 +40,6 @@ public function __construct($request, $actionArgs, $actionLabel, $modalTitle = n
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'selectFiles', null, $actionArgs),
             $modalTitle,
-            'modal_add_file'
         );
 
         // Configure the link action.