Project

General

Profile

Actions

Feature #43280

closed

Improve visual distinction of link presence in SVG icons

Added by Go MAEDA 21 days ago. Updated 12 days ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed

Description

Right now, SVG icons are shown in the same blue color as link text, so it is hard to recognize whether an icon is actually a link.

This patch changes the colors: non-link icons will be dark gray (oc-gray-8), slightly lighter than the body text, while link icons will remain blue (oc-blue-9). This makes it easier to see which icons can be clicked.

Before:

After:


Files

before@2x.png (165 KB) before@2x.png Go MAEDA, 2025-10-01 06:18
after@2x.png (165 KB) after@2x.png Go MAEDA, 2025-10-01 06:18
ajust-icon-color-without-link.patch (1.31 KB) ajust-icon-color-without-link.patch Go MAEDA, 2025-10-01 16:59
screenshot 2025-10-09 11.03.40.png (63.5 KB) screenshot 2025-10-09 11.03.40.png Mizuki ISHIKAWA, 2025-10-09 04:04

Related issues

Related to Redmine - Defect #43358: Code block copy button icon appears gray instead of blueClosedGo MAEDA

Actions
Actions #1

Updated by Mizuki ISHIKAWA 21 days ago

+1

It's inconvenient when you can't tell whether it's a link until you hover over it. I think this is a very good change.

Actions #2

Updated by Marius BĂLTEANU 21 days ago

  • Target version set to 6.0.8
Actions #3

Updated by Go MAEDA 21 days ago

Updated the patch.

The value of the fill property for svg.icon-svg-filled selector should be var(--oc-gray-8) instead of var(--oc-gray-9).

Actions #4

Updated by Go MAEDA 20 days ago

  • Status changed from New to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Commited the patch in r24026.

Actions #5

Updated by Go MAEDA 18 days ago

Merged the change into 6.1-stable brnach in r24026.

Actions #6

Updated by Mizuki ISHIKAWA 13 days ago

There were places where the Edit link icon appeared gray.
This happens because the .icon class is applied to a span tag instead of an a tag, so I think the following diff will fix it.

diff --git a/app/views/issues/_form.html.erb b/app/views/issues/_form.html.erb
index 4551adda7..4ef58d657 100644
--- a/app/views/issues/_form.html.erb
+++ b/app/views/issues/_form.html.erb
@@ -40,7 +40,7 @@
                    }.merge(list_autofill_data_attributes),
                    :no_label => true %>
   <% end %>
-  <%= link_to_function content_tag(:span, sprite_icon('edit', l(:button_edit)), :class => 'icon icon-edit'), '$(this).hide(); $("#issue_description_and_toolbar").show()' unless @issue.new_record? %>
+  <%= link_to_function content_tag(:span, sprite_icon('edit', l(:button_edit))), '$(this).hide(); $("#issue_description_and_toolbar").show()', :class => 'icon icon-edit' unless @issue.new_record? %>
 </p>
 <%= wikitoolbar_for 'issue_description', preview_issue_path(:project_id => @issue.project, :issue_id => @issue.id) %>
 <% end %>

Actions #7

Updated by Go MAEDA 12 days ago

Mizuki ISHIKAWA wrote in #note-6:

There were places where the Edit link icon appeared gray.
This happens because the .icon class is applied to a span tag instead of an a tag, so I think the following diff will fix it.

Committed the fix in r24044, and merged to 6.1-stable branch in r24045. Thank you.

Actions #8

Updated by Go MAEDA 12 days ago

  • Status changed from Resolved to Closed
  • Target version changed from 6.0.8 to 6.1.1
Actions #9

Updated by Go MAEDA 2 days ago

  • Related to Defect #43358: Code block copy button icon appears gray instead of blue added
Actions

Also available in: Atom PDF