diff --git a/assets/js/app/listing/Components/Filter.vue b/assets/js/app/listing/Components/Filter.vue index b0638412..1d5397a3 100644 --- a/assets/js/app/listing/Components/Filter.vue +++ b/assets/js/app/listing/Components/Filter.vue @@ -26,14 +26,7 @@ :class="{ 'is-selected': size === 'small' }" @click="changeSize('small')" > - - - - - - - - + Compact @@ -44,13 +37,7 @@ :class="{ 'is-selected': size === 'normal' }" @click="changeSize('normal')" > - - - - - - - + Expanded diff --git a/assets/scss/init/_base.scss b/assets/scss/init/_base.scss index c2f2ec37..d869e0db 100644 --- a/assets/scss/init/_base.scss +++ b/assets/scss/init/_base.scss @@ -37,6 +37,7 @@ code { .card { box-shadow: $card-box-shadow; background: #fff; + border: 1px solid #E8E8E8 !important; .card-header { font-weight: $font-weight-bold; diff --git a/assets/scss/modules/editor/fields/_image.scss b/assets/scss/modules/editor/fields/_image.scss index 69457e7d..c1159353 100644 --- a/assets/scss/modules/editor/fields/_image.scss +++ b/assets/scss/modules/editor/fields/_image.scss @@ -78,3 +78,6 @@ opacity: 0; } +.filepond--root { + margin-bottom: 0 !important; +} diff --git a/assets/scss/modules/listing/_filter.scss b/assets/scss/modules/listing/_filter.scss index e0435ce4..1c8d2512 100644 --- a/assets/scss/modules/listing/_filter.scss +++ b/assets/scss/modules/listing/_filter.scss @@ -58,6 +58,7 @@ border-radius: $border-radius; box-shadow: $card-box-shadow; padding: $spacer / 2; + font-size: 0.9rem; &:hover { cursor: pointer; @@ -67,34 +68,16 @@ &:focus { outline: none; box-shadow: $input-btn-focus-box-shadow; - - svg, - g { - fill: theme-color('secondary'); - } } &.is-selected { - background: var(--primary); - - svg g { - fill: var(--foreground); - } + background: $disabled; } &.is-active { background: var(--primary); color: var(--foreground); } - - svg { - width: 18px; - height: 18px; - - g { - fill: var(--shade); - } - } } } } diff --git a/assets/static/images/placeholder.png b/assets/static/images/placeholder.png new file mode 100644 index 00000000..41ec53ef Binary files /dev/null and b/assets/static/images/placeholder.png differ diff --git a/src/Controller/Backend/FilemanagerController.php b/src/Controller/Backend/FilemanagerController.php index a0f0aa5b..c8fa09a2 100644 --- a/src/Controller/Backend/FilemanagerController.php +++ b/src/Controller/Backend/FilemanagerController.php @@ -13,6 +13,7 @@ use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security; use Symfony\Component\Finder\Finder; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; +use Symfony\Component\HttpFoundation\Session\SessionInterface; use Symfony\Component\Routing\Annotation\Route; use Webmozart\PathUtil\Path; @@ -21,20 +22,20 @@ use Webmozart\PathUtil\Path; */ class FilemanagerController extends TwigAwareController implements BackendZone { - /** - * @var FileLocations - */ + /** @var FileLocations */ private $fileLocations; - /** - * @var MediaRepository - */ + /** @var MediaRepository */ private $mediaRepository; - public function __construct(FileLocations $fileLocations, MediaRepository $mediaRepository) + /** @var SessionInterface */ + private $session; + + public function __construct(FileLocations $fileLocations, MediaRepository $mediaRepository, SessionInterface $session) { $this->fileLocations = $fileLocations; $this->mediaRepository = $mediaRepository; + $this->session = $session; } /** @@ -47,6 +48,13 @@ class FilemanagerController extends TwigAwareController implements BackendZone $path .= '/'; } + if ($request->query->get('view')) { + $view = $request->query->get('view') === 'cards' ? 'cards' : 'list'; + $this->session->set('filemanager_view', $view); + } else { + $view = $this->session->get('filemanager_view', 'list'); + } + $location = $this->fileLocations->get($location); $finder = $this->findFiles($location->getBasepath(), $path); @@ -63,6 +71,7 @@ class FilemanagerController extends TwigAwareController implements BackendZone 'parent' => $parent, 'media' => $media, 'allfiles' => $location->isShowAll() ? $this->buildIndex($location->getBasepath()) : false, + 'view' => $view, ]); } diff --git a/src/Twig/ImageExtension.php b/src/Twig/ImageExtension.php index 49c4f939..3820b28b 100644 --- a/src/Twig/ImageExtension.php +++ b/src/Twig/ImageExtension.php @@ -95,7 +95,7 @@ class ImageExtension extends AbstractExtension return sprintf('%s', $link, $alt, (string) $width, (string) $height); } - public function thumbnail($image, int $width = 320, int $height = 240, ?string $location = null, ?string $path = null) + public function thumbnail($image, int $width = 320, int $height = 240, ?string $location = null, ?string $path = null, ?string $fit = null) { $filename = $this->getFilename($image); @@ -114,6 +114,9 @@ class ImageExtension extends AbstractExtension if ($path) { $params['path'] = $path; } + if ($fit) { + $params['fit'] = $fit; + } // Create an instance of the URL builder $urlBuilder = UrlBuilderFactory::create('/thumbs/', $this->secret); diff --git a/src/Utils/Html.php b/src/Utils/Html.php index f9b01fe7..14dd70b8 100644 --- a/src/Utils/Html.php +++ b/src/Utils/Html.php @@ -16,7 +16,7 @@ class Html * * @return string Trimmed string */ - public static function trimText(string $str, int $desiredLength, bool $hellip = true, int $cutOffCap = 10): string + public static function trimText(string $str, int $desiredLength, bool $hellip = true, int $cutOffCap = 3): string { if ($hellip) { $ellipseStr = ' …'; diff --git a/templates/finder/_files_cards.html.twig b/templates/finder/_files_cards.html.twig new file mode 100644 index 00000000..b67bedfb --- /dev/null +++ b/templates/finder/_files_cards.html.twig @@ -0,0 +1,117 @@ +
+ {% for file in finder.files() %} + + {% set extension = file.extension() %} + {% set filename = path ~ file.getRelativePathname() %} + {% set icon = 'fa-file' %} + {% set link = path('bolt_file_edit', {'location': location, 'file': filename }) %} + {% set thumbnail = '' %} + {% set title = '' %} + {% set dimensions = '' %} + + {% if extension in imageformats %} + {% set thumbnail = filename|thumbnail(width = 400, height = 300, location = location, fit = 'crop') %} + {% set icon = 'fa-image' %} + {% set link = path('bolt_media_new', {'location': location, 'file': filename}) %} + + {% for image in media|default([]) if image.filename in filename %} + {% set title = image.title %} + {% set dimensions = image.width ~ ' × ' ~ image.height ~ 'px' %} + {% set link = path('bolt_media_edit', {'id': image.id}) %} + {% endfor %} + + {% endif %} + +
+
+ {%- if thumbnail -%} + + + + {% else %} + + {%- endif -%} + +
+ {{ file.getRelativePathname|excerpt(15) }} + +
+ + +
+ + + + {% if extension in imageformats %} + Edit image information + {% else %} + Edit file in editor + {% endif %} + + + + + View original + + + + Duplicate {{ file.getRelativePathname|excerpt(22) }} + + + + Delete {{ file.getRelativePathname|excerpt(22) }} + + +
+ + + + Filename: {{ file.getRelativePathname }} + + + {% if title %} + + + Title: {{ title }} + + {% endif %} + + {% if dimensions %} + + + Dimensions: {{ dimensions }} + + {% endif %} + + + + Filesize: {{ file.getSize() }} bytes + + + + + Created on: {{ file.getCTime()|localizeddate('short', 'short', null, 'UTC') }} + + +
+
+ +
+ +
+
+ {% else %} +
+

No files are present in this folder. Select a folder to navigate to, on the right-hand side.

+
+ {% endfor %} +
\ No newline at end of file diff --git a/templates/finder/_files.html.twig b/templates/finder/_files_list.html.twig similarity index 88% rename from templates/finder/_files.html.twig rename to templates/finder/_files_list.html.twig index 4767a1d8..d7810471 100644 --- a/templates/finder/_files.html.twig +++ b/templates/finder/_files_list.html.twig @@ -10,9 +10,6 @@ {{ 'actions'|trans }} - - {% set imageformats = ['gif', 'jpg', 'jpeg', 'png', 'svg'] %} - {% for file in finder.files() %} {% set extension = file.extension() %} @@ -24,7 +21,7 @@ {% set dimensions = '' %} {% if extension in imageformats %} - {% set thumbnail = filename|thumbnail(width = 100, height = 72, location = location) %} + {% set thumbnail = filename|thumbnail(width = 100, height = 72, location = location, fit = 'crop') %} {% set icon = 'fa-image' %} {% set link = path('bolt_media_new', {'location': location, 'file': filename}) %} @@ -47,7 +44,7 @@ {%- if thumbnail -%} - + {%- else -%} @@ -65,5 +62,11 @@   + {% else %} + + +

No files are present in this folder. Select a folder to navigate to, on the right-hand side.

+ + {% endfor %} \ No newline at end of file diff --git a/templates/finder/_folders.html.twig b/templates/finder/_folders.html.twig index 9d0109f0..b66b58fb 100644 --- a/templates/finder/_folders.html.twig +++ b/templates/finder/_folders.html.twig @@ -1,41 +1,52 @@ - - - - - - - - - {% if path != '/' %} - - - - - - {% endif %} +
+
+ + {{ 'caption.folders'|trans }} +
+
- {% for directory in finder.directories() %} -
- - - - - {% endfor %} -
{{ 'directoryname'|trans }}{{ 'actions'|trans }}
- - - ../ - - - -
- - {% set dirname = path ~ directory.getRelativePathname() %} - - {{ directory.getRelativePathname }}/ - - - -
\ No newline at end of file + + + + + + + + + + {% if path != '/' %} + + + + + + {% endif %} + + {% for directory in finder.directories() %} + + + + + + {% endfor %} +
{{ 'directoryname'|trans }}{{ 'actions'|trans }}
+ + + ../ + + + +
+ + {% set dirname = path ~ directory.getRelativePathname() %} + + {{ directory.getRelativePathname }}/ + + + +
+ + + diff --git a/templates/finder/finder.html.twig b/templates/finder/finder.html.twig index 9b09c855..1d0f90cb 100644 --- a/templates/finder/finder.html.twig +++ b/templates/finder/finder.html.twig @@ -6,13 +6,15 @@ {% block main %} -

{{ 'caption.path'|trans }}: {{ location }}{{ path }}

- {% include '@bolt/finder/_quickselect.html.twig' %} - {% include '@bolt/finder/_folders.html.twig' %} + {% set imageformats = ['gif', 'jpg', 'jpeg', 'png', 'svg'] %} - {% include '@bolt/finder/_files.html.twig' %} + {% if view == 'list' %} + {% include '@bolt/finder/_files_list.html.twig' %} + {% else %} + {% include '@bolt/finder/_files_cards.html.twig' %} + {% endif %} {% endblock %} @@ -21,20 +23,22 @@
{{ 'caption.meta_information'|trans }}
+

{{ 'caption.path'|trans }}: {{ location }}{{ path }}

+ View: +
+ List + Cards +
+ {% include '@bolt/finder/_folders.html.twig' %} + {% include '@bolt/finder/_uploader.html.twig' %} {% endblock aside %} {% block stylesheets %} {{ parent() }} - - {% endblock %} diff --git a/tests/e2e/features/filemanager.feature b/tests/e2e/features/filemanager.feature index 1464ef09..b3675a97 100644 --- a/tests/e2e/features/filemanager.feature +++ b/tests/e2e/features/filemanager.feature @@ -7,13 +7,13 @@ Feature: Filemanager | area | themes | Then there is element "header" with text "Theme files" - And there is element "title" with text "Path: themes/" + And there is element "path" with text "Path: themes/" When I visit the "filemanager" page with parameters: | area | files | Then there is element "header" with text "Content files" - And there is element "title" with text "Path: files/" + And there is element "path" with text "Path: files/" # @todo Add tests for uploading files, and verifying that they're there \ No newline at end of file diff --git a/tests/e2e/pages/filemanager.js b/tests/e2e/pages/filemanager.js index 53c73592..206655ba 100644 --- a/tests/e2e/pages/filemanager.js +++ b/tests/e2e/pages/filemanager.js @@ -7,7 +7,7 @@ class FilemanagerPage extends BasePage { this.url = '/bolt/filemanager/:area'; this.header = $('.admin__header--title'); - this.title = $('h2'); + this.path = $('p.path'); } }