From 6f4d14dddee7bc7cc23ddd836b524673536d00fb Mon Sep 17 00:00:00 2001 From: adnan-td Date: Thu, 4 Jul 2024 00:43:10 +0530 Subject: [PATCH] stream_pill: Add channel privacy icons in input_pill. Modify stream pills to add channel privacy decorations inside input pills for areas eg: the UI for adding members to a channel. Partly fixes: #25257. --- web/src/input_pill.ts | 9 +++++++++ web/src/stream_pill.ts | 27 ++++++++++++++------------- web/styles/input_pill.css | 4 ++++ web/templates/input_pill.hbs | 13 ++++++++++++- web/tests/search.test.js | 6 +++--- web/tests/stream_pill.test.js | 10 ++++------ 6 files changed, 46 insertions(+), 23 deletions(-) diff --git a/web/src/input_pill.ts b/web/src/input_pill.ts index 50ae26b18e..3ffe2928f2 100644 --- a/web/src/input_pill.ts +++ b/web/src/input_pill.ts @@ -10,6 +10,7 @@ import * as blueslip from "./blueslip"; import type {EmojiRenderingDetails} from "./emoji"; import * as keydown_util from "./keydown_util"; import type {SearchUserPill} from "./search_pill"; +import type {StreamSubscription} from "./sub_store"; import * as ui_util from "./ui_util"; // See https://zulip.readthedocs.io/en/latest/subsystems/input-pills.html @@ -25,6 +26,7 @@ export type InputPillItem = { group_id?: number; // Used for search pills operator?: string; + stream?: StreamSubscription; } & T; export type InputPillConfig = { @@ -75,6 +77,8 @@ type InputPillRenderingDetails = { should_add_guest_user_indicator: boolean | undefined; user_id?: number | undefined; group_id?: number | undefined; + has_stream?: boolean; + stream?: StreamSubscription; }; // These are the functions that are exposed to other modules. @@ -203,6 +207,11 @@ export function create(opts: InputPillCreateOptions): InputPillContainer; @@ -18,7 +17,7 @@ export type StreamPillData = StreamSubscription & {type: "stream"}; function format_stream_name_and_subscriber_count(sub: StreamSubscription): string { const sub_count = peer_data.get_subscriber_count(sub.stream_id); return $t( - {defaultMessage: "#{stream_name}: {sub_count} users"}, + {defaultMessage: "{stream_name}: {sub_count} users"}, {stream_name: sub.name, sub_count}, ); } @@ -48,11 +47,15 @@ export function create_item_from_stream_name( return undefined; } - if (current_items.some((item) => item.type === "stream" && item.stream_id === sub.stream_id)) { + if ( + current_items.some( + (item) => item.type === "stream" && item.stream.stream_id === sub.stream_id, + ) + ) { return undefined; } - let display_value = "#" + sub.name; + let display_value = sub.name; if (show_subscriber_count) { display_value = format_stream_name_and_subscriber_count(sub); } @@ -60,20 +63,19 @@ export function create_item_from_stream_name( return { type: "stream", display_value, - stream_id: sub.stream_id, - stream_name: sub.name, + stream: sub, }; } export function get_stream_name_from_item(item: InputPillItem): string { - return item.stream_name; + return item.stream.name; } export function get_user_ids(pill_widget: StreamPillWidget | CombinedPillContainer): number[] { let user_ids = pill_widget .items() .flatMap((item) => - item.type === "stream" ? peer_data.get_subscribers(item.stream_id) : [], + item.type === "stream" ? peer_data.get_subscribers(item.stream.stream_id) : [], ); user_ids = [...new Set(user_ids)]; user_ids.sort((a, b) => a - b); @@ -85,22 +87,21 @@ export function append_stream( pill_widget: StreamPillWidget | CombinedPillContainer, show_subscriber_count = true, ): void { - let display_value = "#" + stream.name; + let display_value = stream.name; if (show_subscriber_count) { display_value = format_stream_name_and_subscriber_count(stream); } pill_widget.appendValidatedData({ type: "stream", display_value, - stream_id: stream.stream_id, - stream_name: stream.name, + stream, }); pill_widget.clear_text(); } export function get_stream_ids(pill_widget: StreamPillWidget | CombinedPillContainer): number[] { const items = pill_widget.items(); - return items.flatMap((item) => (item.type === "stream" ? item.stream_id : [])); + return items.flatMap((item) => (item.type === "stream" ? item.stream.stream_id : [])); } export function filter_taken_streams( diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css index b448cc255e..280997c2ba 100644 --- a/web/styles/input_pill.css +++ b/web/styles/input_pill.css @@ -39,6 +39,10 @@ border-radius: 4px 0 0 4px; } + .zulip-icon { + padding-right: 2px; + } + .pill-label { /* Treat as flex container to better position status emoji and control ellipsis on the pill value. */ diff --git a/web/templates/input_pill.hbs b/web/templates/input_pill.hbs index 1be32e8565..c3ea56a0b8 100644 --- a/web/templates/input_pill.hbs +++ b/web/templates/input_pill.hbs @@ -3,7 +3,18 @@ {{/if}} - {{ display_value }} + + {{#if has_stream}} + {{~#if stream.invite_only ~}} + + {{~ else if stream.is_web_public ~}} + + {{~ else ~}} + + {{~/if~}} + {{/if}} + {{ display_value }} + {{~#if should_add_guest_user_indicator}} ({{t 'guest'}}){{~/if~}} {{~#if deactivated}} ({{t 'deactivated'}}){{~/if~}} {{~#if has_status~}} diff --git a/web/tests/search.test.js b/web/tests/search.test.js index 2dee9dad91..c481c5bea7 100644 --- a/web/tests/search.test.js +++ b/web/tests/search.test.js @@ -200,13 +200,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => { let expected_value = `
\n Search for zo\n
\n`; assert.equal(opts.highlighter_html(source[0]), expected_value); - expected_value = `
\n sent by\n \n
\n \n \n <strong>Zo</strong>e\n
\n \n
\n
\n \n
\n`; + expected_value = `
\n sent by\n \n
\n \n \n \n <strong>Zo</strong>e\n \n
\n \n
\n
\n \n
\n`; assert.equal(opts.highlighter_html(source[1]), expected_value); - expected_value = `
\n direct messages with\n \n
\n \n \n <strong>Zo</strong>e\n
\n \n
\n
\n \n
\n`; + expected_value = `
\n direct messages with\n \n
\n \n \n \n <strong>Zo</strong>e\n \n
\n \n
\n
\n \n
\n`; assert.equal(opts.highlighter_html(source[2]), expected_value); - expected_value = `
\n group direct messages including\n \n
\n \n \n <strong>Zo</strong>e\n
\n \n
\n
\n \n
\n`; + expected_value = `
\n group direct messages including\n \n
\n \n \n \n <strong>Zo</strong>e\n \n
\n \n
\n
\n \n
\n`; assert.equal(opts.highlighter_html(source[3]), expected_value); /* Test sorter */ diff --git a/web/tests/stream_pill.test.js b/web/tests/stream_pill.test.js index 5451804dab..ea9138be4d 100644 --- a/web/tests/stream_pill.test.js +++ b/web/tests/stream_pill.test.js @@ -32,16 +32,14 @@ peer_data.set_subscribers(denmark.stream_id, [1, 2, 3, 77]); peer_data.set_subscribers(sweden.stream_id, [1, 2, 3, 4, 5]); const denmark_pill = { - stream_name: denmark.name, - stream_id: denmark.stream_id, type: "stream", - display_value: "#Denmark: 3 users", + display_value: "Denmark: 3 users", + stream: denmark, }; const sweden_pill = { - stream_name: sweden.name, - stream_id: sweden.stream_id, type: "stream", - display_value: "translated: #Sweden: 5 users", + display_value: "translated: Sweden: 5 users", + stream: sweden, }; const subs = [denmark, sweden, germany];