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
|
* @return array A map compatible with BaseTemplate#makeListItem
|
||||||
*/
|
*/
|
||||||
protected function createWatchPageAction( $actions ) {
|
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 = [
|
$baseResult = [
|
||||||
'id' => 'ca-watch',
|
'id' => 'ca-watch',
|
||||||
// Use blank icon to reserve space for watchstar icon once JS loads
|
// 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
|
'is_js_only' => true
|
||||||
];
|
];
|
||||||
$title = $this->getTitle();
|
|
||||||
|
|
||||||
if ( isset( $actions['watch'] ) ) {
|
if ( isset( $actions['watch'] ) ) {
|
||||||
$result = array_merge( $actions['watch'], $baseResult );
|
$result = array_merge( $actions['watch'], $baseResult );
|
||||||
|
@ -1183,7 +1190,7 @@ class SkinMinerva extends SkinTemplate {
|
||||||
$result = array_merge( $baseResult, [
|
$result = array_merge( $baseResult, [
|
||||||
// FIXME: makeLink (used by makeListItem) when no text is present defaults to use the key
|
// FIXME: makeLink (used by makeListItem) when no text is present defaults to use the key
|
||||||
'text' => '',
|
'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
|
// On small devices that don't support Javascript, hide the page actions bar
|
||||||
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
|
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
|
||||||
.client-nojs {
|
.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",
|
"selector": ".mw-ui-icon-minerva-{name}:before",
|
||||||
"useDataURI": false,
|
"useDataURI": false,
|
||||||
"images": {
|
"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",
|
"warning": "resources/skins.minerva.icons.images/warning.svg",
|
||||||
"mainmenu": "resources/skins.minerva.icons.images/hamburger.svg",
|
"mainmenu": "resources/skins.minerva.icons.images/hamburger.svg",
|
||||||
"edit": "resources/skins.minerva.icons.images/editLocked.svg",
|
"edit": "resources/skins.minerva.icons.images/editLocked.svg",
|
||||||
|
|
Loading…
Reference in New Issue