css tweaks 4

languages/en.yaml

@@ -501,6 +501,7 @@ PLUGIN_ADMIN:
   SAFE_UPGRADE_CHECKING: "Running preflight checks..."
   SAFE_UPGRADE_GENERIC_ERROR: "Safe upgrade could not complete. See Grav logs for details."
   SAFE_UPGRADE_RECHECK: "Re-run Checks"
+  SAFE_UPGRADE_RECHECKING: "Re-running Checks..."
   SAFE_UPGRADE_SUMMARY_CURRENT: "Current Grav version: <strong>v%s</strong>"
   SAFE_UPGRADE_SUMMARY_REMOTE: "Available Grav version: <strong>v%s</strong>"
   SAFE_UPGRADE_RELEASED_ON: "Released on %s"
@@ -523,7 +524,6 @@ PLUGIN_ADMIN:
   SAFE_UPGRADE_CONFLICTS_REQUIRES: "Requires psr/log %s"
   SAFE_UPGRADE_CONFLICTS_MONOLOG: "Potential Monolog API compatibility issues"
   SAFE_UPGRADE_CONFLICTS_HINT: "Choose how to handle conflicts before starting the upgrade."
-  SAFE_UPGRADE_CONFLICTS_REFER_WARNINGS: "See the warnings above for the list of affected plugins."
   SAFE_UPGRADE_DECISION_PROMPT: "When conflicts are detected:"
   SAFE_UPGRADE_DECISION_DISABLE: "Disable conflicting plugins"
   SAFE_UPGRADE_DECISION_DISABLE_DESC: "Temporarily disable conflicting plugins during the upgrade."

themes/grav/app/updates/safe-upgrade.js

