Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/278396
Change subject: [wip] Add a PrefixedTextInputWidget
......................................................................
[wip] Add a PrefixedTextInputWidget
Add a version of a TextInputWidget that has a static prefix label.
Change-Id: I1de90a64cb2f32b5b0c75580b57917d2b540884b
---
M build/modules.yaml
M demos/pages/widgets.js
M demos/widgets.php
A php/widgets/PrefixedTextInputWidget.php
M src/styles/core.less
M src/styles/empty-theme.less
A src/styles/widgets/PrefixedTextInputWidget.less
M src/themes/apex/widgets.less
M src/themes/blank/widgets.less
M src/themes/mediawiki/widgets.less
A src/widgets/PrefixedTextInputWidget.js
11 files changed, 171 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/96/278396/1
diff --git a/build/modules.yaml b/build/modules.yaml
index 982bec0..1f57a5b 100644
--- a/build/modules.yaml
+++ b/build/modules.yaml
@@ -68,6 +68,7 @@
"src/widgets/RadioInputWidget.js",
"src/widgets/RadioSelectInputWidget.js",
"src/widgets/TextInputWidget.js",
+ "src/widgets/PrefixedTextInputWidget.js",
"src/widgets/ComboBoxInputWidget.js",
"src/layouts/FieldLayout.js",
"src/layouts/ActionFieldLayout.js",
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index d4e4e96..aec7a40 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -891,6 +891,15 @@
}
),
new OO.ui.FieldLayout(
+ new OO.ui.PrefixedTextInputWidget( {
+ prefix:
'http://example.com/user/'
+ } ),
+ {
+ label:
'PrefixedTextInputWidget\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
multiline: true,
value: 'Multiline\nMultiline'
diff --git a/demos/widgets.php b/demos/widgets.php
index 5b91d7f..4ed52c4 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -608,6 +608,15 @@
]
),
new OOUI\FieldLayout(
+ new
OOUI\PrefixedTextInputWidget( [
+ 'prefix' =>
'http://example.com/user/'
+ ] ),
+ [
+ 'label' =>
"PrefixedTextInputWidget\xE2\x80\x8E",
+ 'align' => 'top'
+ ]
+ ),
+ new OOUI\FieldLayout(
new
OOUI\TextInputWidget( [
'multiline' =>
true,
'value' =>
"Multiline\nMultiline"
diff --git a/php/widgets/PrefixedTextInputWidget.php
b/php/widgets/PrefixedTextInputWidget.php
new file mode 100644
index 0000000..b0ee3c4
--- /dev/null
+++ b/php/widgets/PrefixedTextInputWidget.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace OOUI;
+
+/**
+ * Input widget with a text field and a prefix label.
+ */
+class PrefixedTextInputWidget extends Widget {
+ /* Properties */
+
+ /**
+ * Prefix text.
+ *
+ * @var string
+ */
+ protected $prefix = '';
+
+ public function __construct( array $config = [] ) {
+ // Parent constructor
+ parent::__construct( $config );
+
+ // Wrapper
+ $wrapper = new \OOUI\Tag();
+ $wrapper->addClasses( [ 'oo-ui-prefixedTextInputWidget-row' ] );
+
+ if ( isset( $config['prefix' ] ) ) {
+ $this->prefix = $config[ 'prefix' ];
+ }
+ $prefixLabelWidget = new \OOUI\LabelWidget( [
+ 'classes' => [ 'oo-ui-prefixedTextInputWidget-prefix' ],
+ 'label' => $config['prefix']
+ ] );
+ // Add the prefix
+ $wrapper->appendContent( $prefixLabelWidget );
+
+ // Add the input widget
+ $this->inputWidget = new \OOUI\TextInputWidget( array_merge( [
+ 'classes' => [ 'oo-ui-prefixedTextInputWidget-input' ],
+ ], $config ) );
+ $wrapper->appendContent( $this->inputWidget );
+
+ // Bring it together
+ $this->appendContent( $wrapper );
+ $this->addClasses( [ 'oo-ui-prefixedTextInputWidget' ] );
+ }
+}
diff --git a/src/styles/core.less b/src/styles/core.less
index 7ac2d02..ace1cc9 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -46,6 +46,7 @@
@import 'widgets/RadioInputWidget.less';
@import 'widgets/RadioSelectInputWidget.less';
@import 'widgets/TextInputWidget.less';
+@import 'widgets/PrefixedTextInputWidget.less';
@import 'widgets/MenuSelectWidget.less';
@import 'widgets/MenuOptionWidget.less';
@import 'widgets/MenuSectionOptionWidget.less';
diff --git a/src/styles/empty-theme.less b/src/styles/empty-theme.less
index c012d38..4314e7c 100644
--- a/src/styles/empty-theme.less
+++ b/src/styles/empty-theme.less
@@ -73,6 +73,7 @@
.theme-oo-ui-radioInputWidget () {}
.theme-oo-ui-radioSelectInputWidget () {}
.theme-oo-ui-textInputWidget () {}
+.theme-oo-ui-prefixedTextInputWidget () {}
.theme-oo-ui-comboBoxInputWidget () {}
.theme-oo-ui-capsuleMultiSelectWidget () {}
.theme-oo-ui-capsuleItemWidget () {}
diff --git a/src/styles/widgets/PrefixedTextInputWidget.less
b/src/styles/widgets/PrefixedTextInputWidget.less
new file mode 100644
index 0000000..60b7e28
--- /dev/null
+++ b/src/styles/widgets/PrefixedTextInputWidget.less
@@ -0,0 +1,22 @@
+@import '../common';
+
+.oo-ui-prefixedTextInputWidget {
+ display: table;
+
+ &-row {
+ display: table-row;
+ }
+
+ &-input {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ &-prefix {
+ display: table-cell;
+ vertical-align: middle;
+ padding: 0 0.5em;
+ }
+
+ .theme-oo-ui-prefixedTextInputWidget();
+}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 9808c7a..e5bc2e5 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -490,6 +490,25 @@
}
}
+.theme-oo-ui-prefixedTextInputWidget () {
+ &-prefix {
+ box-shadow: none;
+ color: #333;
+ text-shadow: 0 1px 1px #fff;
+ background: #eee;
+ border: 1px solid #ccc;
+ border-right: 0;
+ border-radius: 0.25em;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &-input input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+
.theme-oo-ui-comboBoxInputWidget () {
width: 100%;
max-width: 50em;
diff --git a/src/themes/blank/widgets.less b/src/themes/blank/widgets.less
index 4a23e24..73f6860 100644
--- a/src/themes/blank/widgets.less
+++ b/src/themes/blank/widgets.less
@@ -38,6 +38,8 @@
.theme-oo-ui-textInputWidget () {}
+.theme-oo-ui-prefixedTextInputWidget () {}
+
.theme-oo-ui-comboBoxInputWidget () {}
.theme-oo-ui-capsuleMultiSelectWidget () {}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 4b72e39..26ef825 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -682,6 +682,24 @@
}
}
+.theme-oo-ui-prefixedTextInputWidget () {
+ &-prefix {
+ box-shadow: none;
+ color: #555;
+ background: #ffffff;
+ border: 1px solid #ccc;
+ border-right: 0;
+ border-radius: 2px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &-input input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+
.theme-oo-ui-comboBoxInputWidget () {
width: 100%;
max-width: 50em;
diff --git a/src/widgets/PrefixedTextInputWidget.js
b/src/widgets/PrefixedTextInputWidget.js
new file mode 100644
index 0000000..8edb0b0
--- /dev/null
+++ b/src/widgets/PrefixedTextInputWidget.js
@@ -0,0 +1,43 @@
+/**
+ * A text input widget that has a prefix label with static text.
+ *
+ * @see OO.ui.TextInputWidget
+ *
+ * @class
+ * @extends OO.ui.Widget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [prefix] The text for the static prefix
+ */
+OO.ui.PrefixedTextInputWidget = function OoUiPrefixedTextInputWidget( config )
{
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.PrefixedTextInputWidget.parent.call( this, config );
+
+ this.prefix = new OO.ui.LabelWidget( {
+ label: config.prefix || '',
+ classes: [ 'oo-ui-prefixedTextInputWidget-prefix' ]
+ } );
+
+ this.input = new OO.ui.TextInputWidget( $.extend( true, {
+ classes: [ 'oo-ui-prefixedTextInputWidget-input' ]
+ }, config ) );
+
+ // Initialization
+ this.$element
+ .addClass( 'oo-ui-prefiexedTextInputWidget' )
+ .append(
+ $( 'div' )
+ .addClass( 'oo-ui-prefiexedTextInputWidget-row'
)
+ .append(
+ this.prefix.$element,
+ this.input.$element
+ )
+ );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.PrefixedTextInputWidget, OO.ui.Widget );
--
To view, visit https://gerrit.wikimedia.org/r/278396
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1de90a64cb2f32b5b0c75580b57917d2b540884b
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
