Trevor Parscal has uploaded a new change for review. https://gerrit.wikimedia.org/r/117315
Change subject: Add icon and indicator widgets ...................................................................... Add icon and indicator widgets Sometimes you just need an icon somewhere. Or an indicator for that matter. Change-Id: I6873c37269bf86e1d687bad66fef292fed09d693 --- M build/modules.json M demos/widgets.js A src/styles/widgets/OO.ui.IconWidget.less A src/styles/widgets/OO.ui.IndicatorWidget.less A src/widgets/OO.ui.IconWidget.js A src/widgets/OO.ui.IndicatorWidget.js 6 files changed, 134 insertions(+), 0 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/15/117315/1 diff --git a/build/modules.json b/build/modules.json index 4bcfb84..fda8dbf 100644 --- a/build/modules.json +++ b/build/modules.json @@ -37,6 +37,8 @@ "src/tools/OO.ui.PopupTool.js", "src/widgets/OO.ui.GroupWidget.js", "src/widgets/OO.ui.ItemWidget.js", + "src/widgets/OO.ui.IconWidget.js", + "src/widgets/OO.ui.IndicatorWidget.js", "src/widgets/OO.ui.ButtonGroupWidget.js", "src/widgets/OO.ui.ButtonWidget.js", "src/widgets/OO.ui.InputWidget.js", @@ -87,6 +89,8 @@ "src/styles/toolgroups/OO.ui.MenuToolgroup.less", "src/styles/toolgroups/OO.ui.PopupToolgroup.less", "src/styles/tools/OO.ui.PopupTool.less", + "src/styles/widgets/OO.ui.IconWidget.less", + "src/styles/widgets/OO.ui.IndicatorWidget.less", "src/styles/widgets/OO.ui.SelectWidget.less", "src/styles/widgets/OO.ui.OptionWidget.less", "src/styles/widgets/OO.ui.MenuWidget.less", diff --git a/demos/widgets.js b/demos/widgets.js index 4aa2f9d..2323542 100644 --- a/demos/widgets.js +++ b/demos/widgets.js @@ -4,6 +4,36 @@ sections = { 'Widgets': [ new OO.ui.FieldLayout( + new OO.ui.IconWidget( { + 'icon': 'picture', + 'title': 'Picture icon' + } ), + { 'label': 'IconWidget (normal)' } + ), + new OO.ui.FieldLayout( + new OO.ui.IconWidget( { + 'icon': 'picture', + 'title': 'Picture icon', + 'disabled': true + } ), + { 'label': 'IconWidget (disabled)' } + ), + new OO.ui.FieldLayout( + new OO.ui.IndicatorWidget( { + 'indicator': 'required', + 'title': 'Required icon' + } ), + { 'label': 'IndicatorWidget (normal)' } + ), + new OO.ui.FieldLayout( + new OO.ui.IndicatorWidget( { + 'indicator': 'required', + 'title': 'Required icon', + 'disabled': true + } ), + { 'label': 'IndicatorWidget (disabled)' } + ), + new OO.ui.FieldLayout( new OO.ui.ButtonWidget( { 'label': 'Normal' } ), { 'label': 'ButtonWidget (normal)' } ), diff --git a/src/styles/widgets/OO.ui.IconWidget.less b/src/styles/widgets/OO.ui.IconWidget.less new file mode 100644 index 0000000..e85ad63 --- /dev/null +++ b/src/styles/widgets/OO.ui.IconWidget.less @@ -0,0 +1,14 @@ +.oo-ui-iconWidget { + display: inline-block; + vertical-align: middle; + line-height: 2.5em; + height: 1.9em; + width: 1.9em; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.8; + + &.oo-ui-widget-disabled { + opacity: 0.2; + } +} \ No newline at end of file diff --git a/src/styles/widgets/OO.ui.IndicatorWidget.less b/src/styles/widgets/OO.ui.IndicatorWidget.less new file mode 100644 index 0000000..6b336b2 --- /dev/null +++ b/src/styles/widgets/OO.ui.IndicatorWidget.less @@ -0,0 +1,14 @@ +.oo-ui-indicatorWidget { + display: inline-block; + vertical-align: middle; + line-height: 2.5em; + height: 1.9em; + width: 1.9em; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.8; + + &.oo-ui-widget-disabled { + opacity: 0.2; + } +} diff --git a/src/widgets/OO.ui.IconWidget.js b/src/widgets/OO.ui.IconWidget.js new file mode 100644 index 0000000..c458823 --- /dev/null +++ b/src/widgets/OO.ui.IconWidget.js @@ -0,0 +1,36 @@ +/** + * Creates an OO.ui.IconWidget object. + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.IconedElement + * @mixins OO.ui.TitledElement + * + * @constructor + * @param {Object} [config] Configuration options + */ +OO.ui.IconWidget = function OoUiIconWidget( config ) { + // Config intialization + config = config || {}; + + // Parent constructor + OO.ui.Widget.call( this, config ); + + // Mixin constructors + OO.ui.IconedElement.call( this, this.$element, config ); + OO.ui.TitledElement.call( this, this.$element, config ); + + // Initialization + this.$element.addClass( 'oo-ui-iconWidget' ); +}; + +/* Inheritance */ + +OO.inheritClass( OO.ui.IconWidget, OO.ui.Widget ); + +OO.mixinClass( OO.ui.IconWidget, OO.ui.IconedElement ); +OO.mixinClass( OO.ui.IconWidget, OO.ui.TitledElement ); + +/* Static Properties */ + +OO.ui.IconWidget.static.tagName = 'span'; diff --git a/src/widgets/OO.ui.IndicatorWidget.js b/src/widgets/OO.ui.IndicatorWidget.js new file mode 100644 index 0000000..fb5b748 --- /dev/null +++ b/src/widgets/OO.ui.IndicatorWidget.js @@ -0,0 +1,36 @@ +/** + * Creates an OO.ui.IndicatorWidget object. + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.IndicatedElement + * @mixins OO.ui.TitledElement + * + * @constructor + * @param {Object} [config] Configuration options + */ +OO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) { + // Config intialization + config = config || {}; + + // Parent constructor + OO.ui.Widget.call( this, config ); + + // Mixin constructors + OO.ui.IndicatedElement.call( this, this.$element, config ); + OO.ui.TitledElement.call( this, this.$element, config ); + + // Initialization + this.$element.addClass( 'oo-ui-indicatorWidget' ); +}; + +/* Inheritance */ + +OO.inheritClass( OO.ui.IndicatorWidget, OO.ui.Widget ); + +OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.IndicatedElement ); +OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.TitledElement ); + +/* Static Properties */ + +OO.ui.IndicatorWidget.static.tagName = 'span'; -- To view, visit https://gerrit.wikimedia.org/r/117315 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I6873c37269bf86e1d687bad66fef292fed09d693 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Trevor Parscal <tpars...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits