[BUGFIX] Preview information should not conflict with frontend layout 53/54853/2
authorBenjamin Kott <benjamin.kott@wfp2.com>
Wed, 29 Nov 2017 11:05:02 +0000 (12:05 +0100)
committerMarkus Klein <markus.klein@typo3.org>
Wed, 29 Nov 2017 12:16:17 +0000 (13:16 +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: 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
typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php

index 3ec9f38..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: 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;
     }
index 042eb2d..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: 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;