From 9b5088ff006adb5c1aee91c02a3f6f976491b66f Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@wfp2.com>
Date: Wed, 29 Nov 2017 12:05:02 +0100
Subject: [PATCH] [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>
---
.../frontend/Classes/Hooks/FrontendHooks.php | 18 +++++++++++++++++-
.../Hook/TypoScriptFrontendControllerHook.php | 18 +++++++++++++++++-
2 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/typo3/sysext/frontend/Classes/Hooks/FrontendHooks.php b/typo3/sysext/frontend/Classes/Hooks/FrontendHooks.php
index 3ec9f3888126..566939826111 100644
--- a/typo3/sysext/frontend/Classes/Hooks/FrontendHooks.php
+++ b/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;
}
diff --git a/typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php b/typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php
index 042eb2d0521d..a60b7435001d 100644
--- a/typo3/sysext/workspaces/Classes/Hook/TypoScriptFrontendControllerHook.php
+++ b/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;
--
GitLab