jenkins-bot has submitted this change and it was merged.
Change subject: Change UI of Special:SmiteSpam
......................................................................
Change UI of Special:SmiteSpam
Change from a table and rows layout to a "card" layout.
Change-Id: I89ef7bcbd9d7566a05dca3c22295dae4647c104c
---
M SmiteSpam.php
M SpecialSmiteSpam.php
A static/css/smitespam.css
M static/js/ext.smitespam.js
4 files changed, 118 insertions(+), 38 deletions(-)
Approvals:
Polybuildr: Looks good to me, approved
Yaron Koren: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/SmiteSpam.php b/SmiteSpam.php
index 5a63909..5d60b6f 100644
--- a/SmiteSpam.php
+++ b/SmiteSpam.php
@@ -32,6 +32,7 @@
$wgResourceModules['ext.SmiteSpam.retriever'] = array(
'scripts' => 'js/ext.smitespam.js',
+ 'styles' => 'css/smitespam.css',
'localBasePath' => "$ssRoot/static",
'remoteExtPath' => 'SmiteSpam/static',
'dependencies' => array(
diff --git a/SpecialSmiteSpam.php b/SpecialSmiteSpam.php
index 1433f95..6a0319d 100644
--- a/SpecialSmiteSpam.php
+++ b/SpecialSmiteSpam.php
@@ -43,6 +43,10 @@
}
}
+ $out->addHTML(
+ '<a target="_blank"
href="./Special:SmiteSpamTrustedUsers">View trusted users</a>'
+ );
+
$out->addHTML( '<h2>' . $this->msg(
'smitespam-spam-pages-list-heading' )->text() . '</h2>' );
$out->addHTML( '<div id="pagination"></div>' );
@@ -59,12 +63,11 @@
$out->addHTML( '<input type="submit" value="'
. $this->msg( 'smitespam-delete-selected' ) . '"
style="display:none;">' );
- $out->addHTML( Html::openElement( 'table', array(
- 'class' => 'wikitable',
+ $out->addHTML( Html::openElement( 'div', array(
'id' => 'smitespam-page-list',
) ) );
- $out->addHTML( Html::closeElement( 'table' ) );
+ $out->addHTML( Html::closeElement( 'div' ) );
$out->addHTML( '<input type="submit" value="'
. $this->msg( 'smitespam-delete-selected' ) . '"
style="display:none;">' );
$out->addHTML( Html::closeElement( 'form' ) );
diff --git a/static/css/smitespam.css b/static/css/smitespam.css
new file mode 100644
index 0000000..0671ee4
--- /dev/null
+++ b/static/css/smitespam.css
@@ -0,0 +1,69 @@
+#smitespam-page-list * {
+ box-sizing: border-box;
+}
+
+.card {
+ border: 1px solid #ccc;
+ margin: .2em;
+ background-color: #f5f5f5;
+}
+
+.card-info-section {
+ padding: .5em;
+ font-size: .9em;
+ width: 20%;
+ float: left;
+}
+
+.info-tag {
+ background-color: #ccc;
+ border-radius: 5px;
+ padding: .4em;
+ display: inline-block;
+ margin: .2em;
+}
+
+.info-tag.red {
+ background-color: red;
+ color: white;
+}
+
+.info-tag.orange {
+ background-color: darkorange;
+ color: white;
+}
+
+.info-tag.green {
+ background-color: green;
+ color: white;
+}
+
+.info-tag.transparent {
+ background-color: transparent;
+ color: #000;
+ padding-left: 0;
+}
+
+.card-data-section {
+ background-color: #fff;
+ padding: 0 1em;
+ width: 80%;
+ float: left;
+}
+
+.user-group {
+ margin-bottom: 4em;
+}
+
+.row:before, .row:after {
+ content: ' ';
+ display: table;
+}
+
+.row:after {
+ clear: both;
+}
+
+.creator-card {
+ text-align: center;
+}
diff --git a/static/js/ext.smitespam.js b/static/js/ext.smitespam.js
index 61f766a..8751c34 100644
--- a/static/js/ext.smitespam.js
+++ b/static/js/ext.smitespam.js
@@ -72,7 +72,7 @@
processResponse: function ( data ) {
var pageID = pagesToDelete[pagesToDeleteIndex];
var pageTitleText =
pagesToDeleteTitleTexts[pagesToDeleteIndex];
- var row = $( '#result-row-page-' + pageID );
+ var row = $( '#result-card-page-' + pageID );
if ( 'delete' in data ) {
for ( var i = 0; i < results.length; i++ ) {
// force both to string
@@ -127,7 +127,7 @@
var username = usersToBlock[usersToBlockIndex];
if ( 'block' in data ) {
users[username].blocked = true;
- $( '#smitespam-page-list th
.block-checkbox-container' ).each( function () {
+ $( '#smitespam-page-list .creator-card
.block-checkbox-container' ).each( function () {
var $this = $( this );
if ( $this.parent().data( 'username' )
=== username ) {
$this.empty();
@@ -142,7 +142,7 @@
$( '#ajax-successbox' ).append( '<p>User "' +
username + '" blocked.</p>' );
} else if ( 'error' in data ) {
usersFailedToBlock.push( username );
- $( '#smitespam-page-list
.block-checkbox-container' ).each( function () {
+ $( '#smitespam-page-list .creator-card
.block-checkbox-container' ).each( function () {
var $this = $( this );
if ( $this.parent().data( 'username' )
=== username ) {
$this.empty();
@@ -212,11 +212,8 @@
if ( this.checked ) {
pagesToDelete.push( id );
var titleText = $( this )
- .parent() // td
- .parent() // tr
- .find( 'td' )
- .eq( 0 ) // first cell
- .find( 'a' )
+ .closest( '.card' )
+ .find( '.smitespam-page-title a' )
.text();
pagesToDeleteTitleTexts.push( titleText );
} else {
@@ -228,16 +225,16 @@
function onBlockCheckboxChange() {
var username = $( this ).val();
- var headingsRow = $( this ).closest( 'tr' ).next();
- var $checkboxes = headingsRow.nextUntil(
':not(.result-row)' )
+ var $userCard = $( this ).closest( '.creator-card'
).next();
+ var $checkboxes = $userCard.nextUntil( ':not(.card)' )
.find( 'input[type=checkbox]' );
if ( this.checked ) {
usersToBlock.push( username );
- $checkboxes.prop( 'checked', true );
+ $checkboxes.prop( 'checked', true ).change();
} else {
var index = $.inArray( username, usersToBlock );
usersToBlock.splice( index, 1 );
- $checkboxes.prop( 'checked', false );
+ $checkboxes.prop( 'checked', false ).change();
}
}
@@ -273,17 +270,20 @@
for ( i = 0; i < groupedPages.length; i++ ) {
var group = groupedPages[i].pages;
var groupCreator = groupedPages[i].creator;
- var $creatorCell = $( '<th>' ).attr( 'colspan', 5 )
+ var $userGroup = $( '<div>' ).addClass( 'user-group' );
+ $userGroup.append( '<hr>' );
+ var $creatorCard = $( '<div>' )
+ .addClass( 'creator-card' )
.html( mw.msg( 'smitespam-created-by' ) + ' ' +
( users[groupCreator] ?
users[groupCreator].link : groupCreator ) )
.data( 'username', groupCreator );
if ( users[groupCreator] ) {
if ( users[groupCreator].blocked ) {
// TODO i18n
- $creatorCell.append( ' ·
(Blocked)' );
+ $creatorCard.append( ' ·
(Blocked)' );
} else if ( $.inArray( groupCreator,
usersFailedToBlock ) !== -1 ) {
// TODO i18n
- $creatorCell.append( ' · (Failed
to block)' );
+ $creatorCard.append( ' · (Failed
to block)' );
} else {
var $blockCheckboxContainer = $(
'<span>' ).addClass( 'block-checkbox-container' );
var $blockCheckbox = $( '<input>', {
@@ -298,7 +298,7 @@
$blockCheckboxContainer.append(
$blockCheckbox );
// TODO i18n
$blockCheckboxContainer.append( 'Block'
);
- $creatorCell.append(
$blockCheckboxContainer );
+ $creatorCard.append(
$blockCheckboxContainer );
var $trustUserButtonContainer = $(
'<span>' ).addClass( 'trust-user-button-container' );
$trustUserButtonContainer.append( '
· ' );
@@ -307,26 +307,31 @@
.on( 'click',
onTrustUserButtonClick );
$trustUserButtonContainer.append(
$trustUserButton );
- $creatorCell.append(
$trustUserButtonContainer );
+ $creatorCard.append(
$trustUserButtonContainer );
}
}
- var $creatorRow = $( '<tr>' ).append( $creatorCell );
- $( '#smitespam-page-list' ).append( $creatorRow );
- $( '#smitespam-page-list' ).append( '<tr>' +
- '<th>' + mw.msg( 'smitespam-page' ) + '</th>' +
- '<th>' + mw.msg( 'smitespam-probability' ) +
'</th>' +
- '<th>' + mw.msg( 'smitespam-preview-text' ) +
'</th>' +
- '<th>' + mw.msg( 'smitespam-delete' ) + '</th>'
+
- '</tr>' );
+ $userGroup.append( $creatorCard );
+ $userGroup.append( '<hr>' );
+ $( '#smitespam-page-list' ).append( $userGroup );
for ( var j = 0; j < group.length; j++ ) {
page = group[j];
- var $row = $( '<tr>' ).attr( 'id',
'result-row-page-' + page.id );
- $row.addClass( 'result-row' );
- $( '<td></td>' ).html( page.link ).appendTo(
$row );
- $( '<td></td>' ).text(
page['spam-probability-text'] ).appendTo( $row );
- $( '<td></td>' ).text( page.preview ).appendTo(
$row );
+ var $card = $( '<div>' ).attr( 'id',
'result-card-page-' + page.id );
+ $card.addClass( 'card' );
+ $card = $card.append( '<div>' ).addClass( 'row'
);
+ var $cardInfoSection = $( '<div>' ).addClass(
'card-info-section' )
+ .appendTo( $card );
+ var $cardDataSection = $( '<div>' ).addClass(
'card-data-section' )
+ .appendTo( $card );
+ $( '<h3>' ).addClass( 'smitespam-page-title' )
+ .html( page.link ).appendTo(
$cardDataSection );
+ $( '<p>' ).text( page.preview ).appendTo(
$cardDataSection );
+ $( '<span>' )
+ .addClass( 'info-tag' )
+ .text( page['spam-probability-text'] )
+ .appendTo( $cardInfoSection );
+ $cardInfoSection.append( '<br>' );
if ( $.inArray( page.id.toString(),
pagesFailedToDelete ) !== -1 ) {
- $( '<td></td>' ).text( mw.msg(
'smitespam-delete-page-failure-msg' ) ).appendTo( $row );
+ $( '<td></td>' ).text( mw.msg(
'smitespam-delete-page-failure-msg' ) ).appendTo( $cardInfoSection );
} else {
var $checkbox = $( '<input>', {
type: 'checkbox',
@@ -336,9 +341,11 @@
if ( $.inArray( $checkbox.val(),
pagesToDelete ) !== -1 ) {
$checkbox.attr( 'checked',
'checked' );
}
- $( '<td></td>' ).append( $checkbox
).appendTo( $row );
+ $( '<label>' ).append( $checkbox )
+ .append( 'Delete' ) // TODO:
i18n
+ .appendTo( $cardInfoSection );
}
- $( '#smitespam-page-list' ).append( $row );
+ $userGroup.append( $card );
}
}
refreshRangeDisplayer();
@@ -377,7 +384,7 @@
$( '<a>', { href: '#', id: 'smitespam-pager-next' } )
.text( mw.msg( 'table_pager_next' ) )
.on( 'click', function () {
- var jump = $( '#smitespam-page-list
.result-row' ).length;
+ var jump = $( '#smitespam-page-list
.card' ).length;
displayOffset += jump;
displayResults();
} )
@@ -388,7 +395,7 @@
function refreshRangeDisplayer() {
var fromPageIndex = displayOffset + 1;
$( '#smitespam-displayed-range-from' ).text( fromPageIndex );
- var numDisplayed = $( '.result-row' ).length;
+ var numDisplayed = $( '.card' ).length;
$( '#smitespam-displayed-range-to' ).text( fromPageIndex +
numDisplayed - 1 );
$( '#smitespam-displayed-range' ).show();
}
--
To view, visit https://gerrit.wikimedia.org/r/232267
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I89ef7bcbd9d7566a05dca3c22295dae4647c104c
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/SmiteSpam
Gerrit-Branch: master
Gerrit-Owner: Polybuildr <[email protected]>
Gerrit-Reviewer: Polybuildr <[email protected]>
Gerrit-Reviewer: Yaron Koren <[email protected]>
Gerrit-Reviewer: jan <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
