paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-19 14:08:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

user_groups: Prepare properly sized group icon.

Browse Source 
This removes kludgy font-size adjustments on the group
icon, whose path was previously smaller than the 16x16
viewbox.

By adjusting the icon to take up the full width, it is
no longer necessary to fiddle with the icon's size, in
keeping with the app-wide move to 16x16 icons.

That simplifies some headache-inducing sizing and
calculations on the typeahead as well.
This commit is contained in:
Karl Stolley
2025-11-06 12:13:25 -05:00
committed by Tim Abbott
parent b34849a90f
commit 457b80ece6
3 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/shared/icons/user-group.svg
View File

@@ -1,3 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.335a3.332 3.332 0 1 1 0 6.663 3.332 3.332 0 0 1 0-6.663Zm2.002 3.332a2.002 2.002 0 1 0-4.004 0 2.002 2.002 0 0 0 4.004 0ZM12 9.335a3.332 3.332 0 0 1 3.332 3.332V14a.665.665 0 0 1-1.33 0v-1.333A2.002 2.002 0 0 0 12 10.665H8a2.002 2.002 0 0 0-2.002 2.002V14a.665.665 0 0 1-1.33 0v-1.333A3.332 3.332 0 0 1 8 9.335h4Zm-8.023.585a.665.665 0 0 1-.477.81 2.002 2.002 0 0 0-1.502 1.937V14a.665.665 0 1 1-1.33 0v-1.334a3.332 3.332 0 0 1 2.5-3.223.665.665 0 0 1 .81.477Zm1.191-8.478a.665.665 0 1 1 .33 1.289 2.002 2.002 0 0 0 0 3.878.665.665 0 0 1-.33 1.288 3.332 3.332 0 0 1 0-6.455Z"/> <path
d="m 10.182226,0.72803666 a 3.6355726,3.6355726 0 1 1 0,7.27005394 3.6355726,3.6355726 0 0 1 0,-7.27005394 z m 2.184399,3.63557244 a 2.1843994,2.1843994 0 1 0 -4.3687987,0 2.1843994,2.1843994 0 0 0 4.3687987,0 z m -0.0022,5.0932932 a 3.6355726,3.6355726 0 0 1 3.635572,3.6355717 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 2.1843987,2.1843987 0 0 0 12.364442,10.908076 H 8.0000085 a 2.1843987,2.1843987 0 0 0 -2.1843986,2.184398 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 3.6355726,3.6355726 0 0 1 8.0000085,9.4569023 Z M 3.6104801,10.095201 A 0.72558695,0.72558695 0 0 1 3.0900216,10.978998 2.1843987,2.1843987 0 0 0 1.451177,13.092474 v 1.454448 a 0.725587,0.725587 0 1 1 -1.451174,0 V 13.091383 A 3.6355726,3.6355726 0 0 1 2.7277736,9.5747419 0.72558695,0.72558695 0 0 1 3.6115712,10.095201 Z M 4.90999,0.84478524 a 0.72589886,0.72589886 0 1 1 0.3600658,1.40643846 2.1843987,2.1843987 0 0 0 0,4.2313176 0.72558695,0.72558695 0 0 1 -0.3600658,1.4053474 3.6355726,3.6355726 0 0 1 0,-7.04310346 z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 686 B

After

Width:  |  Height:  |  Size: 1.1 KiB

9
web/styles/input_pill.css
View File

@@ -385,7 +385,14 @@
} }
.display_only_group_pill .zulip-icon-user-group { .display_only_group_pill .zulip-icon-user-group {
font-size: 1.3571em; /* 19px at 14px / em */ /* Reserve the same square box for the user-group
icon as on pill images. */
height: var(--height-input-pill);
width: var(--height-input-pill);
/* Center the icon in the box using flex. */
display: flex;
align-items: center;
justify-content: center;
} }
@keyframes shake { @keyframes shake {

31
web/styles/typeahead.css
View File

@@ -195,27 +195,22 @@
/* For FontAwesome icons and zulip icons used in place of images for some users. */ /* For FontAwesome icons and zulip icons used in place of images for some users. */
.typeahead-image { .typeahead-image {
font-size: 1.3571em; /* 19px at 14px em */ flex: 0 0 auto;
display: inline-block; height: 1.3125em; /* 21px at 16px/1em */
height: 1.1052em; /* 21px at 19px/1em */ width: 1.3125em; /* 21px at 16px/1em */
width: 1.1052em; /* 21px at 19px/1em */
border-radius: 4px; border-radius: 4px;
text-align: center;
&.zulip-icon-user-group {
font-size: 1.3571em; /* 19px at 14px em */
}
&.no-presence-circle { &.no-presence-circle {
/* 0.6875 * var(--base-font-size) is the width of presence /* 0.6875em at 16px/1em is the width of presence circle,
circle, no margin (-2px left margin + 2px right margin = 0px) no margin (-2px left margin + 2px right margin = 0px),
of the presence circle and 0.3571 * var(--base-font-size-px) and 0.3571 is the gap between the presence circle and
is gap between the presence circle and avatar. image avatars. */
Cannot directly use 0.6875em or 0.3571em margin-left: calc(0.6875em + 0.3571em);
since font-size for user group icon is different from the /* To properly align icons within the 21px square box
font size used to calculate presence circle width and gap. */ defined on .typeahead-image, we establish a flexbox: */
margin-left: calc((0.6875 + 0.3571) * var(--base-font-size-px)); display: flex;
align-items: center;
justify-content: center;
} }
} }