Stylish the preview button according to the admin theme CSS [#3162961]

Problem/Motivation

The preview button in Claro theme is not correctly displayed, the link text and icon are partially rendered on top of the image preview as shown in the following screenshot:

Focal point preview button screenshot in Claro theme

Steps to reproduce

Just install the module and enable the image preview.

Proposed resolution

Basic review of the preview button markup by adding the button classes and change some custom CSS rules.

Remaining tasks

Review, commit.

User interface changes

None.

API changes

N/A

Data model changes

N/A

Comment	File	Size	Author
#4	claro_gin_preview_link-3162961-4.patch	317 bytes	johan den hollander
#4	gin.png	100.96 KB	johan den hollander
#4	claro.png	95.97 KB	johan den hollander
#4	seven.png	85.42 KB	johan den hollander
#3	Create_Article___D9_Contrib.jpg	187.15 KB	bleen
#2	focal_point-stylish_preview_button-3162961-2.patch	1.32 KB	manuel.adan
#2	focal_point-preview_in_seven_theme-after.png	95.76 KB	manuel.adan
#2	focal_point-preview_in_seven_theme-before.png	95.79 KB	manuel.adan
#2	focal_point-preview_in_claro_theme-after.png	95.16 KB	manuel.adan
	focal_point-preview_in_claro_theme-before.png	95.11 KB	manuel.adan

Comments

Comment #1

3 August 2020 at 10:47

manuel.adan created an issue. See original summary.

Comment #2

manuel.adan

🌌

commented 3 August 2020 at 10:52

Assigned:	manuel.adan	» Unassigned
Status:	Active	» Needs review

Status	File	Size
new	focal_point-preview_in_claro_theme-after.png	95.16 KB
new	focal_point-preview_in_seven_theme-before.png	95.79 KB
new	focal_point-preview_in_seven_theme-after.png	95.76 KB
new	focal_point-stylish_preview_button-3162961-2.patch	1.32 KB

After the proposed patch:

Focal point preview button screenshot in Claro theme after the proposed patch

Before in the Seven theme:

Focal point preview button screenshot in Seven theme

After the proposed patch in the Seven theme:

Focal point preview button screenshot in Seven theme

Comment #3

bleen commented 28 August 2020 at 19:25

Status:

Needs review

» Needs work

Status	File	Size
new	Create_Article___D9_Contrib.jpg	187.15 KB

I like this, but ...

When its used with a standard image field (not a media field) it makes the button a bit large as compared to the thumbnail
Similarly it can get confused with the "preview" button at the bottom of the node add form

Things to think about:

ways to differentiate the button from the other preview button
I'm open to changing the text to "Image Preview" or something, but if its too long thats not good either

Comment #4

johan den hollander commented 2 July 2021 at 15:27

Status	File	Size
new	seven.png	85.42 KB
new	claro.png	95.97 KB
new	gin.png	100.96 KB
new	claro_gin_preview_link-3162961-4.patch	317 bytes

I came here because the preview link is not placed nicely in Claro (and Gin).
Therefore I made a simple patch, moving the link down a bit, just far enough to look good on Claro and Gin, and still looking ok for seven.

The patch adds just these two lines to .focal-point-preview-link: