feat: refacto dialog scrollable list

PrestaShop · Dec 17, 2024 · 8aa56df · 8aa56df
1 parent b210c1e
commit 8aa56df
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 40 deletions.
diff --git a/_dev/src/scss/components/_dialog.scss b/_dev/src/scss/components/_dialog.scss
@@ -87,6 +87,12 @@ $e: ".dialog";
     }
 
     // Custom dialogs
+    &:not(:has(#{$e}__footer)) {
+      #{$e}__body {
+        padding-block-end: 1.5rem;
+      }
+    }
+
     &__spacer {
       display: flex;
       flex-direction: column;

diff --git a/_dev/src/scss/components/_index.scss b/_dev/src/scss/components/_index.scss
@@ -15,4 +15,5 @@
 @use "progress";
 @use "radio-card";
 @use "scrollbar";
+@use "scrollable-list";
 @use "stepper";
diff --git a/_dev/src/scss/components/_scrollable-list.scss b/_dev/src/scss/components/_scrollable-list.scss
@@ -0,0 +1,46 @@
+@use "../variables" as *;
+
+$e: ".scrollable-list";
+
+#{$ua-id} {
+  #{$e} {
+    --#{$ua-prefix}scrollable-list-background-color: var(--#{$ua-prefix}muted-background-color);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--#{$ua-prefix}scrollable-list-background-color);
+    border-radius: var(--#{$ua-prefix}border-radius);
+
+    &__header {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    &__count {
+      flex-shrink: 0;
+      min-width: 1.25rem;
+      font-size: 0.875rem;
+      line-height: 1.125rem;
+    }
+
+    &__scroll {
+      --#{$ua-prefix}scrollable-list-height: calc(6lh + (5 * 0.5rem));
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 0.5rem;
+      max-height: var(--#{$ua-prefix}scrollable-list-height);
+      overflow-y: auto;
+      border-radius: var(--#{$ua-prefix}border-radius);
+      font-size: 0.875rem;
+      line-height: 1.25;
+    }
+
+    &__item {
+      margin-block-end: 0;
+      word-break: break-word;
+    }
+  }
+}
diff --git a/classes/UpgradeSelfCheck.php b/classes/UpgradeSelfCheck.php
@@ -368,7 +368,7 @@ public function getRequirementWording(int $requirement, bool $isWebVersion = fal
             case self::CORE_TEMPERED_FILES_LIST_NOT_EMPTY:
                 if ($isWebVersion) {
                     $params = [
-                        '[1]' => '<a href="#update-step-version-choice-core-tempered-files-dialog">',
+                        '[1]' => '<a class="link" href="#update-step-version-choice-core-tempered-files-dialog">',
                         '[/1]' => '</a>',
                     ];
                     $message = $this->translator->trans('Some core files have been altered or removed. Any changes made to these files may be overwritten during the update. [1]See the list of alterations.[/1]', $params);
@@ -383,7 +383,7 @@ public function getRequirementWording(int $requirement, bool $isWebVersion = fal
             case self::THEME_TEMPERED_FILES_LIST_NOT_EMPTY:
                 if ($isWebVersion) {
                     $params = [
-                        '[1]' => '<a href="#update-step-version-choice-theme-tempered-files-dialog">',
+                        '[1]' => '<a class="link" href="#update-step-version-choice-theme-tempered-files-dialog">',
                         '[/1]' => '</a>',
                     ];
                     $message = $this->translator->trans('Some theme files have been altered or removed. Any changes made to these files may be overwritten during the update. [1]See the list of alterations.[/1]', $params);

diff --git a/controllers/admin/self-managed/UpdatePageVersionChoiceController.php b/controllers/admin/self-managed/UpdatePageVersionChoiceController.php
@@ -240,7 +240,7 @@ public function coreTemperedFilesDialog(): JsonResponse
             PageSelectors::DIALOG_PARENT_ID,
             $this->getTemperedFilesDialog([
                 'title' => $this->upgradeContainer->getTranslator()->trans('List of core alterations'),
-                'description' => $this->upgradeContainer->getTranslator()->trans('Some core files have been altered, customization made on these files will be lost during the update.'),
+                'message' => $this->upgradeContainer->getTranslator()->trans('Some core files have been altered, customization made on these files will be lost during the update.'),
                 'missing_files' => $this->upgradeContainer->getUpgradeSelfCheck()->getCoreMissingFiles(),
                 'altered_files' => $this->upgradeContainer->getUpgradeSelfCheck()->getCoreAlteredFiles(),
             ])
@@ -253,7 +253,7 @@ public function themeTemperedFilesDialog(): JsonResponse
             PageSelectors::DIALOG_PARENT_ID,
             $this->getTemperedFilesDialog([
                 'title' => $this->upgradeContainer->getTranslator()->trans('List of theme alterations'),
-                'description' => $this->upgradeContainer->getTranslator()->trans('Some theme files have been altered, customization made on these files will be lost during the update.'),
+                'message' => $this->upgradeContainer->getTranslator()->trans('Some theme files have been altered, customization made on these files will be lost during the update.'),
                 'missing_files' => $this->upgradeContainer->getUpgradeSelfCheck()->getThemeMissingFiles(),
                 'altered_files' => $this->upgradeContainer->getUpgradeSelfCheck()->getThemeAlteredFiles(),
             ])

diff --git a/views/templates/components/scrollable-list.html.twig b/views/templates/components/scrollable-list.html.twig
@@ -0,0 +1,18 @@
+<div class="scrollable-list">
+  {% if title is defined and title and not empty %}
+    <div class="scrollable-list__header">
+      <p class="h3">{{ title }}</p>
+      {% if status is defined and status and not empty %}
+        <span class="scrollable-list__count badge badge-{{ status }}">{{ items|length }}</span>
+      {% endif %}
+    </div>
+  {% endif %}
+
+  <div class="scrollable-list__scroll">
+    {% for item in items %}
+      <p class="scrollable-list__item">
+        {{ item }}
+      </p>
+    {% endfor %}
+  </div>
+</div>
diff --git a/views/templates/dialogs/dialog-tempered-files.html.twig b/views/templates/dialogs/dialog-tempered-files.html.twig
@@ -1,40 +1,23 @@
 {% extends "@ModuleAutoUpgrade/components/dialog.html.twig" %}
 
-{% block dialog_content %}
-    <p>
-        {{ description }}
-    </p>
-{% endblock %}
+{% set dialogSize = 'lg' %}
+
+{% block dialog_extra_content %}
+  {% if missing_files is defined and missing_files|length > 0 %}
+    {% include "@ModuleAutoUpgrade/components/scrollable-list.html.twig" with {
+      'title': 'List of files missing'|trans({}),
+      'items': missing_files,
+      'status': 'warning',
+    } %}
+  {% endif %}
 
-{% block dialog_extra_content_inner %}
-    {% if missing_files is defined and missing_files|length > 0 %}
-        <div class="logs__summary">
-            <div class="logs__summary-top">
-                <p class="h3">{{ 'List of files missing'|trans({}) }}</p>
-                <span class="badge badge-warning">{{ missing_files|length }}</span>
-            </div>
-            <div class="logs__summary-scroll">
-                {% for missing_file in missing_files %}
-                    <div>
-                        {{ missing_file }}
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-    {% endif %}
-    {% if altered_files is defined and altered_files|length > 0 %}
-        <div class="logs__summary">
-            <div class="logs__summary-top">
-                <p class="h3">{{ 'List of files changed'|trans({}) }}</p>
-                <span class="badge badge-warning">{{ altered_files|length }}</span>
-            </div>
-            <div class="logs__summary-scroll">
-                {% for altered_file in altered_files %}
-                    <div>
-                        {{ altered_file }}
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-    {% endif %}
+  {% if altered_files is defined and altered_files|length > 0 %}
+    {% include "@ModuleAutoUpgrade/components/scrollable-list.html.twig" with {
+      'title': 'List of files changed'|trans({}),
+      'items': altered_files,
+      'status': 'warning',
+    } %}
+  {% endif %}
 {% endblock %}
+
+{% block dialog_footer %}{% endblock %}