https://www.redmine.org/https://www.redmine.org/favicon.ico?16793021292016-10-04T00:11:12ZRedmineRedmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=738692016-10-04T00:11:12ZMarius BĂLTEANU
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>2. <strong>Only from css</strong></p>
Advantages:
<ul>
<li>the views will not be modified</li>
</ul>
Disadvantages:
<ul>
<li>The build-in rules must be reimplemented in the current CSS</li>
<li>The icons will be defined using their unicode. For example, the fa-pencil icon (similar with the current images for icon-edit) has the unicode f040.</li>
</ul>
</blockquote>
<p>The "disadvantages" word should be after the first advantage. Like is in this comment.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=738712016-10-04T00:19:39ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/16792">font_awesome.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/16792/font_awesome.png">font_awesome.png</a> added</li></ul><p>Attached a screenshot also.</p>
<p><img src="https://www.redmine.org/attachments/download/16792/font_awesome.png" alt="" /></p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=739042016-10-06T10:31:12ZJan from Planio www.plan.io
<ul></ul><p>Hi Marius, thanks for proposing this. I think replacing the current icon set with an icon font is a great idea. As you noticed, we're using Font Awesome for the <a href="http://plan.io/blog/post/135376091228/the-challenge-of-redesigning-redmine" class="external">new Planio design</a>.</p>
<p>Marius BALTEANU wrote:</p>
<blockquote>
<p>because there are at least two ways to implement them, we want some feedback</p>
</blockquote>
<p>Before implementing our new design, we were discussing this intensively. We decided against using <code><i></code> tags and in favour of adding new CSS rules, for the following reasons:</p>
<ul>
<li>Changing all icons in Redmine to <code><i></code> tags would be a very large patch touching almost all views in Redmine (as you probably already noticed while preparing your demo patch).</li>
<li>Using <code><i></code> tags would require all plugin developers to change plugins as well and there would be a (potentially long) period where plugins would still use the "old" icons while Redmine is already usig "new" icons making the overall user experience inconsistent.</li>
</ul>
<p>Implementing new CSS rules for all icons using Font Awesome, however, would be less of a change to existing Redmine code (we would be able to leave views alone) and would apply to all existing plugins using standard Redmine icons (like edit, delete, etc.) at once, so plugin developers would have few things to change or nothing at all.</p>
<p>To respond to the disadvantages mentioned:</p>
<blockquote>
<p>The build-in rules must be reimplemented in the current CSS</p>
</blockquote>
<p>I actually see this as an advantage: implementing Icon style can be encapsulated in a defined place within the CSS and does not happen all over the place.</p>
<blockquote>
<p>The icons will be defined using their unicode. For example, the fa-pencil icon (similar with the current images for icon-edit) has the unicode f040.</p>
</blockquote>
<p>From our experience in working with Font Awesome in our new UI, it isn't much of a problem. The icons can be looked up easily via <a class="external" href="http://fontawesome.io/icons/">http://fontawesome.io/icons/</a> and we could use CSS comments to note the Font Awesome icon names next to the unicodes.</p>
<p>One sidenote: At Planio, we're using <a href="http://guides.rubyonrails.org/asset_pipeline.html" class="external">Rails' Asset Pipeline</a> with Redmine and are thus using <a href="http://sass-lang.com/" class="external">SCSS</a> and the <a href="https://github.com/bokmann/font-awesome-rails" class="external">fontawesome-rails gem</a> which is a tremendous help.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=739052016-10-06T11:45:50ZMarius BĂLTEANU
<ul></ul><p>Jan from Planio <a class="external" href="http://www.plan.io">www.plan.io</a> wrote:</p>
<blockquote>
<p>Hi Marius, thanks for proposing this. I think replacing the current icon set with an icon font is a great idea. As you noticed, we're using Font Awesome for the <a href="http://plan.io/blog/post/135376091228/the-challenge-of-redesigning-redmine" class="external">new Planio design</a>.</p>
<p>Marius BALTEANU wrote:</p>
<blockquote>
<p>because there are at least two ways to implement them, we want some feedback</p>
</blockquote>
<p>Before implementing our new design, we were discussing this intensively. We decided against using <code><i></code> tags and in favour of adding new CSS rules, for the following reasons:</p>
<ul>
<li>Changing all icons in Redmine to <code><i></code> tags would be a very large patch touching almost all views in Redmine (as you probably already noticed while preparing your demo patch).</li>
<li>Using <code><i></code> tags would require all plugin developers to change plugins as well and there would be a (potentially long) period where plugins would still use the "old" icons while Redmine is already usig "new" icons making the overall user experience inconsistent.</li>
</ul>
<p>Implementing new CSS rules for all icons using Font Awesome, however, would be less of a change to existing Redmine code (we would be able to leave views alone) and would apply to all existing plugins using standard Redmine icons (like edit, delete, etc.) at once, so plugin developers would have few things to change or nothing at all.</p>
<p>To respond to the disadvantages mentioned:</p>
<blockquote>
<p>The build-in rules must be reimplemented in the current CSS</p>
</blockquote>
<p>I actually see this as an advantage: implementing Icon style can be encapsulated in a defined place within the CSS and does not happen all over the place.</p>
<blockquote>
<p>The icons will be defined using their unicode. For example, the fa-pencil icon (similar with the current images for icon-edit) has the unicode f040.</p>
</blockquote>
<p>From our experience in working with Font Awesome in our new UI, it isn't much of a problem. The icons can be looked up easily via <a class="external" href="http://fontawesome.io/icons/">http://fontawesome.io/icons/</a> and we could use CSS comments to note the Font Awesome icon names next to the unicodes.</p>
</blockquote>
<p>Totally agree with you, I'll try to create a patch using only CSS.</p>
<blockquote>
<p>One sidenote: At Planio, we're using <a href="http://guides.rubyonrails.org/asset_pipeline.html" class="external">Rails' Asset Pipeline</a> with Redmine and are thus using <a href="http://sass-lang.com/" class="external">SCSS</a> and the <a href="https://github.com/bokmann/font-awesome-rails" class="external">fontawesome-rails gem</a> which is a tremendous help.</p>
</blockquote>
<p>I know that were some discussions about the Rails' Asset Pipeline (I can't find the ticket now) and enabling this feature is not an option because will add some complexity. If I'm wrong, I'll be very happy to use that gem.</p>
<p>Thanks for your feedback.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=739472016-10-09T10:12:26ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/16836">use_font_awesome_icons_for_all_elements_that_use_icon_class.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/16836/use_font_awesome_icons_for_all_elements_that_use_icon_class.patch">use_font_awesome_icons_for_all_elements_that_use_icon_class.patch</a> added</li></ul>I've attached a first patch which:
<ul>
<li>adds the Font Awesome fonts </li>
<li>replaces the images icons with font awesome icons for all elements that have <strong>icon</strong> and <strong>icon-</strong>* classes</li>
</ul>
<p>Some observations:</p>
<p>1. Currently, there are some specific programming images for file types like text-x-php, text-x-c, text-x-java and so on. Because FontAwesome doesn't have these types of icons, I see 3 ways to solve this problem:<br />1.1 use the current images<br />1.2 use the <a href="http://fontawesome.io/icon/file-code-o/" class="external">generic file code icon</a> provided by FontAwesome for all of these files.<br />1.3 add <a href="http://fizzed.com/oss/font-mfizz" class="external">Font-Mfizz</a> which is an extension of FontAwesome icons and provides the required icons.</p>
IMHO, I prefer the second solution because:
<ul>
<li>it doesn't add new fonts </li>
<li>it doesn't require to keep the rules related to background images in <strong>icon</strong> class</li>
<li>it doesn't require maintenance when a new type of files appears (in this patch I've added a new class named "application-javascript" in order to recognize the javascript files)</li>
</ul>
<p>2. I'll add separate patches that replaces the current images with FontAwesome icons in other pages like: administration, project overview, etc.. <br />3. In the last patch, I'll remove the unused images.</p>
<p>Any feedback is appreciated.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=739562016-10-10T05:35:41ZAlexander Meindl
<ul></ul><p>I would prefer the Font-Mfizz solution. It does not require much more server load using it (there are a lot less server requests compared to the background image solution). Main reason for this solutions is, that the usability and the user acceptance would be higher. A lot of technical teams are working with Redmine and SCM, and these people will be certainly happy to see file type specific icons.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=741852016-10-25T13:33:28ZToshi MARUYAMA
<ul><li><strong>Description</strong> updated (<a title="View differences" href="/journals/74185/diff?detail_id=57770">diff</a>)</li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=744412016-11-12T14:24:47ZMarius BĂLTEANU
<ul></ul><p>We discussed internally in <a href="https://zitec.com" class="external">Zitec</a> and we are going to implement the solution with Font-Mfizz but for the moment we are waiting for some feedback on issue <a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Use the regular "icon icon-*" classes for all elements with icons (Closed)" href="https://www.redmine.org/issues/24313">#24313</a> because having that ticket commited, it will be much easier for us to implement this one.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=745752016-11-20T04:50:48ZGo MAEDA
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-1 priority-4 priority-default" href="/issues/5830">Feature #5830</a>: Replace famfamfam icons with the fugue set</i> added</li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=745812016-11-20T12:25:15ZGo MAEDA
<ul><li><strong>Target version</strong> set to <i>Candidate for next major release</i></li></ul><p><a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Use the regular "icon icon-*" classes for all elements with icons (Closed)" href="https://www.redmine.org/issues/24313">#24313</a> has been implemented.<br />I am looking forward to seeing this feature in 3.4.0. Setting target version to "Candidate for next major release".</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=745822016-11-20T13:39:11ZMarius BĂLTEANU
<ul></ul><p>Go MAEDA wrote:</p>
<blockquote>
<p><a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Use the regular "icon icon-*" classes for all elements with icons (Closed)" href="https://www.redmine.org/issues/24313">#24313</a> has been implemented.<br />I am looking forward to seeing this feature in 3.4.0. Setting target version to "Candidate for next major release".</p>
</blockquote>
<p>The patch that replaces the images with fa icons is ready, but I want to take some feedback from our users regarding the icons color. Now all the icons have the same color (# 169). Please let me know if you want to test it as it is now.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=747582016-11-29T01:07:47ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/17148">replace_images_with_fa_icons.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17148/replace_images_with_fa_icons.patch">replace_images_with_fa_icons.patch</a> added</li><li><strong>File</strong> <a href="/attachments/17150">font-mfizz.zip</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17150/font-mfizz.zip">font-mfizz.zip</a> added</li><li><strong>File</strong> <a href="/attachments/17151">fonts_folder.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17151/fonts_folder.png">fonts_folder.png</a> added</li></ul><p>The attached patch (replace_images_with_fa_icons.patch) replaces the images for all regular icons (that have the classes "icon icon-*") with font-awesome icons.</p>
<p>Because the git binary diffs are not supported by the patch command, I wasn't able to add the required fonts as patches, but I've documented bellow the necessary steps:<br />1. Create a folder <strong>fonts</strong> in the <strong>public</strong> directory from redmine. <br />2. Unzip the attached font-mfizz.zip in the new <strong>fonts</strong> folder.<br />3. Because the font-awesome archive is bigger than the maximum allowed size for attachments (600kb), the zip can be downloaded from <a href="https://drive.google.com/file/d/0BymeVD9kRWhEc003a3pKX0ZxcGc/view?usp=sharing" class="external">here</a>. If the official <a href="http://fontawesome.io/assets/font-awesome-4.7.0.zip" class="external">link</a> is preferred, the fonts must be extracted from the archive (folder fonts) to a folder named <strong>font-awesome</strong> in the same folder <strong>fonts</strong> from public directory.</p>
At the end, the fonts folder from public should have 2 directories:
<ul>
<li>font-awesome</li>
<li>font-mfizz</li>
</ul>
<p><img src="https://www.redmine.org/attachments/download/17151/fonts_folder.png" alt="" /></p>
<p>There are still some elements that are using images (like classes expander, asc, desc), but I think that is safer to replace them with FA icons in another ticket (requires more changes). Also, I think the images should be removed in a later major release (for plugins compatibility).</p>
<p>Any feedback on the chosen icons is welcome.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=747592016-11-29T01:11:09ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/17154">activity_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17154/activity_fa.png">activity_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17152">admin_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17152/admin_fa.png">admin_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17153">issue_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17153/issue_fa.png">issue_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17157">issues_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17157/issues_fa.png">issues_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17155">overview_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17155/overview_fa.png">overview_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17156">projects_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17156/projects_fa.png">projects_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17158">repository_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17158/repository_fa.png">repository_fa.png</a> added</li><li><strong>File</strong> <a href="/attachments/17159">roadmap_fa.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17159/roadmap_fa.png">roadmap_fa.png</a> added</li></ul><p>Some screenshots.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=747602016-11-29T01:40:42ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/17160">replace_images_with_fa_icons_v2.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/17160/replace_images_with_fa_icons_v2.patch">replace_images_with_fa_icons_v2.patch</a> added</li></ul><p>Updated to include a fix for the responsive mode (the left padding is no more required).</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=751592016-12-19T21:09:40ZMarius BĂLTEANU
<ul></ul><p>Any feedback on this patch? FTR, I tried to create a single patch with all the changes with Subversion too but it didn't work.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=752772016-12-24T07:18:34ZGo MAEDA
<ul><li><strong>Assignee</strong> set to <i>Jean-Philippe Lang</i></li></ul><p>Screenshots looks nice for me.<br />Jean-Phillipe, is there any possibility that this patch will be merged?</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=761872017-01-21T09:51:48ZMarius BĂLTEANU
<ul></ul><p>Jean-Philippe, do you have any feedback on this?</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=763572017-01-28T10:31:54ZGo MAEDA
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-1 priority-4 priority-default" href="/issues/11757">Feature #11757</a>: Add support for HDPI screens (retina)</i> added</li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=828232017-12-30T07:29:36ZBernhard Rohloff
<ul></ul><p>This patch is a great improvement to Redmine. It extends the variety of icons available to developers of plugins and Redmine itself. It's a pitty that there hasn't been more discussion about this improvement for a year now.</p>
<p>Unfortunately this patch doesn't work anymore.<br /><a class="user active" href="https://www.redmine.org/users/27597">Marius Ionescu</a> BALTEANU is it possible to update this patch to a recent revision of Redmine? I would really love to see this patch applied in <a class="version" href="https://www.redmine.org/versions/99">4.0.0</a> or <a class="version" href="https://www.redmine.org/versions/127">4.1.0</a>.</p>
<p>+1 for this!</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=829732018-01-08T19:17:31ZMarius BĂLTEANU
<ul></ul><p>Bernhard Rohloff wrote:</p>
<blockquote>
<p><a class="user active" href="https://www.redmine.org/users/27597">Marius Ionescu</a> BALTEANU is it possible to update this patch to a recent revision of Redmine? I would really love to see this patch applied in <a class="version" href="https://www.redmine.org/versions/99">4.0.0</a> or <a class="version" href="https://www.redmine.org/versions/127">4.1.0</a>.</p>
</blockquote>
<p>Sure, I'll try to do it this month (including the update to Font Awesome 5).</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=830742018-01-12T13:27:50ZAnonymous
<ul></ul><p><a href="https://github.com/blog/2112-delivering-octicons-with-svg" class="external">GitHub changed from Icon fonts to SVG icons.</a><br />Icon fonts is not bad, but I think it will be better if you change to SVG icons.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=839652018-03-13T14:20:50ZBernhard Rohloff
<ul></ul><p>Taiki IKEGAME wrote:</p>
<blockquote>
<p><a href="https://github.com/blog/2112-delivering-octicons-with-svg" class="external">GitHub changed from Icon fonts to SVG icons.</a><br />Icon fonts is not bad, but I think it will be better if you change to SVG icons.</p>
</blockquote>
<p>This also sounds very interesting to me and seems to be more versatile than icon fonts. It could be nice to load custom icons in a plugin and use them with the same helper method as the core icons. Or just to install a custom icon pack as a plugin. Just a few thoughts. I'm not so well informed about this topic right now. So are there some other opinions about preferring SVG icons over icon fonts?</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=845272018-04-12T14:43:01ZAnonymous
<ul></ul><p>Fontawesome 5 recommends <a href="https://fontawesome.com/get-started/svg-with-js" class="external">JS with SVG</a>.<br />Sorry for not checking well.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=890242018-12-16T07:46:40ZAnonymous
<ul></ul><p>Yey! This asap pls! <img src="https://cdn.discordapp.com/emojis/471854100984758274.png" style="width:20px;" alt="" /><br />+1</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=890402018-12-16T15:27:47ZMarius BĂLTEANU
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-5 priority-4 priority-default closed" href="/issues/30229">Feature #30229</a>: Optimization: all UI icons collapsed into a single sprite</i> added</li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=890412018-12-16T15:29:16ZMarius BĂLTEANU
<ul></ul><p>Max Johansson wrote:</p>
<blockquote>
<p>Yey! This asap pls! <img src="https://cdn.discordapp.com/emojis/471854100984758274.png" style="width:20px;" alt="" /><br />+1</p>
</blockquote>
<p>Max, I'll be very happy to update my patch if Jean-Philippe agrees to replace the current icons with FA icons.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=890542018-12-16T23:53:17ZAnonymous
<ul></ul><p>Marius, <img src="https://cdn.discordapp.com/emojis/468702863795683328.png" style="width:20px;" alt="" /><br />Jean-Philippe, could you please let us know your opinion about this?</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=901572019-02-15T17:28:41ZAnonymous
<ul></ul><p>Marius, maybe it will be easier to update the patch and sneak-commit it with help of Go? Then we could cross fingers and hope that Jean-Philippe might not notice it :D</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=901692019-02-16T01:04:20ZGo MAEDA
<ul></ul><p>Max Johansson wrote:</p>
<blockquote>
<p>Marius, maybe it will be easier to update the patch and sneak-commit it with help of Go?</p>
</blockquote>
<p>I will not commit such a big change without Jean-Philippe's consent. I never forget that he is the owner of this software and we can use Redmine thanks to him and his many years of efforts.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=901802019-02-16T07:14:03ZJan from Planio www.plan.io
<ul></ul><p>Go MAEDA wrote:</p>
<blockquote>
<p>I will not commit such a big change without Jean-Philippe's consent. I never forget that he is the owner of this software and we can use Redmine thanks to him and his many years of efforts.</p>
</blockquote>
<p>Absolutely agree!</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=901862019-02-17T10:30:52ZBernhard Rohloff
<ul></ul><p>Basically I agree with Go and Jan. It's not an option to make decisions behind JP's back. As much as I share this opinion I can understand Max's intention. This issue is nearly three years old and no decisions are made. So has anybody a better idea on how to get at least a <strong>yes</strong>, <strong>no</strong>, <strong>maybe</strong> from Redmine's kahuna?</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=902432019-02-18T14:49:12ZAnonymous
<ul></ul><blockquote>
<p>So has anybody a better idea on how to get at least a yes, no, maybe from Redmine's kahuna?</p>
</blockquote>
<p>I guess the only way I could come up with is to bump this ticket with a message mentioning <strong>JPL</strong> and <strong>urgent</strong> to be visible in the <strong>activity log of Redmine.org</strong> next time a commit streak from JPL will occur. And it can be detected with help of #redmine-commits channel on our Discord, but if RSS tracker bot will not logout again (Discord been having problems with bots logging out lately, but they are working on fixing it afaik) and there will be anyone available or online to bump this message in that perfect moment :)</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=903642019-02-21T16:27:19ZAnonymous
<ul></ul><p>Bump! Jean-Philippe, this ticket is ultra-urgent to many, please share your consent.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=903682019-02-21T16:57:45ZMarius BĂLTEANU
<ul></ul><p>Max Johansson wrote:</p>
<blockquote>
<p>Bump! Jean-Philippe, this ticket is ultra-urgent to many, please share your consent.</p>
</blockquote>
<p>Max, let be honest, it is not so ultra-urgent, it is just a nice UI improvement for the core and for the theme developers. I'll update my patch to Font Awesome 5 and then I'll share my thoughts regarding this feature.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=903692019-02-21T16:58:36ZMarius BĂLTEANU
<ul></ul><p>But I partially agree, a feedback from Jean-Philippe could be useful to not work in the wrong direction.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=918812019-05-20T06:49:06ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/23120">gitlab.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23120/gitlab.png">gitlab.png</a> added</li></ul><p><a href="https://gitlab.com/redmine-org/redmine/merge_requests/3" class="external">Here</a> is an updated version of my patch. Because the size of the patch is too big, you need to download it from my gitlab instance (screenshot attached for those who are not familiar with GitLab - <a class="attachment" href="https://www.redmine.org/attachments/23120">gitlab.png</a>).</p>
<p>The patch includes now the latest version of Font Awesome (5.8.2) and replaces the images with font icons only for elements with 'icon icon-*' classes. I'll add very soon another patch for the rest of the elements.</p>
<p>Please test it and let me know what do you think.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=919112019-05-20T14:51:31ZGo MAEDA
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p><a href="https://gitlab.com/redmine-org/redmine/merge_requests/3" class="external">Here</a> is an updated version of my patch.</p>
</blockquote>
<p>Since the page requires authentication, I could not get the patch.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=919142019-05-20T20:34:41ZMarius BĂLTEANU
<ul></ul><p>Go MAEDA wrote:</p>
<blockquote>
<p>Marius BALTEANU wrote:</p>
<blockquote>
<p><a href="https://gitlab.com/redmine-org/redmine/merge_requests/3" class="external">Here</a> is an updated version of my patch.</p>
</blockquote>
<p>Since the page requires authentication, I could not get the patch.</p>
</blockquote>
<p>Sorry, I didn't know that the project is private. I made it public now, you should have access.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=921622019-06-02T09:11:35ZMarius BĂLTEANU
<ul><li><strong>Target version</strong> changed from <i>Candidate for next major release</i> to <i>4.1.0</i></li></ul><p>I've have updated my patch to include the latest changes made in <a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Use "icon icon-*" classes for sort-handler, collapsible fieldsets and collapsible versions (Closed)" href="https://www.redmine.org/issues/31433">#31433</a> and <a class="issue tracker-1 status-5 priority-4 priority-default closed" title="Defect: Switch between toggle plus and minus icons for toggle multi select (Closed)" href="https://www.redmine.org/issues/31496">#31496</a>.</p>
<p>Considering that most of the icons are now replaced with font awesome icons, I'm assigning this to <a class="version" href="https://www.redmine.org/versions/127">4.1.0</a> in order to take a feedback from Jean-Philippe.</p>
<p>There are still some images that can be replaced with FA icons, but we can do it in a later version. I'm really sure that it'll be a great improvement to deliver this for everyone (users, theme developers, plugin developers, 3rd party saas providers like Plan.io).</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=929312019-08-01T06:40:18ZMizuki ISHIKAWA
<ul></ul><p>+1</p>
<p>I hope this feature will be released as soon as possible.<br />The current icon is hard to see due to its small size and is not kind to the user.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=939262019-09-25T19:48:36ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/23935">after.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23935/after.png">after.png</a> added</li><li><strong>File</strong> <a href="/attachments/23934">before.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/23934/before.png">before.png</a> added</li></ul><p>Updated the patch and added a new commit to replace the images from JS Toolbar with FA icons.</p>
<p>Toolbar with current images:<br /><img src="https://www.redmine.org/attachments/download/23934/before.png" alt="" /></p>
<p>Toolbar with FA icons*:<br /><img src="https://www.redmine.org/attachments/download/23935/after.png" alt="" /></p>
<p>*The icons for Inline code, H1, H2 and H3 are not really icons because FA doesn't have such icons, are just text.</p>
<p>The patches (2 commits) can be found <a href="https://gitlab.com/redmine-org/redmine/merge_requests/3/commits" class="external">here</a>.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=947142019-11-02T07:38:15ZJean-Philippe Langjp_lang@yahoo.fr
<ul><li><strong>Target version</strong> changed from <i>4.1.0</i> to <i>5.0.0</i></li></ul><p>This is a major change for plugins and themes, reassigning to 5.0.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1018132021-04-04T21:12:48ZMarius BĂLTEANU
<ul><li><strong>Assignee</strong> changed from <i>Jean-Philippe Lang</i> to <i>Marius BĂLTEANU</i></li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1023002021-04-30T07:57:14ZMarius BĂLTEANU
<ul></ul><p>I've started to look again on this and I think it's better to move from icon fonts to svgs if we really do this step. Most of the major apps that I use did this and Github wrote a very nice article about this (<a class="external" href="https://github.blog/2016-02-22-delivering-octicons-with-svg/">https://github.blog/2016-02-22-delivering-octicons-with-svg/</a>).</p>
<p>I will post in a few days a PoC for this change which allows easy customisation by plugin developers or to keep the existing functionality.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1043042021-10-10T18:17:28ZMarius BĂLTEANU
<ul><li><strong>File</strong> <a href="/attachments/28144">issue.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28144/issue.png">issue.png</a> added</li><li><strong>File</strong> <a href="/attachments/28145">0001-Replace-icon-images-with-inline-SVG-icons.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28145/0001-Replace-icon-images-with-inline-SVG-icons.patch">0001-Replace-icon-images-with-inline-SVG-icons.patch</a> added</li></ul>I made a demo patch that adds SVGs instead of icon fonts for issue page:
<ul>
<li>rendering SVG inline (in HTML) make them fully customisable from CSS (size, fill, stroke, etc)</li>
<li>added a Helper class to render all icons/SVGs. This means that are easily customisable/extendable.</li>
<li>plugin developers can use this new class to render the icons using the existing SVGs or they can add new SVGs</li>
<li>the SVGs used are from Font Awesome (latest 5.* version).</li>
</ul>
<p><img src="https://www.redmine.org/attachments/download/28144/issue.png" style="border: 1px solid grey;" alt="" /></p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1043232021-10-13T14:54:26ZBernhard Rohloff
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>I made a demo patch that adds SVGs instead of icon fonts for issue page: </p>
</blockquote>
<p>Marius I've tested your patch. IMHO it looks really nice. I would love to see this landing in v5.0.0.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1044202021-10-26T04:52:22ZMizuki ISHIKAWA
<ul></ul><p>Marius BALTEANU wrote:</p>
<blockquote>
<p>I made a demo patch that adds SVGs instead of icon fonts for issue page</p>
</blockquote>
<p>That looks very good.</p>
<p>I know of a few themes that replace icon images with icon fonts.<br />For those themes, you can continue to use your own icons without making any major changes by applying the following CSS.<br /><pre>
.icon-svg svg {display: none;}
</pre><br />This change looks like it could be released without breaking the theme too much.</p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1059822022-03-18T21:26:19ZMarius BĂLTEANU
<ul><li><strong>Target version</strong> changed from <i>5.0.0</i> to <i>Candidate for next major release</i></li></ul> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1060762022-03-21T21:37:10ZTakashi Kato
<ul><li><strong>File</strong> <a href="/attachments/28983">0001-Add-tag-helper-patch.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28983/0001-Add-tag-helper-patch.patch">0001-Add-tag-helper-patch.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28984">0002-Add-svg-icons.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28984/0002-Add-svg-icons.patch">0002-Add-svg-icons.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28985">0003-Support-expand-collapse-with-svg-icons.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28985/0003-Support-expand-collapse-with-svg-icons.patch">0003-Support-expand-collapse-with-svg-icons.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28986">0004-Support-jsToolbar.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28986/0004-Support-jsToolbar.patch">0004-Support-jsToolbar.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28987">0005-Replace-tags-with-helper.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28987/0005-Replace-tags-with-helper.patch">0005-Replace-tags-with-helper.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28988">0006-Add-a-temporary-svg-icon-to-the-plugin-template.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28988/0006-Add-a-temporary-svg-icon-to-the-plugin-template.patch">0006-Add-a-temporary-svg-icon-to-the-plugin-template.patch</a> added</li><li><strong>File</strong> <a href="/attachments/28990">svg-icon.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/28990/svg-icon.png">svg-icon.png</a> added</li></ul><p>I'm very much looking forward to its introduction.</p>
<p>Although svg icons may require more effort than icon fonts, they can be implemented using only standard technology.</p>
<p>On the other hand, I see the following issues with the current proposal (I understand that the attached patch is for verification purposes).</p>
<ol>
<li>Inline svg images do not cache svg files.</li>
<li>The new helper would require significant modifications, including plugins.</li>
<li>We need a mechanism to add icons in themes and plugins.</li>
<li>We need a way to add/remove svg icons with javascript.</li>
<li>It is tedious to check and obtain updates of external resources that distribute svg icons.</li>
</ol>
<p>I am attaching patches to solve the problem. Icons are from fontawesome and material design using a service called iconify. Note that it does not work in IE11.</p>
<p>For consistency of icons with themes and plugins, this feature can be disabled in the configuration file. After applying patches, We must set `config.redmine_enable_svg_icon` to true in "config/application.rb" to enable it.</p>
<p>1 Inline svg images do not cache svg files.</p>
<ul>
<li>We can use svg from another file by adding a symbol element to svg and using "href" in the use element.</li>
<li>Stylesheets can control the size and the color of the icons.</li>
</ul>
<p>2 The new helper would require significant modifications, including plugins.</p>
<ul>
<li>I patched to tag helper to add icons, check classes and add necessary svg icons if icon class or icon-only class is present.</li>
<li>link_to and content_tag do not need to be modified since they use the tag helper internally.</li>
<li>Rewrite the part of the html in the view with a helper (we must notify the plugin authors).</li>
</ul>
<p>3 We need a mechanism to add icons from themes and plugins.</p>
<ul>
<li>Prepare common.yml ("class name ⇒ svg" correspondence).</li>
<li>common.yml prepared by plugin and theme will be merged into icon data in Redmine at startup.</li>
<li>svg icon is generated by default when We generate a new plugin.</li>
</ul>
<p>4 We need a way to add/remove svg icons with javascript.</p>
<ul>
<li>create <code>addSVGIcon</code> and <code>removeSVGIcon</code> method.</li>
<li>It is necessary to announce to plugin/theme authors that the method of toggling icon display by simply adding/removing CSS classes is not available.</li>
</ul>
<p>5. It is tedious to check and obtain updates of external resources that distribute svg icons.</p>
<ul>
<li><code>rake icon:fetch</code> to fetch required icons at once.</li>
</ul>
<p>patches can be applied to <a class="changeset" title="Traditional Chinese translation update (#36815). Patch by ChunChang Lo." href="https://www.redmine.org/projects/redmine/repository/svn/revisions/21487">r21487</a></p> Redmine - Patch #23980: Replace images with icon fontshttps://www.redmine.org/issues/23980?journal_id=1116382023-11-25T07:26:37Zpasquale [:dedalus]
<ul></ul><p><a class="user active" href="https://www.redmine.org/users/107353">Marius BĂLTEANU</a> <a class="user active" href="https://www.redmine.org/users/332">Go MAEDA</a><br />I think that modernizing the graphic aspect of redmine is a way to increase its diffusion. This ticket has been stalled since version 3.4. The default theme icons are really outdated. Is it possible in your opinion to foresee a release in version 6.0?</p>