Merge pull request #15 from xima-media/mbox-style

Refactor Mbox element
xima-media · Mar 24, 2024 · eac5317 · eac5317
2 parents bbf3a56 + 9cc89d5
commit eac5317
Show file tree

Hide file tree

Showing 14 changed files with 204 additions and 27 deletions.
diff --git a/Classes/Preview/MboxPreviewRenderer.php b/Classes/Preview/MboxPreviewRenderer.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Xima\XimaTypo3Manual\Preview;
+
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Fluid\View\StandaloneView;
+use TYPO3\CMS\Frontend\Preview\TextmediaPreviewRenderer;
+
+class MboxPreviewRenderer extends TextmediaPreviewRenderer
+{
+    public function renderPageModulePreviewContent(GridColumnItem $item): string
+    {
+        $row = $item->getRecord();
+
+        $view = GeneralUtility::makeInstance(StandaloneView::class);
+        $view->setTemplatePathAndFilename('EXT:xima_typo3_manual/Resources/Private/Backend/MboxPreview.html');
+
+        $stateMapping = [
+            0 => -2,
+            1 => -1,
+            2 => 0,
+            3 => 1,
+            4 => 2,
+        ];
+        $view->assign('state', $stateMapping[$row['layout']] ?? -2);
+        $view->assign('data', $row);
+
+        return $view->render();
+    }
+}
diff --git a/Classes/Preview/MtextPreviewRenderer.php b/Classes/Preview/MtextPreviewRenderer.php
@@ -19,7 +19,7 @@ public function renderPageModulePreviewContent(GridColumnItem $item): string
         $row = $item->getRecord();
 
         $view = GeneralUtility::makeInstance(StandaloneView::class);
-        $view->setTemplatePathAndFilename('EXT:xima_typo3_manual/Resources/Private/Backend/MboxPreview.html');
+        $view->setTemplatePathAndFilename('EXT:xima_typo3_manual/Resources/Private/Backend/MtextPreview.html');
 
         $files = $this->fileRepository->findByRelation('tt_content', 'assets', $row['uid']);
         $view->assign('files', $files);

diff --git a/Configuration/TCA/Overrides/tt_content_mbox.php b/Configuration/TCA/Overrides/tt_content_mbox.php
@@ -1,6 +1,7 @@
 <?php
 
 use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
+use Xima\XimaTypo3Manual\Preview\MboxPreviewRenderer;
 
 ExtensionManagementUtility::addTcaSelectItem(
     'tt_content',
@@ -32,7 +33,42 @@
             ],
         ],
         'layout' => [
-
+            'config' => [
+                'fieldWizard' => [
+                    'selectIcons' => [
+                        'disabled' => false,
+                    ],
+                ],
+                'items' => [
+                    [
+                        'label' => 'LLL:EXT:xima_typo3_manual/Resources/Private/Language/locallang.xlf:mbox.layout.default',
+                        'icon' => 'EXT:xima_typo3_manual/Resources/Public/Icons/icon-default.svg',
+                        'value' => 0,
+                    ],
+                    [
+                        'label' => 'LLL:EXT:xima_typo3_manual/Resources/Private/Language/locallang.xlf:mbox.layout.info',
+                        'icon' => 'EXT:xima_typo3_manual/Resources/Public/Icons/icon-info.svg',
+                        'value' => 1,
+                    ],
+                    [
+                        'label' => 'LLL:EXT:xima_typo3_manual/Resources/Private/Language/locallang.xlf:mbox.layout.success',
+                        'icon' => 'EXT:xima_typo3_manual/Resources/Public/Icons/icon-success.svg',
+                        'value' => 2,
+                    ],
+                    [
+                        'label' => 'LLL:EXT:xima_typo3_manual/Resources/Private/Language/locallang.xlf:mbox.layout.warning',
+                        'icon' => 'EXT:xima_typo3_manual/Resources/Public/Icons/icon-warning.svg',
+                        'value' => 3,
+                    ],
+                    [
+                        'label' => 'LLL:EXT:xima_typo3_manual/Resources/Private/Language/locallang.xlf:mbox.layout.error',
+                        'icon' => 'EXT:xima_typo3_manual/Resources/Public/Icons/icon-error.svg',
+                        'value' => 4,
+                    ],
+                ],
+            ],
         ],
     ],
 ];
