Skip to content

read_receipts: Disable showing read receipts for Notification Bot messages. #22908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timabbott merged 2 commits into from
Sep 23, 2022
Merged

read_receipts: Disable showing read receipts for Notification Bot messages. #22908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff899e5
read_receipts: Disable showing read receipts for Notification Bot msgs.
Riken-Shah Sep 9, 2022
1557875
css: Modal read receipts CSS to modal.css.
timabbott Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 58 additions & 46 deletions static/js/read_receipts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import render_read_receipts_modal from "../templates/read_receipts_modal.hbs";
import * as channel from "./channel";
import {$t, $t_html} from "./i18n";
import * as loading from "./loading";
import * as message_store from "./message_store";
import * as overlays from "./overlays";
import * as people from "./people";
import * as popovers from "./popovers";
Expand All @@ -17,53 +18,64 @@ export function show_user_list(message_id) {
overlays.open_modal("read_receipts_modal", {
autoremove: true,
on_show: () => {
loading.make_indicator($("#read_receipts_modal .loading_indicator"));
channel.get({
url: `/json/messages/${message_id}/read_receipts`,
success(data) {
const users = data.user_ids.map((id) => {
const user = people.get_by_user_id(id);
return {
user_id: user.user_id,
full_name: user.full_name,
avatar_url: people.small_avatar_url_for_person(user),
};
});
users.sort(people.compare_by_name);
const message = message_store.get(message_id);
if (message.sender_email === "[email protected]") {
$("#read_receipts_modal .read_receipts_info").text(
$t({
defaultMessage:
"Read receipts are not available for Notification Bot messages.",
}),
);
$("#read_receipts_modal .modal__content").addClass("compact");
} else {
loading.make_indicator($("#read_receipts_modal .loading_indicator"));
channel.get({
url: `/json/messages/${message_id}/read_receipts`,
success(data) {
const users = data.user_ids.map((id) => {
const user = people.get_by_user_id(id);
return {
user_id: user.user_id,
full_name: user.full_name,
avatar_url: people.small_avatar_url_for_person(user),
};
});
users.sort(people.compare_by_name);

loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
if (users.length === 0) {
$("#read_receipts_modal .read_receipts_info").text(
$t({defaultMessage: "No one has read this message yet."}),
);
} else {
$("#read_receipts_modal .read_receipts_info").html(
$t_html(
{
defaultMessage:
"{num_of_people, plural, one {This message has been <z-link>read</z-link> by {num_of_people} person:} other {This message has been <z-link>read</z-link> by {num_of_people} people:}}",
},
{
num_of_people: users.length,
"z-link": (content_html) =>
`<a href="/help/read-receipts">${content_html}</a>`,
},
),
);
$("#read_receipts_modal .modal__container").addClass(
"showing_read_receipts_list",
);
$("#read_receipts_modal .modal__content").append(
render_read_receipts({users}),
);
new SimpleBar($("#read_receipts_modal .modal__content")[0]);
}
},
error(xhr) {
ui_report.error("", xhr, $("#read_receipts_error"));
loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
},
});
loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
if (users.length === 0) {
$("#read_receipts_modal .read_receipts_info").text(
$t({defaultMessage: "No one has read this message yet."}),
);
} else {
$("#read_receipts_modal .read_receipts_info").html(
$t_html(
{
defaultMessage:
"{num_of_people, plural, one {This message has been <z-link>read</z-link> by {num_of_people} person:} other {This message has been <z-link>read</z-link> by {num_of_people} people:}}",
},
{
num_of_people: users.length,
"z-link": (content_html) =>
`<a href="/help/read-receipts">${content_html}</a>`,
},
),
);
$("#read_receipts_modal .modal__container").addClass(
"showing_read_receipts_list",
);
$("#read_receipts_modal .modal__content").append(
render_read_receipts({users}),
);
new SimpleBar($("#read_receipts_modal .modal__content")[0]);
}
},
error(xhr) {
ui_report.error("", xhr, $("#read_receipts_error"));
loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
},
});
}
},
on_hide: () => {
// Ensure any user info popovers are closed
Expand Down
79 changes: 79 additions & 0 deletions static/styles/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,85 @@
margin-bottom: 10px;
}

#read_receipts_modal {
.modal__container {
width: 360px;

.modal__content {
/* When showing read receipts, we use simplebar
to make the list scrollable. It requires this to
be flex. */
display: flex;

/* Setting a minimum height prevents the loading indicator
appearing/disappearing from resizing the modal in the
common case that one is requesting read receipts for
PMs. */
min-height: 120px;
/* Setting a maximum height is just for aesthetics; the modal looks
weird if its aspect ratio gets too stretched. */
max-height: 480px;

/* For the notification bot error, we want to keep the modal clean and small.
The 16px padding is intended to match the padding at the top of the modal. */
&.compact {
min-height: unset;
padding-bottom: 16px;
}
}
}

.modal__header {
padding-bottom: 0;
}

hr {
margin: 10px 0;
}

.modal__content {
padding: 0 24px 8px;
}

.loading_indicator {
margin: auto;
}

#read_receipts_list {
margin-left: 0;

li {
.read_receipts_user_avatar {
display: inline-block;
height: 20px;
width: 20px;
position: relative;
right: 8px;
border-radius: 4px;
}

margin: 2px 0;
list-style-type: none;
overflow-x: hidden;
padding-left: 10px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
line-height: 26px;

&:hover {
background-color: hsla(0, 0%, 0%, 0.05);
}

&:active,
&:focus {
background-color: hsla(0, 0%, 0%, 0.1);
outline: none;
}
}
}
}

.email_field {
margin-top: 10px;

Expand Down
72 changes: 0 additions & 72 deletions static/styles/zulip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,78 +650,6 @@ strong {
display: none;
}

#read_receipts_modal {
.modal__container {
width: 360px;

.modal__content {
/* When showing read receipts, we use simplebar
to make the list scrollable. It requires this to
be flex. */
display: flex;

/* Setting a minimum height prevents the loading indicator
appearing/disappearing from resizing the modal in the
common case that one is requesting read receipts for
PMs. */
min-height: 120px;
/* Setting a maximum height is just for aesthetics; the modal looks
weird if its aspect ratio gets too stretched. */
max-height: 480px;
}
}

.modal__header {
padding-bottom: 0;
}

hr {
margin: 10px 0;
}

.modal__content {
padding: 0 24px 8px;
}

.loading_indicator {
margin: auto;
}

#read_receipts_list {
margin-left: 0;

li {
.read_receipts_user_avatar {
display: inline-block;
height: 20px;
width: 20px;
position: relative;
right: 8px;
border-radius: 4px;
}

margin: 2px 0;
list-style-type: none;
overflow-x: hidden;
padding-left: 10px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
line-height: 26px;

&:hover {
background-color: hsla(0, 0%, 0%, 0.05);
}

&:active,
&:focus {
background-color: hsla(0, 0%, 0%, 0.1);
outline: none;
}
}
}
}

/* .dropdown-menu from v2.3.2
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
basic idea of this fix is to remove decorations from :hover and apply them only
Expand Down
2 changes: 2 additions & 0 deletions tools/lib/capitalization.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@
# Use in compose box.
r"to send",
r"to add a new line",
# Used in showing Notification Bot read receipts message
"Notification Bot",
]

# Sort regexes in descending order of their lengths. As a result, the
Expand Down