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

subscriptions: Move raw svg for plus and check icons to zulip-icon.

Browse Source 
Fixes #35899.

We don't make any visual changes to how the svgs/icons look, we just
move them to use the zulip-icon system.

We also replace use of the raw images of each in the help center and add
appropriate color for both in the help center.
This commit is contained in:
Shubham Padia
2025-09-15 11:20:30 +00:00
committed by Tim Abbott
parent c0f89d261f
commit 310a2323b6
9 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
starlight_help/src/content/docs/introduction-to-channels.mdx
View File

@@ -13,6 +13,7 @@ import ChannelsIntro from "./include/_ChannelsIntro.mdx";
import BarChartIcon from "~icons/fa/bar-chart";
import SortAlphaAscIcon from "~icons/fa/sort-alpha-asc";
import UserOIcon from "~icons/fa/user-o";
import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus";
<ChannelsIntro />
@@ -32,7 +33,7 @@ subscribe to [private](/help/channel-permissions#private-channels) channels.
1. Scroll through the list of channels. You can use the **search box** near the
top of the menu to filter the list by channel name or description.
1. Click the **subscribe to channel**
(<img src="../../../../static/images/help/desktop-web-plus-icon.svg" alt="plus" class="help-center-icon" />)
(<SubscriberPlusIcon class="zulip-unplugin-icon subscriber-plus-icon" />)
icon to the left of a channel to subscribe to it.
</FlattenedSteps>

4
starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx
View File

@@ -12,6 +12,8 @@ import ChannelActions from "./include/_ChannelActions.mdx";
import ChannelLongPressMenu from "./include/_ChannelLongPressMenu.mdx";
import MobileChannels from "./include/_MobileChannels.mdx";
import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check";
You can always unsubscribe from any channel in Zulip.
<Tabs>
@@ -44,7 +46,7 @@ You can always unsubscribe from any channel in Zulip.
<NavigationSteps target="relative/gear/channel-settings" />
1. Click the **unsubscribe from channel**
(<img src="../../../../static/images/help/desktop-web-check-icon.svg" alt="checkmark" class="help-center-icon" />)
(<SubscriberCheckIcon class="zulip-unplugin-icon subscriber-check-icon" />)
icon to the left of a channel to unsubscribe from it.
</FlattenedSteps>
</TabItem>

7
starlight_help/src/content/docs/user-groups.mdx
View File

@@ -11,6 +11,9 @@ import CloudPaidPlansOnly from "./include/_CloudPaidPlansOnly.mdx";
import UserGroupsApplications from "./include/_UserGroupsApplications.mdx";
import UserGroupsIntro from "./include/_UserGroupsIntro.mdx";
import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check";
import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus";
<CloudPaidPlansOnly />
<UserGroupsIntro />
@@ -29,7 +32,7 @@ organization's structure in Zulip's permissions system.
1. Scroll through the list of user groups. You can use the **search box** near
the top of the menu to filter the list by group name or description.
1. Click the **join group** (<img src="../../../../static/images/help/desktop-web-plus-icon.svg" alt="plus" class="help-center-icon" />) icon to the left of a user group to
1. Click the **join group** (<SubscriberPlusIcon class="zulip-unplugin-icon subscriber-plus-icon" />) icon to the left of a user group to
join the group, if you have
[permission](/help/manage-user-groups#configure-group-permissions) to do so.
</FlattenedSteps>
@@ -43,7 +46,7 @@ organization's structure in Zulip's permissions system.
<FlattenedSteps>
<NavigationSteps target="relative/gear/group-settings" />
1. Click the **leave group** (<img src="../../../../static/images/help/desktop-web-check-icon.svg" alt="checkmark" class="help-center-icon" />) icon to the left of a user group to leave the
1. Click the **leave group** (<SubscriberCheckIcon class="zulip-unplugin-icon subscriber-check-icon" />) icon to the left of a user group to leave the
group, if you have
[permission](/help/manage-user-groups#configure-group-permissions) to do so.
</FlattenedSteps>

12
starlight_help/src/styles/main.css
View File

@@ -178,6 +178,18 @@
color: var(--color-user-circle-deactivated);
}
.subscriber-check-icon {
/* This color is borrowed from subscriptions.css to make it look
the same as the web app. */
fill: hsl(240deg 96% 68%);
}
.subscriber-plus-icon {
/* This color is borrowed from subscriptions.css to make it look
the same as the web app. */
fill: hsl(0deg 0% 72%);
}
.sl-markdown-content {
img {
vertical-align: top;

3
web/shared/icons/subscriber-check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 472 B

3
web/shared/icons/subscriber-plus.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 741 B

4
web/src/stream_settings_components.ts
View File

@@ -127,7 +127,7 @@ function display_subscribe_toggle_spinner($stream_row: JQuery): void {
$stream_row.find(".check").removeClass("sub_unsub_button");
/* Hide the tick. */
const $tick = $stream_row.find("svg");
const $tick = $stream_row.find(".sub-unsub-icon");
$tick.addClass("hide");
/* Add a spinner to show the request is in process. */
@@ -142,7 +142,7 @@ function hide_subscribe_toggle_spinner($stream_row: JQuery): void {
$stream_row.find(".check").addClass("sub_unsub_button");
/* Show the tick. */
const $tick = $stream_row.find("svg");
const $tick = $stream_row.find(".sub-unsub-icon");
$tick.removeClass("hide");
/* Destroy the spinner. */

43
web/styles/subscriptions.css
View File

@@ -747,29 +747,39 @@ h4.user_group_setting_subsection_title {
background-repeat: no-repeat;
background-position: center center;
display: flex;
justify-content: center;
& svg {
fill: hsl(0deg 0% 72%);
width: 70%;
margin: 0% 15%;
& .sub-unsub-icon {
display: flex;
height: 100%;
align-items: center;
/* This color is used in .subscriber-check-icon of the help
center to make the icon color same as the web app. Do change
the color there when changing the color here */
color: hsl(0deg 0% 72%);
font-size: 1.0938em; /* 70% of 1.5625em */
&.hide {
display: none;
}
}
&.checked:hover svg {
fill: hsl(240deg 41% 50%);
&.checked:hover .sub-unsub-icon {
color: hsl(240deg 41% 50%);
}
&.not-direct-member {
svg {
.sub-unsub-icon {
cursor: default;
}
}
&.disabled {
&:not(.checked) svg {
fill: hsl(0deg 0% 87%);
&:not(.checked) .sub-unsub-icon {
color: hsl(0deg 0% 87%);
}
svg {
.sub-unsub-icon {
cursor: not-allowed;
}
}
@@ -792,8 +802,11 @@ h4.user_group_setting_subsection_title {
}
}
.checked svg {
fill: hsl(240deg 96% 68%);
.checked .sub-unsub-icon {
/* This color is used in .subscriber-check-icon of the help
center to make the icon color same as the web app. Do change
the color there when changing the color here */
color: hsl(240deg 96% 68%);
}
.icon {
@@ -881,9 +894,9 @@ h4.user_group_setting_subsection_title {
background-color: var(--color-active-row-modal);
}
.check:not(.checked, .disabled):hover svg,
&.active .check:not(.checked, .disabled):hover svg {
fill: hsl(0deg 0% 27%);
.check:not(.checked, .disabled):hover .sub-unsub-icon,
&.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
color: hsl(0deg 0% 27%);
}
&::selection,

8
web/templates/stream_settings/browse_streams_list_item.hbs
View File

@@ -14,9 +14,7 @@
</span>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
<i class="zulip-icon zulip-icon-subscriber-check sub-unsub-icon"></i>
</div>
<div class='sub_unsub_status'></div>
</div>
@@ -42,9 +40,7 @@
</span>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
<i class="zulip-icon zulip-icon-subscriber-plus sub-unsub-icon"></i>
</div>
<div class='sub_unsub_status'></div>
</div>