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