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

25 lines
396 B
CSS
Raw Normal View History

Add typing notifications front end. Send typing notification events when user types in the compose box. Listen for these events and display a notification. Sending notifications: Notifications are throttled, so that start notifications are sent every 10 seconds of active typing, and stop notifications are sent 5 seconds after active typing stops or when the compose box is closed. Displaying notifications: When a typing notification is received, if the current narrow is private messages or is: pm-with and the user is not the sender, "Othello is typing..." is displayed underneath the last message. This notification is removed after 15 seconds. If another notification is received during this period, the expiration is extended. When a stop notification is received the notification is removed. Internally, a list of users currently typing is maintained for each conversation (in a dict). When an event is received the list (for the appropriate conversation) is updated and the notifications template is re-rendered based on the narrow information. This template is also re-rendered when the narrow changes. Significantly modified by tabbott for clarity. Fixes #150.
2016-10-12 20:57:59 +02:00
#typing_notifications {
display: none;
margin-left: 10px;
font-style: italic;
typing_notifications.css: Replace RGB colors with HSL colors.
2017-06-21 09:10:54 +02:00
color: hsl(0, 0%, 53%);
Add typing notifications front end. Send typing notification events when user types in the compose box. Listen for these events and display a notification. Sending notifications: Notifications are throttled, so that start notifications are sent every 10 seconds of active typing, and stop notifications are sent 5 seconds after active typing stops or when the compose box is closed. Displaying notifications: When a typing notification is received, if the current narrow is private messages or is: pm-with and the user is not the sender, "Othello is typing..." is displayed underneath the last message. This notification is removed after 15 seconds. If another notification is received during this period, the expiration is extended. When a stop notification is received the notification is removed. Internally, a list of users currently typing is maintained for each conversation (in a dict). When an event is received the list (for the appropriate conversation) is updated and the notifications template is re-rendered based on the narrow information. This template is also re-rendered when the narrow changes. Significantly modified by tabbott for clarity. Fixes #150.
2016-10-12 20:57:59 +02:00
}
#typing_notification_list {
list-style: none;
margin: 0;
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
styles: Use range context queries to eliminate *_max variables. On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 02:49:05 +01:00
@media (width < $xl_min) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
#typing_notifications {
margin-right: 7px;
}
}
styles: Use range context queries to eliminate *_max variables. On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 02:49:05 +01:00
@media (width < $md_min) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
#typing_notifications {
margin-right: 7px;
margin-left: 7px;
}
}