jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/379232 )
Change subject: Use OOUI button widgets on CX dashboard
......................................................................
Use OOUI button widgets on CX dashboard
- Use OOUI for 'Start translation' button.
- Use OOUI for 'Discard translation' dialog.
Change-Id: I8cc92ddcc7207af18bf2fe4194297e26361668ba
---
M modules/dashboard/ext.cx.translationlist.js
M modules/dashboard/styles/ext.cx.translationlist.less
M modules/source/ext.cx.source.selector.js
3 files changed, 43 insertions(+), 41 deletions(-)
Approvals:
jenkins-bot: Verified
Santhosh: Looks good to me, approved
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index ef515e0..9fc87be 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -526,15 +526,18 @@
} else {
this.$confirmationDialog = $( '<div>' )
.addClass( 'cx-draft-discard-dialog' );
- $cancelButton = $( '<button>' )
- .addClass( 'mw-ui-button mw-ui-quiet
cx-draft-discard-dialog__cancel' )
- .text( mw.msg( 'cx-draft-cancel-button-label' )
);
- $discardButton = $( '<button>' )
- .addClass( 'mw-ui-button mw-ui-destructive
cx-draft-discard-dialog__discard' )
- .text( mw.msg( 'cx-draft-discard-button-label'
) );
+ $cancelButton = new OO.ui.ButtonWidget( {
+ classes: [ 'cx-draft-discard-dialog__cancel' ],
+ label: mw.msg( 'cx-draft-cancel-button-label' )
+ } ).$element;
+ $discardButton = new OO.ui.ButtonWidget( {
+ classes: [ 'cx-draft-discard-dialog__discard' ],
+ flags: [ 'primary', 'destructive' ],
+ label: mw.msg( 'cx-draft-discard-button-label' )
+ } ).$element;
$actions = $( '<div>' )
.addClass( 'cx-draft-discard-dialog__actions' )
- .append( $discardButton, $cancelButton );
+ .append( $cancelButton, $discardButton );
$message = $( '<div>' )
.addClass( 'cx-draft-discard-dialog__message' )
.text( mw.msg(
'cx-draft-discard-confirmation-message' ) );
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index b872a73..ecf6cf3 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -186,19 +186,22 @@
.cx-draft-discard-dialog {
.mw-ui-item;
- color: #222;
+ background-color: #fff;
+ color: @colorGray2;
+
position: fixed;
- min-width: 500px;
+ top: 50%;
+ left: 50%;
+ .transform( translate( -50%, -50% ) );
+ z-index: 1000;
+
+ min-width: 400px;
max-width: 600px;
- background: #fff;
- border: 1px solid #c8ccd1;
+ border: 1px solid @colorGray12;
border-bottom-width: 3px;
border-radius: @borderRadius;
padding: 0;
- top: 30%;
- left: 30%;
- box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
- z-index: 1000;
+ .box-shadow( 0 5px 10px rgba( 0, 0, 0, 0.2 ) );
&__message {
padding: 25px;
@@ -209,11 +212,7 @@
.mw-ui-one-whole;
padding: 20px;
-
- button {
- float: right;
- padding-right: 20px;
- }
+ text-align: right;
}
}
diff --git a/modules/source/ext.cx.source.selector.js
b/modules/source/ext.cx.source.selector.js
index 3ebea70..beb0458 100644
--- a/modules/source/ext.cx.source.selector.js
+++ b/modules/source/ext.cx.source.selector.js
@@ -54,7 +54,7 @@
this.$messageBar = null;
this.$targetTitleInput = null;
this.overlay = null;
- this.$translateFromButton = null;
+ this.translateFromButton = null;
this.narrowLimit = 700;
this.isNarrowScreenSize = false;
this.validator = new mw.cx.ContentTranslationValidator(
this.siteMapper );
@@ -392,7 +392,7 @@
this.$trigger.click( this.show.bind( this ) );
this.sourcePageSelector.on( 'change', function () {
- self.$translateFromButton.prop( 'disabled', false );
+ self.translateFromButton.setDisabled( false );
// Hide any previous errors.
self.$messageBar.hide();
} );
@@ -505,7 +505,7 @@
// We do not want to show "title does not exist" for empty input
if ( sourceTitle === '' ) {
- this.$translateFromButton.prop( 'disabled', true );
+ this.translateFromButton.setDisabled( true );
return;
}
@@ -514,7 +514,7 @@
this.validator.isTitleExistInLanguage( sourceLanguage,
sourceTitle ).then( function ( sourceTitle ) {
var titleCheck, translationCheck;
- selector.$translateFromButton.prop( 'disabled',
!sourceTitle );
+ selector.translateFromButton.setDisabled( !sourceTitle
);
if ( sourceTitle === false ) {
selector.showSourceTitleError( sourceLanguage );
@@ -749,7 +749,7 @@
this.sourcePageSelector.setValue( '' );
this.$targetTitleInput.val( '' );
- this.$translateFromButton.prop( 'disabled', true );
+ this.translateFromButton.setDisabled( true );
this.$messageBar.hide();
// Only dialog version of CXSourceSelector has cancel button
@@ -1055,6 +1055,7 @@
$targetTitleInputContainer,
$targetInputs,
$messageText,
+ cancelButton,
translateButtonLabel,
$actions, $license,
cxSourceSelector = this;
@@ -1155,17 +1156,16 @@
.append( $messageText )
.hide();
- this.$cancelButton = $( '<button>' )
- .addClass( 'mw-ui-button mw-ui-quiet
cx-sourceselector-dialog__button-cancel' )
- .text( mw.msg( 'cx-sourceselector-dialog-button-cancel'
) )
- .click( this.cancel.bind( this ) );
+ cancelButton = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'cx-sourceselector-dialog-button-cancel'
)
+ } ).on( 'click', this.cancel.bind( this ) );
translateButtonLabel = mw.msg(
'cx-sourceselector-dialog-button-start-translation' );
- this.$translateFromButton = $( '<button>' )
- .addClass( 'mw-ui-button mw-ui-progressive
cx-sourceselector-dialog__button-translate' )
- .text( translateButtonLabel )
- .prop( 'disabled', true )
- .click( this.startPageInCX.bind( this ) );
+ this.translateFromButton = new OO.ui.ButtonWidget( {
+ flags: [ 'primary', 'progressive' ],
+ label: translateButtonLabel,
+ disabled: true
+ } ).on( 'click', this.startPageInCX.bind( this ) );
$license = $( '<div>' )
.addClass( 'cx-sourceselector__license' )
@@ -1174,7 +1174,7 @@
$actions = $( '<div>' )
.addClass( 'cx-sourceselector__actions' );
- $actions.append( this.$cancelButton, this.$translateFromButton
);
+ $actions.append( cancelButton.$element,
this.translateFromButton.$element );
this.$container.append( $heading,
this.$sourceInputs,
@@ -1288,11 +1288,11 @@
.hide();
translateButtonLabel = mw.msg(
'cx-sourceselector-dialog-button-start-translation' );
- this.$translateFromButton = $( '<button>' )
- .addClass( 'mw-ui-button mw-ui-progressive
cx-sourceselector-dialog__button-translate' )
- .text( translateButtonLabel )
- .prop( 'disabled', true )
- .click( this.startPageInCX.bind( this ) );
+ this.translateFromButton = new OO.ui.ButtonWidget( {
+ flags: [ 'primary', 'progressive' ],
+ label: translateButtonLabel,
+ disabled: true
+ } ).on( 'click', this.startPageInCX.bind( this ) );
$license = $( '<div>' )
.addClass( 'cx-sourceselector__license' )
@@ -1300,7 +1300,7 @@
$actions = $( '<div>' )
.addClass( 'cx-sourceselector__actions' )
- .append( this.$translateFromButton );
+ .append( this.translateFromButton.$element );
this.$container.append( this.$sourceInputs,
this.$selectedItem,
--
To view, visit https://gerrit.wikimedia.org/r/379232
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8cc92ddcc7207af18bf2fe4194297e26361668ba
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Petar.petkovic <ppetko...@wikimedia.org>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
