PDA

View Full Version : [OPEN] please use Glyphs in tools inside panel and in other places



Misiu
10 Apr 2014, 7:19 AM
Many times on forum users asked (including me) how to use glyphs in tools.
ExtJS 5 uses glyphs for tabs icons, button icons, but not for tools.

I started creating ux that allows users to use glyphs inside tools, for now this works like so:
3st

Maybe ExtJS 5 could have this implemented as standard feature?
New crisp theme has 349 PNG files in resources folder! Can't some of those files be replaced by glyphs?

I'm sure that not only I would like to be able to use custom icons in tools in easy way, just by specifying glyph.

yuriy
11 Apr 2014, 6:15 AM
This! It's not crisp with PNG graphics :)

Carun
17 Apr 2014, 2:56 PM
+1

Misiu
16 Jun 2014, 11:38 AM
Anyone else would like to see more glyphs inside ExtJS5?
Is there a feature request forum (freely available) where we could post and vote on requests/ideas?

jsakalos
16 Jun 2014, 4:16 PM
+1

steffenk
17 Jun 2014, 2:25 AM
+1

HriBB
18 Jun 2014, 1:48 AM
+1

Maybe we can create a list of overrides that add glyph support in tools, actioncolumn, etc ... when/if Sencha adds support, simply remove the override

Misiu
23 Jun 2014, 7:05 AM
+1

Maybe we can create a list of overrides that add glyph support in tools, actioncolumn, etc ... when/if Sencha adds support, simply remove the override

I tried that with ExtJS4, I wrote glyphtool to replace tools in panels, but tools didn't change in ExtJS5.
We could write overrides and add glyphs, but when something will change inside ExtJS 5 those overrides could stop working. I would like to see this build-in.
I don't see any activity from Sencha team, even single comment.
I really like ExtJS but from April 2013 when ExtJS4.2 was announced (http://www.sencha.com/blog/introducing-ext-js-4-2) nothing changed with graphics (glyphs).

Do we need so much images? Can't we use glyphs?
Sencha Team any comments on this?

marun
24 Jun 2014, 11:46 PM
+1

Misiu
26 Jun 2014, 12:04 AM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) is this even planned in ExtJS 5.0.X?
We can minify JS and CSS, but I think glyphs would be a nice addon.

Misiu
30 Jun 2014, 12:18 AM
Could You guys at leas mark this as feature request?

slemmon
2 Jul 2014, 11:38 AM
Hi,

There are a couple of features requests filed internally for additional glyph support. The idea of having glyphs supported where icons are supported today is something that is being discussed internally for the Ext 5.x roadmap.

*Moving the thread over to Ext5 Bugs forum in order to link the thread to the internal feature request ticket.

Misiu
7 Jul 2014, 4:31 AM
Hi,

There are a couple of features requests filed internally for additional glyph support. The idea of having glyphs supported where icons are supported today is something that is being discussed internally for the Ext 5.x roadmap.


These are awesome news :) Hopefully we will see only glyphs (these that we use, custom build by cmd)
in build instead of thousands of images.

One more question: by 5.x do You mean like 5.1 or 5.9? I would like to know how long can it take to implement these feature? (between 4.1 and 4.2.2 we had to wait like 16 months)
I know that I won't get exact date, but version number would be fine :)

ogimenezb
8 Jul 2014, 5:50 AM
I you plan to support glyph where there are icons what not add something like glyphCls or be able to specify a glyph color, opacity...

themightychris
8 Jul 2014, 3:50 PM
FWIW here's my override for adding glyph support to actioncolumn: https://github.com/JarvusInnovations/ext-library/blob/master/Jarvus/ext/override/grid/column/ActionGlyphs.js

Misiu
1 Oct 2014, 4:35 AM
FWIW here's my override for adding glyph support to actioncolumn: https://github.com/JarvusInnovations/ext-library/blob/master/Jarvus/ext/override/grid/column/ActionGlyphs.js

Works correctly. Here is fiddle showing this feature:

b64

tonygarcia
13 Apr 2015, 5:03 PM
Misiu, have you been able to update this handy Glyphtool plugin for Ext 5? Thanks.

