[TASK] Improve layout of ImageManipulation preview 10/51810/5
authorjliessmann <code@frauliessmann.de>
Thu, 23 Feb 2017 19:36:23 +0000 (20:36 +0100)
committerHelmut Hummel <typo3@helhum.io>
Fri, 24 Feb 2017 21:14:33 +0000 (22:14 +0100)
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>
Build/Resources/Public/Less/TYPO3/_main_content.less
typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html
typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js

index b781d85..af9647d 100644 (file)
@@ -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;
+               }
+       }
+}
index 61d526f..9f21743 100644 (file)
@@ -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>
index 956aaa6..d16dab0 100644 (file)
@@ -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
index 933cb0b..5464aa6 100644 (file)
@@ -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;
index 25ea332..75aacdb 100644 (file)
@@ -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;