paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_header: Update external link button to use icon button styles.

Browse Source 
This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.

In this particular commit, the code doesn't directly use the
`icon_button` component but instead uses the icon button utility
classes to style the `a` tag`. The reason behind this choice is that we
want to keep the browser support associated with the `a` tag intact,
such as previewing the URL link when hovering over it.

This commit also replaces the legacy font awesome external square link
icon to the newer "external-link" icon from the Zulip font icons.

Fixes part of #34477.
This commit is contained in:
Sayam Samal
2025-05-30 17:23:46 +05:30
committed by Tim Abbott
parent 2263387143
commit fbfc724285
3 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/styles/components.css
View File

@@ -64,7 +64,8 @@ a.no-style {
} }
a.no-underline, a.no-underline,
a.no-underline:hover { a.no-underline:hover,
a.no-underline:focus {
text-decoration: none; text-decoration: none;
} }

7
web/styles/message_header.css
View File

@@ -258,13 +258,6 @@
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
.external-topic-link {
/* Vertically center the external link
icon inside its containing anchor. */
display: flex;
align-items: center;
}
.change_visibility_policy { .change_visibility_policy {
cursor: pointer; cursor: pointer;

10
web/templates/recipient_row.hbs
View File

@@ -40,9 +40,13 @@
{{! exterior links (e.g. to a trac ticket) }} {{! exterior links (e.g. to a trac ticket) }}
{{#each topic_links}} {{#each topic_links}}
<a href="{{this.url}}" target="_blank" rel="noopener noreferrer" class="external-topic-link recipient-bar-control no-underline"> {{#with this}}
<i class="fa fa-external-link-square recipient_bar_icon" data-tippy-content="Open {{this.text}}" aria-label="{{t 'External link' }}"></i> {{!-- TODO: Find a way to use the icon_button component with <a> tags,
</a> instead of copying over the icon button styles via the utility classes. --}}
<a href="{{url}}" target="_blank" rel="noopener noreferrer" class="recipient-bar-control recipient-bar-control-icon no-underline icon-button icon-button-neutral" data-tippy-content="{{t 'Open {text}' }}" aria-label="{{t 'Open {text}' }}" tabindex="0">
<i class="zulip-icon zulip-icon-external-link" aria-hidden="true"></i>
</a>
{{/with}}
{{/each}} {{/each}}
{{! edit topic pencil icon }} {{! edit topic pencil icon }}