tonygarcia
14 Apr 2015, 9:54 AM
I was able to get Misiu's Ext.ux.panel.GlyphTool to work with ExtJS 5.1 with a minor modification to the renderTpl property. I also added the ability to pass in the glyph color as a property. Here is the full code. Thanks Misiu for doing most of the work!



Ext.require(['Ext.panel.*']);


Ext.define('Glyphs', {
singleton: true,


DEFAULT_FONT_FAMILY: 'FontAwesome',


BOOKMARK: 0xf02e,
ENVELOPE: 0xf0e0,
LOCK: 0xf023,
PENCIL: 0xf040,
MENU: 0xf0c9
});


Ext.define('Ext.ux.panel.GlyphTool', {
extend: 'Ext.panel.Tool',
alias: 'widget.glyphtool',
color: '#999DA1', // default color
type: Glyphs.MENU, //default glyph
renderTpl: [
'<span id="{id}-toolEl" data-ref="toolEl" class="x-menu-tool x-tool-{type}" role="presentation" style="font-family:FontAwesome; font-size: 16px; color: {color};">&#{glyph}</span>'
]


, initComponent: function() {
var me = this,
glyphParts;
me.callParent();


if (typeof me.type === 'string' && me.type.length) {
glyphParts = me.type.split('@');
me.type = glyphParts[0];
}


Ext.apply(me.renderData, {
baseCls: me.baseCls,
blank: Ext.BLANK_IMAGE_URL,
glyph: me.type,
color: me.color
});
}
});

The0s
14 Apr 2015, 2:22 PM
Just wanted to comment that Glyphs are not the holy grail for crispness. Your font size has to be in the same pixel grid as the Glyph font. Using FontAwesome, for example, with ext crisp font gives bury icons because FA has a 14px grid, where as ext crisp uses 16px icons.

These guys describe the issue in general:
http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon

jsakalos
20 Apr 2015, 1:56 PM
I do not see any bluriness of FontAwesome icons sized to 16px in Ext 5.1 on MacBook Pro Retina. Can you post steps to reproduce and/or a screenshot?

The0s
21 Apr 2015, 6:41 PM
Saki - the IconMoo post I linked provides examples of the situation us non-retina users deal with. Retina upscales and antialiases the "16px" icon into something with many more pixels. They specifically state:
This is only an issue on standard-resolution displays (72dpi). At small sizes, there simply isnít enough resolution for the icons to render well. On high-resolution displays, like the retina display on an iPhone, itís a nonissue. Thereís so much resolution that it really doesnít matter how the icon aligns to the grid

jsakalos
22 Apr 2015, 1:02 PM
I see. I didn't check on a non-retina display, now I am curious to see it myself. Thanks for the info.

Mjollnir26
31 Jul 2015, 2:40 AM
I modified the override a bit, using the renderer code from 5.1.1 and also supporting a glyphColor and glyphOpacity config. My variant also takes the disabled styles into account :)



Ext.define('AppOverrides.grid.column.Action', {
override: 'Ext.grid.column.Action',


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, glyphColor, glyphOpacity;


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));
glyph = item.glyph || item.getGlyph;
glyphColor = item.glyphColor;
glyphOpacity = item.glyphOpacity;


if (!item.hasActionConfiguration) {


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 (Ext.isFunction(glyph))
{
glyph = glyph.call(scope, view, rowIdx, colIdx, item, record);
}
if (glyph)
{
glyph = glyph.split('@');
glyphColor = !disabled && !Ext.isEmpty(glyphColor) ? glyphColor : 'inherit';
glyphOpacity = !disabled && !isNaN(parseFloat(glyphOpacity)) ? Ext.String.format('opacity:{0};', glyphOpacity) : '';
var icon = '&#' + glyph[0] + ';', fontFamily = glyph[1],
style = Ext.String.format('style="font-size:16px;line-height:16px;font-family:{0};color:{1};{2}"', fontFamily, glyphColor, glyphOpacity);
ret += '<div ' + style + ' role="button" title="' + (item.altText || me.altText) + '" 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 + '"' : '') + '>' + icon + '</div>';
}
}
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;
}
});

mjjkf
23 Sep 2015, 2:35 AM
Cool!It works fine!