[BUGFIX] Preview information should not conflict with frontend layout

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: Ie71420e5185e42b850ac3bb11d8eb4edd26bb4ad
Reviewed-on: https://review.typo3.org/54853


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>

typo3/sysext/frontend/Classes/Hooks/FrontendHooks.php

@@ -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: 0; border-bottom: 2px solid #ff8800; padding: 5px; background: #ffaa00; font: 1em Verdana; color: #fff; letter-spacing: 2px; z-index: 20000; width: 100%; text-align: center;"><span style="overflow: hidden; display: block; height: 16px;">... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... </span></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;
     }

typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php

@@ -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: 0; border-bottom: 2px solid #ff8800; padding: 5px; background: #ffaa00; font: 1em Verdana; color: #fff; letter-spacing: 2px; z-index: 20000; width: 100%; text-align: center;"><span style="overflow: hidden; display: block; height: 16px;">... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... PREVIEW ... </span></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;