pkp/pkp-lib#10444 Improve dialog component design

classes/controllers/grid/plugins/PluginGridHandler.php

@@ -129,7 +129,7 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'uploadPlugin'),
                         __('manager.plugins.upload'),
-                        'modal_add_file'
+                        'side-modal'
                     ),
                     __('manager.plugins.upload'),
                     'add'

classes/controllers/grid/users/reviewer/PKPReviewerGridHandler.php

@@ -238,7 +238,7 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'showReviewerForm', null, $actionArgs),
                         __('editor.submission.addReviewer'),
-                        'modal_add_user'
+                        'side-modal'
                     ),
                     __('editor.submission.addReviewer'),
                     'add_user'

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 'default')
  * 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');
     }

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.
      * @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 = 'default',
         $canClose = true,
         $closeOnFormSuccessId = null,
         $closeCleanVueInstances = []
     ) {
-        parent::__construct($title, $titleIcon, $canClose, $closeOnFormSuccessId, $closeCleanVueInstances);
+        parent::__construct($title, $modalStyle, $canClose, $closeOnFormSuccessId, $closeCleanVueInstances);
 
         $this->_url = $url;
     }

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.
      * @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 = 'default', $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);

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.
      * @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 = null, $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;

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.
      * @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 = null,
         $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,

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.
      * @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 = null, $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;
     }

classes/linkAction/request/RemoteActionConfirmationModal.php

@@ -32,7 +32,7 @@ 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
+     * @param string $modalStyle (optional) The modal state/style to be used.
      *  in the modal title bar.
      * @param string $okButton (optional) The localized text to
      *  appear on the confirmation button.
@@ -41,9 +41,9 @@ class RemoteActionConfirmationModal extends ConfirmationModal
      * @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 = null, $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();

classes/plugins/PKPPubIdPlugin.php

@@ -77,7 +77,8 @@ public function getActions($request, $actionArgs)
                     'settings',
                     new AjaxModal(
                         $router->url($request, null, null, 'manage', null, $actionArgs),
-                        $this->getDisplayName()
+                        $this->getDisplayName(),
+                        'side-modal'
                     ),
                     __('manager.plugins.settings'),
                     null

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,8 @@ public function fetch($request, $template = null, $display = false)
             'declineReview',
             new AjaxModal(
                 $request->url(null, null, 'showDeclineReview', [$reviewAssignment->getSubmissionId()]),
-                __('reviewer.submission.declineReview')
+                __('reviewer.submission.declineReview'),
+                'side-modal'
             )
         );
         $templateMgr->assign('declineReviewAction', $declineReviewLinkAction);

controllers/api/file/linkAction/BaseAddFileLinkAction.php

@@ -71,7 +71,7 @@ public function __construct(
                 $actionArgs
             ),
             $wizardTitle,
-            'modal_add_file'
+            'side-modal'
         );
 
         // Configure the link action.

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'

controllers/api/file/linkAction/EditFileLinkAction.php

@@ -45,7 +45,7 @@ public function __construct($request, $submissionFile, $stageId)
                 $this->getActionArgs($submissionFile, $stageId)
             ),
             __('grid.action.editFile'),
-            'modal_information'
+            'side-modal'
         );
 
         // Configure the file link action.

controllers/api/task/SendReminderLinkAction.php

@@ -36,7 +36,7 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'editReminder', null, $actionArgs),
             __($modalTitle),
-            'review_reminder'
+            'side-modal'
         );
 
         // Configure the link action.

controllers/api/task/SendThankYouLinkAction.php

@@ -36,7 +36,7 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'editThankReviewer', null, $actionArgs),
             __($modalTitle),
-            'modal_email'
+            'side-modal'
         );
 
         // Configure the link action.

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

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
         );

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',
+                    'side-modal',
                     true,
                     'context',
                     ['editContext']

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',
+                    'side-modal',
                     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',
+                    'side-modal',
                     true
                 ),
                 __('manager.users'),

controllers/grid/admin/languages/AdminLanguageGridHandler.php

@@ -94,7 +94,7 @@ public function initialize($request, $args = null)
                 new AjaxModal(
                     $router->url($request, null, null, 'installLocale', null, null),
                     __('admin.languages.installLocale'),
-                    null,
+                    'side-modal',
                     true
                 ),
                 __('admin.languages.installLocale'),

controllers/grid/announcements/AnnouncementTypeGridCellProvider.php

@@ -40,7 +40,7 @@ public function getCellActions($request, $row, $column, $position = GridHandler:
                     new AjaxModal(
                         $router->url($request, null, null, 'editAnnouncementType', null, $actionArgs),
                         __('grid.action.edit'),
-                        null,
+                        'side-modal',
                         true
                     ),
                     htmlspecialchars($announcementType->getLocalizedTypeName())

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',
+                    'side-modal',
                     true
                 ),
                 __('grid.action.addAnnouncementType'),

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',
+                        'side-modal',
                         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'

controllers/grid/eventLog/linkAction/EmailLinkAction.php

@@ -37,7 +37,7 @@ public function __construct($request, $modalTitle, $actionArgs)
         $ajaxModal = new AjaxModal(
             $router->url($request, null, null, 'viewEmail', null, $actionArgs),
             $modalTitle,
-            'modal_email'
+            'side-modal'
         );
 
         // Configure the link action.

controllers/grid/files/LibraryFileGridHandler.php

@@ -120,7 +120,7 @@ public function initialize($request, $args = null)
                     new AjaxModal(
                         $router->url($request, null, null, 'addFile', null, $this->getActionArgs()),
                         __('grid.action.addFile'),
-                        'modal_add_file'
+                        'side-modal'
                     ),
                     __('grid.action.addFile'),
                     'add'