Our blazing fast Grid component built with pure JavaScript


Post by cf_Simon »

Hi,
there is a slight inconsistency in how the icons for predefined elements are setup.

E.g. in "Buttons" there is sth. like:
<i class="b-fa-folder-open b-fa"> </i> 
Looking in https://www.bryntum.com/examples/grid/tree/ the "NameColumn" of the tree has a regular "div" element and there is an additional setup to apply the font-familiy in front of the text:
.b-tree-leaf-cell .b-tree-cell-inner:before, .b-tree-expander:before, .b-tree-icon:before {
    font-family: "Font Awesome 5 Pro";
    color: #adaeaf;
}
It would be nice to have a "default" icon setup, as it makes it easier to customize elements.

In this case there is also the problem, that "b-tree-expander" is hard coded and cannot be configured by extending the class. Even when defining a custom icon, the ":before" overrules the common
.b-fa { font-familiy:"xxx"}
. It's still possible to overrule that by extending the CSS, yet it would be nice to avoid special cases :geek:

Post by pmiklashevich »

Hello,

We have a guide showing how to change all FontAwesome icons to Material icons in Scheduler: https://www.bryntum.com/docs/scheduler/#guides/customization/iconfont.md

'b-' like css classes are internal and they are not supposed to be overridden directly.
We use sass, and provide a special variable to define icon font: $icon-font

For example to change Tree demo in Scheduler to use Material Icons, you can do the following:
1. Copy material-design-icons-master/iconfont to Scheduler/build/fonts
2. Update Scheduler/examples/tree/resources/app.scss:
// Import new icon font
@import '../../../build/fonts/iconfont/material-icons.css';

// Define icon font variable to be used everywhere
$icon-font : 'Material Icons';

// Pick out a theme from our shipped themes to extend
@import '../../../resources/sass/themes/stockholm.scss';

// Specify your custom theme name by overriding meta theme info (required)
.b-theme-info:before {
    content: '{"name":"Custom"}';
}

// Provide content for icons which are used in the sources, see resources/grid-sass/icons.scss
.b-icon-tree-collapse:before { content : 'keyboard_arrow_right' }
.b-icon-tree-expand:before { content : 'keyboard_arrow_right' }
// etc
3. Update Scheduler/examples/tree/index.html to do not include "../../build/scheduler.stockholm.css"
4. Then you need to build sass. The output css will contain our classes with Material Icons font, including expanded/collapsed icons in the tree.

Best wishes,
Pavel
Attachments
Снимок экрана 2020-03-10 в 11.18.42.png
Снимок экрана 2020-03-10 в 11.18.42.png (1.04 MiB) Viewed 4506 times

Pavlo Miklashevych
Sr. Frontend Developer



Post by cf_Simon »

Thanks for the feedback.

Changing all font-family may or may not work (did not test it)

However configuring the icons does only work when staying on the same font-family.
I tried to change the task icon to a custom one (that's why I posted the setup :) )

The test I did:
columns : [
			{
				type : 'name',
				iconCls: ' test ',
				leafIconCls: 'my my-task',
				expandIconCls: "fa fa-plus-square-o",
				collapseIconCls: "fa fa-minus-square-o"
			},
			// [...]
		]
Searching for the problem I found the setup posted above.
Problem is, that the font-family gets added to "b-tree-expander:before" or "b-tree-icon:before", which cannot be changed by configuration as its hard coded in "TreeColumn".

So to apply my custom font, I have to manually overwrite the font for the ":before"s. I got it to the state of "works for me", yet I think it's inconvenient.

Post by pmiklashevich »

Accepted! Thanks for the report!
https://github.com/bryntum/support/issues/411

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply