dropdown_list_widget: Show stream icon in the button.

We now show the stream privacy type icon for the option
selected in dropdown list widget.

This commit also includes a minor CSS change to make the
web-public better aligned in the dropdown list widget
"Move topic" and "Move message" modal. There is no visible
change for other pages and other icons due to this CSS
change.

Fixes part of #22355.
This commit is contained in:
Sahil Batra 2023-04-13 19:24:29 +05:30 committed by Tim Abbott
parent 82bf1ba58a
commit 0676629008
3 changed files with 25 additions and 7 deletions

View File

@ -2,6 +2,7 @@ import $ from "jquery";
import _ from "lodash";
import tippy from "tippy.js";
import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
import render_dropdown_list from "../templates/settings/dropdown_list.hbs";
import * as blueslip from "./blueslip";
@ -63,8 +64,16 @@ export class DropdownListWidget {
return;
}
if (item.stream !== undefined) {
const stream = item.stream;
const rendered_stream_name_with_privacy_symbol_html =
render_inline_decorated_stream_name({stream});
$elem.html(rendered_stream_name_with_privacy_symbol_html);
} else {
const text = this.render_text(item.name);
$elem.text(text);
}
$elem.removeClass("text-warning");
$elem.closest(".input-group").find(".dropdown_list_reset_button").show();
}

View File

@ -827,7 +827,7 @@ div.overlay {
.stream-privacy-type-icon {
position: relative;
top: 0.06em;
top: 0.06rem;
padding-right: 1px;
&.zulip-icon-globe,

View File

@ -769,7 +769,7 @@ test("test get_sorted_options_list", () => {
assert.deepEqual(settings_org.get_sorted_options_list(option_values_2), expected_option_values);
});
test("misc", ({override_rewire}) => {
test("misc", ({override_rewire, mock_template}) => {
page_params.is_admin = false;
$("#user-avatar-upload-widget").length = 1;
$("#user_details_section").length = 1;
@ -842,7 +842,7 @@ test("misc", ({override_rewire}) => {
assert.ok(!$("#user-avatar-upload-widget .image_upload_button").hasClass("hide"));
override_rewire(stream_settings_data, "get_streams_for_settings_page", () => [
{name: "some_stream", stream_id: 75},
{name: "some_stream", stream_id: 75, invite_only: true},
{name: "some_stream", stream_id: 42},
]);
@ -873,8 +873,15 @@ test("misc", ({override_rewire}) => {
let setting_name = "realm_notifications_stream_id";
let $elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`);
$elem.closest = () => $stub_notification_disable_parent;
let selected_stream_id = 42;
mock_template("inline_decorated_stream_name.hbs", true, (data, html) => {
assert.equal(data.stream.stream_id, selected_stream_id);
return html;
});
settings_org.notifications_stream_widget.render(42);
assert.equal($elem.text(), "#some_stream");
assert.ok($elem.html().indexOf("some_stream") > 0);
assert.ok($elem.html().indexOf("zulip-icon-hashtag") > 0);
assert.ok(!$elem.hasClass("text-warning"));
settings_org.notifications_stream_widget.render(undefined);
@ -884,8 +891,10 @@ test("misc", ({override_rewire}) => {
setting_name = "realm_signup_notifications_stream_id";
$elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`);
$elem.closest = () => $stub_notification_disable_parent;
selected_stream_id = 75;
settings_org.signup_notifications_stream_widget.render(75);
assert.equal($elem.text(), "#some_stream");
assert.ok($elem.html().indexOf("some_stream") > 0);
assert.ok($elem.html().indexOf("zulip-icon-lock") > 0);
assert.ok(!$elem.hasClass("text-warning"));
settings_org.signup_notifications_stream_widget.render(undefined);