Legoktm has submitted this change and it was merged.
Change subject: Change form styling and add animations
......................................................................
Change form styling and add animations
Change-Id: I1db8e0e82d406f744e0d5829a5cb091ee4a3c104
---
M UrlShortener.php
M i18n/en.json
M i18n/qqq.json
M js/ext.urlShortener.special.js
M less/ext.urlShortener.special.less
5 files changed, 27 insertions(+), 7 deletions(-)
Approvals:
Legoktm: Verified; Looks good to me, approved
diff --git a/UrlShortener.php b/UrlShortener.php
index 7c614ad..44e0ef9 100644
--- a/UrlShortener.php
+++ b/UrlShortener.php
@@ -111,6 +111,8 @@
'messages' => array(
'urlshortener-error-malformed-url',
'urlshortener-error-disallowed-url',
+ 'urlshortener-url-input-submit',
+ 'urlshortener-url-input-submitting',
),
'localBasePath' => __DIR__,
'remoteExtPath' => 'UrlShortener',
diff --git a/i18n/en.json b/i18n/en.json
index aa0e199..b0826be 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -8,6 +8,7 @@
"urlshortener-desc": "URL shortener for arbitrary URLs",
"urlshortener-url-input-label": "URL",
"urlshortener-url-input-submit": "Shorten",
+ "urlshortener-url-input-submitting": "Shortening…",
"urlshortener-not-found-title": "Short URL not found",
"urlshortener-not-found-message": "Sorry, the URL you are looking for
has not been found.",
"urlshortener-form-header": "Paste your long URL here",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 16b618a..60f8910 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -9,6 +9,7 @@
"urlshortener-desc": "{{desc|name=Url
Shortener|url=https://mediawiki.org/wiki/Extension:UrlShortener}}";,
"urlshortener-url-input-label": "Label for the box the user inputs the
URL to shorten.\n{{Identical|URL}}",
"urlshortener-url-input-submit": "Label for the submit button that
shortens the URL",
+ "urlshortener-url-input-submitting": "Label for the submit button while
the user waits for the result",
"urlshortener-not-found-title": "Title for page shown when user tries
to access a short url that does not exist\n\nThe body for this title is:\n*
{{msg-mw|Urlshortener-not-found-message}}",
"urlshortener-not-found-message": "Message for page shown when user
tries to access a short url that does not exist.\n\nThe page title for this
message is {{msg-mw|Urlshortener-not-found-title}}.",
"urlshortener-form-header": "Message shown above the form where the
user can paste a URL to be shortened",
diff --git a/js/ext.urlShortener.special.js b/js/ext.urlShortener.special.js
index 4bd3346..1c70b05 100644
--- a/js/ext.urlShortener.special.js
+++ b/js/ext.urlShortener.special.js
@@ -25,17 +25,20 @@
* Event Handler for the 'shorten' button
*/
UrlShortener.prototype.onSubmit = function () {
- $( '#mwe-urlshortener-form-error' ).hide();
+ $( "#mwe-urlshortener-form-footer" ).hide( 'blind' );
+ $( '#mwe-urlshortener-url-submit' ).val( mw.message(
'urlshortener-url-input-submitting' ).text() );
this.shortenUrl(
this.getLongUrl()
).done( function ( shorturl ) {
- $( "#mwe-urlshortener-form-footer" ).show();
+ $( '#mwe-urlshortener-url-submit' ).val(
mw.message( 'urlshortener-url-input-submit' ).text() );
+ $( "#mwe-urlshortener-form-footer" ).show(
'blind' );
// The selectElement() call makes the text
selected, so the user can just ctrl-C it
$( '#mwe-urlshortener-url-input' )
.attr( 'title', '' )
.attr( 'original-title', '' );
selectElement( $(
"#mwe-urlshortener-shorturl-display" ).text( shorturl )[0] );
} ).fail( function ( err ) {
+ $( '#mwe-urlshortener-url-submit' ).val(
mw.message( 'urlshortener-url-input-submit' ).text() );
$( '#mwe-urlshortener-form-footer' ).hide();
$( '#mwe-urlshortener-url-input' )
.attr( 'title', err.info )
diff --git a/less/ext.urlShortener.special.less
b/less/ext.urlShortener.special.less
index b544958..529fbfb 100644
--- a/less/ext.urlShortener.special.less
+++ b/less/ext.urlShortener.special.less
@@ -1,5 +1,13 @@
@import "../../../resources/src/mediawiki.ui/mixins/forms";
+#firstHeading, #mwe-urlshortener-shortened-url-label {
+ font: 16px sans-serif !important;
+ font-weight: bold !important;
+ color: #444;
+ border: none;
+ margin-bottom: 0;
+}
+
#mwe-urlshortener-url-textbox {
.agora-field-styling();
font-size: 1em;
@@ -9,25 +17,30 @@
#mwe-urlshortener-form-header {
display: block;
- font-weight: bold;
- margin-left: 2px;
+ font: 14px sans-serif;
margin-bottom: 8px;
}
#mwe-urlshortener-url-input {
.agora-field-styling();
- font-size: 1em;
+ font-size: 1.2em;
+ border-radius: 2px;
line-height: 1.4em;
}
#mwe-urlshortener-form-footer {
display: none;
margin-top: 1em;
- padding: 0.5em;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-bototm: 3px solid #e1e1e1;
+ background: #eee;
+ width: 430px;
+ box-radius: 2px;
}
#mwe-urlshortener-shorturl-display {
- font-size: 1.2em;
+ font: 1.5em monospace;
line-height: 1.6em;
}
--
To view, visit https://gerrit.wikimedia.org/r/141628
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1db8e0e82d406f744e0d5829a5cb091ee4a3c104
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/UrlShortener
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Legoktm <legoktm.wikipe...@gmail.com>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Yuvipanda <yuvipa...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
