Robert Vogel has uploaded a new change for review.
https://gerrit.wikimedia.org/r/279128
Change subject: Icomoon font icons in BS.CRUDGridPanel
......................................................................
Icomoon font icons in BS.CRUDGridPanel
* By now only for action column
* Also moved some basic LESS vars from BlueSpiceSkin to BSF
* Added new semantic coloring
* Added new Component "ItemList"
Change-Id: I61162854374acbb83617694985ee56239b7f5234
---
M includes/DefaultSettings.php
M resources/Resources.php
M resources/bluespice.extjs/BS/CRUDGridPanel.js
A resources/bluespice.extjs/BS/form/field/ItemList.js
A resources/bluespice.extjs/BS/override/grid/column/Action.js
A resources/bluespice.extjs/bluespice.extjs.overrides.less
6 files changed, 323 insertions(+), 5 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/BlueSpiceFoundation
refs/changes/28/279128/1
diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index ad6336f..7f75afa 100644
--- a/includes/DefaultSettings.php
+++ b/includes/DefaultSettings.php
@@ -196,3 +196,19 @@
'NamespaceManager' => BSCONFIGDIR . DS . 'nm-settings.php',
'PermissionManager' => BSCONFIGDIR . DS . 'pm-settings.php',
);
+
+
+$wgResourceLoaderLESSVars += array(
+ 'bs-color-primary' => '#3e5389', //blue
+ 'bs-color-secondary' => '#ffae00', //orange
+ 'bs-color-tertiary' => '#b73a3a', //red
+ 'bs-color-neutral' => '#929292', //grey
+ 'bs-color-neutral2' => '#ABABAB', //lighten(@bs-color-neutral1, 10%); -
LESS / RL issue
+ 'bs-color-neutral3' => '#C4C4C4', //lighten(@bs-color-neutral1, 20%)',
+ 'bs-color-neutral4' => '#787878', //darken(@bs-color-neutral1, 10%)'
+
+ //From http://tools.wmflabs.org/styleguide/desktop/section-2.html
+ 'bs-color-progressive' => '#347bff',
+ 'bs-color-contructive' => '#00af89',
+ 'bs-color-destructive' => '#d11d13'
+);
\ No newline at end of file
diff --git a/resources/Resources.php b/resources/Resources.php
index 69c58a5..09403b3 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -94,11 +94,13 @@
$wgResourceModules['ext.bluespice.extjs'] = array(
'scripts' => array(
- 'bluespice.extjs/bluespice.extjs.js'
+ 'bluespice.extjs/bluespice.extjs.js',
+ 'bluespice.extjs/BS/override/grid/column/Action.js'
),
'styles' => array(
//There are some weird legacy CSS fixes. Don't know if they
still apply
'bluespice.extjs/bluespice.extjs.fixes.css',
+ 'bluespice.extjs/bluespice.extjs.overrides.less'
),
'messages' => array(
'bs-extjs-ok',
diff --git a/resources/bluespice.extjs/BS/CRUDGridPanel.js
b/resources/bluespice.extjs/BS/CRUDGridPanel.js
index 447a061..ba4fcc8 100644
--- a/resources/bluespice.extjs/BS/CRUDGridPanel.js
+++ b/resources/bluespice.extjs/BS/CRUDGridPanel.js
@@ -131,16 +131,16 @@
makeRowActions: function() {
this.colMainConf.actions.unshift({
- icon: mw.config.get( 'wgScriptPath') +
'/extensions/BlueSpiceFoundation/resources/bluespice/images/bs-m_delete_tn.png',
- iconCls: 'bs-extjs-actioncolumn-icon',
+ iconCls: 'bs-extjs-actioncolumn-icon icon-cross3
destructive',
+ glyph: true, //Needed to have the
"BS.override.grid.column.Action" render an <span> instead of an <img>,
tooltip: mw.message('bs-extjs-delete').plain(),
handler: this.onActionRemoveClick,
scope: this
});
this.colMainConf.actions.unshift({
- icon: mw.config.get( 'wgScriptPath') +
'/extensions/BlueSpiceFoundation/resources/bluespice/images/bs-um_config_tn.png',
- iconCls: 'bs-extjs-actioncolumn-icon',
+ iconCls: 'bs-extjs-actioncolumn-icon icon-wrench
progressive',
+ glyph: true,
tooltip: mw.message('bs-extjs-edit').plain(),
handler: this.onActionEditClick,
scope: this
diff --git a/resources/bluespice.extjs/BS/form/field/ItemList.js
b/resources/bluespice.extjs/BS/form/field/ItemList.js
new file mode 100644
index 0000000..4f04bb3
--- /dev/null
+++ b/resources/bluespice.extjs/BS/form/field/ItemList.js
@@ -0,0 +1,179 @@
+Ext.define('BS.form.field.ItemList', {
+ extend: 'Ext.form.FieldContainer',
+ requires: [ 'Ext.ux.form.field.GridPicker' ],
+ alias: ['widget.bs-itemlist'],
+ baseCls: 'bs-form-field-itemlist',
+ mixins: {
+ field: 'Ext.form.field.Field'
+ },
+ layout: 'anchor',
+ combineErrors: true,
+ msgTarget: 'side',
+
+ //model: null,
+ apiFields: [],
+ apiStore: 'bs-pageassignable-store',
+
+ itemGridConfig: null,
+
+ initComponent: function() {
+ this.items = this.makeItems();
+
+ this.callParent();
+ },
+
+ makeItems: function() {
+
+ this.cbItemChooser = this.makeItemChooser();
+ this.gdItems = this.makeItemGrid();
+
+ return [
+ this.cbItemChooser,
+ this.gdItems
+ ];
+ },
+
+ makeItemChooser: function() {
+
+ //var combo = new Ext.ux.form.field.GridPicker({
+ var combo = new Ext.form.field.ComboBox({
+ anchor: '100%',
+ displayField: 'text',
+ listConfig: {
+ getInnerTpl: function() {
+ return '{["<span
class=\'icon-"+values.type+" bs-typeicon\'></span>"+values.text]}';
+ }
+ },
+
+ /* TODO: Filter result to remove records that are
already in the item list store */
+ store: new Ext.data.JsonStore({
+ proxy: {
+ type: 'ajax',
+ url: mw.util.wikiScript('api'),
+ reader: {
+ type: 'json',
+ root: 'results'
+ },
+ extraParams: {
+ action: this.apiStore,
+ format: 'json'
+ }
+ },
+ //model: this.model, //for some reason having a
string with the models class name does not work here...
+ fields: this.apiFields,
+ //groupField: 'type',
+ remoteSort: true,
+ autoLoad: true
+ })
+ });
+
+ combo.on('select', this.onItemChooserSelect, this);
+
+ return combo;
+ },
+
+ makeItemGrid: function() {
+
+ var deleteCol = new Ext.grid.column.Action({
+ width: 30,
+ sortable: false,
+ menuDisabled: true,
+ items: [{
+ iconCls: 'icon-cross3',
+ glyph: true, //Needed to have the
"BS.override.grid.column.Action" render an <span> instead of an <img>
+ scope: this,
+ handler: this.onRemoveClick
+ }]
+ });
+
+ var grid = new Ext.grid.Panel( Ext.merge({
+ hideHeaders: true,
+ selModel: {
+ mode: 'MULTI'
+ },
+ columns: [
+ {
+ dataIndex: 'type',
+ width: 30,
+ renderer: function( value ) {
+ return mw.html.element(
'span', {
+ class: 'icon-'
+ value
+ } );
+ }
+ },
+ {
+ dataIndex: 'anchor',
+ flex: 1
+ },
+ deleteCol
+ ],
+ width: '100%',
+ store: this.makeItemGridStore()
+ },
+ this.itemGridConfig
+ ));
+
+ grid.on('cellkeydown', this.checkDelKey, this);
+
+ return grid;
+ },
+
+ makeItemGridStore: function() {
+ return new Ext.create('Ext.data.Store', {
+ fields: this.apiFields,
+ data:{ 'items':[] },
+ proxy: {
+ type: 'memory',
+ reader: {
+ type: 'json',
+ root: 'items',
+ }
+ }
+ });
+ },
+
+ onItemChooserSelect: function( combo, records, eOpts ) {
+ this.addToList( records );
+ combo.clearValue();
+ },
+
+ addToList: function( records ) {
+ for( var i = 0; i < records.length; i++ ) {
+ var idx = this.gdItems.getStore().findBy( function(
record, id ){
+ if( record.get('id') === records[i].get('id') )
{
+ return true;
+ }
+ return false;
+ });
+
+ if( idx === -1 ) {
+ this.gdItems.getStore().add( records[i] );
+ }
+ }
+ },
+
+ checkDelKey: function( grid, td, cellIndex, record, tr, rowIndex, e,
eOpts ) {
+ if ( e.getKey() === e.DELETE ) {
+ var selectedRows =
grid.getSelectionModel().getSelection();
+ grid.getStore().remove( selectedRows );
+ }
+ },
+
+ onRemoveClick: function( view, rowIndex, colIndex, item, e, record, row
) {
+ view.getStore().removeAt( rowIndex );
+ },
+
+ getValue:function() {
+ var records = this.gdItems.getStore().getRange();
+ var data = [];
+
+ for( var i = 0; i < records.length; i++) {
+ data.push( records[i].data );
+ }
+ return data;
+ },
+
+ setValue: function( data ) {
+ this.gdItems.getStore().loadData( data );
+ }
+});
\ No newline at end of file
diff --git a/resources/bluespice.extjs/BS/override/grid/column/Action.js
b/resources/bluespice.extjs/BS/override/grid/column/Action.js
new file mode 100644
index 0000000..9a8a1b2
--- /dev/null
+++ b/resources/bluespice.extjs/BS/override/grid/column/Action.js
@@ -0,0 +1,69 @@
+/* FROM
http://stackoverflow.com/questions/25573608/font-awesome-extjs-actioncolumn */
+/* FROM
http://stackoverflow.com/questions/32688206/icomoon-glyph-on-group-grid-extjs-action-column-not-working
*/
+
+Ext.define('BS.override.grid.column.Action', {
+ override: 'Ext.grid.column.Action',
+ // overridden to implement
+ defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store,
view) {
+ var me = this,
+ prefix = Ext.baseCSSPrefix,
+ scope = me.origScope || me,
+ items = me.items,
+ len = items.length,
+ i = 0,
+ item, ret, disabled, tooltip,glyph, glyphParts,
glyphFontFamily;
+
+ // Allow a configured renderer to create initial value (And set
the other values in the "metadata" argument!)
+ // Assign a new variable here, since if we modify "v" it will
also modify the arguments collection, meaning
+ // we will pass an incorrect value to getClass/getTip
+ ret = Ext.isFunction(me.origRenderer) ?
me.origRenderer.apply(scope, arguments) || '' : '';
+
+ cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
+ for (; i < len; i++) {
+ item = items[i];
+
+ disabled = item.disabled || (item.isDisabled ?
item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) :
false);
+ tooltip = disabled ? null : (item.tooltip ||
(item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
+ if(Ext.isFunction(item.getGlyph)){
+ glyph = item.getGlyph.apply(item.scope ||
scope, arguments);
+ }else{
+ glyph = item.glyph;
+ }
+
+ // Only process the item action setup once.
+ if (!item.hasActionConfiguration) {
+ // Apply our documented default to all items
+ item.stopSelection = me.stopSelection;
+ item.disable =
Ext.Function.bind(me.disableAction, me, [i], 0);
+ item.enable =
Ext.Function.bind(me.enableAction, me, [i], 0);
+ item.hasActionConfiguration = true;
+ }
+ if ( glyph ) {
+ if ( typeof glyph === 'string' ) {
+ glyphParts = glyph.split('@');
+ glyph = '&#'+glyphParts[0]+';';
+ glyphFontFamily = glyphParts[1];
+ } else {
+ glyphFontFamily = Ext._glyphFontFamily;
+ }
+ if( typeof glyph === 'number' ) {
+ glyph = '&#'+glyph+';';
+ }
+ if( typeof glyph === 'boolean' ) {
+ glyph = '';
+ }
+
+ ret += '<span role="button" title="' +
(item.altText || me.altText) + '" class="' + prefix + 'action-col-icon ' +
prefix + 'action-col-glyph ' + prefix + 'action-col-' + String(i) + ' ' +
(disabled ? prefix + 'item-disabled' : ' ') +
+ ' ' + (Ext.isFunction(item.getClass) ?
item.getClass.apply(item.scope || scope, arguments) : (item.iconCls ||
me.iconCls || '')) + '"' +
+ ' style="font-family:' +
glyphFontFamily + '"' +
+ (tooltip ? ' data-qtip="' + tooltip +
'"' : '') + '>' + glyph + '</span>';
+ } else {
+ ret += '<img role="button" alt="' +
(item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
+ '" class="' + me.actionIconCls + ' ' +
prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled'
: ' ') +
+ (Ext.isFunction(item.getClass) ?
item.getClass.apply(item.scope || scope, arguments) : (item.iconCls ||
me.iconCls || '')) + '"' +
+ (tooltip ? ' data-qtip="' + tooltip +
'"' : '') + ' />';
+ }
+ }
+ return ret;
+ }
+});
\ No newline at end of file
diff --git a/resources/bluespice.extjs/bluespice.extjs.overrides.less
b/resources/bluespice.extjs/bluespice.extjs.overrides.less
new file mode 100644
index 0000000..f5714bf
--- /dev/null
+++ b/resources/bluespice.extjs/bluespice.extjs.overrides.less
@@ -0,0 +1,52 @@
+/* FROM
http://stackoverflow.com/questions/32688206/icomoon-glyph-on-group-grid-extjs-action-column-not-working
*/
+.x-action-col-glyph {
+ font-size:16px;
+ line-height:16px;
+ color:#9BC8E9;
+ width:20px
+}
+
+#content .bs-form-field-itemlist,
+.bs-form-field-itemlist {
+ .x-grid-row-over .x-action-col-cell {
+ .icon-cross3:before {
+ color: red;
+ }
+ }
+}
+
+.icon-user:before {
+ content: "\e7d1";
+}
+.icon-group:before {
+ content: "\e7d2";
+}
+
+.x-list-plain li span[class='icon-*'] {
+ margin-right: 0.1em;
+}
+
+.bs-typeicon {
+ margin-right: 0.5em;
+}
+
+body.mediawiki #content {
+ .bs-extjs-actioncolumn-icon {
+ &[class*='icon-']:after,
+ &[class*='icon-']:before {
+ color: #999;
+ }
+
+ &.progressive:before {
+ color: @bs-color-progressive
+ }
+
+ &.contructive:before {
+ color: @bs-color-contructive
+ }
+
+ &.destructive:before {
+ color: @bs-color-destructive
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/279128
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I61162854374acbb83617694985ee56239b7f5234
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/BlueSpiceFoundation
Gerrit-Branch: master
Gerrit-Owner: Robert Vogel <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
