paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 13:03:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

starlight_help: Display gradient for the idle status icon.

Browse Source 
Fixes #35496.

We were displaying a solid color until we figured out how to accurately
display the gradient in the SVG itself.
This commit is contained in:
Shubham Padia
2025-08-19 11:28:44 +00:00
committed by Tim Abbott
parent 72ea340f80
commit 5938f685ad
3 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tools/linter_lib/custom_check.py
View File

@@ -979,6 +979,11 @@ svg_rules = RuleList(
"pattern": r"fill=(['\"])(.*?)\1",
"description": "System icons ignore fill values, so do not include the fill property.",
"include_only": {"web/shared/icons/", "web/images/icons/"},
# This file needs the fill property to define the fill as
# a linear gradient. We cannot define the gradient in CSS
# in a clean way and thus we have decided to define the
# gradient in the SVG itself.
"exclude": {"web/shared/icons/user-circle-idle.svg"},
},
{
"pattern": "fill:",

18
web/shared/icons/user-circle-idle.svg
View File

@@ -1,4 +1,18 @@
<!--
The linearGradient in this SVG is trying to emulate the gradient that
the user-circle-idle class applies to this SVG for the new help center
built on top of starlight. This linearGradient would not have any
effect on the current webapp icon since the gradient in this SVG is
stripped off when the webapp converts this SVG to font.
-->
<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 5.5 C 0 2.462433 2.462432 0 5.5 0 C 8.53754 0 11 2.462433 11 5.5 C 11 8.53754 8.53754 11 5.5 11 C 2.462432 11 0 8.53754 0 5.5 Z"/>
<defs>
<linearGradient id="user-circle-idle-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="5%" stop-color="var(--color-user-circle-idle)" stop-opacity="1" />
<stop offset="25%" stop-color="var(--color-user-circle-idle)" stop-opacity="0.789" />
<stop offset="100%" stop-color="var(--color-user-circle-idle)" stop-opacity="0" />
</linearGradient>
</defs>
<path d="M 0 5.5 C 0 2.462433 2.462432 0 5.5 0 C 8.53754 0 11 2.462433 11 5.5 C 11 8.53754 8.53754 11 5.5 11 C 2.462432 11 0 8.53754 0 5.5 Z"
fill="url(#user-circle-idle-gradient)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 217 B

After

Width:  |  Height:  |  Size: 997 B

6
web/styles/app_variables.css
View File

@@ -1638,6 +1638,12 @@
#646671
);
--color-user-circle-deactivated: hsl(0deg 0% 50%);
/* The gradient is also recreated inside the `user-circle-idle` SVG
file. That is needed for the new help center since it does not
do the SVG to font conversion that the web app does. We
re-apply it here since the linearGradient there is stripped off
when that SVG is converted to font for the web app. Any changes
to this gradient should be reflected in the SVG file as well. */
--gradient-user-circle-idle: linear-gradient(
to right,
var(--color-user-circle-idle) 5%,