From 50f590c8c7a3fbbafaa1be7b0ab79785a5a257d2 Mon Sep 17 00:00:00 2001
From: jliessmann <code@frauliessmann.de>
Date: Thu, 23 Feb 2017 20:36:23 +0100
Subject: [PATCH] [TASK] Improve layout of ImageManipulation preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Use bootstrap grid to arrange image thumbnails
Resolves: #79960
Releases: master
Change-Id: I99ef6fc159c1497ea5464ef33398cf799c91a534
Reviewed-on: https://review.typo3.org/51810
Reviewed-by: Jasmina Ließmann <code@frauliessmann.de>
Tested-by: Jasmina Ließmann <code@frauliessmann.de>
Reviewed-by: Joerg Kummer <service@enobe.de>
Tested-by: Joerg Kummer <service@enobe.de>
Reviewed-by: Helmut Hummel <typo3@helhum.io>
Tested-by: Helmut Hummel <typo3@helhum.io>
Tested-by: TYPO3com <no-reply@typo3.com>
---
.../Public/Less/TYPO3/_main_content.less | 27 +++++
.../ImageManipulationElement.html | 107 +++++++++---------
.../Private/TypeScript/ImageManipulation.ts | 2 +-
.../backend/Resources/Public/Css/backend.css | 21 ++++
.../Public/JavaScript/ImageManipulation.js | 2 +-
5 files changed, 104 insertions(+), 55 deletions(-)
diff --git a/Build/Resources/Public/Less/TYPO3/_main_content.less b/Build/Resources/Public/Less/TYPO3/_main_content.less
index b781d8549c6a..af9647d7cba2 100644
--- a/Build/Resources/Public/Less/TYPO3/_main_content.less
+++ b/Build/Resources/Public/Less/TYPO3/_main_content.less
@@ -243,3 +243,30 @@ span.warningboxheader {
.t3-btn {
cursor: pointer;
}
+
+.media-gallery__list {
+ .media-gallery__item {
+ display: inline-block;
+ float: none;
+ margin-bottom: 15px;
+ margin-right: -4px;
+ vertical-align: top;
+
+ .media-object {
+ max-height: 158px;
+ overflow: hidden;
+ }
+
+ img.thumbnail {
+ height: auto;
+ margin-bottom: 0;
+ max-height: 150px;
+ max-width: 100%;
+ }
+
+ span.thumbnail {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html
index 61d526f6a8f5..9f217438b161 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html
@@ -3,59 +3,60 @@
<f:layout name="ImageManipulation" />
<f:section name="Main">
- <div class="media">
- <f:if condition="{isAllowedFileExtension}">
- <f:then>
- <div class="media-left">
- <f:for each="{config.cropVariants}" as="cropVariant">
- <div class="t3js-image-manipulation-preview media-object" data-preview-width="150" data-preview-height="200" data-crop-variant-id="{cropVariant.id}">
- <f:image image="{image}" crop="{formEngine.field.value}" cropVariant="{cropVariant.id}" maxWidth="150" maxHeight="200" class="thumbnail thumbnail-status" additionalAttributes="{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}" />
+ <f:if condition="{isAllowedFileExtension}">
+ <f:then>
+ <f:if condition="{config.readOnly}">
+ <f:else>
+ <div class="form-control-wrap">
+ <input type="hidden" id="{formEngine.field.id}"
+ name="{formEngine.field.name}"
+ value="{formEngine.field.value}"
+ data-formengine-validation-rules="{formEngine.validation}"/>
+ <button class="btn btn-default t3js-image-manipulation-trigger"
+ data-url="{wizardUri}"
+ data-preview-url="{previewUrl}"
+ data-severity="notice"
+ data-modal-title="{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
+ data-image-uid="{image.uid}"
+ data-crop-variants="{config.cropVariants -> f:format.json()}"
+ data-file-field="{config.file_field}"
+ data-field="{formEngine.field.id}">
+ <span class="t3-icon fa fa-crop"></span>
+ <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor"/>
+ </button>
+ </div>
+ </f:else>
+ </f:if>
+ <div class="row media-gallery__list">
+ <f:for each="{config.cropVariants}" as="cropVariant">
+ <div class="col-xs-6 col-sm-4 col-md-3 media-gallery__item">
+ <p>
+ <b><f:translate id="{cropVariant.title}" default="{cropVariant.title}" /></b><br/>
+ <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: {cropVariant.selectedRatioTitle}
+ </p>
+ <div class="t3js-image-manipulation-preview media-object"
+ data-preview-height="150"
+ data-crop-variant-id="{cropVariant.id}">
+ <f:image image="{image}" crop="{formEngine.field.value}"
+ cropVariant="{cropVariant.id}"
+ maxHeight="150"
+ class="thumbnail thumbnail-status"
+ additionalAttributes="{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}"/>
</div>
- </f:for>
- </div>
- <f:if condition="{config.readOnly}">
- <f:else>
- <div class="media-body">
- <input type="hidden" id="{formEngine.field.id}" name="{formEngine.field.name}" value="{formEngine.field.value}" data-formengine-validation-rules="{formEngine.validation}" />
- <button class="btn btn-default t3js-image-manipulation-trigger"
- data-url="{wizardUri}"
- data-preview-url="{previewUrl}"
- data-severity="notice"
- data-modal-title="{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
- data-image-uid="{image.uid}"
- data-crop-variants="{config.cropVariants -> f:format.json()}"
- data-file-field="{config.file_field}"
- data-field="{formEngine.field.id}">
- <span class="t3-icon fa fa-crop"></span><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor" />
- </button>
- <f:if condition="{crop}" >
- <div class="table-fit-block table-spacer-wrap">
- <table class="table table-no-borders t3js-image-manipulation-info">
- <tr>
- <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-width" /></td>
- <td class="t3js-image-manipulation-info-crop-width">{crop.width}px</td>
- </tr>
- <tr>
- <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-height" /></td>
- <td class="t3js-image-manipulation-info-crop-height">{crop.height}px</td>
- </tr>
- </table>
- </div>
- </f:if>
- </div>
- </f:else>
- </f:if>
- </f:then>
- <f:else>
- <div class="media-body">
- <p><em>
- <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
- <br/>
- {config.allowedExtensions -> f:format.case(mode: 'upper')}
- </em></p>
- </div>
- </f:else>
- </f:if>
- </div>
+ </div>
+ </f:for>
+ </div>
+ </f:then>
+ <f:else>
+ <div class="media-body">
+ <p>
+ <em>
+ <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" /><br/>
+ {config.allowedExtensions -> f:format.case(mode: 'upper')}
+ </em>
+ </p>
+ </div>
+ </f:else>
+ </f:if>
</f:section>
</html>
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts b/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts
index 956aaa65402d..d16dab0b4a76 100644
--- a/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts
+++ b/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts
@@ -837,7 +837,7 @@ class ImageManipulation {
return;
}
- let previewWidth: number = $preview.data('preview-width');
+ let previewWidth: number = $preview.width();
let previewHeight: number = $preview.data('preview-height');
// Adjust aspect ratio of preview width/height
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 933cb0b881a9..5464aa646324 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -12859,6 +12859,27 @@ span.warningboxheader {
.t3-btn {
cursor: pointer;
}
+.media-gallery__list .media-gallery__item {
+ display: inline-block;
+ float: none;
+ margin-bottom: 15px;
+ margin-right: -4px;
+ vertical-align: top;
+}
+.media-gallery__list .media-gallery__item .media-object {
+ max-height: 158px;
+ overflow: hidden;
+}
+.media-gallery__list .media-gallery__item img.thumbnail {
+ height: auto;
+ margin-bottom: 0;
+ max-height: 150px;
+ max-width: 100%;
+}
+.media-gallery__list .media-gallery__item span.thumbnail {
+ display: inline-block;
+ margin-bottom: 0;
+}
.element-browser-section {
border-bottom: 1px solid #d7d7d7;
padding-bottom: 30px;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js b/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js
index 25ea3324f8a4..75aacdb698af 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js
@@ -683,7 +683,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T
if ($preview.length === 0) {
return;
}
- var previewWidth = $preview.data('preview-width');
+ var previewWidth = $preview.width();
var previewHeight = $preview.data('preview-height');
// Adjust aspect ratio of preview width/height
var aspectRatio = cropData.width / cropData.height;
--
GitLab