jenkins-bot has submitted this change and it was merged.
Change subject: Design tweaks
......................................................................
Design tweaks
As discussed with Kaity
Change-Id: I3bd077778f8d9d22378f9b96fdd1c00c3b989e32
---
M Resources.php
M includes/Block/Topic.php
M includes/Block/TopicList.php
M modules/discussion/styles/post.less
M modules/discussion/styles/settings/colors.less
M modules/discussion/styles/topic.less
M modules/header/styles/base.less
M modules/mediawiki.ui/styles/agora-override-forms.less
M modules/mediawiki.ui/styles/mixins/buttons.less
M modules/mediawiki.ui/styles/settings/colors.less
A modules/moderation/styles/mixins/buttonicon.less
A modules/moderation/styles/moderation.less
M templates/post.html.php
13 files changed, 141 insertions(+), 139 deletions(-)
Approvals:
EBernhardson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Resources.php b/Resources.php
index cf2a657..9761b9d 100644
--- a/Resources.php
+++ b/Resources.php
@@ -85,9 +85,8 @@
'scripts' => 'history/history.js',
),
'ext.flow.moderation' => $flowResourceTemplate + array(
- 'scripts' => array(
- 'moderation/moderation.js',
- ),
+ 'styles' => 'moderation/styles/moderation.less',
+ 'scripts' => 'moderation/moderation.js',
'messages' => array(
'flow-moderation-reason-placeholder',
'flow-moderation-title-censor-post',
diff --git a/includes/Block/Topic.php b/includes/Block/Topic.php
index 18cd0a6..cea9bef 100644
--- a/includes/Block/Topic.php
+++ b/includes/Block/Topic.php
@@ -348,7 +348,7 @@
}
public function render( Templating $templating, array $options, $return
= false ) {
- $templating->getOutput()->addModuleStyles( array(
'ext.flow.discussion' ) );
+ $templating->getOutput()->addModuleStyles( array(
'ext.flow.discussion', 'ext.flow.moderation' ) );
$templating->getOutput()->addModules( array(
'ext.flow.discussion' ) );
$prefix = '';
diff --git a/includes/Block/TopicList.php b/includes/Block/TopicList.php
index 119ed05..32023cf 100644
--- a/includes/Block/TopicList.php
+++ b/includes/Block/TopicList.php
@@ -106,7 +106,7 @@
public function render( Templating $templating, array $options ) {
// Don't render the topcilist block for some actions, eg:
board-history
if ( !in_array( $this->action, $this->suppressedActions, true )
) {
- $templating->getOutput()->addModuleStyles( array(
'ext.flow.discussion' ) );
+ $templating->getOutput()->addModuleStyles( array(
'ext.flow.discussion', 'ext.flow.moderation' ) );
$templating->getOutput()->addModules( array(
'ext.flow.discussion' ) );
if ( $this->workflow->isNew() ) {
$templating->render( "flow:topiclist.html.php",
array(
diff --git a/modules/discussion/styles/post.less
b/modules/discussion/styles/post.less
index 661524f..6a1f11b 100644
--- a/modules/discussion/styles/post.less
+++ b/modules/discussion/styles/post.less
@@ -27,14 +27,16 @@
font-weight: normal;
color: @post-content-color;
- padding-bottom: 13px;
-
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
+ }
+
+ ul {
+ list-style-image: none;
}
}
@@ -63,8 +65,21 @@
}
.flow-post-interaction {
+ padding-top: 13px;
+
// hide reply/thank buttons until post is hovered
visibility: hidden;
+
+ .mw-ui-button {
+ border: none;
+ padding: 0;
+ background: none;
+ color: #777;
+
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ }
}
.flow-datestamp {
@@ -89,9 +104,6 @@
}
.flow-actions-link {
- // position it nicely between .flow-edit-post-link &
.flow-actions-link
- margin-top: -61px !important;
-
width: 20px;
height: 20px;
text-indent: -9999px;
@@ -107,95 +119,10 @@
}
}
- // Add icon to action buttons
- .buttonIcon(
- @active-icon,
- @active-fallback-icon,
-
- @hover-icon,
- @hover-fallback-icon,
-
- @normal-icon,
- @normal-fallback-icon,
-
- @onclick-icon,
- @onclick-fallback-icon
- ) {
- padding-left: 41px;
- // !important to overwrite MW core's background image
- .background-image-svg(@normal-icon, @normal-fallback-icon)
!important;
-
- &:active {
- .background-image-svg(@active-icon,
@active-fallback-icon) !important;
- }
-
- &:hover {
- .background-image-svg(@hover-icon,
@hover-fallback-icon) !important;
- }
-
- background-position: 16px !important;
- background-size: 14px auto !important;
- background-repeat: no-repeat !important;
- }
-
- .flow-hide-post-link {
- .buttonIcon(
- '../../base/images/moderate_menu_hidden_active.svg',
- '../../base/images/moderate_menu_hidden_active.png',
-
- '../../base/images/moderate_menu_hidden_hover.svg',
- '../../base/images/moderate_menu_hidden_hover.png',
-
- '../../base/images/moderate_menu_hidden_normal.svg',
- '../../base/images/moderate_menu_hidden_normal.png',
-
- '../../base/images/moderate_menu_hidden_onclick.svg',
- '../../base/images/moderate_menu_hidden_onclick.png'
- );
- }
-
- .flow-delete-post-link {
- .buttonIcon(
- '../../base/images/moderate_menu_deleted_active.svg',
- '../../base/images/moderate_menu_deleted_active.png',
-
- '../../base/images/moderate_menu_deleted_hover.svg',
- '../../base/images/moderate_menu_deleted_hover.png',
-
- '../../base/images/moderate_menu_deleted_normal.svg',
- '../../base/images/moderate_menu_deleted_normal.png',
-
- '../../base/images/moderate_menu_deleted_onclick.svg',
- '../../base/images/moderate_menu_deleted_onclick.png'
- );
- }
-
- .flow-censor-post-link {
- .buttonIcon(
- '../../base/images/moderate_menu_suppressed_active.svg',
- '../../base/images/moderate_menu_suppressed_active.png',
-
- '../../base/images/moderate_menu_suppressed_hover.svg',
- '../../base/images/moderate_menu_suppressed_hover.png',
-
- '../../base/images/moderate_menu_suppressed_normal.svg',
- '../../base/images/moderate_menu_suppressed_normal.png',
-
-
'../../base/images/moderate_menu_suppressed_onclick.svg',
- '../../base/images/moderate_menu_suppressed_onclick.png'
- );
- }
-
- .flow-restore-post-link {
- // @todo: need icon
-// .buttonIcon('../../base/images/restored_button.svg',
'../../base/images/restored_button.png');
- }
-
// any non-first-level reply
.flow-post-replies {
font-size: 14px;
- margin-top: 20px;
margin-left: 22px;
border-left: 2px dotted #CCC;
}
@@ -236,6 +163,7 @@
padding-top: 20px;
.flow-post-form-controls {
+ margin-top: 5px;
text-align: right;
}
diff --git a/modules/discussion/styles/settings/colors.less
b/modules/discussion/styles/settings/colors.less
index 4264bf9..0b6f843 100644
--- a/modules/discussion/styles/settings/colors.less
+++ b/modules/discussion/styles/settings/colors.less
@@ -1,6 +1,6 @@
@topic-titlebar-background-color: #ededed;
-@topic-titlebar-text-color: #808184;
+@topic-titlebar-text-color: #777;
@topic-title-color: #231f20;
@post-title-color: #3c68b1;
-@post-content-color: #6d6e70;
+@post-content-color: #333;
diff --git a/modules/discussion/styles/topic.less
b/modules/discussion/styles/topic.less
index 76688fa..3ee3dd8 100644
--- a/modules/discussion/styles/topic.less
+++ b/modules/discussion/styles/topic.less
@@ -55,7 +55,7 @@
font-size: 16px;
line-height: 28px;
- color: @topic-titlebar-text-color;
+ color: @topic-titlebar-text-color !important; // override
mw-ui-button
// override mw-ui-button:hover style
&:hover,
@@ -141,6 +141,7 @@
.flow-datestamp {
margin: 0;
+ color: #898989 !important;
position: absolute;
right: 22px;
@@ -222,6 +223,7 @@
}
.flow-post-form-controls {
+ margin-top: 5px;
text-align: right;
}
}
@@ -241,6 +243,7 @@
margin-top: 22px;
.flow-post-form-controls {
+ margin-top: 5px;
text-align: right;
}
}
diff --git a/modules/header/styles/base.less b/modules/header/styles/base.less
index 326410a..6363315 100644
--- a/modules/header/styles/base.less
+++ b/modules/header/styles/base.less
@@ -2,12 +2,22 @@
@import 'mediawiki.mixins.less';
#flow-header {
- padding-bottom: 30px;
+ // should be about 30px total; taking the content line-height into
account,
+ // this 25px padding will make it look more like a 30px gap
+ padding-bottom: 25px;
#flow-header-content {
font-weight: bold;
line-height: 25px;
color: @header-content-color;
+
+ *:first-child {
+ margin-top: 0;
+ }
+
+ *:last-child {
+ margin-bottom: 0;
+ }
}
.flow-header-edit-link {
diff --git a/modules/mediawiki.ui/styles/agora-override-forms.less
b/modules/mediawiki.ui/styles/agora-override-forms.less
index e81c21e..2e9a27a 100644
--- a/modules/mediawiki.ui/styles/agora-override-forms.less
+++ b/modules/mediawiki.ui/styles/agora-override-forms.less
@@ -16,7 +16,6 @@
&:focus {
box-shadow: 7px 0 0 #347bff inset;
- border: 1px solid #e6e6e5;
border: 1px solid #c0c0c0;
}
diff --git a/modules/mediawiki.ui/styles/mixins/buttons.less
b/modules/mediawiki.ui/styles/mixins/buttons.less
index ff59e88..0072940 100644
--- a/modules/mediawiki.ui/styles/mixins/buttons.less
+++ b/modules/mediawiki.ui/styles/mixins/buttons.less
@@ -19,7 +19,7 @@
font-weight: bold;
border-radius: 3px;
cursor: pointer;
- text-shadow: 0px 1px 0px 0px rgba(0,0,0,.20);
+ text-shadow: none;
font-size: 14px;
&:hover,
diff --git a/modules/mediawiki.ui/styles/settings/colors.less
b/modules/mediawiki.ui/styles/settings/colors.less
index 8e0a0ae..fc281e4 100644
--- a/modules/mediawiki.ui/styles/settings/colors.less
+++ b/modules/mediawiki.ui/styles/settings/colors.less
@@ -2,7 +2,7 @@
@neutral-base: #fff;
@neutral-active: #ccc;
-@constructive-base: #7fd7c4;
+@constructive-base: #00af8b;
@constructive-active: #00926c;
@destructive-base: #d11d13;
diff --git a/modules/moderation/styles/mixins/buttonicon.less
b/modules/moderation/styles/mixins/buttonicon.less
new file mode 100644
index 0000000..79fc354
--- /dev/null
+++ b/modules/moderation/styles/mixins/buttonicon.less
@@ -0,0 +1,45 @@
+@import 'mediawiki.mixins.less';
+
+// Add icon to action buttons
+.buttonIcon(@icon-prefix) {
+ .buttonIconExplicit(
+ ~"@{icon-prefix}_active.svg",
+ ~"@{icon-prefix}_active.png",
+ ~"@{icon-prefix}_hover.svg",
+ ~"@{icon-prefix}_hover.png",
+ ~"@{icon-prefix}_normal.svg",
+ ~"@{icon-prefix}_normal.png",
+ ~"@{icon-prefix}_onclick.svg",
+ ~"@{icon-prefix}_onclick.png",
+ );
+}
+
+.buttonIconExplicit(
+ @active-icon,
+ @active-fallback-icon,
+
+ @hover-icon,
+ @hover-fallback-icon,
+
+ @normal-icon,
+ @normal-fallback-icon,
+
+ @onclick-icon,
+ @onclick-fallback-icon
+) {
+ padding-left: 41px;
+ // !important to overwrite MW core's background image
+ .background-image-svg(@normal-icon, @normal-fallback-icon) !important;
+
+ &:active {
+ .background-image-svg(@active-icon, @active-fallback-icon)
!important;
+ }
+
+ &:hover {
+ .background-image-svg(@hover-icon, @hover-fallback-icon)
!important;
+ }
+
+ background-position: 16px !important;
+ background-size: 14px auto !important;
+ background-repeat: no-repeat !important;
+}
diff --git a/modules/moderation/styles/moderation.less
b/modules/moderation/styles/moderation.less
new file mode 100644
index 0000000..38f9067
--- /dev/null
+++ b/modules/moderation/styles/moderation.less
@@ -0,0 +1,18 @@
+@import 'mixins/buttonicon.less';
+
+.flow-action-hide input {
+ .buttonIcon( '../../base/images/moderate_menu_hidden' );
+}
+
+.flow-action-delete input {
+ .buttonIcon( '../../base/images/moderate_menu_deleted' );
+}
+
+.flow-action-censor input {
+ .buttonIcon( '../../base/images/moderate_menu_suppressed' );
+}
+
+.flow-action-restore input {
+ // @todo: need icon
+ // .buttonIcon( '../../base/images/moderate_menu_restored' );
+}
diff --git a/templates/post.html.php b/templates/post.html.php
index a93d53a..3156a27 100644
--- a/templates/post.html.php
+++ b/templates/post.html.php
@@ -83,11 +83,36 @@
</span>
</div>
+ <?php echo $postView->editPostButton(
'flow-edit-post-link flow-icon flow-icon-bottom-aligned' ); ?>
+
<div class="flow-post-content">
<?php echo $this->getContent( $post, 'html',
$user ); ?>
</div>
- <?php echo $postView->editPostButton(
'flow-edit-post-link flow-icon flow-icon-bottom-aligned' ); ?>
+ <?php if ( $postView->actions()->isAllowedAny(
'hide-post', 'delete-post', 'censor-post', 'restore-post' ) ): ?>
+ <div class="flow-actions">
+ <a class="flow-actions-link flow-icon
flow-icon-bottom-aligned" href="#" title="<?php echo wfMessage(
'flow-post-actions' )->escaped(); ?>"><?php echo wfMessage( 'flow-post-actions'
)->escaped(); ?></a>
+ <div class="flow-actions-flyout">
+ <ul>
+ <?php
+ if ( $hidePost =
$postView->hidePostButton( 'flow-hide-post-link mw-ui-button' ) ) {
+ echo "<li
class='flow-action-hide'>$hidePost</li>";
+ }
+ if ( $deletePost =
$postView->deletePostButton( 'flow-delete-post-link mw-ui-button' ) ) {
+ echo "<li
class='flow-action-delete'>$deletePost</li>";
+ }
+ if ( $suppressPost =
$postView->suppressPostButton( 'flow-censor-post-link mw-ui-button' ) ) {
+ echo "<li
class='flow-action-censor'>$suppressPost</li>";
+ }
+ // @todo restore button
will probably be moved somewhere else, some day
+ if ( $restorePost =
$postView->restorePostButton( 'flow-restore-post-link mw-ui-button
mw-ui-constructive' ) ) {
+ echo "<li
class='flow-action-restore'>$restorePost</li>";
+ }
+ ?>
+ </ul>
+ </div>
+ </div>
+ <?php endif; ?>
<p class="flow-datestamp">
<?php
@@ -116,44 +141,19 @@
</a>
<?php endif; ?>
</div>
- </div>
- <?php
- echo Html::element(
- 'a',
- array(
- 'class' => 'flow-icon-permalink flow-icon
flow-icon-bottom-aligned',
- 'title' => wfMessage( 'flow-post-action-view'
)->text(),
- 'href' => $this->generateUrl(
$block->getWorkflowId() ) . '#flow-post-' . $post->getPostId()->getHex(),
- ),
- wfMessage( 'flow-topic-action-view' )->text()
- );
- ?>
-
- <?php if ( $postView->actions()->isAllowedAny( 'hide-post',
'delete-post', 'censor-post', 'restore-post' ) ): ?>
- <div class="flow-actions">
- <a class="flow-actions-link flow-icon
flow-icon-bottom-aligned" href="#" title="<?php echo wfMessage(
'flow-post-actions' )->escaped(); ?>"><?php echo wfMessage( 'flow-post-actions'
)->escaped(); ?></a>
- <div class="flow-actions-flyout">
- <ul>
- <?php
- if ( $hidePost =
$postView->hidePostButton( 'flow-hide-post-link mw-ui-button' ) ) {
- echo "<li
class='flow-action-hide'>$hidePost</li>";
- }
- if ( $deletePost =
$postView->deletePostButton( 'flow-delete-post-link mw-ui-button' ) ) {
- echo "<li
class='flow-action-delete'>$deletePost</li>";
- }
- if ( $suppressPost =
$postView->suppressPostButton( 'flow-censor-post-link mw-ui-button' ) ) {
- echo "<li
class='flow-action-censor'>$suppressPost</li>";
- }
- // @todo restore button will probably
be moved somewhere else, some day
- if ( $restorePost =
$postView->restorePostButton( 'flow-restore-post-link mw-ui-button
mw-ui-constructive' ) ) {
- echo "<li
class='flow-action-restore'>$restorePost</li>";
- }
- ?>
- </ul>
- </div>
+ <?php
+ echo Html::element(
+ 'a',
+ array(
+ 'class' => 'flow-icon-permalink
flow-icon flow-icon-bottom-aligned',
+ 'title' => wfMessage(
'flow-post-action-view' )->text(),
+ 'href' => $this->generateUrl(
$block->getWorkflowId() ) . '#flow-post-' . $post->getPostId()->getHex(),
+ ),
+ wfMessage( 'flow-topic-action-view' )->text()
+ );
+ ?>
</div>
- <?php endif; ?>
</div>
<div class='flow-post-replies'>
--
To view, visit https://gerrit.wikimedia.org/r/96065
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3bd077778f8d9d22378f9b96fdd1c00c3b989e32
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <[email protected]>
Gerrit-Reviewer: Bsitu <[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
