diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 24ff769..a82cf3b 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -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,
] );
}
diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less
index cf68ac1..c85caef 100644
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@@ -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 {
diff --git a/resources/skins.minerva.icons.images/watch.svg b/resources/skins.minerva.icons.images/watch.svg
new file mode 100644
index 0000000..9a4a99d
--- /dev/null
+++ b/resources/skins.minerva.icons.images/watch.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/resources/skins.minerva.icons.images/watched.svg b/resources/skins.minerva.icons.images/watched.svg
new file mode 100644
index 0000000..958f1e5
--- /dev/null
+++ b/resources/skins.minerva.icons.images/watched.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/skin.json b/skin.json
index 89744c1..fb2fbbd 100644
--- a/skin.json
+++ b/skin.json
@@ -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",