+
+$GLOBALS['TCA']['tt_content']['types']['mbox']['previewRenderer'] = MboxPreviewRenderer::class;
diff --git a/Configuration/TSconfig/Page.tsconfig b/Configuration/TSconfig/Page.tsconfig
@@ -81,8 +81,7 @@ mod.tx_bwicons {
 }
 
 RTE {
-    default {
-        preset = xima_typo3_manual
-    }
+  default {
+    preset = xima_typo3_manual
+  }
 }
-
diff --git a/Resources/Private/Backend/MboxPreview.html b/Resources/Private/Backend/MboxPreview.html
@@ -1,21 +1,4 @@
 {namespace be=TYPO3\CMS\Backend\ViewHelpers}
 <be:link.editRecord uid="{data.uid}" table="tt_content">
-    <f:format.raw>{data.bodytext->f:format.stripTags(allowedTags: '<p><span><strong><u><i><b>')}</f:format.raw>
-    <div>
-    <f:for each="{files}" as="file">
-        <f:image maxWidth="100" maxHeight="100" image="{file}"/>
-    </f:for>
-    </div>
+    <f:be.infobox state="{state}">{data.bodytext}</f:be.infobox>
 </be:link.editRecord>
-
-<style>
-    .t3-page-ce .t3-page-ce-body a:hover {
-        text-decoration: none;
-    }
-    .t3-page-ce .t3-page-ce-body img[data-icon-name] {
-        max-height: 16px;
-        margin-right: 2px;
-        position: relative;
-        top: -2px;
-    }
-</style>
diff --git a/Resources/Private/Backend/MtextPreview.html b/Resources/Private/Backend/MtextPreview.html
@@ -0,0 +1,21 @@
+{namespace be=TYPO3\CMS\Backend\ViewHelpers}
+<be:link.editRecord uid="{data.uid}" table="tt_content">
+    <f:format.raw>{data.bodytext->f:format.stripTags(allowedTags: '<p><span><strong><u><i><b>')}</f:format.raw>
+    <div>
+    <f:for each="{files}" as="file">
+        <f:image maxWidth="100" maxHeight="100" image="{file}"/>
+    </f:for>
+    </div>
+</be:link.editRecord>
+
+<style>
+    .t3-page-ce .t3-page-ce-body a:hover {
+        text-decoration: none;
+    }
+    .t3-page-ce .t3-page-ce-body img[data-icon-name] {
+        max-height: 16px;
+        margin-right: 2px;
+        position: relative;
+        top: -2px;
+    }
+</style>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -32,6 +32,24 @@
 			<trans-unit id="wizard.mbox.description">
 				<source>Color hint with icon</source>
 			</trans-unit>
+			<trans-unit id="mbox.layout.default">
+				<source>Default</source>
+			</trans-unit>
+			<trans-unit id="mbox.layout.default">
+				<source>Default</source>
+			</trans-unit>
+			<trans-unit id="mbox.layout.info">
+				<source>Info</source>
+			</trans-unit>
+			<trans-unit id="mbox.layout.success">
+				<source>Success</source>
+			</trans-unit>
+			<trans-unit id="mbox.layout.warning">
+				<source>Warning</source>
+			</trans-unit>
+			<trans-unit id="mbox.layout.error">
+				<source>Error</source>
+			</trans-unit>
 			<trans-unit id="wizard.mtext.title">
 				<source>Text with image</source>
 			</trans-unit>

diff --git a/Resources/Private/fluid_styled_content/Templates/Mbox.html b/Resources/Private/fluid_styled_content/Templates/Mbox.html
@@ -6,7 +6,28 @@
     <div class="ce-mbox">
 
         <blockquote>
