From 131273bb5c65030d1718676e5f4ef6350db7362c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Kottal?= <snielsen43@gmail.com>
Date: Fri, 25 Oct 2019 11:37:58 +0200
Subject: [PATCH] V8 style preview badge (#6585)

* V8 style preview badge

* updates the preview badges in other places

* Removes umbraco logo

* changes the "click to end" icon

* Set flex-shrink to 0 on the badge end element

* adds width:1em to the svg
---
 .../UmbracoSettings/ContentElement.cs            |   2 +-
 .../UmbracoSettings/ContentElementTests.cs       |   2 +-
 .../UmbracoSettings/umbracoSettings.config       |   4 +---
 .../src/assets/img/preview-mode-badge.png        | Bin 3508 -> 0 bytes
 .../config/umbracoSettings.Release.config        |   7 +++----
 src/Umbraco.Web.UI/config/umbracoSettings.config |   4 +---
 6 files changed, 7 insertions(+), 12 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/assets/img/preview-mode-badge.png

diff --git a/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs b/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs
index 5163dda1f6..77ad7df0dc 100644
--- a/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs
+++ b/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs
@@ -6,7 +6,7 @@ namespace Umbraco.Core.Configuration.UmbracoSettings
 {
     internal class ContentElement : UmbracoConfigurationElement, IContentSection
     {
-        private const string DefaultPreviewBadge = @"<a id=""umbracoPreviewBadge"" style=""z-index:99999; position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{0}/assets/img/preview-mode-badge.png') no-repeat;"" href=""#"" OnClick=""javascript:window.top.location.href = '{0}/preview/end?redir={1}'""><span style=""display:none;"">In Preview Mode - click to end</span></a>";
+        private const string DefaultPreviewBadge = @"<div id=""umbracoPreviewBadge"" class=""umbraco-preview-badge""><span class=""umbraco-preview-badge__header"">Preview mode</span><a href=""{0}/preview/end?redir={1}"" class=""umbraco-preview-badge__end""><svg viewBox=""0 0 100 100"" xmlns=""http://www.w3.org/2000/svg""><title>Click to end</title><path d=""M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z""/><path d=""M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z""/><path d=""M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z""/><path d=""M42.7 2.5h14.6v49.4H42.7z""/></svg></a></div><style type=""text/css"">.umbraco-preview-badge {{position: absolute;top: 1em;right: 1em;display: inline-flex;background: #1b264f;color: #fff;padding: 1em;font-size: 12px;z-index: 99999999;justify-content: center;align-items: center;box-shadow: 0 10px 50px rgba(0, 0, 0, .1), 0 6px 20px rgba(0, 0, 0, .16);line-height: 1;}}.umbraco-preview-badge__header {{font-weight: bold;}}.umbraco-preview-badge__end {{width: 3em;padding: 1em;margin: -1em -1em -1em 2em;display: flex;flex-shrink: 0;align-items: center;align-self: stretch;}}.umbraco-preview-badge__end:hover,.umbraco-preview-badge__end:focus {{background: #f5c1bc;}}.umbraco-preview-badge__end svg {{fill: #fff;width:1em;}}</style>";
 
         [ConfigurationProperty("imaging")]
         internal ContentImagingElement Imaging => (ContentImagingElement) this["imaging"];
diff --git a/src/Umbraco.Tests/Configurations/UmbracoSettings/ContentElementTests.cs b/src/Umbraco.Tests/Configurations/UmbracoSettings/ContentElementTests.cs
index 26e6a1ad8a..0245159c6e 100644
--- a/src/Umbraco.Tests/Configurations/UmbracoSettings/ContentElementTests.cs
+++ b/src/Umbraco.Tests/Configurations/UmbracoSettings/ContentElementTests.cs
@@ -67,7 +67,7 @@ namespace Umbraco.Tests.Configurations.UmbracoSettings
         [Test]
         public void PreviewBadge()
         {
-            Assert.AreEqual(SettingsSection.Content.PreviewBadge, @"<a id=""umbracoPreviewBadge"" style=""z-index:99999; position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{0}/assets/img/preview-mode-badge.png') no-repeat;"" href=""#"" OnClick=""javascript:window.top.location.href = '{0}/preview/end?redir={1}'""><span style=""display:none;"">In Preview Mode - click to end</span></a>");
+            Assert.AreEqual(SettingsSection.Content.PreviewBadge, @"<div id=""umbracoPreviewBadge"" class=""umbraco-preview-badge""><span class=""umbraco-preview-badge__header"">Preview mode</span><a href=""{0}/preview/end?redir={1}"" class=""umbraco-preview-badge__end""><svg viewBox=""0 0 100 100"" xmlns=""http://www.w3.org/2000/svg""><title>Click to end</title><path d=""M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z""/><path d=""M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z""/><path d=""M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z""/><path d=""M42.7 2.5h14.6v49.4H42.7z""/></svg></a></div><style type=""text/css"">.umbraco-preview-badge {{position: absolute;top: 1em;right: 1em;display: inline-flex;background: #1b264f;color: #fff;padding: 1em;font-size: 12px;z-index: 99999999;justify-content: center;align-items: center;box-shadow: 0 10px 50px rgba(0, 0, 0, .1), 0 6px 20px rgba(0, 0, 0, .16);line-height: 1;}}.umbraco-preview-badge__header {{font-weight: bold;}}.umbraco-preview-badge__end {{width: 3em;padding: 1em;margin: -1em -1em -1em 2em;display: flex;flex-shrink: 0;align-items: center;align-self: stretch;}}.umbraco-preview-badge__end:hover,.umbraco-preview-badge__end:focus {{background: #f5c1bc;}}.umbraco-preview-badge__end svg {{fill: #fff;width:1em;}}</style>");
         }
         [Test]
         public void ResolveUrlsFromTextString()
diff --git a/src/Umbraco.Tests/Configurations/UmbracoSettings/umbracoSettings.config b/src/Umbraco.Tests/Configurations/UmbracoSettings/umbracoSettings.config
index ac022a5489..8cbb799d88 100644
--- a/src/Umbraco.Tests/Configurations/UmbracoSettings/umbracoSettings.config
+++ b/src/Umbraco.Tests/Configurations/UmbracoSettings/umbracoSettings.config
@@ -41,9 +41,7 @@
     </notifications>
 
     <PreviewBadge>
-      <![CDATA[
-      <a id="umbracoPreviewBadge" style="z-index:99999; position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{0}/assets/img/preview-mode-badge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/preview/end?redir={1}'"><span style="display:none;">In Preview Mode - click to end</span></a>
-    ]]></PreviewBadge>
+      <![CDATA[<div id="umbracoPreviewBadge" class="umbraco-preview-badge"><span class="umbraco-preview-badge__header">Preview mode</span><a href="{0}/preview/end?redir={1}" class="umbraco-preview-badge__end"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"/><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"/><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"/><path d="M42.7 2.5h14.6v49.4H42.7z"/></svg></a></div><style type="text/css">.umbraco-preview-badge {{position: absolute;top: 1em;right: 1em;display: inline-flex;background: #1b264f;color: #fff;padding: 1em;font-size: 12px;z-index: 99999999;justify-content: center;align-items: center;box-shadow: 0 10px 50px rgba(0, 0, 0, .1), 0 6px 20px rgba(0, 0, 0, .16);line-height: 1;}}.umbraco-preview-badge__header {{font-weight: bold;}}.umbraco-preview-badge__end {{width: 3em;padding: 1em;margin: -1em -1em -1em 2em;display: flex;flex-shrink: 0;align-items: center;align-self: stretch;}}.umbraco-preview-badge__end:hover,.umbraco-preview-badge__end:focus {{background: #f5c1bc;}}.umbraco-preview-badge__end svg {{fill: #fff;width:1em;}}</style>]]></PreviewBadge>
 
     <!-- How Umbraco should handle errors during macro execution. Can be one of the following values:
              - inline - show an inline error within the macro but allow the page to continue rendering. Historial Umbraco behaviour.
diff --git a/src/Umbraco.Web.UI.Client/src/assets/img/preview-mode-badge.png b/src/Umbraco.Web.UI.Client/src/assets/img/preview-mode-badge.png
deleted file mode 100644
index af6a9789e6f7a2bbd10c35721d5285da1ec5312a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3508
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
AAOHXW

diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
index f647e1ae1e..00b556fd34 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
@@ -38,10 +38,9 @@
 
     <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
     <PreviewBadge>
-      <![CDATA[
-      <a id="umbracoPreviewBadge" style="z-index:99999; position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{0}/assets/img/preview-mode-badge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/preview/end?redir={1}'"><span style="display:none;">In Preview Mode - click to end</span></a>
-    ]]></PreviewBadge>
-
+      <![CDATA[<div id="umbracoPreviewBadge" class="umbraco-preview-badge"><span class="umbraco-preview-badge__header">Preview mode</span><a href="{0}/preview/end?redir={1}" class="umbraco-preview-badge__end"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"/><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"/><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"/><path d="M42.7 2.5h14.6v49.4H42.7z"/></svg></a></div><style type="text/css">.umbraco-preview-badge {{position: absolute;top: 1em;right: 1em;display: inline-flex;background: #1b264f;color: #fff;padding: 1em;font-size: 12px;z-index: 99999999;justify-content: center;align-items: center;box-shadow: 0 10px 50px rgba(0, 0, 0, .1), 0 6px 20px rgba(0, 0, 0, .16);line-height: 1;}}.umbraco-preview-badge__header {{font-weight: bold;}}.umbraco-preview-badge__end {{width: 3em;padding: 1em;margin: -1em -1em -1em 2em;display: flex;flex-shrink: 0;align-items: center;align-self: stretch;}}.umbraco-preview-badge__end:hover,.umbraco-preview-badge__end:focus {{background: #f5c1bc;}}.umbraco-preview-badge__end svg {{fill: #fff;width:1em;}}</style>]]>
+    </PreviewBadge>
+ 
     <!-- How Umbraco should handle errors during macro execution. Can be one of the following values:
          - inline - show an inline error within the macro but allow the page to continue rendering. Historial Umbraco behaviour.
          - silent - Silently suppress the error and do not render the offending macro.
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config
index f647e1ae1e..a7f6e1e0f1 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.config
@@ -38,9 +38,7 @@
 
     <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
     <PreviewBadge>
-      <![CDATA[
-      <a id="umbracoPreviewBadge" style="z-index:99999; position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{0}/assets/img/preview-mode-badge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/preview/end?redir={1}'"><span style="display:none;">In Preview Mode - click to end</span></a>
-    ]]></PreviewBadge>
+      <![CDATA[<div id="umbracoPreviewBadge" class="umbraco-preview-badge"><span class="umbraco-preview-badge__header">Preview mode</span><a href="{0}/preview/end?redir={1}" class="umbraco-preview-badge__end"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"/><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"/><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"/><path d="M42.7 2.5h14.6v49.4H42.7z"/></svg></a></div><style type="text/css">.umbraco-preview-badge {{position: absolute;top: 1em;right: 1em;display: inline-flex;background: #1b264f;color: #fff;padding: 1em;font-size: 12px;z-index: 99999999;justify-content: center;align-items: center;box-shadow: 0 10px 50px rgba(0, 0, 0, .1), 0 6px 20px rgba(0, 0, 0, .16);line-height: 1;}}.umbraco-preview-badge__header {{font-weight: bold;}}.umbraco-preview-badge__end {{width: 3em;padding: 1em;margin: -1em -1em -1em 2em;display: flex;flex-shrink: 0;align-items: center;align-self: stretch;}}.umbraco-preview-badge__end:hover,.umbraco-preview-badge__end:focus {{background: #f5c1bc;}}.umbraco-preview-badge__end svg {{fill: #fff;width:1em;}}</style>]]></PreviewBadge>
 
     <!-- How Umbraco should handle errors during macro execution. Can be one of the following values:
          - inline - show an inline error within the macro but allow the page to continue rendering. Historial Umbraco behaviour.