[TASK] Open modals in install tool with better sizes 11/57311/3
authorFrank Naegler <frank.naegler@typo3.org>
Fri, 22 Jun 2018 20:13:44 +0000 (22:13 +0200)
committerBenjamin Kott <benjamin.kott@outlook.com>
Fri, 22 Jun 2018 20:59:07 +0000 (22:59 +0200)
Resolves: #85348
Releases: master
Change-Id: Id9edf5f83719d5923fd410dc8dcf719280cc0095
Reviewed-on: https://review.typo3.org/57311
Reviewed-by: Jürgen Venne <venne@schaffrath-digital.de>
Tested-by: Jürgen Venne <venne@schaffrath-digital.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
typo3/sysext/install/Resources/Private/Templates/Environment/Cards.html
typo3/sysext/install/Resources/Private/Templates/Maintenance/Cards.html
typo3/sysext/install/Resources/Private/Templates/Maintenance/CreateAdmin.html
typo3/sysext/install/Resources/Private/Templates/Settings/Cards.html
typo3/sysext/install/Resources/Private/Templates/Settings/ChangeInstallToolPassword.html
typo3/sysext/install/Resources/Private/Templates/Upgrade/Cards.html
typo3/sysext/install/Resources/Public/JavaScript/Modules/Router.js

index 9675292..e0f544d 100644 (file)
@@ -11,7 +11,7 @@
                        <p class="card-text">Gives an overview of your host environment including its web server, PHP version and selected database.</p>
                </div>
                <div class="card-footer">
-                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-require="TYPO3/CMS/Install/SystemInformation">Show System Information</a>
+                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-modal-size="small" data-require="TYPO3/CMS/Install/SystemInformation">Show System Information</a>
                </div>
        </div>
        <div class="card card-size-fixed-small">
index 6c6f90e..63ed3d9 100644 (file)
@@ -75,7 +75,7 @@
                        <p class="card-text">Create new administrative users and grant them system maintainer privileges (optional).</p>
                </div>
                <div class="card-footer">
-                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-require="TYPO3/CMS/Install/CreateAdmin">Create Administrator</a>
+                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-modal-size="small" data-require="TYPO3/CMS/Install/CreateAdmin">Create Administrator</a>
                </div>
        </div>
        <div class="card card-size-fixed-small">
index ee8ec1a..b7f0fd4 100644 (file)
@@ -9,70 +9,60 @@
 
 
 <form action="" id="t3js-createAdmin-form" method="post">
-       <div class="form-horizontal">
        <div class="form-group">
-               <label for="t3-install-admin-username" class="col-sm-3 control-label">Username:</label>
-               <div class="col-sm-9">
-                       <input
-                               id="t3-install-admin-username"
-                               class="t3-install-form-input-text t3js-createAdmin-user form-control"
-                               type="text"
-                               autocomplete="off"
-                               required
-                       />
-               </div>
+               <label for="t3-install-admin-username" class="control-label">Username:</label>
+               <input
+                       id="t3-install-admin-username"
+                       class="t3-install-form-input-text t3js-createAdmin-user form-control"
+                       type="text"
+                       autocomplete="off"
+                       required
+               />
        </div>
        <div class="form-group">
-               <label for="t3-install-admin-password" class="col-sm-3 control-label">Password:</label>
-               <div class="col-sm-9">
-                       <input
-                               id="t3-install-admin-password"
-                               class="t3-install-form-input-text t3-install-form-password-strength t3js-createAdmin-password form-control"
-                               type="password"
-                               autocomplete="off"
-                               required
-                               minlength=8
-                               pattern=".{8,}"
-                               title="Password must be at least eight characters long."
-                       />
-               </div>
+               <label for="t3-install-admin-password" class="control-label">Password:</label>
+               <input
+                       id="t3-install-admin-password"
+                       class="t3-install-form-input-text t3-install-form-password-strength t3js-createAdmin-password form-control"
+                       type="password"
+                       autocomplete="off"
+                       required
+                       minlength=8
+                       pattern=".{8,}"
+                       title="Password must be at least eight characters long."
+               />
        </div>
        <div class="form-group">
-               <label for="t3-install-admin-password-repeat" class="col-sm-3 control-label">Repeat password:</label>
-               <div class="col-sm-9">
-                       <input
-                               id="t3-install-admin-password-repeat"
-                               class="t3-install-form-input-text t3js-createAdmin-password-check form-control"
-                               type="password"
-                               autocomplete="off"
-                               required
-                               minlength=8
-                               pattern=".{8,}"
-                       />
-               </div>
+               <label for="t3-install-admin-password-repeat" class="control-label">Repeat password:</label>
+               <input
+                       id="t3-install-admin-password-repeat"
+                       class="t3-install-form-input-text t3js-createAdmin-password-check form-control"
+                       type="password"
+                       autocomplete="off"
+                       required
+                       minlength=8
+                       pattern=".{8,}"
+               />
        </div>
     <div class="form-group">