-            <f:format.html>{data.bodytext}</f:format.html>
+            <div class="icon">
+                <f:if condition="{data.layout} == 0">
+                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g fill="currentColor"><path d="M8 1a4.5 4.5 0 0 0-4.5 4.5C3.5 7.263 5 9 5 11v2l.862 1.724a.5.5 0 0 0 .447.276h3.382a.5.5 0 0 0 .447-.276L11 13v-2c0-2 1.5-3.737 1.5-5.5A4.5 4.5 0 0 0 8 1zM4.5 5.5C4.5 3.57 6.07 2 8 2s3.5 1.57 3.5 3.5c0 .654-.31 1.401-.638 2.192-.291.702-.611 1.472-.766 2.308H5.904c-.155-.836-.475-1.606-.766-2.308C4.81 6.901 4.5 6.154 4.5 5.5zM9.382 14H6.618l-.5-1h3.764l-.5 1zM10 12H6v-1h4v1z"/><path
+                        d="M8 3a2.5 2.5 0 0 0-2.5 2.5h1C6.5 4.673 7.173 4 8 4V3z" /></g></svg>
+                </f:if>
+                <f:if condition="{data.layout} == 1">
+                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g fill="currentColor"><path d="M7 2.25c0-.14.11-.25.25-.25h1.5c.14 0 .25.11.25.25v1.5c0 .14-.11.25-.25.25h-1.5C7.11 4 7 3.89 7 3.75v-1.5zM10.75 14h-5.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25H7V8h-.75C6.11 8 6 7.89 6 7.75v-1.5A.25.25 0 0 1 6.25 6h2.5a.25.25 0 0 1 .25.25V12h1.75a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25z"/></g></svg>
+                </f:if>
+                <f:if condition="{data.layout} == 2">
+                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g fill="currentColor"><path d="m13.3 4.8-.7-.7c-.2-.2-.5-.2-.7 0L6.5 9.5 4 6.9c-.2-.2-.5-.2-.7 0l-.6.7c-.2.2-.2.5 0 .7l3.6 3.6c.2.2.5.2.7 0l6.4-6.4c.1-.2.1-.5-.1-.7z"/></g></svg>
+                </f:if>
+                <f:if condition="{data.layout} == 3">
+                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g fill="currentColor"><circle cx="8" cy="12.5" r="1.5"/><path
+                        d="M8.522 10H7.478a.25.25 0 0 1-.25-.227l-.625-6.68A1 1 0 0 1 7.598 2h.804a1 1 0 0 1 .995 1.093l-.626 6.68a.25.25 0 0 1-.249.227z" /></g></svg>
+                </f:if>
+                <f:if condition="{data.layout} == 4">
+                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g fill="currentColor"><path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/></g></svg>
+                </f:if>
+            </div>
+            <div>
+                <f:format.html>{data.bodytext}</f:format.html>
+            </div>
         </blockquote>
 
     </div>

diff --git a/Resources/Public/Css/Frontend/manual.css b/Resources/Public/Css/Frontend/manual.css
@@ -22,7 +22,7 @@ main {
 }
 
 p a, p a:visited {
-    color: var(--link-color, #0000FF);
+    color: var(--link-color, #00f);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -292,7 +292,7 @@ details[open] > summary:before {
 }
 
 nav a.active {
-    color: var(--link-color, #0000FF);
+    color: var(--link-color, #00f);
 }
 
 /**
@@ -329,3 +329,49 @@ span.badge--red {
     background-color: #f2cece;
     color: #502121;
 }
+
+
+/* mbox */
+.frame-layout-0 {
+    --mbox-bg: #e0e0e0;
+    --mbox-border-color: #adadad;
+}
+
+.frame-layout-1 {
+    --mbox-bg: #e9f2fa;
+    --mbox-border-color: #c5ddf3;
+}
+
+.frame-layout-2 {
+    --mbox-bg: #dbebdb;
+    --mbox-border-color: #9fcb9f;
+}
+
+.frame-layout-3 {
+    --mbox-bg: #fcf1e2;
+    --mbox-border-color: #f6dab1;
+}
+
+.frame-layout-4 {
+    --mbox-bg: #f7e2e2;
+    --mbox-border-color: #e9b1b1;
+}
+
+blockquote {
+    display: grid;
+    grid-template-columns: 2rem auto;
+    gap: 1.25rem;
+    align-items: center;
+    background: var(--mbox-bg);
+    border-left-color: var(--mbox-border-color);
+}
+
+blockquote .icon {
+    background-color: var(--mbox-border-color);
+    border-radius: 100%;
+    width: 2rem;
+    height: 2rem;
+    display: grid;
+    justify-content: center;
+    align-content: center;
+}
diff --git a/Resources/Public/Icons/icon-default.svg b/Resources/Public/Icons/icon-default.svg
diff --git a/Resources/Public/Icons/icon-error.svg b/Resources/Public/Icons/icon-error.svg
diff --git a/Resources/Public/Icons/icon-info.svg b/Resources/Public/Icons/icon-info.svg
diff --git a/Resources/Public/Icons/icon-success.svg b/Resources/Public/Icons/icon-success.svg
diff --git a/Resources/Public/Icons/icon-warning.svg b/Resources/Public/Icons/icon-warning.svg