Make approval UI nice

[JeroenDeDauw]

Follow up to

• https://github.com/ProfessionalWiki/PageApprovals/issues/2

NotNice.png:

Related

• https://github.com/ProfessionalWiki/PageApprovals/issues/46

[JeroenDeDauw]

Perhaps we can do something similar to https://chat.professional.wiki/pro-wiki/channels/bayer-tech/5ajgr4tfhby35mzihaqnd9mkar?

Perhaps we can move it to the right of the title

Or failing that, at least make the UI take up only one line, by putting the approval button inside of the banner, or perhaps next to it. The button should also not be the most prominent element on the page, as that'd be very distracting during normal wiki usage by people who are approvers.

[JeroenDeDauw]

Would be nice to avoid any layout shift on page load, like we have with the current UI. It's nasty since it moves all the page content.

https://github.com/ProfessionalWiki/PageApprovals/assets/146040/9a57eb62-330f-4571-9d5a-8bd1f558a4c6

Perhaps we can inline some CSS, so we don't wait on the resource loader module loading.

[malberts]

Perhaps we can inline some CSS, so we don't wait on the resource loader module loading.

IIRC the trick here is to define two separate ResourceLoaderModules and load the CSS and JS separately:

$this->out->addModuleStyles( 'ext.pageApprovals.styles' );
$this->out->addModules( 'ext.pageApprovals' );

The first method loads the CSS with a <link> tag, whereas the second one loads the CSS/JS via the JS ResourceLoader, which is slower.

[waximabbax]

WIP

Trying my best to use minimal SVG without libraries or icon images.

[JeroenDeDauw]

Looks nice. Main concern I have is that the reject button is way too attention grabbing. It's the most visible thing on the page. The way it is done in the video I linked before (https://chat.professional.wiki/pro-wiki/channels/bayer-tech/5ajgr4tfhby35mzihaqnd9mkar) is to not have this button on the page at all. There the user has to click on the current status to change it.