From 9640f05582e1c8a216c6b9aef6d4002ca86cd898 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 17 Dec 2019 13:50:35 +0100 Subject: [PATCH 1/3] 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 @@ - - - - - - - - - - - - - 1 - - - - - - - - your@email.here - - - - - Preview modeClick to end]]> - - - - throw - - - ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess - - - assets/img/login.jpg - - - - - - false - - true - - false - - - - - - - - - - - - + + + + + + + + + + + + + 1 + + + + + + + + your@email.here + + + + + + Preview mode + + … + + + Click to end + + + + ]]> + + + + throw + + + ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess + + + assets/img/login.jpg + + + + + + false + + true + + false + + + + + + + + + + + + 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 @@ - - - - - - - - - - - - - 1 - - - - - - - - your@email.here - - - - - Preview modeClick to end]]> - - - throw - - - ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess - - - assets/img/login.jpg - - - - - - false - - true - - false - - - - - - - - - - - - + + + + + + + + + + + + + 1 + + + + + + + + your@email.here + + + + + + Preview mode + + … + + + Click to end + + + + ]]> + + + + throw + + + ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess + + + assets/img/login.jpg + + + + + + false + + true + + false + + + + + + + + + + + + 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 { From 746bcb3571d144e8aeca92b6bd2d0231bf0e7e0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 17 Dec 2019 15:42:20 +0100 Subject: [PATCH 2/3] updated badge animation and position to be center aligned. --- .../config/umbracoSettings.Release.config | 80 ++++++++++++++----- .../config/umbracoSettings.config | 79 +++++++++++++----- 2 files changed, 119 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config index dc7257cda3..7e5c9ec5f1 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config @@ -52,7 +52,6 @@ .umbraco-preview-badge {{ position: fixed; bottom: 0; - right: 0; display: inline-flex; background: rgba(27, 38, 79, 0.9); color: #fff; @@ -63,42 +62,83 @@ 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; + left: 50%; + transform: translate(-50%, 40px); + animation: umbraco-preview-badge--effect 10s 100ms ease both; + + border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{ 0% {{ - transform: translateY(40px); + transform: translate(-50%, 40px); animation-timing-function: ease-out; }} - 15% {{ - transform: translateY(-20px); + 1.5% {{ + transform: translate(-50%, -20px); animation-timing-function: ease-in; }} - 50% {{ - transform: translateY(-8px); + 5.0% {{ + transform: translate(-50%, -8px); animation-timing-function: ease-in; }} - 75% {{ - transform: translateY(-4px); + 7.5% {{ + transform: translate(-50%, -4px); animation-timing-function: ease-in; }} - 92% {{ - transform: translateY(-2px); + 9.2% {{ + transform: translate(-50%, -2px); animation-timing-function: ease-in; }} - 35%, - 65%, - 85% {{ - transform: translateY(0px); + 3.5%, + 6.5%, + 8.5% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 97% {{ - transform: translateY(0px); + 9.7% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 100% {{ - transform: translateY(0px); + 10.0% {{ + transform: translate(-50%, 0px); + }} + + + 60% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 61.5% {{ + transform: translate(-50%, -20px); + animation-timing-function: ease-in; + }} + 65.0% {{ + transform: translate(-50%, -8px); + animation-timing-function: ease-in; + }} + 67.5% {{ + transform: translate(-50%, -4px); + animation-timing-function: ease-in; + }} + 69.2% {{ + transform: translate(-50%, -2px); + animation-timing-function: ease-in; + }} + 63.5%, + 66.5%, + 68.5% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 69.7% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 70.0% {{ + transform: translate(-50%, 0px); + }} + 100.0% {{ + transform: translate(-50%, 0px); }} }} .umbraco-preview-badge__header {{ diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index dc7257cda3..fa998a9856 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -52,7 +52,6 @@ .umbraco-preview-badge {{ position: fixed; bottom: 0; - right: 0; display: inline-flex; background: rgba(27, 38, 79, 0.9); color: #fff; @@ -63,42 +62,82 @@ 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; + left: 50%; + transform: translate(-50%, 40px); + animation: umbraco-preview-badge--effect 10s 100ms ease both; + border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{ 0% {{ - transform: translateY(40px); + transform: translate(-50%, 40px); animation-timing-function: ease-out; }} - 15% {{ - transform: translateY(-20px); + 1.5% {{ + transform: translate(-50%, -20px); animation-timing-function: ease-in; }} - 50% {{ - transform: translateY(-8px); + 5.0% {{ + transform: translate(-50%, -8px); animation-timing-function: ease-in; }} - 75% {{ - transform: translateY(-4px); + 7.5% {{ + transform: translate(-50%, -4px); animation-timing-function: ease-in; }} - 92% {{ - transform: translateY(-2px); + 9.2% {{ + transform: translate(-50%, -2px); animation-timing-function: ease-in; }} - 35%, - 65%, - 85% {{ - transform: translateY(0px); + 3.5%, + 6.5%, + 8.5% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 97% {{ - transform: translateY(0px); + 9.7% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 100% {{ - transform: translateY(0px); + 10.0% {{ + transform: translate(-50%, 0px); + }} + + + 60% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 61.5% {{ + transform: translate(-50%, -20px); + animation-timing-function: ease-in; + }} + 65.0% {{ + transform: translate(-50%, -8px); + animation-timing-function: ease-in; + }} + 67.5% {{ + transform: translate(-50%, -4px); + animation-timing-function: ease-in; + }} + 69.2% {{ + transform: translate(-50%, -2px); + animation-timing-function: ease-in; + }} + 63.5%, + 66.5%, + 68.5% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 69.7% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 70.0% {{ + transform: translate(-50%, 0px); + }} + 100.0% {{ + transform: translate(-50%, 0px); }} }} .umbraco-preview-badge__header {{ From 5939d02e494d6eb8bba22411459f355bef9c17f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 17 Dec 2019 16:19:48 +0100 Subject: [PATCH 3/3] remove line break --- src/Umbraco.Web.UI/config/umbracoSettings.Release.config | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config index 7e5c9ec5f1..fa998a9856 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config @@ -65,7 +65,6 @@ left: 50%; transform: translate(-50%, 40px); animation: umbraco-preview-badge--effect 10s 100ms ease both; - border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{