-        <label for="add-as-sytem-maintainer" class="col-sm-3 control-label">Add as system maintainer:</label>
-        <div class="col-md-9">
-            <div class="checkbox">
-                <label>
-                    <input
-                            class="t3-install-form-input-checkbox t3js-createAdmin-system-maintainer"
-                            type="checkbox"
-                            id="add-as-sytem-maintainer"
-                    />
-                </label>
-            </div>
-        </div>
+               <div class="checkbox">
+                       <label>
+                               <input
+                                       class="t3-install-form-input-checkbox t3js-createAdmin-system-maintainer"
+                                       type="checkbox"
+                                       id="add-as-sytem-maintainer"
+                               />
+                               Add as system maintainer
+                       </label>
+               </div>
     </div>
-</div>
 
-<div class="t3js-createAdmin-output"></div>
+       <div class="t3js-createAdmin-output"></div>
 
-<button
-       class="btn btn-default t3js-createAdmin-create"
-       type="submit"
->
+       <button
+               class="btn btn-default t3js-createAdmin-create"
+               type="submit"
+       >
        Create administrator user
-</button>
+       </button>
 </form>
index 7f6ae1b..53a01f4 100644 (file)
@@ -11,7 +11,7 @@
                        <p class="card-text">Set a new password for the Install Tool when accessed in Standalone mode.</p>
                </div>
                <div class="card-footer">
-                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-require="TYPO3/CMS/Install/ChangeInstallToolPassword">Change Install Tool Password</a>
+                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-modal-size="small" data-require="TYPO3/CMS/Install/ChangeInstallToolPassword">Change Install Tool Password</a>
                </div>
        </div>
        <div class="card card-size-fixed-small">
@@ -23,7 +23,7 @@
                        <p class="card-text">Specify which backend administrators have access to the Admin Tools module and Install Tool when accessed in Standalone Mode.</p>
                </div>
                <div class="card-footer">
-                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-require="TYPO3/CMS/Install/SystemMaintainer">Manage System Maintainers</a>
+                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-modal-size="medium" data-require="TYPO3/CMS/Install/SystemMaintainer">Manage System Maintainers</a>
                </div>
        </div>
        <div class="card card-size-fixed-small">
index 224a34b..1cbe5ad 100644 (file)
@@ -6,34 +6,29 @@
        <div id="t3js-changeInstallToolPassword-token">{changeInstallToolPasswordToken}</div>
 </div>
 
-<div class="form-horizontal">
        <div class="form-group">
-               <label for="t3-install-tool-password" class="col-sm-3 control-label">Enter new password:</label>
-               <div class="col-sm-9">
-                       <input
-                               id="t3-install-tool-password"
-                               class="t3-install-form-input-text t3-install-form-password-strength t3js-changeInstallToolPassword-password form-control"
-                               type="password"
-                               autocomplete="off"
-                       />
-               </div>
+               <label for="t3-install-tool-password" class="control-label">Enter new password:</label>
+               <input
+                       id="t3-install-tool-password"
+                       class="t3-install-form-input-text t3-install-form-password-strength t3js-changeInstallToolPassword-password form-control"
+                       type="password"
+                       autocomplete="off"
+               />
        </div>
        <div class="form-group">
-               <label for="t3-install-tool-password-repeat" class="col-sm-3 control-label">Repeat password:</label>
-               <div class="col-sm-9">
-                       <input
-                               id="t3-install-tool-password-repeat"
-                               class="t3-install-form-input-text t3js-changeInstallToolPassword-password-check form-control"
-                               type="password"
-                               autocomplete="off"
-                       />
-               </div>
+               <label for="t3-install-tool-password-repeat" class="control-label">Repeat password:</label>
+               <input
+                       id="t3-install-tool-password-repeat"
+                       class="t3-install-form-input-text t3js-changeInstallToolPassword-password-check form-control"
+                       type="password"
+                       autocomplete="off"
+               />
        </div>
-</div>
-<div class="t3js-changeInstallToolPassword-output"></div>
-<button
-       class="btn btn-default t3js-changeInstallToolPassword-change"
-       type="button"
->
-       Set new password
-</button>
+
+       <div class="t3js-changeInstallToolPassword-output"></div>
+       <button
+               class="btn btn-default t3js-changeInstallToolPassword-change"
+               type="button"
+       >
+               Set new password
+       </button>
index 4f571c9..db282f6 100644 (file)
@@ -60,7 +60,7 @@
                        <p class="card-text">Checks the compatibility of all active extensions against the current (installed) version of TYPO3.</p>
                </div>
                <div class="card-footer">
-                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-require="TYPO3/CMS/Install/ExtensionCompatTester">Check Extension Compatibility</a>
+                       <a href="#" class="btn btn-default t3js-install-open-modal t3js-require" data-modal-size="small" data-require="TYPO3/CMS/Install/ExtensionCompatTester">Check Extension Compatibility</a>
                </div>
        </div>
        <div class="card card-size-fixed-small">
index 875d7ea..9f23554 100644 (file)
@@ -64,12 +64,13 @@ define([
 
         var modaltitle = $(this).closest('.card').find('.card-title').html();
         var requireModule = $(this).data('require');
+        var modalSize = $(this).data('modalSize') || Modal.sizes.large;
 
         Icons.getIcon('spinner-circle', Icons.sizes.default, null, null, Icons.markupIdentifiers.inline).done(function(icon) {
           var configuration = {
             type: Modal.types.default,
             title: modaltitle,
-            size: Modal.sizes.large,
+            size: modalSize,
             content: '<div class="modal-loading">' + icon + '</div>',
             additionalCssClasses: ['install-tool-modal'],
             callback: function (currentModal) {