@@ -148,20 +148,35 @@ export default class SafeUpgrade {
     fetchPreflight(silent = false) {
         if (!silent) {
             this.renderLoading();
+        } else {
+            this.setRecheckLoading(true);
         }
 
-        request(this.urls.preflight, (response) => {
+        const done = () => {
+            if (silent) {
+                this.setRecheckLoading(false);
+            }
+        };
+
+        const requestPromise = request(this.urls.preflight, (response) => {
             if (!this.active) {
+                done();
                 return;
             }
 
             if (response.status === 'error') {
+                done();
                 this.renderPreflightError(response.message || t('SAFE_UPGRADE_GENERIC_ERROR', 'Safe upgrade could not complete. See Grav logs for details.'));
                 return;
             }
 
             this.renderPreflight(response.data || {});
+            done();
         });
+
+        if (silent && requestPromise && typeof requestPromise.catch === 'function') {
+            requestPromise.catch(() => done());
+        }
     }
 
     renderPreflightError(message) {
@@ -234,7 +249,14 @@ export default class SafeUpgrade {
             return `<li>${t('SAFE_UPGRADE_WARNINGS_MONOLOG_ITEM', 'Potential Monolog conflict:')} <code>${slug}</code> &mdash; ${description}</li>`;
         });
 
-        const warningsList = warnings.length || psrWarningItems.length || monologWarningItems.length ? `
+        const filteredWarnings = warnings.filter((warning) => {
+            const lower = (warning || '').toLowerCase();
+            const isPsrRelated = lower.includes('psr/log');
+            const isMonologRelated = lower.includes('monolog');
+            return !isPsrRelated && !isMonologRelated;
+        });
+
+        const warningsList = filteredWarnings.length || psrWarningItems.length || monologWarningItems.length ? `
             <section class="safe-upgrade-panel safe-upgrade-panel--alert safe-upgrade-alert">
                 <header class="safe-upgrade-panel__header">
                     <div class="safe-upgrade-panel__title-wrap">
@@ -247,7 +269,7 @@ export default class SafeUpgrade {
                 </header>
                 <div class="safe-upgrade-panel__body">
                     <ul>
-                        ${warnings.map((warning) => `<li>${warning}</li>`).join('')}
+                        ${filteredWarnings.map((warning) => `<li>${warning}</li>`).join('')}
                         ${psrWarningItems.join('')}
                         ${monologWarningItems.join('')}
                     </ul>
@@ -292,9 +314,6 @@ export default class SafeUpgrade {
                     </div>
                     ${this.renderDecisionSelect('psr_log')}
                 </header>
-                <div class="safe-upgrade-panel__body">
-                    <p class="safe-upgrade-panel__hint">${t('SAFE_UPGRADE_CONFLICTS_REFER_WARNINGS', 'See the warnings above for the list of affected plugins.')}</p>
-                </div>
             </section>
         ` : '';
 
@@ -310,9 +329,6 @@ export default class SafeUpgrade {
                     </div>
                     ${this.renderDecisionSelect('monolog')}
                 </header>
-                <div class="safe-upgrade-panel__body">
-                    <p class="safe-upgrade-panel__hint">${t('SAFE_UPGRADE_CONFLICTS_REFER_WARNINGS', 'See the warnings above for the list of affected plugins.')}</p>
-                </div>
             </section>
         ` : '';
 
@@ -350,9 +366,6 @@ export default class SafeUpgrade {
                 ${psrList}
                 ${monologList}
                 ${blockersList}
-                <div class="safe-upgrade-actions inline-actions">
-                    <button data-safe-upgrade-action="recheck" class="button secondary">${t('SAFE_UPGRADE_RECHECK', 'Re-run Checks')}</button>
-                </div>
             </div>
         `);
 
@@ -427,6 +440,41 @@ export default class SafeUpgrade {
         this.buttons.start.prop('disabled', disabled);
     }
 
+    setRecheckLoading(state) {
+        const button = this.modalElement.find('[data-safe-upgrade-action="recheck"]');
+        if (!button.length) {
+            return;
+        }
+
+        const dataKey = 'safe-upgrade-recheck-label';
+
+        if (state) {
+            if (!button.data(dataKey)) {
+                button.data(dataKey, button.html());
+            }
+
+            button
+                .prop('disabled', true)
+                .addClass('is-loading')
+                .html(`
+                    <span class="button-spinner fa fa-refresh fa-spin" aria-hidden="true"></span>
+                    <span class="button-text">${t('SAFE_UPGRADE_RECHECKING', 'Re-running Checks...')}</span>
+                `);
+        } else {
+            const original = button.data(dataKey);
+            button
+                .prop('disabled', false)
+                .removeClass('is-loading');
+
+            if (original) {
+                button.html(original);
+                button.removeData(dataKey);
+            } else {
+                button.html(t('SAFE_UPGRADE_RECHECK', 'Re-run Checks'));
+            }
+        }
+    }
+
     startUpgrade() {
         this.switchStep('progress');
         this.renderProgress({

themes/grav/js/admin.min.js

@@ -4714,17 +4714,32 @@ var SafeUpgrade = /*#__PURE__*/function () {
       var silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (!silent) {
         this.renderLoading();
+      } else {
+        this.setRecheckLoading(true);
       }
-      utils_request(this.urls.preflight, function (response) {
+      var done = function done() {
+        if (silent) {
+          _this2.setRecheckLoading(false);
+        }
+      };
+      var requestPromise = utils_request(this.urls.preflight, function (response) {
         if (!_this2.active) {
+          done();
           return;
         }
         if (response.status === 'error') {
+          done();
           _this2.renderPreflightError(response.message || t('SAFE_UPGRADE_GENERIC_ERROR', 'Safe upgrade could not complete. See Grav logs for details.'));
           return;
         }
         _this2.renderPreflight(response.data || {});
+        done();
       });
+      if (silent && requestPromise && typeof requestPromise["catch"] === 'function') {
+        requestPromise["catch"](function () {
+          return done();
+        });
+      }
     }
   }, {
     key: "renderPreflightError",
@@ -4781,7 +4796,13 @@ var SafeUpgrade = /*#__PURE__*/function () {
         var description = details || t('SAFE_UPGRADE_WARNINGS_MONOLOG_UNKNOWN', 'Review the plugin for potential API changes.');
         return "<li>".concat(t('SAFE_UPGRADE_WARNINGS_MONOLOG_ITEM', 'Potential Monolog conflict:'), " <code>").concat(slug, "</code> &mdash; ").concat(description, "</li>");
       });
-      var warningsList = warnings.length || psrWarningItems.length || monologWarningItems.length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--alert safe-upgrade-alert\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-exclamation-triangle\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_WARNINGS', 'Warnings'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_WARNINGS_HINT', 'These items may require attention before continuing.'), "</span>\n                        </div>\n                    </div>\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <ul>\n                        ").concat(warnings.map(function (warning) {
+      var filteredWarnings = warnings.filter(function (warning) {
+        var lower = (warning || '').toLowerCase();
+        var isPsrRelated = lower.includes('psr/log');
+        var isMonologRelated = lower.includes('monolog');
+        return !isPsrRelated && !isMonologRelated;
+      });
+      var warningsList = filteredWarnings.length || psrWarningItems.length || monologWarningItems.length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--alert safe-upgrade-alert\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-exclamation-triangle\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_WARNINGS', 'Warnings'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_WARNINGS_HINT', 'These items may require attention before continuing.'), "</span>\n                        </div>\n                    </div>\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <ul>\n                        ").concat(filteredWarnings.map(function (warning) {
         return "<li>".concat(warning, "</li>");
       }).join(''), "\n                        ").concat(psrWarningItems.join(''), "\n                        ").concat(monologWarningItems.join(''), "\n                    </ul>\n                </div>\n            </section>\n        ") : '';
       var pendingList = Object.keys(pending).length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--info safe-upgrade-pending\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-sync\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_PENDING_UPDATES', 'Pending plugin or theme updates'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_PENDING_INTRO', 'Review the extensions that should be updated first.'), "</span>\n                        </div>\n                    </div>\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <ul>\n                        ").concat(Object.keys(pending).map(function (slug) {
@@ -4791,13 +4812,13 @@ var SafeUpgrade = /*#__PURE__*/function () {
         var next = item.available || t('SAFE_UPGRADE_UNKNOWN_VERSION', 'unknown');
         return "<li><code>".concat(slug, "</code> (").concat(type, ") ").concat(current, " &rarr; ").concat(next, "</li>");
       }).join(''), "\n                    </ul>\n                </div>\n            </section>\n        ") : '';
-      var psrList = Object.keys(psrConflicts).length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--conflict safe-upgrade-conflict\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-code-branch\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_CONFLICTS_PSR', 'Potential psr/log compatibility issues'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_CONFLICTS_HINT', 'Choose how to handle conflicts before starting the upgrade.'), "</span>\n                        </div>\n                    </div>\n                    ").concat(this.renderDecisionSelect('psr_log'), "\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <p class=\"safe-upgrade-panel__hint\">").concat(t('SAFE_UPGRADE_CONFLICTS_REFER_WARNINGS', 'See the warnings above for the list of affected plugins.'), "</p>\n                </div>\n            </section>\n        ") : '';
-      var monologList = Object.keys(monologConflicts).length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--conflict safe-upgrade-conflict\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-wave-square\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_CONFLICTS_MONOLOG', 'Potential Monolog API compatibility issues'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_CONFLICTS_HINT', 'Choose how to handle conflicts before starting the upgrade.'), "</span>\n                        </div>\n                    </div>\n                    ").concat(this.renderDecisionSelect('monolog'), "\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <p class=\"safe-upgrade-panel__hint\">").concat(t('SAFE_UPGRADE_CONFLICTS_REFER_WARNINGS', 'See the warnings above for the list of affected plugins.'), "</p>\n                </div>\n            </section>\n        ") : '';
+      var psrList = Object.keys(psrConflicts).length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--conflict safe-upgrade-conflict\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-code-branch\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_CONFLICTS_PSR', 'Potential psr/log compatibility issues'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_CONFLICTS_HINT', 'Choose how to handle conflicts before starting the upgrade.'), "</span>\n                        </div>\n                    </div>\n                    ").concat(this.renderDecisionSelect('psr_log'), "\n                </header>\n            </section>\n        ") : '';
+      var monologList = Object.keys(monologConflicts).length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--conflict safe-upgrade-conflict\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-wave-square\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_CONFLICTS_MONOLOG', 'Potential Monolog API compatibility issues'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_CONFLICTS_HINT', 'Choose how to handle conflicts before starting the upgrade.'), "</span>\n                        </div>\n                    </div>\n                    ").concat(this.renderDecisionSelect('monolog'), "\n                </header>\n            </section>\n        ") : '';
       var blockersList = blockers.length ? "\n            <section class=\"safe-upgrade-panel safe-upgrade-panel--blocker safe-upgrade-blockers\">\n                <header class=\"safe-upgrade-panel__header\">\n                    <div class=\"safe-upgrade-panel__title-wrap\">\n                        <span class=\"safe-upgrade-panel__icon fa fa-ban\" aria-hidden=\"true\"></span>\n                        <div>\n                            <strong class=\"safe-upgrade-panel__title\">".concat(t('SAFE_UPGRADE_BLOCKERS_TITLE', 'Action required before continuing'), "</strong>\n                            <span class=\"safe-upgrade-panel__subtitle\">").concat(t('SAFE_UPGRADE_BLOCKERS_DESC', 'Resolve the following items to enable the upgrade.'), "</span>\n                        </div>\n                    </div>\n                </header>\n                <div class=\"safe-upgrade-panel__body\">\n                    <ul>").concat(blockers.map(function (item) {
         return "<li>".concat(item, "</li>");
       }).join(''), "</ul>\n                </div>\n            </section>\n        ") : '';
       var summary = "\n            <section class=\"safe-upgrade-summary\">\n                <p>".concat(r('SAFE_UPGRADE_SUMMARY_CURRENT', version.local || '?', 'Current Grav version: <strong>v%s</strong>'), "</p>\n                <p>").concat(r('SAFE_UPGRADE_SUMMARY_REMOTE', version.remote || '?', 'Available Grav version: <strong>v%s</strong>'), "</p>\n                <p>").concat(releaseDate ? r('SAFE_UPGRADE_RELEASED_ON', releaseDate, 'Released on %s') : '', "</p>\n                <p>").concat(r('SAFE_UPGRADE_PACKAGE_SIZE', packageSize, 'Package size: %s'), "</p>\n            </section>\n        ");
-      this.steps.preflight.html("\n            <div class=\"safe-upgrade-preflight\">\n                ".concat(summary, "\n                ").concat(warningsList, "\n                ").concat(pendingList, "\n                ").concat(psrList, "\n                ").concat(monologList, "\n                ").concat(blockersList, "\n                <div class=\"safe-upgrade-actions inline-actions\">\n                    <button data-safe-upgrade-action=\"recheck\" class=\"button secondary\">").concat(t('SAFE_UPGRADE_RECHECK', 'Re-run Checks'), "</button>\n                </div>\n            </div>\n        "));
+      this.steps.preflight.html("\n            <div class=\"safe-upgrade-preflight\">\n                ".concat(summary, "\n                ").concat(warningsList, "\n                ").concat(pendingList, "\n                ").concat(psrList, "\n                ").concat(monologList, "\n                ").concat(blockersList, "\n            </div>\n        "));
       this.switchStep('preflight');
       var hasBlockingConflicts = Object.keys(psrConflicts).length && !this.decisions.psr_log || Object.keys(monologConflicts).length && !this.decisions.monolog;
       var canStart = !blockers.length && !hasBlockingConflicts;
@@ -4847,6 +4868,30 @@ var SafeUpgrade = /*#__PURE__*/function () {
       var disabled = hasUnresolvedConflicts || blockers.length > 0;
       this.buttons.start.prop('disabled', disabled);
     }
+  }, {
+    key: "setRecheckLoading",
+    value: function setRecheckLoading(state) {
+      var button = this.modalElement.find('[data-safe-upgrade-action="recheck"]');
+      if (!button.length) {
+        return;
+      }
+      var dataKey = 'safe-upgrade-recheck-label';
+      if (state) {
+        if (!button.data(dataKey)) {
+          button.data(dataKey, button.html());
+        }
+        button.prop('disabled', true).addClass('is-loading').html("\n                    <span class=\"button-spinner fa fa-refresh fa-spin\" aria-hidden=\"true\"></span>\n                    <span class=\"button-text\">".concat(t('SAFE_UPGRADE_RECHECKING', 'Re-running Checks...'), "</span>\n                "));
+      } else {
+        var original = button.data(dataKey);
+        button.prop('disabled', false).removeClass('is-loading');
+        if (original) {
+          button.html(original);
+          button.removeData(dataKey);
+        } else {
+          button.html(t('SAFE_UPGRADE_RECHECK', 'Re-run Checks'));
+        }
+      }
+    }
   }, {
     key: "startUpgrade",
     value: function startUpgrade() {

themes/grav/scss/template/_admin.scss

@@ -753,6 +753,28 @@ body.sidebar-quickopen #admin-main {
             margin-bottom: 1.5rem;
         }
 
+        [data-safe-upgrade-footer] {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+
+            .button {
+                min-width: 9rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.35rem;
+
+                &.is-loading {
+                    pointer-events: none;
+                }
+
+                .button-spinner {
+                    margin-right: 0.35rem;
+                }
+            }
+        }
+
         .safe-upgrade-summary {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -967,18 +989,6 @@ body.sidebar-quickopen #admin-main {
             }
         }
 
-        .safe-upgrade-actions {
-            display: flex;
-            justify-content: flex-end;
-            padding-top: 1rem;
-            margin-top: 1.5rem;
-            border-top: 1px solid rgba(20, 42, 68, 0.12);
-
-            .button {
-                min-width: 9rem;
-            }
-        }
-
         .safe-upgrade-result {
             h3 {
                 margin-bottom: 0.5rem;

themes/grav/scss/template/_safe-upgrade.scss

@@ -38,6 +38,28 @@
             }
         }
 
+        [data-safe-upgrade-footer] {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+
+            .button {
+                min-width: 9rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.35rem;
+
+                &.is-loading {
+                    pointer-events: none;
+                }
+
+                .button-spinner {
+                    margin-right: 0.35rem;
+                }
+            }
+        }
+
         .safe-upgrade-panel {
             --safe-upgrade-accent: #3f83d1;
             background: #ffffff;
@@ -189,18 +211,6 @@
             }
         }
 
-        .safe-upgrade-actions {
-            display: flex;
-            justify-content: flex-end;
-            padding-top: 1rem;
-            margin-top: 1.5rem;
-            border-top: 1px solid rgba(20, 42, 68, 0.12);
-
-            .button {
-                min-width: 9rem;
-            }
-        }
-
         .safe-upgrade-loading {
             display: flex;
             align-items: center;

themes/grav/templates/partials/base-root.html.twig

@@ -140,6 +140,7 @@
                         </div>
                         <div class="button-bar" data-safe-upgrade-footer>
                             <button data-remodal-action="cancel" data-safe-upgrade-action="cancel" class="button secondary remodal-cancel"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|t }}</button>
+                            <button data-safe-upgrade-action="recheck" class="button secondary">{{ "PLUGIN_ADMIN.SAFE_UPGRADE_RECHECK"|t }}</button>
                             <button data-safe-upgrade-action="start" class="button primary hidden" disabled>{{ "PLUGIN_ADMIN.SAFE_UPGRADE_START"|t }}</button>
                         </div>
                     </form>