Catrope has uploaded a new change for review.
https://gerrit.wikimedia.org/r/218996
Change subject: Convert watch star from wikiglyph glyphs to OOUI icons
......................................................................
Convert watch star from wikiglyph glyphs to OOUI icons
The filled star's hover color (bright green) is unique; rather than
creating an additional variant in OOUI specifically for it, I put
in a CSS hack using a brightness filter. There is already a task
for reconsidering the watch star design: T97696.
Change-Id: I3a4fcd8c1b2566608f180245ce52fd4777567879
---
M handlebars/compiled/flow_block_topic.handlebars.php
M handlebars/compiled/flow_block_topiclist.handlebars.php
M handlebars/flow_topic_titlebar_watch.partial.handlebars
M modules/engine/components/board/base/flow-board-api-events.js
M modules/styles/board/topic/watchlist.less
5 files changed, 22 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/96/218996/1
diff --git a/handlebars/compiled/flow_block_topic.handlebars.php
b/handlebars/compiled/flow_block_topic.handlebars.php
index 69c0f8b..3def707 100644
--- a/handlebars/compiled/flow_block_topic.handlebars.php
+++ b/handlebars/compiled/flow_block_topic.handlebars.php
@@ -65,11 +65,11 @@
'.$sp.''.LCRun3::p($cx, 'flow_topic_titlebar_summary',
array(array(((isset($in['summary']) && is_array($in)) ? $in['summary'] :
null)),array())).'';},'flow_topic_titlebar_watch' => function ($cx, $in, $sp)
{return ''.$sp.'<div class="flow-topic-watchlist flow-watch-link">
'.$sp.''.LCRun3::p($cx, 'flow_errors', array(array($in),array()), ' ').'
'.$sp.' <a href="'.((LCRun3::ifvar($cx, ((isset($in['isWatched']) &&
is_array($in)) ? $in['isWatched'] : null))) ?
''.htmlentities((string)((isset($in['links']['unwatch-topic']['url']) &&
is_array($in['links']['unwatch-topic'])) ? $in['links']['unwatch-topic']['url']
: null), ENT_QUOTES, 'UTF-8').'' :
''.htmlentities((string)((isset($in['links']['watch-topic']['url']) &&
is_array($in['links']['watch-topic'])) ? $in['links']['watch-topic']['url'] :
null), ENT_QUOTES, 'UTF-8').'').'"
-'.$sp.' class="mw-ui-anchor mw-ui-constructive
'.((!LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'mw-ui-quiet' : '').'
+'.$sp.' class="mw-ui-anchor mw-ui-hovericon mw-ui-constructive
'.((!LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'mw-ui-quiet' : '').'
'.$sp.''.((LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'flow-watch-link-unwatch' :
'flow-watch-link-watch').'"
'.$sp.' data-flow-api-handler="watchItem"
'.$sp.' data-flow-api-target="< .flow-topic-watchlist"
-'.$sp.'
data-flow-api-method="POST">'.htmlentities((string)((isset($in['noop']) &&
is_array($in)) ? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span
class="wikiglyph wikiglyph-star" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-remove'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES,
'UTF-8').''.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span class="wikiglyph
wikiglyph-unstar" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-add'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'</a>
+'.$sp.'
data-flow-api-method="POST">'.htmlentities((string)((isset($in['noop']) &&
is_array($in)) ? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span
class="flow-unwatch mw-ui-icon mw-ui-icon-before
mw-ui-icon-unStar-constructive" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-remove'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES,
'UTF-8').''.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span class="flow-watch mw-ui-icon
mw-ui-icon-before mw-ui-icon-star mw-ui-icon-star-constructive-hover"
title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-add'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'</a>
'.$sp.'</div>
';},'flow_moderation_actions_list' => function ($cx, $in, $sp) {return
''.$sp.'<section>'.LCRun3::hbch($cx, 'ifCond',
array(array(((isset($in['moderationType']) && is_array($in)) ?
$in['moderationType'] : null),'===','topic'),array()), $in, false,
function($cx, $in)use($sp){return ''.((LCRun3::ifvar($cx,
((isset($in['actions']['edit']) && is_array($in['actions'])) ?
$in['actions']['edit'] : null))) ? '<li
class="flow-js">'.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<a
class="'.htmlentities((string)((isset($in['moderationMwUiClass']) &&
is_array($in)) ? $in['moderationMwUiClass'] : null), ENT_QUOTES, 'UTF-8').'
mw-ui-progressive mw-ui-quiet mw-ui-hovericon"
'.$sp.'
href="'.htmlentities((string)((isset($in['actions']['edit']['url']) &&
is_array($in['actions']['edit'])) ? $in['actions']['edit']['url'] : null),
ENT_QUOTES, 'UTF-8').'"
diff --git a/handlebars/compiled/flow_block_topiclist.handlebars.php
b/handlebars/compiled/flow_block_topiclist.handlebars.php
index bcd8ed7..ac1d1d5 100644
--- a/handlebars/compiled/flow_block_topiclist.handlebars.php
+++ b/handlebars/compiled/flow_block_topiclist.handlebars.php
@@ -166,11 +166,11 @@
'.$sp.''.LCRun3::p($cx, 'flow_topic_titlebar_summary',
array(array(((isset($in['summary']) && is_array($in)) ? $in['summary'] :
null)),array())).'';},'flow_topic_titlebar_watch' => function ($cx, $in, $sp)
{return ''.$sp.'<div class="flow-topic-watchlist flow-watch-link">
'.$sp.''.LCRun3::p($cx, 'flow_errors', array(array($in),array()), ' ').'
'.$sp.' <a href="'.((LCRun3::ifvar($cx, ((isset($in['isWatched']) &&
is_array($in)) ? $in['isWatched'] : null))) ?
''.htmlentities((string)((isset($in['links']['unwatch-topic']['url']) &&
is_array($in['links']['unwatch-topic'])) ? $in['links']['unwatch-topic']['url']
: null), ENT_QUOTES, 'UTF-8').'' :
''.htmlentities((string)((isset($in['links']['watch-topic']['url']) &&
is_array($in['links']['watch-topic'])) ? $in['links']['watch-topic']['url'] :
null), ENT_QUOTES, 'UTF-8').'').'"
-'.$sp.' class="mw-ui-anchor mw-ui-constructive
'.((!LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'mw-ui-quiet' : '').'
+'.$sp.' class="mw-ui-anchor mw-ui-hovericon mw-ui-constructive
'.((!LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'mw-ui-quiet' : '').'
'.$sp.''.((LCRun3::ifvar($cx, ((isset($in['isWatched']) && is_array($in)) ?
$in['isWatched'] : null))) ? 'flow-watch-link-unwatch' :
'flow-watch-link-watch').'"
'.$sp.' data-flow-api-handler="watchItem"
'.$sp.' data-flow-api-target="< .flow-topic-watchlist"
-'.$sp.'
data-flow-api-method="POST">'.htmlentities((string)((isset($in['noop']) &&
is_array($in)) ? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span
class="wikiglyph wikiglyph-star" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-remove'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES,
'UTF-8').''.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span class="wikiglyph
wikiglyph-unstar" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-add'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'</a>
+'.$sp.'
data-flow-api-method="POST">'.htmlentities((string)((isset($in['noop']) &&
is_array($in)) ? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span
class="flow-unwatch mw-ui-icon mw-ui-icon-before
mw-ui-icon-unStar-constructive" title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-remove'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES,
'UTF-8').''.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<span class="flow-watch mw-ui-icon
mw-ui-icon-before mw-ui-icon-star mw-ui-icon-star-constructive-hover"
title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-topic-action-watchlist-add'),array()),
'encq').'"></span>'.htmlentities((string)((isset($in['noop']) && is_array($in))
? $in['noop'] : null), ENT_QUOTES, 'UTF-8').'</a>
'.$sp.'</div>
';},'flow_moderation_actions_list' => function ($cx, $in, $sp) {return
''.$sp.'<section>'.LCRun3::hbch($cx, 'ifCond',
array(array(((isset($in['moderationType']) && is_array($in)) ?
$in['moderationType'] : null),'===','topic'),array()), $in, false,
function($cx, $in)use($sp){return ''.((LCRun3::ifvar($cx,
((isset($in['actions']['edit']) && is_array($in['actions'])) ?
$in['actions']['edit'] : null))) ? '<li
class="flow-js">'.htmlentities((string)((isset($in['noop']) && is_array($in)) ?
$in['noop'] : null), ENT_QUOTES, 'UTF-8').'<a
class="'.htmlentities((string)((isset($in['moderationMwUiClass']) &&
is_array($in)) ? $in['moderationMwUiClass'] : null), ENT_QUOTES, 'UTF-8').'
mw-ui-progressive mw-ui-quiet mw-ui-hovericon"
'.$sp.'
href="'.htmlentities((string)((isset($in['actions']['edit']['url']) &&
is_array($in['actions']['edit'])) ? $in['actions']['edit']['url'] : null),
ENT_QUOTES, 'UTF-8').'"
diff --git a/handlebars/flow_topic_titlebar_watch.partial.handlebars
b/handlebars/flow_topic_titlebar_watch.partial.handlebars
index 371e968..933d1ed 100644
--- a/handlebars/flow_topic_titlebar_watch.partial.handlebars
+++ b/handlebars/flow_topic_titlebar_watch.partial.handlebars
@@ -2,7 +2,7 @@
{{> flow_errors}}
<a href="{{#if
isWatched}}{{links.unwatch-topic.url}}{{else}}{{links.watch-topic.url}}{{/if}}"
- class="mw-ui-anchor mw-ui-constructive {{#unless
isWatched}}mw-ui-quiet{{/unless}}
+ class="mw-ui-anchor mw-ui-hovericon mw-ui-constructive {{#unless
isWatched}}mw-ui-quiet{{/unless}}
{{#if isWatched~}}
flow-watch-link-unwatch
{{~else~}}
@@ -11,7 +11,7 @@
data-flow-api-handler="watchItem"
data-flow-api-target="< .flow-topic-watchlist"
data-flow-api-method="POST">
- {{~noop~}}<span class="wikiglyph wikiglyph-star" title="{{l10n
"flow-topic-action-watchlist-remove"}}"></span>{{~noop~}}
- {{~noop~}}<span class="wikiglyph wikiglyph-unstar"
title="{{l10n "flow-topic-action-watchlist-add"}}"></span>{{~noop~}}
+ {{~noop~}}<span class="flow-unwatch mw-ui-icon
mw-ui-icon-before mw-ui-icon-unStar-constructive" title="{{l10n
"flow-topic-action-watchlist-remove"}}"></span>{{~noop~}}
+ {{~noop~}}<span class="flow-watch mw-ui-icon mw-ui-icon-before
mw-ui-icon-star mw-ui-icon-star-constructive-hover" title="{{l10n
"flow-topic-action-watchlist-add"}}"></span>{{~noop~}}
</a>
</div>
diff --git a/modules/engine/components/board/base/flow-board-api-events.js
b/modules/engine/components/board/base/flow-board-api-events.js
index 559bb84..c9fd403 100644
--- a/modules/engine/components/board/base/flow-board-api-events.js
+++ b/modules/engine/components/board/base/flow-board-api-events.js
@@ -559,7 +559,7 @@
if ( data.watch[0].watched !== undefined ) {
// Successful watch: show tooltip
- flowBoard.emitWithReturn( 'showSubscribedTooltip',
$newLink.find( '.wikiglyph' ), watchType );
+ flowBoard.emitWithReturn( 'showSubscribedTooltip',
$newLink.find( '.mw-ui-icon' ), watchType );
}
return $.Deferred().resolve().promise();
diff --git a/modules/styles/board/topic/watchlist.less
b/modules/styles/board/topic/watchlist.less
index dc967ad..b59fd3a 100644
--- a/modules/styles/board/topic/watchlist.less
+++ b/modules/styles/board/topic/watchlist.less
@@ -30,22 +30,31 @@
zoom: 1;
padding: .25em .5em;
+ // mw-ui-quiet is set when the topic is not watched
+ // FIXME: this is a hack, use a better-named class for this
&.mw-ui-quiet {
- // Quiet mode shows the outline star
- .wikiglyph-star {
+ // When not watched, hide the unwatch icon and show the
watch icon
+ .flow-unwatch {
display: none;
}
- .wikiglyph-unstar {
+ .flow-watch {
display: inline-block;
*display: inline;
zoom: 1;
}
}
- // Regular mode shows the full star
- .wikiglyph-unstar {
+ // When watched, hide the watch icon and show the unwatch icon
+ .flow-watch {
display: none;
}
+
+ // HACK: mimic old mw-ui style (changing from #00af89 to
#00f4bf on hover)
+ .flow-unwatch:hover {
+ // 0xf4/0xaf = 0xbf/0x89 = 1.394
+ -webkit-filter: brightness(1.4);
+ filter: brightness(1.4);
+ }
}
// Correct positioning for ltr/rtl content direction
--
To view, visit https://gerrit.wikimedia.org/r/218996
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3a4fcd8c1b2566608f180245ce52fd4777567879
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Catrope <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
