Adding icons to controlpanel items in Plone 5

zopyx · July 23, 2015, 9:58am

I am trying to set an icon for the controlpanel items of XML Director using CSS in Plone 5

xml-director/xmldirector.plonecore/blob/master/xmldirector/plonecore/browser/resources/styles.css#L190


.icon-controlpanel-xmldirector_plonecore_introspection:before, 
.icon-controlpanel-xmldirector_plonecore:before {
    content: '\e846';
}


/* Grid */
td.field-size {
    white-space: nowrap;
    text-align: right;
}


td.field-modified {
    white-space: nowrap;
    text-align: center;
}


td.field-type {
    text-align: center;
}

However this does not seem to have any effect...is there a canonical way to associate icons in Plone 5 with controlpanel items?

Andreas

espenmn · July 23, 2015, 10:39am

what about

<configlet
    icon_expr="string:$portal_url/my_icon.png"

jensens · July 23, 2015, 10:57am

for reference see also https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/profiles/default/controlpanel.xml

zopyx · July 23, 2015, 12:17pm

The "icon_expr" attribute seems to be used for Plone 4 only. They are irrelevant in Plone 5 I guess since the icons seem to come from some icon font "fontello".

-aj

agitator · July 23, 2015, 1:08pm

The icons for the default controlpanel items are coming from the custom-fontello webfont.

There was an unfinished discussion at the sprint about this icons for other addons...
I think it would be good to allow an override via icon_expr to use svgs as icons instead (icons should be scalable for the new controlpanel), so not every addon has to come up with it's own webfont. @sneridagh @vangheem what do you think?

For now I would add a style to the addon specific stylesheet, add a character for the generated controlpanel class and set a webfont that contains the icon

.icon-controlpanel-plone_app_caching:before {
    content: '\e82e';
}

vangheem · July 23, 2015, 1:29pm

It would be nice to be able to support icon_expr in some way. Otherwise, we need to give deprecation warnings some how.

espenmn · July 23, 2015, 3:20pm

it worked on my Plone 5 site

( I installed https://pypi.python.org/pypi/medialog.controlpanel and the icon show up in my Plone 5 site)

vangheem · July 23, 2015, 3:46pm

Latest b3 has a different control panel.

espenmn · July 24, 2015, 11:23am

could it be an idea to set a default icon, maybe add a class to set the icon on, or
change:

.icon-controlpanel-PloneReconfig::before

to
[class^="icon-controlpanel"]::before,
.icon-controlpanel-PloneReconfig::before

(might have to move that line first or last)
(giving all unset control panels the plone logo icon)

espenmn · July 24, 2015, 1:59pm

PS: content (in CSS) can never be an image, just text

neilf · November 12, 2015, 2:46am

Just an FYI, despite not doing anything anymore with the current Plone 5.0 build the icon_expr can still be seen/modified inside the ZMI whilst serving no purpose.

jensens · November 12, 2015, 8:57am

I found a way to use an svg as an icon. For the default icons its fine to use a webfont, for custom addons this does not make much sense. Its really to much work for just an silly icon in a control-panel. I'd prefer to get back the icon_expr.

So here is what I did further reading Strategies for LESS/CSS in addons?):

add a less file wiring in the icon https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/src/pas/plugins/authomatic/browser/resources/authomatic.less and add the icon itself https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/src/pas/plugins/authomatic/browser/resources/authomatic-logo.svg
registering as resource https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/src/pas/plugins/authomatic/browser/configure.zcml#L8
adding a resource and and a bundle(!) to the registry https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/src/pas/plugins/authomatic/profiles/default/registry.xml#L10-L27
in buildout enable the resource helpers https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/base.cfg#L71-L78
use coredev versions for this (because of a bug fixed at PloneConf in Products.CMFPlone, release is pending) https://github.com/collective/pas.plugins.authomatic/blob/1.0a1/coredev5.cfg (run buildout!)
make sure grunt is available in your PATH
start your instance ./bin/instance start, go to browser, create a Plone site named Plone with your addon installed
compile resources on commandline - this will install a whole bunch of javascript tools: ./bin/plone-compile-resources --site-id=Plone --compile-dir=./src/pas/plugins/authomatic/browser/resources/ --bundle=authomatic-addon (which fails today, but worked fine ~2weeks ago ..., need to investigate here)

Lots of work for just an icon, I'd really like to reenable the icon_expr for simple addons.

jensens · November 12, 2015, 9:15am

After this write up and realizing how much work and how crazy this way of adding just an icon is I'am sure not supporting icon_expr was for sure an accident. I filed a regression issue here https://github.com/plone/Products.CMFPlone/issues/1236

agitator · November 12, 2015, 9:33am

https://www.youtube.com/watch?v=pbTNZN6m0HM ... bring it back to me!

pigeonflight · November 24, 2015, 12:47am

Just felt the pain of trying to put an icon on an add-on for Plone 5.
I'll invest a bit more time to see if there's an elegant approach, but it's feeling like icon_expr would be a good thing.

espenmn · November 24, 2015, 5:37pm

Could it be possible to set an 'iconclass', and then add this class to the 'icon-controlpanel-nameofaddon" ?
so: iconclass = 'icon-edit'
would give html: span class="icon-edit icon-controlpanel-some_product"
and a pencil as icon

agitator · November 25, 2015, 9:11am

we already have

<span class="icon-controlpanel-mosaic-layout-editor"></span>

jensens · November 25, 2015, 10:21am

@espenmn we already have classes, but registering an icon-font or svg plus css just for an custom icon in controalpanel is just to much overhead as mentioned above.

espenmn · November 25, 2015, 11:58am

if it was possible to add classes, the css is probably already there to show the icon (?) I used firebug to change span="icon-bla-bl-bla

to:
span class="icon-bla-bla-bla icon-edit

and the pencil icon shows up withouth further chages as it is already included in 'icons.less'