Watchstar is accessible to non-js users
Bug: T196893 Change-Id: I5dbd164ba68e6c74e80f8bcf90819a526cda5a5e
This commit is contained in:
parent
1c034f1d73
commit
aa6a2dda4c
|
@ -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,
|
||||
] );
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 413 B |
|
@ -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>
|
After Width: | Height: | Size: 226 B |
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue