From 9640f05582e1c8a216c6b9aef6d4002ca86cd898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 17 Dec 2019 13:50:35 +0100
Subject: [PATCH] updated previewBadge with option to open in PreviewMode in
 BackOffice and with new styling

---
 .../config/umbracoSettings.Release.config     | 319 +++++++++++-------
 .../config/umbracoSettings.config             | 318 +++++++++++------
 src/Umbraco.Web/HtmlHelperRenderExtensions.cs |   3 +-
 .../Mvc/UmbracoViewPageOfTModel.cs            |   3 +-
 4 files changed, 416 insertions(+), 227 deletions(-)

diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
index 00b556fd34..dc7257cda3 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
@@ -1,113 +1,206 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<settings>
-
-  <!--
-    umbracoSettings.config configuration documentation can be found here:
-    https://our.umbraco.com/documentation/using-umbraco/config-files/umbracoSettings/
-    Many of the optional settings are not explicitly listed here
-    but can be found in the online documentation.
-    -->
-
-    <backOffice>
-        <tours enable="true"></tours>
-    </backOffice>
-
-  <content>
-
-    <errors>
-      <error404>1</error404>
-      <!--
-        The value for error pages can be:
-        * A content item's GUID ID      (example: 26C1D84F-C900-4D53-B167-E25CC489DAC8)
-        * An XPath statement            (example: //errorPages[@nodeName='My cool error']
-        * A content item's integer ID   (example: 1234)
-      -->
-      <!--
-        <error404>
-            <errorPage culture="default">26C1D84F-C900-4D53-B167-E25CC489DAC8</errorPage>
-            <errorPage culture="en-US">D820E120-6865-4D88-BFFE-48801A6AC375</errorPage>
-        </error404>
-       -->
-    </errors>
-
-    <notifications>
-      <!-- the email that should be used as from mail when umbraco sends a notification -->
-      <!-- you can add a display name to the email like this: <email>Your display name here &lt;your@email.here&gt;</email> -->
-      <email>your@email.here</email>
-    </notifications>
-
-    <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
-    <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.
-         - throw  - Throw an exception which can be caught by the global error handler defined in Application_OnError. If no such
-                    error handler is defined then you'll see the Yellow Screen Of Death (YSOD) error page.
-         Note the error can also be handled by the umbraco.macro.Error event, where you can log/alarm with your own code and change the behaviour per event. -->
-    <MacroErrors>throw</MacroErrors>
-
-    <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
-    <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
-
-    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
-    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
-
-  </content>
-
-  <security>
-    <!-- set to true to auto update login interval (and there by disabling the lock screen -->
-    <keepUserLoggedIn>false</keepUserLoggedIn>
-    <!-- by default this is true and if not specified in config will be true. set to false to always show a separate username field in the back office user editor -->
-    <usernameIsEmail>true</usernameIsEmail>
-    <!-- change in 4.8: Disabled users are now showed dimmed and last in the tree. If you prefer not to display them set this to true -->
-    <hideDisabledUsersInBackoffice>false</hideDisabledUsersInBackoffice>
-  </security>
-
-  <requestHandler>
-    <!-- this ensures that all url segments are turned to ASCII as much as we can -->
-    <urlReplacing toAscii="try" />
-  </requestHandler>
-
-  <!--
-    web.routing
-      @trySkipIisCustomErrors
-        Tries to skip IIS custom errors.
-        Starting with IIS 7.5, this must be set to true for Umbraco 404 pages to show. Else, IIS will take
-        over and render its built-in error page. See MS doc for HttpResponseBase.TrySkipIisCustomErrors.
-        The default value is false, for backward compatibility reasons, which means that IIS _will_ take
-        over, and _prevent_ Umbraco 404 pages to show.
-      @internalRedirectPreservesTemplate
-        By default as soon as we're not displaying the initial document, we reset the template set by the
-        finder or by the alt. template. Set this option to true to preserve the template set by the finder
-        or by the alt. template, in case of an internal redirect.
-        (false by default, and in fact should remain false unless you know what you're doing)
-      @disableAlternativeTemplates
-        By default you can add a altTemplate querystring or append a template name to the current URL which
-        will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
-        "About Us" page with a template with the alias Home. Setting this setting to true stops that behavior
-      @validateAlternativeTemplates
-        By default you can add a altTemplate querystring or append a template name to the current URL which
-        will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
-        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
-        only templates that have been permitted on the document type will be allowed
-      @disableFindContentByIdPath
-        By default you can call any content Id in the url and show the content with that id, for example:
-        http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting
-        this setting to true stops that behavior
-      @umbracoApplicationUrl
-        The url of the Umbraco application. By default, Umbraco will figure it out from the first request.
-        Configure it here if you need anything specific. Needs to be a complete url with scheme and umbraco
-        path, eg http://mysite.com/umbraco. NOT just "mysite.com" or "mysite.com/umbraco" or "http://mysite.com".
-  -->
-  <web.routing
-    trySkipIisCustomErrors="true"
-    internalRedirectPreservesTemplate="false" disableAlternativeTemplates="false" validateAlternativeTemplates="false" disableFindContentByIdPath="false"
-    umbracoApplicationUrl="">
-  </web.routing>
-
-</settings>
+<?xml version="1.0" encoding="utf-8" ?>
+<settings>
+
+  <!--
+    umbracoSettings.config configuration documentation can be found here:
+    https://our.umbraco.com/documentation/using-umbraco/config-files/umbracoSettings/
+    Many of the optional settings are not explicitly listed here
+    but can be found in the online documentation.
+    -->
+
+    <backOffice>
+        <tours enable="true"></tours>
+    </backOffice>
+
+  <content>
+
+    <errors>
+      <error404>1</error404>
+      <!--
+        The value for error pages can be:
+        * A content item's GUID ID      (example: 26C1D84F-C900-4D53-B167-E25CC489DAC8)
+        * An XPath statement            (example: //errorPages[@nodeName='My cool error']
+        * A content item's integer ID   (example: 1234)
+      -->
+      <!--
+        <error404>
+            <errorPage culture="default">26C1D84F-C900-4D53-B167-E25CC489DAC8</errorPage>
+            <errorPage culture="en-US">D820E120-6865-4D88-BFFE-48801A6AC375</errorPage>
+        </error404>
+       -->
+    </errors>
+
+    <notifications>
+      <!-- the email that should be used as from mail when umbraco sends a notification -->
+      <!-- you can add a display name to the email like this: <email>Your display name here &lt;your@email.here&gt;</email> -->
+      <email>your@email.here</email>
+    </notifications>
+
+    <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
+    <PreviewBadge>
+        <![CDATA[
+            <div id="umbracoPreviewBadge" class="umbraco-preview-badge">
+                <span class="umbraco-preview-badge__header">Preview mode</span>
+                <a href="{0}/preview/?id={2}" class="umbraco-preview-badge__a open">
+                    …
+                </a>
+                <a href="{0}/preview/end?redir={1}" class="umbraco-preview-badge__a end">
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path fill="#fff" 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 fill="#fff" 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 fill="#fff" 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 fill="#fff" d="M42.7 2.5h14.6v49.4H42.7z"/></svg>
+                </a>
+            </div>
+            <style type="text/css">
+                .umbraco-preview-badge {{
+                    position: fixed;
+                    bottom: 0;
+                    right: 0;
+                    display: inline-flex;
+                    background: rgba(27, 38, 79, 0.9);
+                    color: #fff;
+                    font-size: 12px;
+                    z-index: 99999999;
+                    justify-content: center;
+                    align-items: center;
+                    box-shadow: 0 5px 10px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2);
+                    line-height: 1;
+                    pointer-events:none;
+                    transform: translateY(40px);
+                    animation: umbraco-preview-badge--effect 1s 100ms ease both;
+                }}
+                @keyframes umbraco-preview-badge--effect {{
+                    0% {{
+                        transform: translateY(40px);
+                        animation-timing-function: ease-out;
+                    }}
+                    15% {{
+                        transform: translateY(-20px);
+                        animation-timing-function: ease-in;
+                    }}
+                    50% {{
+                        transform: translateY(-8px);
+                        animation-timing-function: ease-in;
+                    }}
+                    75% {{
+                        transform: translateY(-4px);
+                        animation-timing-function: ease-in;
+                    }}
+                    92% {{
+                        transform: translateY(-2px);
+                        animation-timing-function: ease-in;
+                    }}
+                    35%,
+                    65%,
+                    85% {{
+                        transform: translateY(0px);
+                        animation-timing-function: ease-out;
+                    }}
+                    97% {{
+                        transform: translateY(0px);
+                        animation-timing-function: ease-out;
+                    }}
+                    100% {{
+                        transform: translateY(0px);
+                    }}
+                }}
+                .umbraco-preview-badge__header {{
+                    padding: 1em;
+                    font-weight: bold;
+                    pointer-events:none;
+                }}
+                .umbraco-preview-badge__a {{
+                    width: 3em;
+                    padding: 1em;
+                    display: flex;
+                    flex-shrink: 0;
+                    align-items: center;
+                    align-self: stretch;
+                    color:white;
+                    text-decoration:none;
+                    font-weight: bold;
+                    border-left: 1px solid hsla(0,0%,100%,.25);
+                    pointer-events:all;
+                }}
+                .umbraco-preview-badge__a svg {{
+                    width: 1em;
+                    height:1em;
+                }}
+                .umbraco-preview-badge__a:hover {{
+                    background: #202d5e;
+                }}
+                .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.
+         - throw  - Throw an exception which can be caught by the global error handler defined in Application_OnError. If no such
+                    error handler is defined then you'll see the Yellow Screen Of Death (YSOD) error page.
+         Note the error can also be handled by the umbraco.macro.Error event, where you can log/alarm with your own code and change the behaviour per event. -->
+    <MacroErrors>throw</MacroErrors>
+
+    <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
+    <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
+
+    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
+    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
+
+  </content>
+
+  <security>
+    <!-- set to true to auto update login interval (and there by disabling the lock screen -->
+    <keepUserLoggedIn>false</keepUserLoggedIn>
+    <!-- by default this is true and if not specified in config will be true. set to false to always show a separate username field in the back office user editor -->
+    <usernameIsEmail>true</usernameIsEmail>
+    <!-- change in 4.8: Disabled users are now showed dimmed and last in the tree. If you prefer not to display them set this to true -->
+    <hideDisabledUsersInBackoffice>false</hideDisabledUsersInBackoffice>
+  </security>
+
+  <requestHandler>
+    <!-- this ensures that all url segments are turned to ASCII as much as we can -->
+    <urlReplacing toAscii="try" />
+  </requestHandler>
+
+  <!--
+    web.routing
+      @trySkipIisCustomErrors
+        Tries to skip IIS custom errors.
+        Starting with IIS 7.5, this must be set to true for Umbraco 404 pages to show. Else, IIS will take
+        over and render its built-in error page. See MS doc for HttpResponseBase.TrySkipIisCustomErrors.
+        The default value is false, for backward compatibility reasons, which means that IIS _will_ take
+        over, and _prevent_ Umbraco 404 pages to show.
+      @internalRedirectPreservesTemplate
+        By default as soon as we're not displaying the initial document, we reset the template set by the
+        finder or by the alt. template. Set this option to true to preserve the template set by the finder
+        or by the alt. template, in case of an internal redirect.
+        (false by default, and in fact should remain false unless you know what you're doing)
+      @disableAlternativeTemplates
+        By default you can add a altTemplate querystring or append a template name to the current URL which
+        will make Umbraco render the content on the current page with the template you requested, for example:
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true stops that behavior
+      @validateAlternativeTemplates
+        By default you can add a altTemplate querystring or append a template name to the current URL which
+        will make Umbraco render the content on the current page with the template you requested, for example:
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
+        only templates that have been permitted on the document type will be allowed
+      @disableFindContentByIdPath
+        By default you can call any content Id in the url and show the content with that id, for example:
+        http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting
+        this setting to true stops that behavior
+      @umbracoApplicationUrl
+        The url of the Umbraco application. By default, Umbraco will figure it out from the first request.
+        Configure it here if you need anything specific. Needs to be a complete url with scheme and umbraco
+        path, eg http://mysite.com/umbraco. NOT just "mysite.com" or "mysite.com/umbraco" or "http://mysite.com".
+  -->
+  <web.routing
+    trySkipIisCustomErrors="true"
+    internalRedirectPreservesTemplate="false" disableAlternativeTemplates="false" validateAlternativeTemplates="false" disableFindContentByIdPath="false"
+    umbracoApplicationUrl="">
+  </web.routing>
+
+</settings>
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config
index a7f6e1e0f1..dc7257cda3 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.config
@@ -1,112 +1,206 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<settings>
-
-  <!--
-    umbracoSettings.config configuration documentation can be found here:
-    https://our.umbraco.com/documentation/using-umbraco/config-files/umbracoSettings/
-    Many of the optional settings are not explicitly listed here
-    but can be found in the online documentation.
-    -->
-
-    <backOffice>
-        <tours enable="true"></tours>
-    </backOffice>
-
-  <content>
-
-    <errors>
-      <error404>1</error404>
-      <!--
-        The value for error pages can be:
-        * A content item's GUID ID      (example: 26C1D84F-C900-4D53-B167-E25CC489DAC8)
-        * An XPath statement            (example: //errorPages[@nodeName='My cool error']
-        * A content item's integer ID   (example: 1234)
-      -->
-      <!--
-        <error404>
-            <errorPage culture="default">26C1D84F-C900-4D53-B167-E25CC489DAC8</errorPage>
-            <errorPage culture="en-US">D820E120-6865-4D88-BFFE-48801A6AC375</errorPage>
-        </error404>
-       -->
-    </errors>
-
-    <notifications>
-      <!-- the email that should be used as from mail when umbraco sends a notification -->
-      <!-- you can add a display name to the email like this: <email>Your display name here &lt;your@email.here&gt;</email> -->
-      <email>your@email.here</email>
-    </notifications>
-
-    <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
-    <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.
-         - throw  - Throw an exception which can be caught by the global error handler defined in Application_OnError. If no such
-                    error handler is defined then you'll see the Yellow Screen Of Death (YSOD) error page.
-         Note the error can also be handled by the umbraco.macro.Error event, where you can log/alarm with your own code and change the behaviour per event. -->
-    <MacroErrors>throw</MacroErrors>
-
-    <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
-    <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
-
-    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
-    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
-
-  </content>
-
-  <security>
-    <!-- set to true to auto update login interval (and there by disabling the lock screen -->
-    <keepUserLoggedIn>false</keepUserLoggedIn>
-    <!-- by default this is true and if not specified in config will be true. set to false to always show a separate username field in the back office user editor -->
-    <usernameIsEmail>true</usernameIsEmail>
-    <!-- change in 4.8: Disabled users are now showed dimmed and last in the tree. If you prefer not to display them set this to true -->
-    <hideDisabledUsersInBackoffice>false</hideDisabledUsersInBackoffice>
-  </security>
-
-  <requestHandler>
-    <!-- this ensures that all url segments are turned to ASCII as much as we can -->
-    <urlReplacing toAscii="try" />
-  </requestHandler>
-
-  <!--
-    web.routing
-      @trySkipIisCustomErrors
-        Tries to skip IIS custom errors.
-        Starting with IIS 7.5, this must be set to true for Umbraco 404 pages to show. Else, IIS will take
-        over and render its built-in error page. See MS doc for HttpResponseBase.TrySkipIisCustomErrors.
-        The default value is false, for backward compatibility reasons, which means that IIS _will_ take
-        over, and _prevent_ Umbraco 404 pages to show.
-      @internalRedirectPreservesTemplate
-        By default as soon as we're not displaying the initial document, we reset the template set by the
-        finder or by the alt. template. Set this option to true to preserve the template set by the finder
-        or by the alt. template, in case of an internal redirect.
-        (false by default, and in fact should remain false unless you know what you're doing)
-      @disableAlternativeTemplates
-        By default you can add a altTemplate querystring or append a template name to the current URL which
-        will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
-        "About Us" page with a template with the alias Home. Setting this setting to true stops that behavior
-      @validateAlternativeTemplates
-        By default you can add a altTemplate querystring or append a template name to the current URL which
-        will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
-        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
-        only templates that have been permitted on the document type will be allowed
-      @disableFindContentByIdPath
-        By default you can call any content Id in the url and show the content with that id, for example:
-        http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting
-        this setting to true stops that behavior
-      @umbracoApplicationUrl
-        The url of the Umbraco application. By default, Umbraco will figure it out from the first request.
-        Configure it here if you need anything specific. Needs to be a complete url with scheme and umbraco
-        path, eg http://mysite.com/umbraco. NOT just "mysite.com" or "mysite.com/umbraco" or "http://mysite.com".
-  -->
-  <web.routing
-    trySkipIisCustomErrors="true"
-    internalRedirectPreservesTemplate="false" disableAlternativeTemplates="false" validateAlternativeTemplates="false" disableFindContentByIdPath="false"
-    umbracoApplicationUrl="">
-  </web.routing>
-
-</settings>
+<?xml version="1.0" encoding="utf-8" ?>
+<settings>
+
+  <!--
+    umbracoSettings.config configuration documentation can be found here:
+    https://our.umbraco.com/documentation/using-umbraco/config-files/umbracoSettings/
+    Many of the optional settings are not explicitly listed here
+    but can be found in the online documentation.
+    -->
+
+    <backOffice>
+        <tours enable="true"></tours>
+    </backOffice>
+
+  <content>
+
+    <errors>
+      <error404>1</error404>
+      <!--
+        The value for error pages can be:
+        * A content item's GUID ID      (example: 26C1D84F-C900-4D53-B167-E25CC489DAC8)
+        * An XPath statement            (example: //errorPages[@nodeName='My cool error']
+        * A content item's integer ID   (example: 1234)
+      -->
+      <!--
+        <error404>
+            <errorPage culture="default">26C1D84F-C900-4D53-B167-E25CC489DAC8</errorPage>
+            <errorPage culture="en-US">D820E120-6865-4D88-BFFE-48801A6AC375</errorPage>
+        </error404>
+       -->
+    </errors>
+
+    <notifications>
+      <!-- the email that should be used as from mail when umbraco sends a notification -->
+      <!-- you can add a display name to the email like this: <email>Your display name here &lt;your@email.here&gt;</email> -->
+      <email>your@email.here</email>
+    </notifications>
+
+    <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
+    <PreviewBadge>
+        <![CDATA[
+            <div id="umbracoPreviewBadge" class="umbraco-preview-badge">
+                <span class="umbraco-preview-badge__header">Preview mode</span>
+                <a href="{0}/preview/?id={2}" class="umbraco-preview-badge__a open">
+                    …
+                </a>
+                <a href="{0}/preview/end?redir={1}" class="umbraco-preview-badge__a end">
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path fill="#fff" 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 fill="#fff" 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 fill="#fff" 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 fill="#fff" d="M42.7 2.5h14.6v49.4H42.7z"/></svg>
+                </a>
+            </div>
+            <style type="text/css">
+                .umbraco-preview-badge {{
+                    position: fixed;
+                    bottom: 0;
+                    right: 0;
+                    display: inline-flex;
+                    background: rgba(27, 38, 79, 0.9);
+                    color: #fff;
+                    font-size: 12px;
+                    z-index: 99999999;
+                    justify-content: center;
+                    align-items: center;
+                    box-shadow: 0 5px 10px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2);
+                    line-height: 1;
+                    pointer-events:none;
+                    transform: translateY(40px);
+                    animation: umbraco-preview-badge--effect 1s 100ms ease both;
+                }}
+                @keyframes umbraco-preview-badge--effect {{
+                    0% {{
+                        transform: translateY(40px);
+                        animation-timing-function: ease-out;
+                    }}
+                    15% {{
+                        transform: translateY(-20px);
+                        animation-timing-function: ease-in;
+                    }}
+                    50% {{
+                        transform: translateY(-8px);
+                        animation-timing-function: ease-in;
+                    }}
+                    75% {{
+                        transform: translateY(-4px);
+                        animation-timing-function: ease-in;
+                    }}
+                    92% {{
+                        transform: translateY(-2px);
+                        animation-timing-function: ease-in;
+                    }}
+                    35%,
+                    65%,
+                    85% {{
+                        transform: translateY(0px);
+                        animation-timing-function: ease-out;
+                    }}
+                    97% {{
+                        transform: translateY(0px);
+                        animation-timing-function: ease-out;
+                    }}
+                    100% {{
+                        transform: translateY(0px);
+                    }}
+                }}
+                .umbraco-preview-badge__header {{
+                    padding: 1em;
+                    font-weight: bold;
+                    pointer-events:none;
+                }}
+                .umbraco-preview-badge__a {{
+                    width: 3em;
+                    padding: 1em;
+                    display: flex;
+                    flex-shrink: 0;
+                    align-items: center;
+                    align-self: stretch;
+                    color:white;
+                    text-decoration:none;
+                    font-weight: bold;
+                    border-left: 1px solid hsla(0,0%,100%,.25);
+                    pointer-events:all;
+                }}
+                .umbraco-preview-badge__a svg {{
+                    width: 1em;
+                    height:1em;
+                }}
+                .umbraco-preview-badge__a:hover {{
+                    background: #202d5e;
+                }}
+                .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.
+         - throw  - Throw an exception which can be caught by the global error handler defined in Application_OnError. If no such
+                    error handler is defined then you'll see the Yellow Screen Of Death (YSOD) error page.
+         Note the error can also be handled by the umbraco.macro.Error event, where you can log/alarm with your own code and change the behaviour per event. -->
+    <MacroErrors>throw</MacroErrors>
+
+    <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
+    <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
+
+    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
+    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
+
+  </content>
+
+  <security>
+    <!-- set to true to auto update login interval (and there by disabling the lock screen -->
+    <keepUserLoggedIn>false</keepUserLoggedIn>
+    <!-- by default this is true and if not specified in config will be true. set to false to always show a separate username field in the back office user editor -->
+    <usernameIsEmail>true</usernameIsEmail>
+    <!-- change in 4.8: Disabled users are now showed dimmed and last in the tree. If you prefer not to display them set this to true -->
+    <hideDisabledUsersInBackoffice>false</hideDisabledUsersInBackoffice>
+  </security>
+
+  <requestHandler>
+    <!-- this ensures that all url segments are turned to ASCII as much as we can -->
+    <urlReplacing toAscii="try" />
+  </requestHandler>
+
+  <!--
+    web.routing
+      @trySkipIisCustomErrors
+        Tries to skip IIS custom errors.
+        Starting with IIS 7.5, this must be set to true for Umbraco 404 pages to show. Else, IIS will take
+        over and render its built-in error page. See MS doc for HttpResponseBase.TrySkipIisCustomErrors.
+        The default value is false, for backward compatibility reasons, which means that IIS _will_ take
+        over, and _prevent_ Umbraco 404 pages to show.
+      @internalRedirectPreservesTemplate
+        By default as soon as we're not displaying the initial document, we reset the template set by the
+        finder or by the alt. template. Set this option to true to preserve the template set by the finder
+        or by the alt. template, in case of an internal redirect.
+        (false by default, and in fact should remain false unless you know what you're doing)
+      @disableAlternativeTemplates
+        By default you can add a altTemplate querystring or append a template name to the current URL which
+        will make Umbraco render the content on the current page with the template you requested, for example:
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true stops that behavior
+      @validateAlternativeTemplates
+        By default you can add a altTemplate querystring or append a template name to the current URL which
+        will make Umbraco render the content on the current page with the template you requested, for example:
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
+        only templates that have been permitted on the document type will be allowed
+      @disableFindContentByIdPath
+        By default you can call any content Id in the url and show the content with that id, for example:
+        http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting
+        this setting to true stops that behavior
+      @umbracoApplicationUrl
+        The url of the Umbraco application. By default, Umbraco will figure it out from the first request.
+        Configure it here if you need anything specific. Needs to be a complete url with scheme and umbraco
+        path, eg http://mysite.com/umbraco. NOT just "mysite.com" or "mysite.com/umbraco" or "http://mysite.com".
+  -->
+  <web.routing
+    trySkipIisCustomErrors="true"
+    internalRedirectPreservesTemplate="false" disableAlternativeTemplates="false" validateAlternativeTemplates="false" disableFindContentByIdPath="false"
+    umbracoApplicationUrl="">
+  </web.routing>
+
+</settings>
diff --git a/src/Umbraco.Web/HtmlHelperRenderExtensions.cs b/src/Umbraco.Web/HtmlHelperRenderExtensions.cs
index 0fd591e96b..ebe5e08f89 100644
--- a/src/Umbraco.Web/HtmlHelperRenderExtensions.cs
+++ b/src/Umbraco.Web/HtmlHelperRenderExtensions.cs
@@ -64,7 +64,8 @@ namespace Umbraco.Web
                 var htmlBadge =
                     String.Format(Current.Configs.Settings().Content.PreviewBadge,
                                   IOHelper.ResolveUrl(SystemDirectories.Umbraco),
-                                  Current.UmbracoContext.HttpContext.Server.UrlEncode(Current.UmbracoContext.HttpContext.Request.Path));
+                                  Current.UmbracoContext.HttpContext.Server.UrlEncode(Current.UmbracoContext.HttpContext.Request.Path),
+                                  Current.UmbracoContext.PublishedRequest.PublishedContent.Id);
                 return new MvcHtmlString(htmlBadge);
             }
             return new MvcHtmlString("");
diff --git a/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs b/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs
index 5ac4037fdb..0adb654d45 100644
--- a/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs
+++ b/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs
@@ -215,7 +215,8 @@ namespace Umbraco.Web.Mvc
                             markupToInject =
                                 string.Format(Current.Configs.Settings().Content.PreviewBadge,
                                     IOHelper.ResolveUrl(SystemDirectories.Umbraco),
-                                    Server.UrlEncode(Current.UmbracoContext.HttpContext.Request.Url?.PathAndQuery));
+                                    Server.UrlEncode(Current.UmbracoContext.HttpContext.Request.Url?.PathAndQuery),
+                                    Current.UmbracoContext.PublishedRequest.PublishedContent.Id);
                         }
                         else
                         {