Merge pull request #16 from punktDe/ImproveFieldValuePreview

[TASK] Use popover to show preview field values

Author: alex-boehm

Documentation/Changelog/Index.rst

@@ -6,6 +6,12 @@
 Change log
 ==========
 
+Version 1.1.0
+-------------
+- Improve display of field value preview (https://github.com/punktDe/quickedit/issues/14)
+- Update example config and known problems page (https://github.com/punktDe/quickedit/issues/20)
+
+
 Version 1.0.1
 -------------
 

Documentation/Images/Quickedit_Fields-preview.png

@@ -6,4 +6,5 @@
 Known problems
 ==============
 
-No known problems so far.
+- If the slug-field is in a fieldgroup without the title field: editing the group with the slug field will also show the title field for editing, even if not configured.
+  This seems to be some kind of TCA related magic.

Documentation/KnownProblems/Index.rst

@@ -25,7 +25,7 @@ project     = Quickedit
 # ...   (recommended) version, displayed next to title (desktop) and in <meta name="book-version"
 # .................................................................................
 
-release     = 1.0.1
+release     = 1.1.0
 
 # .................................................................................
 # ...  (recommended) displayed in footer

Documentation/Settings.cfg

@@ -40,12 +40,12 @@ mod {
                 config {
                     1 {
                         label = General
-                        fields = title, subtitle
+                        fields = title, subtitle, slug
                         previewFields = title
                     }
                     2 {
                         label = Special
-                        fields = slug, hidden, fe_group
+                        fields = hidden, fe_group
                         previewFields = *
                     }
                 }

README.md

@@ -1,6 +1,8 @@
-<f:for each="{editConfig.fieldValues}" as="previewField">
-    <div>
-        <span>{previewField.label}:</span>&nbsp;
-        <span>{previewField.value}</span><br />
-    </div>
-</f:for>
+<div class='container'>
+    <f:for each="{editConfig.fieldValues}" as="previewField">
+        <div class='row'>
+            <div class='col field-label'>{previewField.label}:</div>
+            <div class='col'>{previewField.value}</div>
+        </div>
+    </f:for>
+</div>

Resources/Private/Partials/Backend/FieldValues.html

@@ -14,9 +14,14 @@
                     </be:link.editRecord>
 
                     <f:if condition="{editConfig.previewFields}">
-                        <div class="quickedit__field-value" data-bs-toggle="tooltip" title="
-                        {f:render(partial:'FieldValues', arguments:{editConfig:editConfig})}"
-                             data-bs-html="true" data-bs-placement="bottom">
+                        <div class="quickedit__field-value"
+                             data-bs-html="true"
+                             data-bs-placement="bottom"
+                             data-bs-trigger="hover"
+                             data-bs-toggle="popover"
+                             data-bs-content="{f:render(partial:'FieldValues', arguments:{editConfig:editConfig})}"
+                             data-bs-custom-class="quickedit-popover"
+                        >
                             <f:translate key="LLL:EXT:quickedit/Resources/Private/Language/Backend.xlf:currentValues" />
                         </div>
                     </f:if>

Resources/Private/Templates/Backend/Quickedit.html

@@ -35,6 +35,10 @@
     border-top: 1px solid #bbb;
 }
 
+.quickedit__field-value {
+    cursor: pointer;
+}
+
 .btn-default.quickedit__toggle-button {
     margin-top: -1px;
     border-top: none;
@@ -49,3 +53,20 @@
 .btn-default.quickedit__toggle-button.collapsed {
     background-image: url(../../../../../../../typo3conf/ext/quickedit/Resources/Public/Icons/angle-down-solid.svg);
 }
+
+.quickedit-popover {
+    min-width: 250px;
+}
+
+.quickedit-popover .row {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid lightgrey;
+}
+
+.quickedit-popover .row:last-child {
+    border: none;
+}
+
+.quickedit-popover .field-label {
+    font-weight: bold;
+}

Resources/Public/Backend/Css/quickedit.css

@@ -2,7 +2,7 @@
 $EM_CONF[$_EXTKEY] = [
     'title'            => 'Toolbar for editing page properties',
     'description'      => 'This extension provides a configurable toolbar for editing page properties.',
-    'version'          => '1.0.1',
+    'version'          => '1.1.0',
     'category'         => 'be',
     'constraints'      => [
         'depends'   => [