MSyed has submitted this change and it was merged.
Change subject: Change WikiGrok tags elements to buttons
......................................................................
Change WikiGrok tags elements to buttons
- Chang WikiGrok tag elements from checkboxes to buttons
-- Progressive when selected
- Adjust space between tags
- Reduced spacing between labels
- Vertical alignment to top on first label for even padding inside tag
- Remove colons from property name
- Limit to 4 results
Change-Id: Ic5acf4e5cbe1acb136126cea0186625463fe00a8
---
M includes/Resources.php
M javascripts/modules/wikigrok/WikiGrokDialogB.js
M less/modules/wikigrok/WikiGrokDialog.less
D less/modules/wikigrok/checkboxButton.less
A less/modules/wikigrok/tagButton.less
M templates/modules/wikigrok/WikiGrokDialogB.hogan
6 files changed, 59 insertions(+), 84 deletions(-)
Approvals:
Jdlrobson: Looks good to me, but someone else must approve
MSyed: Verified; Looks good to me, approved
diff --git a/includes/Resources.php b/includes/Resources.php
index bf4ac15..ddaf5c9 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -908,7 +908,7 @@
'mediawiki.ui.checkbox',
),
'styles' => array(
- 'less/modules/wikigrok/checkboxButton.less',
+ 'less/modules/wikigrok/tagButton.less',
),
'templates' => array(
'modules/wikigrok/WikiGrokDialogB.hogan',
diff --git a/javascripts/modules/wikigrok/WikiGrokDialogB.js
b/javascripts/modules/wikigrok/WikiGrokDialogB.js
index a1eedba..50e8f58 100644
--- a/javascripts/modules/wikigrok/WikiGrokDialogB.js
+++ b/javascripts/modules/wikigrok/WikiGrokDialogB.js
@@ -41,10 +41,10 @@
// Maps item ids to a key in i18n file
lookupProp = {},
i18n = {
- dob: 'Born on:',
- dod: 'Died on:',
- nationalities: 'Home country:',
- occupations: 'Profession:'
+ dob: 'Born on',
+ dod: 'Died on',
+ nationalities: 'Home country',
+ occupations: 'Profession'
};
$.each( suggestions, function ( type, data ) {
@@ -68,38 +68,41 @@
if ( suggestionsList.length ) {
self.apiWikiData.getLabels( suggestionsList
).done( function ( labels ) {
$.each( labels, function ( itemId,
label ) {
- var btnLabel, $chk,
+ var btnLabel, $tag,
prop =
lookupProp[itemId],
- id = 'chk-' + itemId;
+ id = 'tag-' + itemId;
- $chk = $( '<div
class="ui-checkbox-button mw-ui-button">' ).
+ $tag = $( '<div
class="ui-tag-button mw-ui-button">' ).
on( 'click', function
() {
- var $chkBox =
$( this ).find( 'input' );
- $chkBox.prop(
'checked', !$chkBox.prop( 'checked' ) );
+ $( this
).toggleClass( 'mw-ui-progressive' );
+ // Update save
button
setTimeout(
function () {
-
self.$save.prop( 'disabled', self.$( '.initial-pane input:checked' ).length ===
0 );
+
self.$save.prop( 'disabled', self.$( '.initial-pane .mw-ui-progressive'
).length === 0 );
}, 100 );
} ).appendTo( self.$(
'.wg-buttons' ) );
// FIXME: Use a template for
this magic.
- $( '<input type="checkbox">' ).
- attr( 'id', id ).
+ $tag.attr( 'id', id ).
data( 'propName',
prop.name ).
data( 'propId', prop.id
).
data( 'itemId', itemId
).
- data( 'readable', label
).
- appendTo( $chk );
+ data( 'readable', label
);
$( '<label>' ).
- text( i18n[prop.type]
).appendTo( $chk );
+ text( i18n[prop.type]
).appendTo( $tag );
$( '<label>' ).
text( label ).
- html( btnLabel
).appendTo( $chk );
+ html( btnLabel
).appendTo( $tag );
+
+ // Limit to 4 results by
breaking out of .each
+ if ( self.$( '.initial-pane
.ui-tag-button' ).length === 4 ) {
+ return false;
+ }
} );
- // only show the panel when we have
created at least one checkbox button
- if ( self.$( '.ui-checkbox-button'
).length ) {
+ // only show the panel when we have
created at least one button
+ if ( self.$( '.ui-tag-button' ).length
) {
self.$( '.spinner' ).hide();
self.show();
}
@@ -122,7 +125,7 @@
} );
this.$save.on( 'click', function () {
var answers = [];
- self.$( '.ui-checkbox-button input:checked'
).hide().each( function () {
+ self.$( '.initial-pane .mw-ui-progressive'
).hide().each( function () {
answers.push( {
correct: true,
prop: $( this ).data(
'propName' ),
diff --git a/less/modules/wikigrok/WikiGrokDialog.less
b/less/modules/wikigrok/WikiGrokDialog.less
index 1d454d4..b11a91b 100644
--- a/less/modules/wikigrok/WikiGrokDialog.less
+++ b/less/modules/wikigrok/WikiGrokDialog.less
@@ -51,7 +51,7 @@
.wg-buttons {
margin-bottom: .6em;
- text-align: center;
+ text-align: left;
// For enwiki prototype only
.cancel,
diff --git a/less/modules/wikigrok/checkboxButton.less
b/less/modules/wikigrok/checkboxButton.less
deleted file mode 100644
index def0315..0000000
--- a/less/modules/wikigrok/checkboxButton.less
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "minerva.mixins";
-@import "minerva.variables";
-
-.ui-checkbox-button-group {
- .ui-checkbox-button {
- margin: 0 .3em .3em 0
- }
-}
-
-.ui-checkbox-button {
- position: relative;
- padding-left: 2em;
- text-align: left;
-
- input {
- position: absolute;
- left: .3em;
- top: 0;
- bottom: 0;
- height: 100%;
- visibility: hidden;
- }
-
- // the pseudo before element of the label after the checkbox now looks
like a checkbox
- input + label {
- text-transform: none;
- font-weight: normal;
- font-size: 0.8em;
-
- &::before {
- content: '';
- width: 2em;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- display: inline-block;
- .background-image-svg-quick('images/unchecked');
- .background-size( 1em, auto );
- background-repeat: no-repeat;
- background-position: center center;
- }
- }
-
- // when the input is checked, style the label pseudo before element
that followed as a checked checkbox
- input:checked + label {
- &::before {
- background-color: @colorProgressive;
- .background-image-svg-quick('images/checked');
- }
- }
-
- label {
- text-transform: capitalize;
- margin-left: .3em;
- display: block;
- }
-
- strong {
- display: block;
- }
-}
\ No newline at end of file
diff --git a/less/modules/wikigrok/tagButton.less
b/less/modules/wikigrok/tagButton.less
new file mode 100644
index 0000000..87c9c31
--- /dev/null
+++ b/less/modules/wikigrok/tagButton.less
@@ -0,0 +1,34 @@
+@import "minerva.mixins";
+@import "minerva.variables";
+
+.ui-tag-button-group {
+ .ui-tag-button {
+ margin: 0 .25em .25em 0;
+ line-height: 1.2em;
+ }
+}
+
+.ui-tag-button {
+ position: relative;
+ text-align: left;
+
+ label: {
+ line-height: 0.8em;
+ }
+
+ label:first-child {
+ vertical-align: top;
+ text-transform: none;
+ font-weight: normal;
+ font-size: 0.8em;
+ }
+
+ label:last-child {
+ text-transform: capitalize;
+ display: block;
+ }
+
+ strong {
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/templates/modules/wikigrok/WikiGrokDialogB.hogan
b/templates/modules/wikigrok/WikiGrokDialogB.hogan
index 9267177..762c764 100644
--- a/templates/modules/wikigrok/WikiGrokDialogB.hogan
+++ b/templates/modules/wikigrok/WikiGrokDialogB.hogan
@@ -1,7 +1,7 @@
<!-- note English language only! -->
<div class="initial-pane content">
<p class="wg-content">{{contentMsg}}</p>
- <p class="wg-buttons ui-checkbox-button-group"></p>
+ <p class="wg-buttons ui-tag-button-group"></p>
</div>
<div class="initial-pane footer">
<span class="license">All submissions are <a
href="#/wikigrok/about">released freely</a>.</span>
--
To view, visit https://gerrit.wikimedia.org/r/169776
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic5acf4e5cbe1acb136126cea0186625463fe00a8
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: MSyed <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
