Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

recipient_row: Set color of privacy icon as a shade of stream color.

This commit is contained in:
Aman Agrawal 2023-04-07 21:07:35 +00:00 committed by Tim Abbott
parent ff6d04f88c
commit 023584e049
10 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/drafts.js
View File

@ -9,7 +9,6 @@ import render_draft_table_body from "../templates/draft_table_body.hbs";
import * as blueslip from "./blueslip";
import * as browser_history from "./browser_history";
import * as color_class from "./color_class";
import * as compose from "./compose";
import * as compose_actions from "./compose_actions";
import * as compose_fade from "./compose_fade";
@ -25,6 +24,7 @@ import * as narrow_state from "./narrow_state";
import * as overlays from "./overlays";
import * as people from "./people";
import * as rendered_markdown from "./rendered_markdown";
import * as stream_color from "./stream_color";
import * as stream_data from "./stream_data";
import * as sub_store from "./sub_store";
import * as timerender from "./timerender";
@ -370,10 +370,11 @@ export function format_draft(draft) {
draft_id: draft.id,
is_stream: true,
stream_name,
stream_color: draft_stream_color,
dark_background: color_class.get_css_class(draft_stream_color),
stream_privacy_icon_color:
stream_color.get_stream_privacy_icon_color(draft_stream_color),
topic: draft_topic,
raw_content: draft.content,
stream_id: draft.stream_id,
time_stamp,
invite_only,
is_web_public,

3
web/src/message_list_view.js
View File

@ -29,6 +29,7 @@ import * as popovers from "./popovers";
import * as reactions from "./reactions";
import * as rendered_markdown from "./rendered_markdown";
import * as rows from "./rows";
import * as stream_color from "./stream_color";
import * as stream_data from "./stream_data";
import * as sub_store from "./sub_store";
import * as submessage from "./submessage";
@ -175,6 +176,8 @@ function populate_group_from_message_container(group, message_container) {
if (group.is_stream) {
group.background_color = stream_data.get_color(message_container.msg.stream);
group.color_class = color_class.get_css_class(group.background_color);
const color = stream_data.get_color(message_container.msg.stream);
group.stream_privacy_icon_color = stream_color.get_stream_privacy_icon_color(color);
group.invite_only = stream_data.is_invite_only_by_stream_name(message_container.msg.stream);
group.is_web_public = stream_data.is_web_public(message_container.msg.stream_id);
group.topic = message_container.msg.topic;

26
web/src/stream_color.js
View File

@ -1,3 +1,4 @@
import {colord, extend} from "colord";
import $ from "jquery";
import * as color_class from "./color_class";
@ -5,10 +6,22 @@ import {$t} from "./i18n";
import * as message_view_header from "./message_view_header";
import * as stream_settings_ui from "./stream_settings_ui";
function update_table_stream_color(table, stream_name, color) {
// This is ugly, but temporary, as the new design will make it
// so that we only have color in the headers.
const style = color;
extend([lchPlugin]);
export function get_stream_privacy_icon_color(color) {
// LCH stands for Lightness, Chroma, and Hue.
// This function restricts Lightness of a color to be between 20 to 75.
color = colord(color).toLch();
const min_color_l = 20;
const max_color_l = 75;
if (color.l < min_color_l) {
color.l = min_color_l;
} else if (color.l > max_color_l) {
color.l = max_color_l;
}
return colord(color).toHex();
}
const $stream_labels = table.find(".stream_label");
@ -36,7 +49,10 @@ function update_table_stream_color(table, stream_name, color) {
}
function update_stream_privacy_color(id, color) {
$(`.stream-privacy-${CSS.escape(id)}`).css("color", color);
$(`.stream-privacy-original-color-${CSS.escape(id)}`).css("color", color);
color = get_stream_privacy_icon_color(color);
// `modified-color` is only used in recipient bars.
$(`.stream-privacy-modified-color-${CSS.escape(id)}`).css("color", color);
}
function update_historical_message_color(stream_name, color) {

2
web/templates/draft.hbs
View File

@ -4,7 +4,7 @@
<div class="message_header message_header_stream">
<div class="message-header-contents">
<div class="message_label_clickable stream_label">
<span class="stream-privacy filter-icon">
<span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_privacy_icon_color}}">
{{> stream_privacy}}
</span>
{{stream_name}}

2
web/templates/recent_topic_row.hbs
View File

@ -6,7 +6,7 @@
<span class="fa fa-envelope"></span>
<a href="{{pm_url}}">Direct messages</a>
{{else}}
<span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
<span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
{{> stream_privacy }}
</span>
<a href="{{topic_url}}">{{stream}}</a>

2
web/templates/recipient_row.hbs
View File

@ -6,7 +6,7 @@
style="background: {{background_color}}; border-left-color: {{background_color}};"
href="{{stream_url}}"
title="{{t 'Narrow to stream "{display_recipient}"' }}">
<span class="stream-privacy filter-icon">
<span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_privacy_icon_color}}">
{{> stream_privacy}}
</span>

2
web/templates/settings/stream_specific_notification_row.hbs
View File

@ -1,6 +1,6 @@
<tr class="stream-notifications-row {{#if muted}}control-label-disabled{{/if}}" data-stream-id="{{stream.stream_id}}">
<td>
<span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
<span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
{{> ../stream_privacy
invite_only=stream.invite_only
is_web_public=stream.is_web_public }}

2
web/templates/stream_sidebar_actions.hbs
View File

@ -2,7 +2,7 @@
<ul class="nav nav-list streams_popover" data-stream-id="{{ stream.stream_id }}" data-name="{{ stream.name }}">
<li>
<p class="topic-name">
<span class="stream-privacy-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
<span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
{{> stream_privacy
invite_only=stream.invite_only
is_web_public=stream.is_web_public }}

2
web/templates/stream_sidebar_row.hbs
View File

@ -4,7 +4,7 @@
<div class="bottom_left_row">
<div class="subscription_block selectable_sidebar_block">
<span class="stream-privacy-{{id}} stream-privacy filter-icon" style="color: {{color}}">
<span class="stream-privacy-original-color-{{id}} stream-privacy filter-icon" style="color: {{color}}">
{{> stream_privacy }}
</span>

2
web/templates/user_stream_list_item.hbs
View File

@ -1,6 +1,6 @@
<tr data-stream-id="{{stream_id}}">
<td class="subscription_list_stream">
<span class="stream-privacy-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
<span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
{{> stream_privacy }}
</span>
<a class = "stream_list_item" href="{{stream_edit_url}}">{{name}}</a>