wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icon option to ve.ui.TextInputWidget

Browse source 
Changes:

ve.ui.Widget.css
* Add styles for decorated text input widgets and their icon elements

ve.ui.TextInputWidget.js
* Add icon option which adds an icon before input text

Change-Id: Ib48d795391cb5d110e7dc05658d51129792dfc33
This commit is contained in:
Trevor Parscal 2013-05-29 12:39:07 +01:00
parent 750ab24d31
commit eec6b99369
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
modules/ve/ui/styles/ve.ui.Widget.css
View file

@ -268,6 +268,21 @@
text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px #fff;
} }
.ve-ui-textInputWidget-decorated input,
.ve-ui-textInputWidget-decorated textarea {
padding-left: 2em;
}
.ve-ui-textInputWidget-icon {
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 100%;
background-position: right center;
background-repeat: no-repeat;
}
/* ve.ui.MenuWidget */ /* ve.ui.MenuWidget */
.ve-ui-menuWidget { .ve-ui-menuWidget {

12
modules/ve/ui/widgets/ve.ui.TextInputWidget.js
View file

@ -14,6 +14,7 @@
* @constructor * @constructor
* @param {Object} [config] Config options * @param {Object} [config] Config options
* @cfg {string} [placeholder] Placeholder text * @cfg {string} [placeholder] Placeholder text
* @cfg {string} [icon] Symbolic name of icon
*/ */
ve.ui.TextInputWidget = function VeUiTextInputWidget( config ) { ve.ui.TextInputWidget = function VeUiTextInputWidget( config ) {
// Parent constructor // Parent constructor
@ -21,6 +22,17 @@ ve.ui.TextInputWidget = function VeUiTextInputWidget( config ) {
// Initialization // Initialization
this.$.addClass( 've-ui-textInputWidget' ); this.$.addClass( 've-ui-textInputWidget' );
if ( config.icon ) {
this.$.addClass( 've-ui-textInputWidget-decorated' );
this.$.append(
$( '<span>' )
.addClass( 've-ui-textInputWidget-icon ve-ui-icon-' + config.icon )
.mousedown( ve.bind( function () {
this.$input.focus();
return false;
}, this ) )
);
}
if ( config.placeholder ) { if ( config.placeholder ) {
this.$input.attr( 'placeholder', config.placeholder ); this.$input.attr( 'placeholder', config.placeholder );
} }