[MediaWiki-commits] [Gerrit] Use button with spinner for create collection button - change (mediawiki...Gather)
jenkins-bot has submitted this change and it was merged.
Change subject: Use button with spinner for create collection button
..
Use button with spinner for create collection button
* Use oo-ui class ButtonWithSpinner for create button
* Removes duplicate call to addCollection
* Still uses loading spinner for loading and toggling
** collections
NOTE:
Cannot be pushed to stable until T95490 is complete
bug: T93424
Change-Id: I308fea0abbff555fe3f5cebc78c72543de784500
---
M resources/Resources.php
M resources/ext.gather.watchstar/CollectionsContentOverlay.js
M resources/ext.gather.watchstar/content.hogan
3 files changed, 23 insertions(+), 12 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/Resources.php b/resources/Resources.php
index 407b006..b103deb 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -130,6 +130,8 @@
'ext.gather.collection.base',
'mobile.settings',
'ext.gather.watchstar.icons',
+ // FIXME: Cannot push to stable until buttonWithSpinner
is a view (T95490)
+ 'mobile.buttonWithSpinner',
),
'styles' => array(
'ext.gather.watchstar/contentOverlay.less',
diff --git a/resources/ext.gather.watchstar/CollectionsContentOverlay.js
b/resources/ext.gather.watchstar/CollectionsContentOverlay.js
index 44e719e..b7c22fd 100644
--- a/resources/ext.gather.watchstar/CollectionsContentOverlay.js
+++ b/resources/ext.gather.watchstar/CollectionsContentOverlay.js
@@ -7,7 +7,8 @@
user = M.require( 'user' ),
Icon = M.require( 'Icon' ),
CollectionsApi = M.require(
'ext.gather.watchstar/CollectionsApi' ),
- CollectionsContentOverlayBase = M.require(
'ext.gather.collection.base/CollectionsContentOverlayBase' );
+ CollectionsContentOverlayBase = M.require(
'ext.gather.collection.base/CollectionsContentOverlayBase' ),
+ ButtonWithSpinner = M.require( 'ButtonWithSpinner' );
/**
* A clickable watchstar for managing collections
@@ -52,7 +53,6 @@
} ).toHtmlString(),
title: mw.config.get( 'wgTitle' ),
spinner: icons.spinner().toHtmlString(),
- createButtonLabel: mw.msg(
'gather-create-new-button-label' ),
placeholder: mw.msg( 'gather-add-new-placeholder' ),
subheadingNewCollection: mw.msg( 'gather-add-to-new' ),
subheading: mw.msg( 'gather-add-to-existing' ),
@@ -87,6 +87,20 @@
},
/** @inheritdoc */
postRender: function () {
+ var $form = this.$( 'form' );
+
+ this.createButton = new ButtonWithSpinner( {
+ label: mw.msg( 'gather-create-new-button-label'
),
+ flags: ['primary', 'constructive']
+ } );
+ this.createButton.setDisabled( true );
+ // Binding here as widgets are not views and are
created after events map runs
+ this.createButton.on( 'click', function () {
+ $form.submit();
+ } );
+
+ $form.append( this.createButton.$element );
+ // Hide base overlay's spinner
this.hideSpinner();
},
/**
@@ -168,9 +182,8 @@
*/
onInput: function ( ev ) {
var $input = $( ev.target ),
- val = $input.val(),
- $button = $input.next( 'button' );
- $button.prop( 'disabled', val === '' );
+ val = $input.val();
+ this.createButton.setDisabled( val === '' );
},
/**
* Event handler for setting up a new collection
@@ -182,13 +195,10 @@
ev.preventDefault();
if ( this.isTitleValid( title ) ) {
- this.showSpinner();
this.addCollection( title, page );
schema.log( {
eventName: 'new-collection'
} );
-
- this.addCollection( title, page );
} else {
toast.show( mw.msg(
'gather-add-title-invalid-toast' ), 'toast error' );
}
@@ -305,7 +315,7 @@
var self = this,
[MediaWiki-commits] [Gerrit] Use button with spinner for create collection button - change (mediawiki...Gather)
Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/202923
Change subject: Use button with spinner for create collection button
..
Use button with spinner for create collection button
Uses oo-ui button styles for constructive
bug: T93424
Change-Id: I308fea0abbff555fe3f5cebc78c72543de784500
---
M resources/Resources.php
M resources/ext.gather.watchstar/CollectionsContentOverlay.js
M resources/ext.gather.watchstar/content.hogan
3 files changed, 22 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather
refs/changes/23/202923/1
diff --git a/resources/Resources.php b/resources/Resources.php
index 85e9d27..1263066 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -123,6 +123,7 @@
'ext.gather.collection.base',
'mobile.settings',
'ext.gather.watchstar.icons',
+ 'mobile.buttonWithSpinner',
),
'styles' => array(
'ext.gather.watchstar/contentOverlay.less',
diff --git a/resources/ext.gather.watchstar/CollectionsContentOverlay.js
b/resources/ext.gather.watchstar/CollectionsContentOverlay.js
index 44e719e..eab8271 100644
--- a/resources/ext.gather.watchstar/CollectionsContentOverlay.js
+++ b/resources/ext.gather.watchstar/CollectionsContentOverlay.js
@@ -7,7 +7,8 @@
user = M.require( 'user' ),
Icon = M.require( 'Icon' ),
CollectionsApi = M.require(
'ext.gather.watchstar/CollectionsApi' ),
- CollectionsContentOverlayBase = M.require(
'ext.gather.collection.base/CollectionsContentOverlayBase' );
+ CollectionsContentOverlayBase = M.require(
'ext.gather.collection.base/CollectionsContentOverlayBase' ),
+ ButtonWithSpinner = M.require( 'ButtonWithSpinner' );
/**
* A clickable watchstar for managing collections
@@ -52,7 +53,6 @@
} ).toHtmlString(),
title: mw.config.get( 'wgTitle' ),
spinner: icons.spinner().toHtmlString(),
- createButtonLabel: mw.msg(
'gather-create-new-button-label' ),
placeholder: mw.msg( 'gather-add-new-placeholder' ),
subheadingNewCollection: mw.msg( 'gather-add-to-new' ),
subheading: mw.msg( 'gather-add-to-existing' ),
@@ -87,6 +87,19 @@
},
/** @inheritdoc */
postRender: function () {
+ var $form = this.$( 'form' );
+
+ this.createButton = new ButtonWithSpinner( {
+ label: mw.msg( 'gather-create-new-button-label'
),
+ flags: 'constructive'
+ } );
+ this.createButton.setDisabled( true );
+ this.createButton.on( 'click', function () {
+ $form.submit();
+ } );
+
+ $form.append( this.createButton.$element );
+ // Hide base overlay's spinner
this.hideSpinner();
},
/**
@@ -168,9 +181,8 @@
*/
onInput: function ( ev ) {
var $input = $( ev.target ),
- val = $input.val(),
- $button = $input.next( 'button' );
- $button.prop( 'disabled', val === '' );
+ val = $input.val();
+ this.createButton.setDisabled( val === '' );
},
/**
* Event handler for setting up a new collection
@@ -182,13 +194,10 @@
ev.preventDefault();
if ( this.isTitleValid( title ) ) {
- this.showSpinner();
this.addCollection( title, page );
schema.log( {
eventName: 'new-collection'
} );
-
- this.addCollection( title, page );
} else {
toast.show( mw.msg(
'gather-add-title-invalid-toast' ), 'toast error' );
}
@@ -292,7 +301,7 @@
schema.log( {
eventName: 'add-collection-error'
} );
- self.hideSpinner();
+ self.createButton.hideSpinner();
toast.show( mw.msg(
'gather-add-to-collection-failed-toast' ), 'toast error' );
} );
