golem
/
MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Watchstar is accessible to non-js users 

Bug: T196893
Change-Id: I5dbd164ba68e6c74e80f8bcf90819a526cda5a5e
This commit is contained in:
jdlrobson 2018-10-10 14:19:55 -07:00
parent 1c034f1d73
commit aa6a2dda4c
5 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
includes/skins/SkinMinerva.php
View File

@ -1165,13 +1165,20 @@ class SkinMinerva extends SkinTemplate {
* @return array A map compatible with BaseTemplate#makeListItem
*/
protected function createWatchPageAction( $actions ) {
$title = $this->getTitle();
$user = $this->getUser();
$ctaUrl = $this->getLoginUrl( [ 'returnto' => $title ] );
if ( $title && $user->isWatched( $title ) ) {
$icon = 'watched';
} else {
$icon = 'watch';
}
$baseResult = [
'id' => 'ca-watch',
// Use blank icon to reserve space for watchstar icon once JS loads
'class' => MinervaUI::iconClass( '', 'element', 'watch-this-article' ),
'class' => MinervaUI::iconClass( $icon, 'element', 'watch-this-article' ),
'is_js_only' => true
];
$title = $this->getTitle();
if ( isset( $actions['watch'] ) ) {
$result = array_merge( $actions['watch'], $baseResult );
@ -1183,7 +1190,7 @@ class SkinMinerva extends SkinTemplate {
$result = array_merge( $baseResult, [
// FIXME: makeLink (used by makeListItem) when no text is present defaults to use the key
'text' => '',
'href' => $this->getLoginUrl( [ 'returnto' => $title ] ),
'href' => $ctaUrl,
] );
}

18
resources/skins.minerva.base.styles/pageactions.less
View File

@ -94,6 +94,24 @@
}
}
// Watchstar is hidden for anonymous no-js users
// While we could link the icon to the login/signup form, this is not
// a perfect experience and could be confusing.
// In JavaScript this icon will be converted to a watch icon and will point
// to a Call to action to sign up/login and explain why that's a good idea.
// Thus, anonymous users without JS will never see this icon.
// This is a small % of our users, so deemed okay.
.client-nojs {
.watch-this-article {
visibility: hidden;
}
.is-authenticated {
.watch-this-article {
visibility: visible;
}
}
}
// On small devices that don't support Javascript, hide the page actions bar
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
.client-nojs {

1
resources/skins.minerva.icons.images/watch.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="watchstar" fill="#54595d"><path d="M8.91 9H1l6.007 5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8-3.09 8zm.054 5.188L5.312 11h4.818L12 5.747 13.881 11h4.82l-3.653 3.2 1.099 4.956L12 16.516l-4.136 2.627 1.1-4.955z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

1
resources/skins.minerva.icons.images/watched.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#00af89" d="M8.91 9H1l6.007 5.86L5 23l7-4.319L19 23l-1.995-8.14L23 9h-7.909l-3.09-8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

2
skin.json
View File

@ -228,6 +228,8 @@
"selector": ".mw-ui-icon-minerva-{name}:before",
"useDataURI": false,
"images": {
"watch": "resources/skins.minerva.icons.images/watch.svg",
"watched": "resources/skins.minerva.icons.images/watched.svg",
"warning": "resources/skins.minerva.icons.images/warning.svg",
"mainmenu": "resources/skins.minerva.icons.images/hamburger.svg",
"edit": "resources/skins.minerva.icons.images/editLocked.svg",