From 023584e0498de5f2f6ea1f109c7ba10fe8d5cfe1 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 7 Apr 2023 21:07:35 +0000 Subject: [PATCH] recipient_row: Set color of privacy icon as a shade of stream color. --- web/src/drafts.js | 7 ++--- web/src/message_list_view.js | 3 +++ web/src/stream_color.js | 26 +++++++++++++++---- web/templates/draft.hbs | 2 +- web/templates/recent_topic_row.hbs | 2 +- web/templates/recipient_row.hbs | 2 +- .../stream_specific_notification_row.hbs | 2 +- web/templates/stream_sidebar_actions.hbs | 2 +- web/templates/stream_sidebar_row.hbs | 2 +- web/templates/user_stream_list_item.hbs | 2 +- 10 files changed, 35 insertions(+), 15 deletions(-) diff --git a/web/src/drafts.js b/web/src/drafts.js index 4954b1e75a..baf4a2bbdb 100644 --- a/web/src/drafts.js +++ b/web/src/drafts.js @@ -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, diff --git a/web/src/message_list_view.js b/web/src/message_list_view.js index 72e694213f..879c9bfb7d 100644 --- a/web/src/message_list_view.js +++ b/web/src/message_list_view.js @@ -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; diff --git a/web/src/stream_color.js b/web/src/stream_color.js index 8443b30220..109e508277 100644 --- a/web/src/stream_color.js +++ b/web/src/stream_color.js @@ -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) { diff --git a/web/templates/draft.hbs b/web/templates/draft.hbs index ecb0895cef..42c5c8f402 100644 --- a/web/templates/draft.hbs +++ b/web/templates/draft.hbs @@ -4,7 +4,7 @@
- + {{> stream_privacy}} {{stream_name}} diff --git a/web/templates/recent_topic_row.hbs b/web/templates/recent_topic_row.hbs index dca2f87273..89e0de44cb 100644 --- a/web/templates/recent_topic_row.hbs +++ b/web/templates/recent_topic_row.hbs @@ -6,7 +6,7 @@ Direct messages {{else}} - + {{> stream_privacy }} {{stream}} diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs index a2e9239647..6a48578696 100644 --- a/web/templates/recipient_row.hbs +++ b/web/templates/recipient_row.hbs @@ -6,7 +6,7 @@ style="background: {{background_color}}; border-left-color: {{background_color}};" href="{{stream_url}}" title="{{t 'Narrow to stream "{display_recipient}"' }}"> - + {{> stream_privacy}} diff --git a/web/templates/settings/stream_specific_notification_row.hbs b/web/templates/settings/stream_specific_notification_row.hbs index 9c0e7946e8..df2c6b711a 100644 --- a/web/templates/settings/stream_specific_notification_row.hbs +++ b/web/templates/settings/stream_specific_notification_row.hbs @@ -1,6 +1,6 @@ - + {{> ../stream_privacy invite_only=stream.invite_only is_web_public=stream.is_web_public }} diff --git a/web/templates/stream_sidebar_actions.hbs b/web/templates/stream_sidebar_actions.hbs index 67684b6658..289a87fec7 100644 --- a/web/templates/stream_sidebar_actions.hbs +++ b/web/templates/stream_sidebar_actions.hbs @@ -2,7 +2,7 @@

  • - + {{> stream_privacy invite_only=stream.invite_only is_web_public=stream.is_web_public }} diff --git a/web/templates/stream_sidebar_row.hbs b/web/templates/stream_sidebar_row.hbs index 118e4b0fe9..bc9bc936df 100644 --- a/web/templates/stream_sidebar_row.hbs +++ b/web/templates/stream_sidebar_row.hbs @@ -4,7 +4,7 @@

    - + {{> stream_privacy }} diff --git a/web/templates/user_stream_list_item.hbs b/web/templates/user_stream_list_item.hbs index 74d4e6a4a8..146eb753a8 100644 --- a/web/templates/user_stream_list_item.hbs +++ b/web/templates/user_stream_list_item.hbs @@ -1,6 +1,6 @@ - + {{> stream_privacy }} {{name}}