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
