r98944 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r98943‎ \| r98944 \| r98945 >
Date:	22:35, 4 October 2011
Author:	krinkle
Status:	ok
Tags:
Comment:	[RL2] Revise gadget-id input visual * Only use an inside-input-field icon for states 'available' and 'loading'. * In other cases, put an error message underneath (this also allows better centering of the whole thing) * Consider 'id already taken' an error message instead of some exceptional case. Wiping 'mw-gadgetmanager-id-taken' class from existence. * Using or own loading class instead of the ad-hoc steal from ui-autocomplete-loading. * Moving the gadget id out of the fieldset area for gadget settings and module properties, this is above all that. * Instead of not showing the gadget-id area or making it 'locked' with an icon. Instead turning it (at least visually) into raw text. New icons: - Both in the public domain by the Tango project, from Wikimedia Commons * input-ok.png: https://commons.wikimedia.org/wiki/File:Dialog-apply.svg * input-error.png: https://commons.wikimedia.org/wiki/File:Dialog-error.svg
Modified paths:	/branches/RL2/extensions/Gadgets/modules/ext.gadgets.gadgetmanager.css (modified) (history) /branches/RL2/extensions/Gadgets/modules/ext.gadgets.gadgetmanager.js (modified) (history) /branches/RL2/extensions/Gadgets/modules/images/input-error.png (added) (history) /branches/RL2/extensions/Gadgets/modules/images/input-loading.gif (added) (history) /branches/RL2/extensions/Gadgets/modules/images/input-ok.png (added) (history)

Diff [purge]

Index: branches/RL2/extensions/Gadgets/modules/images/input-error.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: branches/RL2/extensions/Gadgets/modules/images/input-error.png
___________________________________________________________________
Added: svn:mime-type
1	1	+ application/octet-stream
Index: branches/RL2/extensions/Gadgets/modules/images/input-ok.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: branches/RL2/extensions/Gadgets/modules/images/input-ok.png
___________________________________________________________________
Added: svn:mime-type
2	2	+ application/octet-stream
Index: branches/RL2/extensions/Gadgets/modules/images/input-loading.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: branches/RL2/extensions/Gadgets/modules/images/input-loading.gif
___________________________________________________________________
Added: svn:mime-type
3	3	+ application/octet-stream
Index: branches/RL2/extensions/Gadgets/modules/ext.gadgets.gadgetmanager.css
—	—	@@ -27,36 +27,39 @@
28	28
29	29	.mw-gadgetmanager-id-wrapper {
30	30	width: 100%;
31		~~- margin-bottom: 12px;~~
	31	+ margin: 10px 0;
32	32	}
33	33
34	34	.mw-gadgetmanager-id-wrapper label {
35		~~- margin-left: 20%;~~
36	35	display: inline-block;
	36	+ width: 30%;
	37	+ text-align: right;
37	38	}
38	39
39	40	.mw-gadgetmanager-id {
40	41	margin: 0 5px 0 0;
41		~~- padding: 3px;~~
	42	+ padding: 3px 21px 3px 3px;
42	43	border: 1px solid grey;
43	44	background-color: white;
44	45	}
45	46
46	47	.mw-gadgetmanager-id-available {
47		~~- background-color: #E5F6E5;~~
	48	+ /* @embed */
	49	+ background: #E5F6E5 url(images/input-ok.png) 98% 50% no-repeat;
48	50	}
49	51
50		~~-.mw-gadgetmanager-id-invalid {~~
	52	+.mw-gadgetmanager-id-error {
51	53	background-color: #F6E5E5;
52	54	}
53	55
54		~~-.mw-gadgetmanager-id-taken {~~
55		~~- background-color: #E5EFF6;~~
	56	+.mw-gadgetmanager-id.disabled {
	57	+ background-color: transparent;
	58	+ border-color: transparent;
56	59	}
57	60
58		~~-.mw-gadgetmanager-id.disabled {~~
59		~~- background-color: #F6F6F6;~~
60		~~- border-color: lightgrey;~~
	61	+.mw-gadgetmanager-id.loading {
	62	+ /* @embed */
	63	+ background: url(images/input-loading.gif) 98% 50% no-repeat;
61	64	}
62	65
63	66	.mw-gadgetmanager-id input {
—	—	@@ -69,10 +72,14 @@
70	73	background: transparent;
71	74	}
72	75
73		~~-.mw-gadgetmanager-id-error {~~
	76	+.mw-gadgetmanager-id-errorbox {
74	77	display: none;
75		~~- color: #FF4040;~~
76		~~- font-style: italic;~~
	78	+ line-height: 24px;
	79	+ margin: 1em 1em 0.5em 30%;
	80	+ padding: 0 0 0 35px;
	81	+ /* @embed */
	82	+ background: url(images/input-error.png) 1% 50% no-repeat;
	83	+ font-weight: bold;
77	84	}
78	85
79	86	/**
Index: branches/RL2/extensions/Gadgets/modules/ext.gadgets.gadgetmanager.js
—	—	@@ -17,12 +17,12 @@
18	18	*/
19	19	tpl = {
20	20	fancyForm: '<form class="mw-gadgetmanager-form">\
	21	+ <div class="mw-gadgetmanager-id-wrapper">\
	22	+ <label for="mw-gadgetmanager-input-id"><html:msg key="gadgetmanager-prop-id" /><html:msg key="colon-separator" /></label>\
	23	+ <span class="mw-gadgetmanager-id"><input type="text" id="mw-gadgetmanager-input-id" /></span>\
	24	+ <div class="mw-gadgetmanager-id-errorbox"></div>\
	25	+ </div>\
21	26	<fieldset>\
22		~~- <div class="mw-gadgetmanager-id-wrapper">\~~
23		~~- <label for="mw-gadgetmanager-input-id"><html:msg key="gadgetmanager-prop-id" /><html:msg key="colon-separator" /></label>\~~
24		~~- <span class="mw-gadgetmanager-id"><input type="text" id="mw-gadgetmanager-input-id" /></span>\~~
25		~~- <span class="mw-gadgetmanager-id-error"></span>\~~
26		~~- </div>\~~
27	27	<legend><html:msg key="gadgetmanager-propsgroup-module" /></legend>\
28	28	<table>\
29	29	<tr>\
—	—	@@ -348,7 +348,7 @@
349	349	metadata = gadget.metadata,
350	350	$form = $( tpl.fancyForm ).localize(),
351	351	$idSpan = $form.find( '.mw-gadgetmanager-id' ),
352		~~- $idErrMsg = $form.find( '.mw-gadgetmanager-id-error' );~~
	352	+ $idErrMsg = $form.find( '.mw-gadgetmanager-id-errorbox' );
353	353
354	354	if ( mode === 'create' ) {
355	355
—	—	@@ -358,7 +358,7 @@
359	359
360	360	// Reset
361	361	toggleDialogButtons( $form, 'enable' );
362		~~- $idSpan.removeClass( 'mw-gadgetmanager-id-invalid mw-gadgetmanager-id-available mw-gadgetmanager-id-taken' );~~
	362	+ $idSpan.removeClass( 'mw-gadgetmanager-id-error mw-gadgetmanager-id-available' );
363	363
364	364	// Abort if empty, don't warn when user is still typing,
365	365	// The onblur event handler takes care of that
—	—	@@ -379,7 +379,7 @@
380	380	$idErrMsg.hide();
381	381	} else {
382	382	toggleDialogButtons( $form, 'disable' );
383		~~- $idSpan.addClass( 'mw-gadgetmanager-id-invalid' );~~
	383	+ $idSpan.addClass( 'mw-gadgetmanager-id-error' );
384	384	$idErrMsg.text( mw.msg( 'gadgetmanager-prop-id-error-illegal' ) ).show();
385	385	}
386	386
—	—	@@ -388,26 +388,35 @@
389	389	var val = $(this).val();
390	390
391	391	// Reset
392		~~- $idSpan.removeClass( 'mw-gadgetmanager-id-invalid mw-gadgetmanager-id-available mw-gadgetmanager-id-taken' );~~
	392	+ $idSpan.removeClass( 'mw-gadgetmanager-id-error mw-gadgetmanager-id-available' );
393	393	toggleDialogButtons( $form, 'enable' );
394	394
395	395	if ( !val.length ) {
396	396	toggleDialogButtons( $form, 'disable' );
397		~~- $idSpan.addClass( 'mw-gadgetmanager-id-invalid' );~~
	397	+ $idSpan.addClass( 'mw-gadgetmanager-id-error' );
398	398	$idErrMsg.text( mw.msg( 'gadgetmanager-prop-id-error-blank' ) ).show();
399	399	return;
400	400	}
401	401
	402	+ // Validity check here as well to avoid
	403	+ // saying 'available' to an invalid id.
	404	+ if ( !validateGadgetId( val ) ) {
	405	+ toggleDialogButtons( $form, 'disable' );
	406	+ $idSpan.addClass( 'mw-gadgetmanager-id-error' );
	407	+ $idErrMsg.text( mw.msg( 'gadgetmanager-prop-id-error-illegal' ) ).show();
	408	+ return;
	409	+ }
	410	+
402	411	ga.api.clearGadgetCache();
403	412
404	413	// asynchronous from here, show loading
405		~~- $idSpan.addClass( 'ui-autocomplete-loading' );~~
	414	+ $idSpan.addClass( 'loading' );
406	415
407	416	ga.api.getGadgetData( null, function( data ) {
408		~~- $idSpan.removeClass( 'ui-autocomplete-loading' );~~
	417	+ $idSpan.removeClass( 'loading' );
409	418	if ( val in data ) {
410	419	toggleDialogButtons( $form, 'disable' );
411		~~- $idSpan.addClass( 'mw-gadgetmanager-id-taken' );~~
	420	+ $idSpan.addClass( 'mw-gadgetmanager-id-error' );
412	421	$idErrMsg.text( mw.msg( 'gadgetmanager-prop-id-error-taken' ) ).show();
413	422	} else {
414	423	$idSpan.addClass( 'mw-gadgetmanager-id-available' );

Follow-up revisions

Revision	Commit summary	Author	Date
r98996	[RL2] Fix MIME types for images added in r98944	catrope	12:43, 5 October 2011

Status & tagging log

12:45, 5 October 2011 Catrope (talk | contribs) changed the status of r98944 [removed: new added: ok]