[BUGFIX] Preview information should not conflict with frontend layout 61/54861/2
authorBenjamin Kott <benjamin.kott@wfp2.com>
Wed, 29 Nov 2017 12:25:48 +0000 (13:25 +0100)
committerBenjamin Kott <benjamin.kott@outlook.com>
Wed, 29 Nov 2017 12:42:09 +0000 (13:42 +0100)
The preview information badge was reworked and now has a fixed
always visible position. Clicks on the preview badge are now prevended
and passed through to the underlaying/covered elements.

Resolves: #83158
Releases: master, 8.7
Change-Id: Idb15547b1ca81e80a1b121a8aeadc832b379d628
Reviewed-on: https://review.typo3.org/54861
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
typo3/sysext/frontend/Classes/Hooks/FrontendHooks.php
typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php

index e927b2c..5669398 100644 (file)
@@ -35,7 +35,23 @@ class FrontendHooks
         if ($pObj->config['config']['message_preview']) {
             $message = $pObj->config['config']['message_preview'];
         } else {
-            $message = '<div id="typo3-previewInfo" style="position: absolute; top: 20px; right: 20px; border: 2px solid #000; padding: 5px 5px; background: #f00; font: 1em Verdana; color: #000; font-weight: bold; z-index: 10001">PREVIEW!</div>';
+            $styles = [];
+            $styles[] = 'position: fixed';
+            $styles[] = 'top: 15px';
+            $styles[] = 'right: 15px';
+            $styles[] = 'padding: 8px 18px';
+            $styles[] = 'background: #fff3cd';
+            $styles[] = 'border: 1px solid #ffeeba';
+            $styles[] = 'font-family: sans-serif';
+            $styles[] = 'font-size: 14px';
+            $styles[] = 'font-weight: bold';
+            $styles[] = 'color: #856404';
+            $styles[] = 'z-index: 20000';
+            $styles[] = 'user-select: none';
+            $styles[] = 'pointer-events:none';
+            $styles[] = 'text-align: center';
+            $styles[] = 'border-radius: 2px';
+            $message = '<div id="typo3-preview-info" style="' . implode($styles, ';') . '">PREVIEW</div>';
         }
         return $message;
     }
index 6e47b80..a60b743 100644 (file)
@@ -80,7 +80,23 @@ class TypoScriptFrontendControllerHook
                     $urlForStoppingPreview = GeneralUtility::getIndpEnv('TYPO3_SITE_URL') . 'index.php?ADMCMD_prev=LOGOUT&returnUrl=' . rawurlencode(GeneralUtility::getIndpEnv('REQUEST_URI'));
                     $text .= '<br><a style="color: #000;" href="' . $urlForStoppingPreview . '">Stop preview</a>';
                 }
-                $content .= '<div id="typo3-previewInfo" style="position: absolute; top: 20px; right: 20px; border: 2px solid #000; padding: 5px; background: #f00; font: 1em Verdana; color: #000; font-weight: bold; z-index: 10001">' . $text . '</div>';
+                $styles = [];
+                $styles[] = 'position: fixed';
+                $styles[] = 'top: 15px';
+                $styles[] = 'right: 15px';
+                $styles[] = 'padding: 8px 18px';
+                $styles[] = 'background: #fff3cd';
+                $styles[] = 'border: 1px solid #ffeeba';
+                $styles[] = 'font-family: sans-serif';
+                $styles[] = 'font-size: 14px';
+                $styles[] = 'font-weight: bold';
+                $styles[] = 'color: #856404';
+                $styles[] = 'z-index: 20000';
+                $styles[] = 'user-select: none';
+                $styles[] = 'pointer-events:none';
+                $styles[] = 'text-align: center';
+                $styles[] = 'border-radius: 2px';
+                $content .= '<div id="typo3-preview-info" style="' . implode($styles, ';') . '">PREVIEW</div>';
             }
         }
         return $content;