U4-6007 - Add a close button to the preview window

Created by Niels Hartvig 12 Dec 2014, 10:47:30 Updated by Stephan 19 Jun 2015, 14:04:55

Relates to: U4-3842

Currently the only way to close the preview is to close the window/tab. We should add a "Close Preview" button in the left panel.

Credit: https://twitter.com/dannykpowell/status/543347220909916160

Comments

Chriztian Steinmeier 20 Jan 2015, 20:52:55

Bonus info: When you close the preview window and then subsequently view the page in the actual frontend of the site (e.g. via "Properties" tab, "Link to document"), the page is still in Preview Mode (or at least the Preview Badge is showing) - I don't know if this could actually cause a problem where an Editor wouldn't see the real content?


Shannon Deminick 17 Mar 2015, 08:38:18

The preview badge is how you close the preview. However... the preview badge is only shown on templates that inherit from UmbracoViewPage - which is all templates by default

Articulate and other custom templates need to be fixed manually but there's an extension method for that to render the preview badge:

@Html.PreviewBadge()


Chriztian Steinmeier 19 Mar 2015, 12:13:42

@Shandem I don't think I follow? When I preview a page, the preview badge is rendered, but it's hidden with CSS (in the "Umbraco Canvas Designer", that is...) - so it's not possible to correctly close the preview.


Niels Hartvig 19 Mar 2015, 12:45:53

It is a flaw - the preview definitely needs a close button.


Josh Olson 19 Mar 2015, 12:50:04

I have also experienced the issue that the CSS that I generate can sometimes hide the preview badge which leads to all sorts of confusion among editors (a relatively thick menu bar at the top of the page with a sufficiently high z-index I believe is at fault)


Shannon Deminick 19 Mar 2015, 21:29:13

@greygreystate & @joshjoshua-olson@qsi.org - Just FYI the preview badge markup is 100% editable, this is configured in umbracoSettings.config see: https://our.umbraco.org/documentation/Using-Umbraco/Config-files/umbracoSettings/#Content under 'previewBadge'

The default looks like: https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs#L191


Josh Olson 20 Mar 2015, 06:24:09

Thanks for the heads up Shannon!


Chriztian Steinmeier 20 Mar 2015, 07:46:19

Just to correct my comment earlier about the badge being hidden with CSS - that was based on quick DOM inspection, but it looks like it's actually being done from JS:

https://github.com/umbraco/Umbraco-CMS/blob/08a2ec6883df9dd969d60ade4768b5a7ce171f1c/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.front.js#L9-L10

Which makes me think that it won't help to change the markup in any way, since it's being purposefully hidden for some reason in the JS before displaying the "Canvas Designer"?

(Or am I missing something?)


Sebastiaan Janssen 20 Mar 2015, 07:53:59

Just so you know, the preview badge appears only when you're not in the new responsive preview. So if you've previewed a page and then go to mysite.com/mypage the badge does still show up.


Shannon Deminick 20 Mar 2015, 08:21:13

Hrm not sure about that, the badge is part of the contents of the iframe that exists inside the preview


Tom Fulton 27 Apr 2015, 07:26:21

Looks like it's being hidden via JS for me as Chriztian suggested. Commenting out [https://github.com/umbraco/Umbraco-CMS/blob/9aa5df43bf4ed90e2ee02dc3bad6803c17676cd3/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js#L491-L493 these lines] causes the button to show again. (using old preview)


Shannon Deminick 27 Apr 2015, 08:07:32

hrm, not familiar with that code, not sure why it's setting the badge style to nothing?


Tom Fulton 27 Apr 2015, 08:19:42

Yeah, I'm not sure either - my guess though is that maybe it's supposed to be disabled for the "new responsive preview" and is getting leaked into the old one too? Just a hunch :)


Chriztian Steinmeier 27 Apr 2015, 08:26:53

The only sense I can make of it is that there was supposed to be a prominent "Close Preview" button in the "devices" sidebar, which didn't make it to the final version...

(Checking the "blame" view of the file on GitHub says it was part of a huge update that renamed a lot of stuff...)


Shannon Deminick 27 Apr 2015, 08:29:53

oh joy, ok i'll investigate :)


Stephan 19 Jun 2015, 14:04:45

Fixed, see 09552d282f5bba1c50863a054376ae6baf85415a e639869bb13f6c9fe0a6d5cbc3b79a8e78b002d4


Priority: Normal

Type: Usability Problem

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions: 7.2.0

Due in version: 7.3.0

Sprint:

Story Points:

Cycle: