Ferdbold has uploaded a new change for review.
https://gerrit.wikimedia.org/r/228983
Change subject: [WIP] Added labels to row widgets
......................................................................
[WIP] Added labels to row widgets
Change-Id: I5c005d3ade4c83a4d9f650ce63b92cd5232de955
---
M Graph.hooks.php
M modules/ve-graph/ve.ui.MWGraphDialog.js
A modules/ve-graph/widgets/BlockLabelWidget.css
A modules/ve-graph/widgets/BlockLabelWidget.js
M modules/ve-graph/widgets/RowWidget.css
M modules/ve-graph/widgets/RowWidget.js
M modules/ve-graph/widgets/TableWidget.css
M modules/ve-graph/widgets/TableWidget.js
8 files changed, 133 insertions(+), 12 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/83/228983/1
diff --git a/Graph.hooks.php b/Graph.hooks.php
index 70eae25..d353aff 100644
--- a/Graph.hooks.php
+++ b/Graph.hooks.php
@@ -30,10 +30,12 @@
'modules/ve-graph/ve.ce.MWGraphNode.js',
'modules/ve-graph/ve.ui.MWGraphDialog.js',
'modules/ve-graph/ve.ui.MWGraphDialogTool.js',
+
'modules/ve-graph/widgets/BlockLabelWidget.js',
'modules/ve-graph/widgets/RowWidget.js',
'modules/ve-graph/widgets/TableWidget.js'
),
'styles' => array(
+
'modules/ve-graph/widgets/BlockLabelWidget.css',
'modules/ve-graph/widgets/RowWidget.css',
'modules/ve-graph/widgets/TableWidget.css'
),
diff --git a/modules/ve-graph/ve.ui.MWGraphDialog.js
b/modules/ve-graph/ve.ui.MWGraphDialog.js
index c5ec3eb..fd03a52 100644
--- a/modules/ve-graph/ve.ui.MWGraphDialog.js
+++ b/modules/ve-graph/ve.ui.MWGraphDialog.js
@@ -255,7 +255,9 @@
this.tabItem.setLabel( this.name );
};
- this.dataTable = new OO.ui.TableWidget(
this.graphModel.getPipelineFields( 0 ) );
+ this.dataTable = new OO.ui.TableWidget(
this.graphModel.getPipelineFields( 0 ), {
+ hideRowLabels: true
+ } );
// Iterate over each data entry
rows = [];
diff --git a/modules/ve-graph/widgets/BlockLabelWidget.css
b/modules/ve-graph/widgets/BlockLabelWidget.css
new file mode 100644
index 0000000..5e976d1
--- /dev/null
+++ b/modules/ve-graph/widgets/BlockLabelWidget.css
@@ -0,0 +1,5 @@
+.oo-ui-blockLabelWidget {
+ line-height: 1.275em;
+ margin-top: 0.2em;
+ padding: 0.5em;
+}
diff --git a/modules/ve-graph/widgets/BlockLabelWidget.js
b/modules/ve-graph/widgets/BlockLabelWidget.js
new file mode 100644
index 0000000..4fed6c3
--- /dev/null
+++ b/modules/ve-graph/widgets/BlockLabelWidget.js
@@ -0,0 +1,29 @@
+
+/**
+ * BlockLabelWidgets are a special type of {@link OO.ui.LabelWidget
LabelWidgets} that
+ * render as a block instead of inline.
+ *
+ * @class
+ * @extends OO.ui.LabelWidget
+ *
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+OO.ui.BlockLabelWidget = function OoUiBlockLabelWidget ( config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.BlockLabelWidget.parent.call( this, config );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-blockLabelWidget' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( OO.ui.BlockLabelWidget, OO.ui.LabelWidget );
+
+/* Static Properties */
+
+OO.ui.BlockLabelWidget.static.tagName = 'div';
diff --git a/modules/ve-graph/widgets/RowWidget.css
b/modules/ve-graph/widgets/RowWidget.css
index 8ee4b73..8e98d23 100644
--- a/modules/ve-graph/widgets/RowWidget.css
+++ b/modules/ve-graph/widgets/RowWidget.css
@@ -19,6 +19,13 @@
margin-bottom: -1px;
}
+.oo-ui-rowWidget > .oo-ui-rowWidget-label {
+ float: left;
+ margin-top: 0.05em;
+ text-align: right;
+ width: 3em;
+}
+
.oo-ui-rowWidget > .oo-ui-rowWidget-cells {
float: left;
margin-right: -1px;
diff --git a/modules/ve-graph/widgets/RowWidget.js
b/modules/ve-graph/widgets/RowWidget.js
index 4d3b8f8..d678ef4 100644
--- a/modules/ve-graph/widgets/RowWidget.js
+++ b/modules/ve-graph/widgets/RowWidget.js
@@ -9,6 +9,8 @@
*
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {string} [label] The row label to display. If not provided, the row
index will be used be default.
+ * If set to null, no label will be displayed.
* @cfg {OO.ui.TextInputWidget[]} [items] Text inputs to add
* @cfg {boolean} [deletable] Whether the table should provide deletion UI
tools for this row or not. Defaults to true.
*/
@@ -33,8 +35,13 @@
// Set up group element
groupElement = $('<div/>', {
class: 'oo-ui-rowWidget-cells'
- } ).appendTo( this.$element );
+ } );
this.setGroupElement( groupElement );
+
+ // Set up label
+ this.labelCell = new OO.ui.BlockLabelWidget( {
+ classes: [ 'oo-ui-rowWidget-label' ]
+ } );
// Set up delete button
if ( config.deletable ) {
@@ -51,7 +58,8 @@
} );
this.connect( this, {
- cellChange: 'onCellChange'
+ cellChange: 'onCellChange',
+ labelUpdate: 'onLabelUpdate'
} );
if ( config.deletable ) {
@@ -67,9 +75,15 @@
this.addItems( config.items );
}
+ this.$element
+ .append( this.labelCell.$element )
+ .append( groupElement );
+
if ( config.deletable ) {
this.$element.append( this.deleteButton.$element );
}
+
+ this.setLabel( config.label );
};
/* Inheritance */
@@ -94,16 +108,13 @@
* Fired when the delete button for the row is pressed
*/
-/* Methods */
-
/**
- * Set the row index
+ * @event labelUpdate
*
- * @param {number} index The new index
+ * Fired when the label might need to be updated
*/
-OO.ui.RowWidget.prototype.setIndex = function ( index ) {
- this.rowIndex = index;
-};
+
+/* Methods */
/**
* Get the row index
@@ -112,6 +123,44 @@
*/
OO.ui.RowWidget.prototype.getIndex = function () {
return this.rowIndex;
+};
+
+/**
+ * Set the row index
+ *
+ * @param {number} index The new index
+ * @fires labelUpdate
+ */
+OO.ui.RowWidget.prototype.setIndex = function ( index ) {
+ this.rowIndex = index;
+ this.emit( 'labelUpdate' );
+};
+
+/**
+ * Get the label displayed on the row. If no custom label is set, the
+ * row index is used instead.
+ *
+ * @return {string} The row label
+ */
+OO.ui.RowWidget.prototype.getLabel = function () {
+ if ( this.label === null ) {
+ return '';
+ } else if ( !this.label ) {
+ return this.rowIndex.toString();
+ } else {
+ return this.label;
+ }
+};
+
+/**
+ * Set the label to be displayed on the widget.
+ *
+ * @param {string} label The new label
+ * @fires labelUpdate
+ */
+OO.ui.RowWidget.prototype.setLabel = function ( label ) {
+ this.label = label;
+ this.emit( 'labelUpdate' );
};
/**
@@ -159,3 +208,18 @@
OO.ui.RowWidget.prototype.onDelete = function () {
this.emit( 'delete' );
};
+
+/**
+ * Update the label displayed on the widget
+ */
+OO.ui.RowWidget.prototype.onLabelUpdate = function () {
+ var newLabel = this.label;
+
+ if ( newLabel === null ) {
+ newLabel = '';
+ } else if ( !newLabel ) {
+ newLabel = this.rowIndex.toString();
+ }
+
+ this.labelCell.setLabel( newLabel );
+};
diff --git a/modules/ve-graph/widgets/TableWidget.css
b/modules/ve-graph/widgets/TableWidget.css
index 03c8e0d..82b460d 100644
--- a/modules/ve-graph/widgets/TableWidget.css
+++ b/modules/ve-graph/widgets/TableWidget.css
@@ -2,3 +2,7 @@
float: left;
clear: left;
}
+
+.oo-ui-tableWidget.oo-ui-tableWidget-no-labels .oo-ui-rowWidget-label {
+ display: none;
+}
diff --git a/modules/ve-graph/widgets/TableWidget.js
b/modules/ve-graph/widgets/TableWidget.js
index 5f006d4..1cf3a4f 100644
--- a/modules/ve-graph/widgets/TableWidget.js
+++ b/modules/ve-graph/widgets/TableWidget.js
@@ -10,6 +10,7 @@
* @param {string[]} fields The labels for the fields
* @param {Object} [config] Configuration options
* @cfg {OO.ui.RowWidget[]} [items] Rows to add
+ * @cfg {boolean} [hideRowLabels] Whether or not to hide row labels. Defaults
to false.
*/
OO.ui.TableWidget = function OoUiTableWidget ( fields, config ) {
@@ -29,6 +30,7 @@
// Properties
this.fields = fields;
this.listeningToInsertionRowChanges = true;
+ this.hideRowLabels = config.hideRowLabels || false;
// Set up group element
groupElement = $('<div/>', {
@@ -38,12 +40,14 @@
// Set up static rows
this.headerRow = new OO.ui.RowWidget( {
- deletable: false
+ deletable: false,
+ label: null
} );
this.insertionRow = new OO.ui.RowWidget( {
classes: 'oo-ui-rowWidget-insertionRow',
- deletable: false
+ deletable: false,
+ label: null
} );
for( i = 0; i < fields.length; i++ ) {
@@ -87,6 +91,10 @@
if ( Array.isArray( config.items ) ) {
this.addItems( config.items );
}
+
+ if ( this.hideRowLabels ) {
+ this.$element.addClass( 'oo-ui-tableWidget-no-labels' );
+ }
};
/* Inheritance */
--
To view, visit https://gerrit.wikimedia.org/r/228983
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5c005d3ade4c83a4d9f650ce63b92cd5232de955
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: master
Gerrit-Owner: Ferdbold <bolducfrede...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
