[xwiki-devs] [Proposal] Icon Themes
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2. Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility. This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept The proposal is composed of A+B+C: A - Create an icon set for XWiki ------- As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever). Example: - accept - cancel - wiki - user - pdf etc... B - Create an Icon Theme ------- Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets. Theme1: accept: <img src="$xwiki.getSkinFile('silk/accept.png')" alt="accept"/> Theme2: accept: <i class="fa fa-check"></i> C - Bind the Wiki Syntax to the current icon theme ------- When a user writes: image:icon:accept it actually executes the mapping contained by the active IconTheme. Here is my +1. WDYT? Thanks, Guillaume
+1 On Wed, Jul 16, 2014 at 3:24 PM, Guillaume "Louis-Marie" Delhumeau <gdelhumeau@xwiki.com> wrote:
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2.
Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility.
This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept
The proposal is composed of A+B+C:
A - Create an icon set for XWiki -------
As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever).
Example: - accept - cancel - wiki - user - pdf etc...
B - Create an Icon Theme -------
Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets.
Theme1: accept: <img src="$xwiki.getSkinFile('silk/accept.png')" alt="accept"/>
Theme2: accept: <i class="fa fa-check"></i>
C - Bind the Wiki Syntax to the current icon theme -------
When a user writes: image:icon:accept
it actually executes the mapping contained by the active IconTheme.
Here is my +1.
WDYT?
Thanks,
Guillaume _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
-- Thomas Mortagne
Hi Guillaume, Good start. I think you also list all the Use Cases that we wish to support to make them explicit and to be sure we’re not missing any. Some comments: 1) I think it’s nice to be able to use different icon set if I want, like: - image:icon:accept (default xwiki icon set) - image:icon:silk:accept (silk icon set) - image:icon:whatever:somename (whatever icon set) Note that this point 1) is not in opposition to your proposal, it’s orthogonal (and it should be put only in XWiki Syntax 2.2). 2) What happens to the current icons from the silk icon set that are not in the XWiki Icon Set? So if I was using, say, image:icon:film_edit, I guess it’s going to break when I upgrade since “film_edit” wouldn’t be part of the XWiki Icon Set. 3) You haven’t specified how we would perform the binding precisely (one xproperty per binding might be too much IMO), we might want another more compact format (in plain text for example) 4) How do you bind an icon set to a skin? How do you say that Flamingo is going to use the “iconset1” icon set by default and Colibri is using “iconset2” by default? 5) How do I specify the size of the icon I wish to use when using the wiki syntax: For example if I want to use 16px or 32px how do I specify it in “image:icon:accept”? For example when writing the Applications Panel, if the panel has a “large” width I’m going to use the 16px and if it has “small” width I want to use the 32px. 6) Should the user be able to install a new icon set through an extension (ie installed through the EM) as a use case? I think so. 7) What happens if there’s no IconTheme xobject in the wiki? 8) Do you propose to let the user choose the IconTheme he wishes to use or should an icon theme be forced by the skin? Thanks -Vincent On 16 Jul 2014 at 15:27:24, Guillaume Louis-Marie Delhumeau (gdelhumeau@xwiki.com(mailto:gdelhumeau@xwiki.com)) wrote:
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2.
Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility.
This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept
The proposal is composed of A+B+C:
A - Create an icon set for XWiki -------
As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever).
Example: - accept - cancel - wiki - user - pdf etc...
B - Create an Icon Theme -------
Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets.
Theme1: accept:
Theme2: accept:
C - Bind the Wiki Syntax to the current icon theme -------
When a user writes: image:icon:accept
it actually executes the mapping contained by the active IconTheme.
Here is my +1.
WDYT?
Thanks,
Guillaume _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Hi Vincent, 2014-07-16 16:21 GMT+02:00 vincent@massol.net <vincent@massol.net>:
Hi Guillaume,
Good start.
I think you also list all the Use Cases that we wish to support to make them explicit and to be sure we’re not missing any.
Some comments:
1) I think it’s nice to be able to use different icon set if I want, like:
- image:icon:accept (default xwiki icon set) - image:icon:silk:accept (silk icon set) - image:icon:whatever:somename (whatever icon set)
Note that this point 1) is not in opposition to your proposal, it’s orthogonal (and it should be put only in XWiki Syntax 2.2).
I have think about it, and decided that it could go in an other proposal. I wanted this one to be little :)
2) What happens to the current icons from the silk icon set that are not in the XWiki Icon Set?
So if I was using, say, image:icon:film_edit, I guess it’s going to break when I upgrade since “film_edit” wouldn’t be part of the XWiki Icon Set.
I don't know. Maybe a fallback to silk? WDYT?
3) You haven’t specified how we would perform the binding precisely (one xproperty per binding might be too much IMO), we might want another more compact format (in plain text for example)
I was thinking about 1 xproperty per icon, to use our XWiki Model. But now I think we can use a format similar to our translation pages.
4) How do you bind an icon set to a skin? How do you say that Flamingo is going to use the “iconset1” icon set by default and Colibri is using “iconset2” by default?
To be consistent with the color themes, I don't handle this use-case. (see 8)
5) How do I specify the size of the icon I wish to use when using the wiki syntax: For example if I want to use 16px or 32px how do I specify it in “image:icon:accept”? For example when writing the Applications Panel, if the panel has a “large” width I’m going to use the 16px and if it has “small” width I want to use the 32px.
We can extend the Wiki Syntax to have the size, example: image:icon:accept:lg (for large) image:icon:accept:sm (for small)
6) Should the user be able to install a new icon set through an extension (ie installed through the EM) as a use case? I think so.
Yes, why not. But maybe some of them will only works with some skins. Example: Bootstrap bundles glyphicons, so we can create a glyphicon set that will only works with bootstrap-based skins.
7) What happens if there’s no IconTheme xobject in the wiki?
I propose a default icon theme in the webapp folder. That is why a plain text format is better by the way (see 3).
8) Do you propose to let the user choose the IconTheme he wishes to use or should an icon theme be forced by the skin?
I propose something like we have for color themes. In the administration, the user can choose the skin, the color theme, and the icon theme.
Thanks -Vincent
On 16 Jul 2014 at 15:27:24, Guillaume Louis-Marie Delhumeau ( gdelhumeau@xwiki.com(mailto:gdelhumeau@xwiki.com)) wrote:
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2.
Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility.
This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept
The proposal is composed of A+B+C:
A - Create an icon set for XWiki -------
As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever).
Example: - accept - cancel - wiki - user - pdf etc...
B - Create an Icon Theme -------
Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets.
Theme1: accept:
Theme2: accept:
C - Bind the Wiki Syntax to the current icon theme -------
When a user writes: image:icon:accept
it actually executes the mapping contained by the active IconTheme.
Here is my +1.
WDYT?
Thanks,
Guillaume _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Thanks, Guillaume
Update: I have made a proof of concept on my machine (but I cannot commit it yet). On /resources/icons, I have created a file called "default.iconset". The content of this file is: ---- ## General settings xwiki.iconset.cssfile = $services.webjar.url('font-awesome/4.1.0/css/font-awesome.min.css') xwiki.iconset.type = font xwiki.iconset.render.wiki = {{html clean="false"}}<span class="fa fa-$icon"></span>{{/html}} xwiki.iconset.render.html = <span class="fa fa-$icon"></span> ## Icons transmit = anchor earth = globe ----- I have also created a script services $services.icon, with the following methods: $services.icon.render() which display the icon, $services.icon.renderHTML() which display the icon on an HTML context. eg: $services.icon.render('transmit') generates: {{html clean="false"}}<span class="fa fa-transmit"></span>{{/html}} and $services.icon.renderHTML('transmit') generates: <span class="fa fa-transmit"></span> If I want to use images instead of a font-based icon, I can do something like --- xwiki.iconset.render.wiki = image:IconSets.MyIconSet@${icon}.png xwiki.iconset.render.html = <img src="$xwiki.getAttachmentURL('IconSets.MyIconSet', "${icon}.png)" alt="icon" /> --- So, depending of the current icon theme, it generates a <span> tag (for font-based icon) or an <img> tag (for image-based icons). Of course, we can create our own icon set directly on the wiki, exactly like we create translation documents. I will also add an "iconTheme" setting in XWikiPreferences, so the user is able to select the icon theme she wants to use, exactly as she can select her color theme. WDYT? Guillaume 2014-07-16 16:42 GMT+02:00 Guillaume "Louis-Marie" Delhumeau < gdelhumeau@xwiki.com>:
Hi Vincent,
2014-07-16 16:21 GMT+02:00 vincent@massol.net <vincent@massol.net>:
Hi Guillaume,
Good start.
I think you also list all the Use Cases that we wish to support to make them explicit and to be sure we’re not missing any.
Some comments:
1) I think it’s nice to be able to use different icon set if I want, like:
- image:icon:accept (default xwiki icon set) - image:icon:silk:accept (silk icon set) - image:icon:whatever:somename (whatever icon set)
Note that this point 1) is not in opposition to your proposal, it’s orthogonal (and it should be put only in XWiki Syntax 2.2).
I have think about it, and decided that it could go in an other proposal. I wanted this one to be little :)
2) What happens to the current icons from the silk icon set that are not in the XWiki Icon Set?
So if I was using, say, image:icon:film_edit, I guess it’s going to break when I upgrade since “film_edit” wouldn’t be part of the XWiki Icon Set.
I don't know. Maybe a fallback to silk? WDYT?
3) You haven’t specified how we would perform the binding precisely (one xproperty per binding might be too much IMO), we might want another more compact format (in plain text for example)
I was thinking about 1 xproperty per icon, to use our XWiki Model. But now I think we can use a format similar to our translation pages.
4) How do you bind an icon set to a skin? How do you say that Flamingo is going to use the “iconset1” icon set by default and Colibri is using “iconset2” by default?
To be consistent with the color themes, I don't handle this use-case. (see 8)
5) How do I specify the size of the icon I wish to use when using the wiki syntax: For example if I want to use 16px or 32px how do I specify it in “image:icon:accept”? For example when writing the Applications Panel, if the panel has a “large” width I’m going to use the 16px and if it has “small” width I want to use the 32px.
We can extend the Wiki Syntax to have the size, example: image:icon:accept:lg (for large) image:icon:accept:sm (for small)
6) Should the user be able to install a new icon set through an extension (ie installed through the EM) as a use case? I think so.
Yes, why not. But maybe some of them will only works with some skins. Example: Bootstrap bundles glyphicons, so we can create a glyphicon set that will only works with bootstrap-based skins.
7) What happens if there’s no IconTheme xobject in the wiki?
I propose a default icon theme in the webapp folder. That is why a plain text format is better by the way (see 3).
8) Do you propose to let the user choose the IconTheme he wishes to use or should an icon theme be forced by the skin?
I propose something like we have for color themes. In the administration, the user can choose the skin, the color theme, and the icon theme.
Thanks -Vincent
On 16 Jul 2014 at 15:27:24, Guillaume Louis-Marie Delhumeau ( gdelhumeau@xwiki.com(mailto:gdelhumeau@xwiki.com)) wrote:
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2.
Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility.
This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept
The proposal is composed of A+B+C:
A - Create an icon set for XWiki -------
As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever).
Example: - accept - cancel - wiki - user - pdf etc...
B - Create an Icon Theme -------
Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets.
Theme1: accept:
Theme2: accept:
C - Bind the Wiki Syntax to the current icon theme -------
When a user writes: image:icon:accept
it actually executes the mapping contained by the active IconTheme.
Here is my +1.
WDYT?
Thanks,
Guillaume _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Thanks, Guillaume
Then, in the future, it could be good to bind the Wiki Syntax to this new mechanism. 2014-07-23 16:22 GMT+02:00 Guillaume "Louis-Marie" Delhumeau < gdelhumeau@xwiki.com>:
Update:
I have made a proof of concept on my machine (but I cannot commit it yet).
On /resources/icons, I have created a file called "default.iconset".
The content of this file is: ---- ## General settings xwiki.iconset.cssfile = $services.webjar.url('font-awesome/4.1.0/css/font-awesome.min.css') xwiki.iconset.type = font xwiki.iconset.render.wiki = {{html clean="false"}}<span class="fa fa-$icon"></span>{{/html}} xwiki.iconset.render.html = <span class="fa fa-$icon"></span>
## Icons transmit = anchor earth = globe -----
I have also created a script services $services.icon, with the following methods: $services.icon.render() which display the icon, $services.icon.renderHTML() which display the icon on an HTML context.
eg: $services.icon.render('transmit') generates: {{html clean="false"}}<span class="fa fa-transmit"></span>{{/html}}
and $services.icon.renderHTML('transmit') generates: <span class="fa fa-transmit"></span>
If I want to use images instead of a font-based icon, I can do something like --- xwiki.iconset.render.wiki = image:IconSets.MyIconSet@${icon}.png xwiki.iconset.render.html = <img src="$xwiki.getAttachmentURL('IconSets.MyIconSet', "${icon}.png)" alt="icon" /> ---
So, depending of the current icon theme, it generates a <span> tag (for font-based icon) or an <img> tag (for image-based icons).
Of course, we can create our own icon set directly on the wiki, exactly like we create translation documents.
I will also add an "iconTheme" setting in XWikiPreferences, so the user is able to select the icon theme she wants to use, exactly as she can select her color theme.
WDYT?
Guillaume
2014-07-16 16:42 GMT+02:00 Guillaume "Louis-Marie" Delhumeau < gdelhumeau@xwiki.com>:
Hi Vincent,
2014-07-16 16:21 GMT+02:00 vincent@massol.net <vincent@massol.net>:
Hi Guillaume,
Good start.
I think you also list all the Use Cases that we wish to support to make them explicit and to be sure we’re not missing any.
Some comments:
1) I think it’s nice to be able to use different icon set if I want, like:
- image:icon:accept (default xwiki icon set) - image:icon:silk:accept (silk icon set) - image:icon:whatever:somename (whatever icon set)
Note that this point 1) is not in opposition to your proposal, it’s orthogonal (and it should be put only in XWiki Syntax 2.2).
I have think about it, and decided that it could go in an other proposal. I wanted this one to be little :)
2) What happens to the current icons from the silk icon set that are not in the XWiki Icon Set?
So if I was using, say, image:icon:film_edit, I guess it’s going to break when I upgrade since “film_edit” wouldn’t be part of the XWiki Icon Set.
I don't know. Maybe a fallback to silk? WDYT?
3) You haven’t specified how we would perform the binding precisely (one xproperty per binding might be too much IMO), we might want another more compact format (in plain text for example)
I was thinking about 1 xproperty per icon, to use our XWiki Model. But now I think we can use a format similar to our translation pages.
4) How do you bind an icon set to a skin? How do you say that Flamingo is going to use the “iconset1” icon set by default and Colibri is using “iconset2” by default?
To be consistent with the color themes, I don't handle this use-case. (see 8)
5) How do I specify the size of the icon I wish to use when using the wiki syntax: For example if I want to use 16px or 32px how do I specify it in “image:icon:accept”? For example when writing the Applications Panel, if the panel has a “large” width I’m going to use the 16px and if it has “small” width I want to use the 32px.
We can extend the Wiki Syntax to have the size, example: image:icon:accept:lg (for large) image:icon:accept:sm (for small)
6) Should the user be able to install a new icon set through an extension (ie installed through the EM) as a use case? I think so.
Yes, why not. But maybe some of them will only works with some skins. Example: Bootstrap bundles glyphicons, so we can create a glyphicon set that will only works with bootstrap-based skins.
7) What happens if there’s no IconTheme xobject in the wiki?
I propose a default icon theme in the webapp folder. That is why a plain text format is better by the way (see 3).
8) Do you propose to let the user choose the IconTheme he wishes to use or should an icon theme be forced by the skin?
I propose something like we have for color themes. In the administration, the user can choose the skin, the color theme, and the icon theme.
Thanks -Vincent
On 16 Jul 2014 at 15:27:24, Guillaume Louis-Marie Delhumeau ( gdelhumeau@xwiki.com(mailto:gdelhumeau@xwiki.com)) wrote:
Hi xwikiers! Here a new proposal about Icon Themes, that I would like to introduce in XWiki 6.2.
Issue: ------- In Colibri we use the "Silk" icons set. In Flamingo we want to use monochromatic icons (font-based icon set). But we don't want to break the retro-compatibility.
This proposal is only about improvements to the XWiki Syntax in order to insert icons: eg: image:icon:accept
The proposal is composed of A+B+C:
A - Create an icon set for XWiki -------
As an API, XWiki proposes a selection of icons that developers can use. We ensure to not break the retro-compatibility. Actually, we do not create these icons. We bind them to existing ones (from silk or whatever).
Example: - accept - cancel - wiki - user - pdf etc...
B - Create an Icon Theme -------
Like the ColorThemes, we can create IconThemes. Concretly, for every icons proposed in A), we create a mapping to an icon from Silk, FontAwesome, or other icon sets.
Theme1: accept:
Theme2: accept:
C - Bind the Wiki Syntax to the current icon theme -------
When a user writes: image:icon:accept
it actually executes the mapping contained by the active IconTheme.
Here is my +1.
WDYT?
Thanks,
Guillaume _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Thanks, Guillaume
participants (3)
-
Guillaume "Louis-Marie" Delhumeau -
Thomas Mortagne -
vincent@massol.net