From 8aa56df4fa90e83bb59f6a3869516e079965bb6b Mon Sep 17 00:00:00 2001 From: tblivet Date: Tue, 17 Dec 2024 18:08:54 +0100 Subject: [PATCH] feat: refacto dialog scrollable list --- _dev/src/scss/components/_dialog.scss | 6 ++ _dev/src/scss/components/_index.scss | 1 + .../src/scss/components/_scrollable-list.scss | 46 ++++++++++++++++ classes/UpgradeSelfCheck.php | 4 +- .../UpdatePageVersionChoiceController.php | 4 +- .../components/scrollable-list.html.twig | 18 ++++++ .../dialogs/dialog-tempered-files.html.twig | 55 +++++++------------ 7 files changed, 94 insertions(+), 40 deletions(-) create mode 100644 _dev/src/scss/components/_scrollable-list.scss create mode 100644 views/templates/components/scrollable-list.html.twig diff --git a/_dev/src/scss/components/_dialog.scss b/_dev/src/scss/components/_dialog.scss index edf9a01371..5f67f49169 100644 --- 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 index 8159218e00..31bd8d5e86 100644 --- 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 new file mode 100644 index 0000000000..f628805851 --- /dev/null +++ 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 index 037877001e..78078fe577 100644 --- 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]' => '', + '[1]' => '', '[/1]' => '', ]; $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]' => '', + '[1]' => '', '[/1]' => '', ]; $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 index 420d7b3dad..b801ed2b38 100644 --- 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 new file mode 100644 index 0000000000..54cf14fdef --- /dev/null +++ b/views/templates/components/scrollable-list.html.twig @@ -0,0 +1,18 @@ +
+ {% if title is defined and title and not empty %} +
+

{{ title }}

+ {% if status is defined and status and not empty %} + {{ items|length }} + {% endif %} +
+ {% endif %} + +
+ {% for item in items %} +

+ {{ item }} +

+ {% endfor %} +
+
diff --git a/views/templates/dialogs/dialog-tempered-files.html.twig b/views/templates/dialogs/dialog-tempered-files.html.twig index 43cf2e0b30..b778886c0a 100644 --- 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 %} -

- {{ description }} -

-{% 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 %} -
-
-

{{ 'List of files missing'|trans({}) }}

- {{ missing_files|length }} -
-
- {% for missing_file in missing_files %} -
- {{ missing_file }} -
- {% endfor %} -
-
- {% endif %} - {% if altered_files is defined and altered_files|length > 0 %} -
-
-

{{ 'List of files changed'|trans({}) }}

- {{ altered_files|length }} -
-
- {% for altered_file in altered_files %} -
- {{ altered_file }} -
- {% endfor %} -
-
- {% 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 %}