jenkins-bot has submitted this change and it was merged.
Change subject: Fix hover hit regions
......................................................................
Fix hover hit regions
Because the top parent had the padding for the icons, the specific elements'
:hover was not triggered when hovering the whitespace reserved for the icons.
This made the icons only appear when actually hovering over the icons' space,
or hovering over its container element on the left. Moving your mouse from the
left container to the right icon flashed shortly, because you left the hit
region.
While I was adding classes to the specific elements that need the right padding,
I figured I could improve the hiding/displaying of the icons. Instead of having
to make sure you show/hide the icon correctly per icon, the .flow-icon CSS now
takes care of it.
Meanwhile also improved the CSS for the input-like textarea to submit a reply.
Meanwhile also fixed some paddings related to post: reserve space for reply &
thank using visibility: hidden; fix some padding around the title
Change-Id: I64c2569f2bd3aa092d57bec27b672d9528f925b7
---
M modules/base/styles/container.less
M modules/discussion/styles/post.less
M modules/discussion/styles/topic.less
M modules/header/styles/base.less
M templates/header.html.php
M templates/post.html.php
M templates/topic.html.php
M templates/topiclist.html.php
8 files changed, 158 insertions(+), 145 deletions(-)
Approvals:
EBernhardson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/base/styles/container.less
b/modules/base/styles/container.less
index 6e93452..4cbd6cf 100644
--- a/modules/base/styles/container.less
+++ b/modules/base/styles/container.less
@@ -1,37 +1,48 @@
@icons-space: 50px;
-.flow-container-content {
+// all UI "container" elements should have this class, which will preserve some
+// space on the right for icons.
+// @todo: more comment?
+.flow-element-container {
position: relative;
// .container-icons' space
padding-right: @icons-space;
-}
-.flow-icon {
- clear: both;
- float: right;
+ .flow-icon {
+ // only display when hovered
+ display: none;
- position: relative;
- right: -@icons-space;
+ clear: both;
+ float: right;
- display: block;
- width: 20px;
- height: 20px;
- text-indent: -9999px;
+ position: relative;
+ right: -@icons-space;
- padding: 10px;
+ width: 20px;
+ height: 20px;
+ text-indent: -9999px;
- // icons bottom-aligned should in HTML be _after_ the element where they
- // should align to the bottom, and have this class added (will push the
- // button back up to lign up with the preceeding node)
- &.flow-icon-bottom-aligned {
- margin-top: -40px;
+ padding: 10px;
+
+ // icons bottom-aligned should in HTML be _after_ the element
where they
+ // should align to the bottom, and have this class added (will
push the
+ // button back up to lign up with the preceeding node)
+ &.flow-icon-bottom-aligned {
+ margin-top: -40px;
+ }
+
+ // icons top-aligned should in HTML be _before_ the element
where they
+ // should align to the top, and have this class added
+ &.flow-icon-top-aligned {
+
+ }
}
- // icons top-aligned should in HTML be _before_ the element where they
- // should align to the top, and have this class added
- &.flow-icon-top-aligned {
-
+ &:hover {
+ .flow-icon {
+ display: block;
+ }
}
}
@@ -39,7 +50,5 @@
font-size: 16px;
// based on width in Flow Prototype/Design/Iteration 5 "Talkpage_*"
- width: 610px;
-
- .flow-container-content;
+ width: 660px;
}
diff --git a/modules/discussion/styles/post.less
b/modules/discussion/styles/post.less
index 0cd90fd..ac493ad 100644
--- a/modules/discussion/styles/post.less
+++ b/modules/discussion/styles/post.less
@@ -3,19 +3,21 @@
.flow-post-container {
clear: both;
- margin-top: 20px;
- padding-left: 22px;
- // Leave space for hover buttons to not change the height
- .flow-post-unmoderated {
- min-height: 115px;
+ .flow-post {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding-left: 22px;
}
- .flow-creator {
- font-weight: bold;
- color: @post-title-color;
-
+ .flow-post-title {
padding-bottom: 22px;
+
+ .flow-creator {
+ font-weight: bold;
+ color: @post-title-color;
+
+ }
}
.flow-post-content {
@@ -23,6 +25,14 @@
color: @post-content-color;
padding-bottom: 20px;
+
+ *:first-child {
+ margin-top: 0;
+ }
+
+ *:last-child {
+ margin-bottom: 0;
+ }
}
.flow-edit-post-link {
@@ -31,11 +41,16 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
+ .background-image-svg('../../base/images/edit_normal.svg',
'../../base/images/edit_normal.png');
+
+ &:hover {
+
.background-image-svg('../../base/images/edit_hover.svg',
'../../base/images/edit_hover.png');
+ }
}
.flow-post-interaction {
// hide reply/thank buttons until post is hovered
- display: none;
+ visibility: hidden;
}
.flow-datestamp {
@@ -64,6 +79,11 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
+
.background-image-svg('../../base/images/flag_normal.svg',
'../../base/images/flag_normal.png');
+
+ &:hover {
+
.background-image-svg('../../base/images/flag_hover.svg',
'../../base/images/flag_hover.png');
+ }
}
}
@@ -152,6 +172,7 @@
}
.flow-post-replies {
+ margin-left: 22px;
border-left: 1px solid #999;
.flow-post-replies {
@@ -193,24 +214,8 @@
}
.flow-post:hover {
- .flow-edit-post-link {
-
.background-image-svg('../../base/images/edit_normal.svg',
'../../base/images/edit_normal.png');
-
- &:hover {
-
.background-image-svg('../../base/images/edit_hover.svg',
'../../base/images/edit_hover.png');
- }
- }
-
- .flow-actions-link {
-
.background-image-svg('../../base/images/flag_normal.svg',
'../../base/images/flag_normal.png');
-
- &:hover {
-
.background-image-svg('../../base/images/flag_hover.svg',
'../../base/images/flag_hover.png');
- }
- }
-
.flow-post-interaction {
- display: block;
+ visibility: visible;
}
}
diff --git a/modules/discussion/styles/topic.less
b/modules/discussion/styles/topic.less
index 9031f79..c57fbae 100644
--- a/modules/discussion/styles/topic.less
+++ b/modules/discussion/styles/topic.less
@@ -112,9 +112,6 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
- }
-
- &:hover .flow-edit-topic-link {
.background-image-svg('../../base/images/edit_normal.svg',
'../../base/images/edit_normal.png');
&:hover {
@@ -126,9 +123,6 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
- }
-
- &:hover .flow-icon-permalink {
.background-image-svg('../../base/images/permalink_normal.svg',
'../../base/images/permalink_normal.png');
&:hover {
@@ -140,9 +134,6 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
- }
-
- &:hover .flow-icon-watchlist {
.background-image-svg('../../base/images/watchlist_normal.svg',
'../../base/images/watchlist_normal.png');
&:hover {
@@ -210,8 +201,14 @@
}
}
- &:not(:hover) {
- .flow-topic-reply-content:not(:focus) {
+ // Make the "comment on topic" textarea look like the "start a new
topic"
+ // input field. Once the textarea is focussed, it can appear like a
regular
+ // textarea. The parent's :not(:active) will make sure that when
clicking
+ // outside the textarea, but still in the parent, the textarea does not
yet
+ // shrink to the input-like height; otherwise, attempting to click
"submit"
+ // will shrink the textarea, and the "submit" button will be missed.
+ &:not(:active) {
+ .flow-topic-reply-content:empty:not(:focus) {
height: 34px;
padding-top: 6px;
}
diff --git a/modules/header/styles/base.less b/modules/header/styles/base.less
index e0a165a..326410a 100644
--- a/modules/header/styles/base.less
+++ b/modules/header/styles/base.less
@@ -14,9 +14,7 @@
background-position: center;
background-size: 20px auto;
background-repeat: no-repeat;
- }
- &:hover .flow-header-edit-link {
.background-image-svg('../../base/images/edit_normal.svg',
'../../base/images/edit_normal.png');
&:hover {
diff --git a/templates/header.html.php b/templates/header.html.php
index 9bcb7e2..61d9be6 100644
--- a/templates/header.html.php
+++ b/templates/header.html.php
@@ -2,7 +2,10 @@
echo Html::openElement(
'div',
- array( 'id' => 'flow-header' )
+ array(
+ 'id' => 'flow-header',
+ 'class' => 'flow-element-container',
+ )
);
if ( $block->hasErrors( 'content' ) ) {
diff --git a/templates/post.html.php b/templates/post.html.php
index 8e9c9e2..76794a5 100644
--- a/templates/post.html.php
+++ b/templates/post.html.php
@@ -45,7 +45,7 @@
'data-post-id' => $post->getRevisionId()->getHex(),
) );
echo Html::openElement( 'div', array(
- 'class' => $post->isModerated() ? 'flow-post
flow-post-moderated' : 'flow-post flow-post-unmoderated',
+ 'class' => 'flow-post flow-element-container ' . (
$post->isModerated() ? 'flow-post-moderated' : 'flow-post-unmoderated' ),
'data-post-id' => $post->getPostId()->getHex(),
'id' => 'flow-post-' . $post->getPostId()->getHex(),
) ); ?>
diff --git a/templates/topic.html.php b/templates/topic.html.php
index 7854b25..d00e401 100644
--- a/templates/topic.html.php
+++ b/templates/topic.html.php
@@ -10,89 +10,90 @@
'data-title' => $title,
) );
?>
-<div class="flow-titlebar mw-ui-button">
-
- <?php
- echo Html::rawElement(
- 'a',
- array(
- 'href' => $this->generateUrl( $root->getPostId(),
'edit-title' ),
- 'class' => 'flow-edit-topic-link flow-icon
flow-icon-top-aligned',
- ),
- wfMessage( 'flow-topic-action-edit-title' )
- );
- ?>
-
- <div class="flow-topic-title">
- <h2 class="flow-realtitle">
- <?php echo htmlspecialchars( $title ); ?>
- </h2>
- </div>
- <div class="flow-actions">
- <a class="flow-actions-link" href="#"><?php echo wfMessage(
'flow-topic-actions' )->escaped(); ?></a>
- <div class="flow-actions-flyout">
- <ul>
- <li class="flow-action-hide">
- <a href="#" class="mw-ui-button
mw-ui-destructive">@todo: Hide topic</a>
- </li>
- <li class="flow-action-close">
- <a href="#" class="mw-ui-button">@todo:
Close topic</a>
- </li>
- </ul>
- </div>
- </div>
-
- <?php
- echo Html::element(
- 'a',
- array(
- 'class' => 'flow-icon-permalink flow-icon
flow-icon-top-aligned',
- 'title' => wfMessage( 'flow-topic-action-view'
)->text(),
- 'href' => $this->generateUrl( $topic ),
- ),
- wfMessage( 'flow-topic-action-view' )->text()
- );
- ?>
-
- <ul class="flow-topic-posts-meta">
- <li>@todo: participants</li>
- <li class="flow-post-number" data-topic-id="<?php echo
$topic->getId()->getHex() ?>">@todo: # comments</li>
- </ul>
-
- <?php
- // @todo: afaik, there's no watchlist functionality yet; this
blurb is just to position it correctly already
-
- $watchlistActive = false; // @todo: true if already
watchlisted, false if not
- echo Html::element(
- 'a',
- array(
- 'class' => 'flow-icon-watchlist flow-icon
flow-icon-bottom-aligned'
- . ( $watchlistActive ? '
flow-icon-watchlist-active' : '' ),
- 'title' => wfMessage(
'flow-topic-action-watchlist' )->text(),
- 'href' => '#',
- 'onclick' => "alert( '@todo: Not yet
implemented!' ); return false;"
- ),
- wfMessage( 'flow-topic-action-watchlist' )->text()
- );
- ?>
-
- <p class="flow-datestamp">
+<div class="flow-element-container">
+ <div class="flow-titlebar mw-ui-button">
<?php
- // timestamp html
- $content = '
- <span class="flow-agotime" style="display:
inline">'. $topic->getLastModifiedObj()->getHumanTimestamp() .'</span>
- <span class="flow-utctime" style="display:
none">'. $topic->getLastModifiedObj()->getTimestamp( TS_RFC2822 ) .'</span>';
+ echo Html::rawElement(
+ 'a',
+ array(
+ 'href' => $this->generateUrl(
$root->getPostId(), 'edit-title' ),
+ 'class' => 'flow-edit-topic-link flow-icon
flow-icon-top-aligned',
+ ),
+ wfMessage( 'flow-topic-action-edit-title' )
+ );
+ ?>
- // build history button with timestamp html as content
- echo Html::rawElement( 'a',
+ <div class="flow-topic-title">
+ <h2 class="flow-realtitle">
+ <?php echo htmlspecialchars( $title ); ?>
+ </h2>
+ </div>
+ <div class="flow-actions">
+ <a class="flow-actions-link" href="#"><?php echo
wfMessage( 'flow-topic-actions' )->escaped(); ?></a>
+ <div class="flow-actions-flyout">
+ <ul>
+ <li class="flow-action-hide">
+ <a href="#" class="mw-ui-button
mw-ui-destructive">@todo: Hide topic</a>
+ </li>
+ <li class="flow-action-close">
+ <a href="#"
class="mw-ui-button">@todo: Close topic</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <?php
+ echo Html::element(
+ 'a',
array(
- 'class' => 'flow-action-history-link',
- 'href' => $this->generateUrl(
$root->getPostId(), 'topic-history' ),
+ 'class' => 'flow-icon-permalink
flow-icon flow-icon-top-aligned',
+ 'title' => wfMessage(
'flow-topic-action-view' )->text(),
+ 'href' => $this->generateUrl( $topic ),
),
- $content
+ wfMessage( 'flow-topic-action-view' )->text()
);
?>
- </p>
+
+ <ul class="flow-topic-posts-meta">
+ <li>@todo: participants</li>
+ <li class="flow-post-number" data-topic-id="<?php echo
$topic->getId()->getHex() ?>">@todo: # comments</li>
+ </ul>
+
+ <?php
+ // @todo: afaik, there's no watchlist functionality
yet; this blurb is just to position it correctly already
+
+ $watchlistActive = false; // @todo: true if already
watchlisted, false if not
+ echo Html::element(
+ 'a',
+ array(
+ 'class' => 'flow-icon-watchlist
flow-icon flow-icon-bottom-aligned'
+ . ( $watchlistActive ? '
flow-icon-watchlist-active' : '' ),
+ 'title' => wfMessage(
'flow-topic-action-watchlist' )->text(),
+ 'href' => '#',
+ 'onclick' => "alert( '@todo: Not yet
implemented!' ); return false;"
+ ),
+ wfMessage( 'flow-topic-action-watchlist'
)->text()
+ );
+ ?>
+
+ <p class="flow-datestamp">
+ <?php
+ // timestamp html
+ $content = '
+ <span class="flow-agotime"
style="display: inline">'. $topic->getLastModifiedObj()->getHumanTimestamp()
.'</span>
+ <span class="flow-utctime"
style="display: none">'. $topic->getLastModifiedObj()->getTimestamp( TS_RFC2822
) .'</span>';
+
+ // build history button with timestamp html as
content
+ echo Html::rawElement( 'a',
+ array(
+ 'class' =>
'flow-action-history-link',
+ 'href' => $this->generateUrl(
$root->getPostId(), 'topic-history' ),
+ ),
+ $content
+ );
+ ?>
+ </p>
+ </div>
</div>
<?php
foreach( $root->getChildren() as $child ) {
@@ -101,7 +102,7 @@
// Topic reply box
echo Html::openElement( 'div', array(
- 'class' => 'flow-topic-reply-container flow-post-container',
+ 'class' => 'flow-topic-reply-container flow-post-container
flow-element-container',
'data-post-id' => $root->getRevisionId()->getHex(),
'id' => 'flow-topic-reply-' . $topic->getId()->getHex()
) );
diff --git a/templates/topiclist.html.php b/templates/topiclist.html.php
index e116bdb..77e5649 100644
--- a/templates/topiclist.html.php
+++ b/templates/topiclist.html.php
@@ -1,6 +1,6 @@
<?php
-echo Html::openElement( 'div', array( 'class' => 'flow-new-topic-container' )
);
+echo Html::openElement( 'div', array( 'class' => 'flow-new-topic-container
flow-element-container' ) );
echo Html::openElement( 'form', array(
'method' => 'POST',
'action' => $this->generateUrl( $block->getWorkflow(), 'new-topic' ),
--
To view, visit https://gerrit.wikimedia.org/r/90154
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I64c2569f2bd3aa092d57bec27b672d9528f925b7
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <[email protected]>
Gerrit-Reviewer: EBernhardson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
