From 854052515fc625d6b7eb74801ff0abd806acdaf8 Mon Sep 17 00:00:00 2001 From: Bob den Otter Date: Wed, 27 May 2020 17:43:31 +0200 Subject: [PATCH 1/5] Working on file listing screen --- assets/scss/modules/base/_tables.scss | 5 +++++ assets/scss/modules/base/base.scss | 1 + templates/finder/_files_cards.html.twig | 4 ++-- templates/finder/_files_list.html.twig | 13 +++++++------ templates/finder/finder.html.twig | 4 ++-- translations/messages.de.xlf | 2 +- translations/messages.en.xlf | 2 +- translations/messages.nl.xlf | 2 +- 8 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 assets/scss/modules/base/_tables.scss diff --git a/assets/scss/modules/base/_tables.scss b/assets/scss/modules/base/_tables.scss new file mode 100644 index 000000000..03045f60a --- /dev/null +++ b/assets/scss/modules/base/_tables.scss @@ -0,0 +1,5 @@ +table.table-compact { + th, td { + padding: 0.3rem; + } +} \ No newline at end of file diff --git a/assets/scss/modules/base/base.scss b/assets/scss/modules/base/base.scss index 78ffadb19..2815cf851 100644 --- a/assets/scss/modules/base/base.scss +++ b/assets/scss/modules/base/base.scss @@ -3,3 +3,4 @@ @import '_status'; @import '_notification'; @import '_buttons'; +@import '_tables'; diff --git a/templates/finder/_files_cards.html.twig b/templates/finder/_files_cards.html.twig index 7d8034cd2..b83dfba81 100644 --- a/templates/finder/_files_cards.html.twig +++ b/templates/finder/_files_cards.html.twig @@ -29,10 +29,10 @@
{%- if thumbnail -%} - + {% else %} - + {%- endif -%}
diff --git a/templates/finder/_files_list.html.twig b/templates/finder/_files_list.html.twig index f7f04d078..ac684c6ae 100644 --- a/templates/finder/_files_list.html.twig +++ b/templates/finder/_files_list.html.twig @@ -1,5 +1,5 @@ - +
@@ -42,24 +42,25 @@ - - {% for file in finder.files() %} + {% for file in finder %} {% set extension = file.extension() %} {% set filename = path ~ file.getRelativePathname() %} diff --git a/templates/finder/_folders.html.twig b/templates/finder/_folders.html.twig index a4e0d1ef6..18ad3b3bb 100644 --- a/templates/finder/_folders.html.twig +++ b/templates/finder/_folders.html.twig @@ -1,52 +1,40 @@ +
- {{ file.getRelativePathname }} + {{ file.getRelativePathname|shy }} {% if title %}
{{ title }}{% endif %} 		+ {%- if thumbnail -%} - + {%- else -%}   {%- endif -%} - {{ file.getSize()|format_bytes(1) }} - {% if dimensions %}
{{ dimensions }}{% endif %} + {{ file.getSize()|format_bytes(1) }} + {% if dimensions %}
{{ dimensions }}{% endif %} + 		{{ file.getCTime()|date('Y-m-d H:i:s') }} diff --git a/templates/finder/finder.html.twig b/templates/finder/finder.html.twig index 3fab63d99..420abe79c 100644 --- a/templates/finder/finder.html.twig +++ b/templates/finder/finder.html.twig @@ -15,6 +15,8 @@ {% include '@bolt/finder/_quickselect.html.twig' %} + {% include '@bolt/finder/_folders.html.twig' %} + {% set imageformats = ['gif', 'jpg', 'jpeg', 'png', 'svg'] %} {% if view == 'list' %} @@ -45,8 +47,6 @@ - {% include '@bolt/finder/_folders.html.twig' %} - {% include '@bolt/finder/_uploader.html.twig' %} {% endblock aside %} diff --git a/translations/messages.de.xlf b/translations/messages.de.xlf index ba9b99e24..8f9b7137d 100644 --- a/translations/messages.de.xlf +++ b/translations/messages.de.xlf @@ -1072,7 +1072,7 @@ files_list.remark - Keine Dateien im Ordner vorhanden, bitte wähle auf der rechten Seite ein Verzeichnis aus! + Keine Dateien im Ordner vorhanden, bitte wähle ein Verzeichnis aus! diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf index a29406f4a..c271b501c 100644 --- a/translations/messages.en.xlf +++ b/translations/messages.en.xlf @@ -1554,7 +1554,7 @@ files_list.remark - No files are present in this folder. Select a folder to navigate to, on the right-hand side. + No files are present in this folder. Select a folder to navigate to. diff --git a/translations/messages.nl.xlf b/translations/messages.nl.xlf index c741c0e84..573a998cf 100644 --- a/translations/messages.nl.xlf +++ b/translations/messages.nl.xlf @@ -981,7 +981,7 @@ files_list.remark - __files_list.remark + Er staan geen bestanden in deze map. Kies een map om naar toe te navigeren. From 85b1d2aa817bcc26a37fffa8f3bd568f571ec8a7 Mon Sep 17 00:00:00 2001 From: Bob den Otter Date: Wed, 27 May 2020 21:06:52 +0200 Subject: [PATCH 2/5] Adding paginator --- assets/scss/modules/base/_tables.scss | 9 ++ .../Backend/FilemanagerController.php | 34 ++++++- templates/finder/_files_cards.html.twig | 2 +- templates/finder/_files_list.html.twig | 2 +- templates/finder/_folders.html.twig | 88 ++++++++----------- templates/finder/finder.html.twig | 2 + 6 files changed, 81 insertions(+), 56 deletions(-) diff --git a/assets/scss/modules/base/_tables.scss b/assets/scss/modules/base/_tables.scss index 03045f60a..b52ca8686 100644 --- a/assets/scss/modules/base/_tables.scss +++ b/assets/scss/modules/base/_tables.scss @@ -1,4 +1,13 @@ table.table-compact { + + th:first-of-type, td:first-of-type { + padding-left: 0.8rem; + } + + th:last-of-type, td:last-of-type { + padding-right: 0.8rem; + } + th, td { padding: 0.3rem; } diff --git a/src/Controller/Backend/FilemanagerController.php b/src/Controller/Backend/FilemanagerController.php index 304e999c2..a512c4956 100644 --- a/src/Controller/Backend/FilemanagerController.php +++ b/src/Controller/Backend/FilemanagerController.php @@ -9,6 +9,8 @@ use Bolt\Controller\TwigAwareController; use Bolt\Repository\MediaRepository; use Bolt\Utils\Excerpt; +use Pagerfanta\Adapter\ArrayAdapter; +use Pagerfanta\Pagerfanta; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security; use Symfony\Component\Finder\Finder; use Symfony\Component\HttpFoundation\Request; @@ -31,6 +33,8 @@ class FilemanagerController extends TwigAwareController implements BackendZoneIn /** @var SessionInterface */ private $session; + private const PAGESIZE = 60; + public function __construct(FileLocations $fileLocations, MediaRepository $mediaRepository, SessionInterface $session) { $this->fileLocations = $fileLocations; @@ -58,17 +62,20 @@ public function filemanager(string $location, Request $request): Response $location = $this->fileLocations->get($location); $finder = $this->findFiles($location->getBasepath(), $path); + $folders = $this->findFolders($location->getBasepath(), $path); - $media = $this->mediaRepository->findAll(); + $currentPage = (int) $request->query->get('page', 1); + $pager = $this->createPaginator($finder, $currentPage); $parent = $path !== '/' ? Path::canonicalize($path . '/..') : ''; return $this->renderTemplate('@bolt/finder/finder.html.twig', [ 'path' => $path, 'location' => $location, - 'finder' => $finder, + 'finder' => $pager, + 'folders' => $folders, 'parent' => $parent, - 'media' => $media, + 'media' => $this->mediaRepository->findAll(), 'allfiles' => $location->isShowAll() ? $this->buildIndex($location->getBasepath()) : false, 'view' => $view, ]); @@ -79,11 +86,30 @@ private function findFiles(string $base, string $path): Finder $fullpath = Path::canonicalize($base . '/' . $path); $finder = new Finder(); - $finder->in($fullpath)->depth('== 0')->sortByName(); + $finder->in($fullpath)->depth('== 0')->files()->sortByName(); return $finder; } + private function findFolders(string $base, string $path): Finder + { + $fullpath = Path::canonicalize($base . '/' . $path); + + $finder = new Finder(); + $finder->in($fullpath)->depth('== 0')->directories()->sortByName(); + + return $finder; + } + + private function createPaginator(Finder $finder, int $page): Pagerfanta + { + $paginator = new Pagerfanta(new ArrayAdapter(iterator_to_array($finder, true))); + $paginator->setMaxPerPage(self::PAGESIZE); + $paginator->setCurrentPage($page); + + return $paginator; + } + private function buildIndex(string $base) { $fullpath = Path::canonicalize($base); diff --git a/templates/finder/_files_cards.html.twig b/templates/finder/_files_cards.html.twig index b83dfba81..4d6fb0d53 100644 --- a/templates/finder/_files_cards.html.twig +++ b/templates/finder/_files_cards.html.twig @@ -1,5 +1,5 @@
- {% for file in finder.files() %} + {% for file in finder %} {% set extension = file.extension() %} {% set filename = path ~ file.getRelativePathname() %} diff --git a/templates/finder/_files_list.html.twig b/templates/finder/_files_list.html.twig index ac684c6ae..6d14e5cef 100644 --- a/templates/finder/_files_list.html.twig +++ b/templates/finder/_files_list.html.twig @@ -11,7 +11,7 @@
+ + + + + + + + {% if path != '/' %} + + + + + + {% endif %} -
-
- - {{ 'caption.folders'|trans }} -
-
- -
{{ 'caption.folders'|trans }}{{ 'directoryname'|trans }}{{ 'actions'|trans }}
+ + + ../ + + + +
- - - - - - - - - {% if path != '/' %} - - - - - - {% endif %} - - {% for directory in finder.directories() %} - - - - - - {% endfor %} -
{{ 'directoryname'|trans }}{{ 'actions'|trans }}
- - - ../ - - - -
- - {% set dirname = path ~ directory.getRelativePathname() %} - - {{ directory.getRelativePathname }}/ - - - -
- -
-
+ {% for directory in folders.directories() %} + + + + + {% set dirname = path ~ directory.getRelativePathname() %} + + {{ directory.getRelativePathname }}/ + + + + + + + {% endfor %} + diff --git a/templates/finder/finder.html.twig b/templates/finder/finder.html.twig index 420abe79c..6296c1944 100644 --- a/templates/finder/finder.html.twig +++ b/templates/finder/finder.html.twig @@ -25,6 +25,8 @@ {% include '@bolt/finder/_files_cards.html.twig' %} {% endif %} + {{ pager(finder, template = '@bolt/helpers/_pager_bootstrap.html.twig', class="justify-content-center") }} + {% endblock %} {% block aside %} From accc8bb50909962b701b80ebbd0a1f1e05c9fa48 Mon Sep 17 00:00:00 2001 From: Bob den Otter Date: Wed, 27 May 2020 21:21:04 +0200 Subject: [PATCH 3/5] Update _tables.scss --- assets/scss/modules/base/_tables.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/assets/scss/modules/base/_tables.scss b/assets/scss/modules/base/_tables.scss index b52ca8686..5a39ca8b2 100644 --- a/assets/scss/modules/base/_tables.scss +++ b/assets/scss/modules/base/_tables.scss @@ -1,14 +1,16 @@ table.table-compact { - - th:first-of-type, td:first-of-type { + th:first-of-type, + td:first-of-type { padding-left: 0.8rem; } - th:last-of-type, td:last-of-type { + th:last-of-type, + td:last-of-type { padding-right: 0.8rem; } - th, td { + th, + td { padding: 0.3rem; } -} \ No newline at end of file +} From f97175af053b9d4f94af7eb96b5356c112ccab02 Mon Sep 17 00:00:00 2001 From: Bob den Otter Date: Thu, 28 May 2020 11:15:09 +0200 Subject: [PATCH 4/5] Adding proper ids to tables --- templates/finder/_files_cards.html.twig | 2 +- templates/finder/_files_list.html.twig | 2 +- templates/finder/_folders.html.twig | 2 +- tests/e2e/filemanager.feature | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/finder/_files_cards.html.twig b/templates/finder/_files_cards.html.twig index 4d6fb0d53..d7b2d0fd7 100644 --- a/templates/finder/_files_cards.html.twig +++ b/templates/finder/_files_cards.html.twig @@ -1,4 +1,4 @@ -
+
{% for file in finder %} {% set extension = file.extension() %} diff --git a/templates/finder/_files_list.html.twig b/templates/finder/_files_list.html.twig index 6d14e5cef..49a695c59 100644 --- a/templates/finder/_files_list.html.twig +++ b/templates/finder/_files_list.html.twig @@ -1,5 +1,5 @@ - +
diff --git a/templates/finder/_folders.html.twig b/templates/finder/_folders.html.twig index 18ad3b3bb..fee681542 100644 --- a/templates/finder/_folders.html.twig +++ b/templates/finder/_folders.html.twig @@ -1,4 +1,4 @@ -
+
diff --git a/tests/e2e/filemanager.feature b/tests/e2e/filemanager.feature index 55ffaa3ca..9a560b2e1 100644 --- a/tests/e2e/filemanager.feature +++ b/tests/e2e/filemanager.feature @@ -15,7 +15,7 @@ Feature: Filemanager Given I am logged in as "admin" And I am on "/bolt/filemanager/files" - Then I should see "_b-penguin.jpeg" in the 3rd ".admin__body--main tr" element + Then I should see "_b-penguin.jpeg" in the 3rd "#files-list tr" element When I click the 2nd ".edit-actions__dropdown-toggler" And I follow "Delete _b-penguin.jpeg" @@ -32,7 +32,7 @@ Feature: Filemanager Given I am logged in as "admin" And I am on "/bolt/filemanager/files" - Then I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element + Then I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element When I click the 1st ".edit-actions__dropdown-toggler" And I follow "Delete _a-sunrise.jpeg" @@ -42,14 +42,14 @@ Feature: Filemanager When I press "Cancel" Then I should not see "File deleted successfully" - And I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element + And I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element @javascript Scenario: As an Admin I want to duplicate a file Given I am logged in as "admin" And I am on "/bolt/filemanager/files" - Then I should see "_a-sunrise.jpeg" in the 2nd ".admin__body--main tr" element + Then I should see "_a-sunrise.jpeg" in the 2nd "#files-list tr" element And I should not see "I should see _a-sunrise (1).jpeg" When I click the 1st ".edit-actions__dropdown-toggler" From 70e79a9492a35f094e4ba527f8fa218ef9fb2649 Mon Sep 17 00:00:00 2001 From: Bob den Otter Date: Thu, 28 May 2020 11:42:35 +0200 Subject: [PATCH 5/5] Lazy loading for overview pages too --- assets/js/app/listing/Components/Table/Row/index.vue | 9 +++++++-- assets/scss/modules/listing/row/row.scss | 6 +++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/assets/js/app/listing/Components/Table/Row/index.vue b/assets/js/app/listing/Components/Table/Row/index.vue index 274e8c569..4906aec7b 100644 --- a/assets/js/app/listing/Components/Table/Row/index.vue +++ b/assets/js/app/listing/Components/Table/Row/index.vue @@ -43,8 +43,13 @@
+ > + + diff --git a/assets/scss/modules/listing/row/row.scss b/assets/scss/modules/listing/row/row.scss index 4a61b6cd2..5f5c96e27 100644 --- a/assets/scss/modules/listing/row/row.scss +++ b/assets/scss/modules/listing/row/row.scss @@ -71,8 +71,9 @@ $checkbox-row-width: 32px; top: 0.25rem; display: block; flex: 0 0 20%; - max-width: 100px; - max-height: 70px; + max-width: 108px; + max-height: 86px; + overflow: hidden; border-radius: $border-radius 0 0 $border-radius; background-color: var(--shade-400); background-repeat: no-repeat; @@ -83,7 +84,6 @@ $checkbox-row-width: 32px; @include media-breakpoint-up(md) { order: 2; top: 0; - max-height: none; } & ~ .is-excerpt {
{{ 'caption.folders'|trans }}