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

compose: Never hide send button. 

`Press Enter to send` used to hide `Send` button, we remove that
behaviour.

We show the current state of `Enter` hotkey action via text below
`Send` button which can toggle behaviour on click.
This commit is contained in:
Aman Agrawal 2021-11-25 09:00:04 +00:00 committed by Tim Abbott
parent 219ecea659
commit 25ee6a795e
11 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend_tests/node_tests/compose.js
View File

@ -317,12 +317,9 @@ test_ui("enter_with_preview_open", ({override}) => {
// Test sending a message without content.
$("#compose-textarea").val("");
$("#compose .preview_message_area").show();
$("#enter_sends").prop("checked", true);
user_settings.enter_sends = true;
compose.enter_with_preview_open();
assert.ok($("#enter_sends").prop("checked"));
assert.equal($("#compose-error-msg").html(), "never-been-set");
});

13
frontend_tests/node_tests/composebox_typeahead.js
View File

@ -1144,7 +1144,6 @@ test("initialize", ({override, mock_template}) => {
// select_on_focus()
override(compose, "toggle_enter_sends_ui", noop);
let channel_patch_called = false;
override(channel, "patch", (params) => {
assert.equal(params.url, "/json/settings");
@ -1153,20 +1152,22 @@ test("initialize", ({override, mock_template}) => {
channel_patch_called = true;
});
$("#enter_sends").is = () => false;
$("#enter_sends").trigger("click");
user_settings.enter_sends = false;
$(".enter_sends").trigger("click");
assert.equal(user_settings.enter_sends, true);
// Now we re-run both .initialize() and the click handler, this time
// with enter_sends: user_settings.enter_sends being true
$("#enter_sends").is = () => true;
$("#enter_sends").trigger("click");
user_settings.enter_sends = true;
$(".enter_sends").trigger("click");
assert.equal(user_settings.enter_sends, false);
$("#stream_message_recipient_stream").off("focus");
$("#stream_message_recipient_topic").off("focus");
$("#private_message_recipient").off("focus");
$("form#send_message_form").off("keydown");
$("form#send_message_form").off("keyup");
$("#enter_sends").off("click");
$(".enter_sends").off("click");
$("#private_message_recipient").off("blur");
ct.initialize();

3
frontend_tests/node_tests/dispatch.js
View File

@ -28,7 +28,6 @@ const activity = mock_esm("../../static/js/activity");
const alert_words_ui = mock_esm("../../static/js/alert_words_ui");
const attachments_ui = mock_esm("../../static/js/attachments_ui");
const bot_data = mock_esm("../../static/js/bot_data");
const compose = mock_esm("../../static/js/compose");
const composebox_typeahead = mock_esm("../../static/js/composebox_typeahead");
const dark_theme = mock_esm("../../static/js/dark_theme");
const emoji_picker = mock_esm("../../static/js/emoji_picker");
@ -839,8 +838,6 @@ run_test("user_settings", ({override}) => {
assert_same(user_settings.demote_inactive_streams, 2);
}
override(compose, "toggle_enter_sends_ui", noop);
event = event_fixtures.user_settings__enter_sends;
user_settings.enter_sends = false;
dispatch(event);

7
frontend_tests/puppeteer_lib/common.ts
View File

@ -265,9 +265,10 @@ class CommonUtils {
}
async ensure_enter_does_not_send(page: Page): Promise<void> {
await page.$eval("#enter_sends", (el) => {
if ((el as HTMLInputElement).checked) {
(el as HTMLInputElement).click();
await page.$eval(".enter_sends_false", (el) => {
if ((el as HTMLElement).style.display !== "none") {
// Click events gets propagated to `.enter_sends` which toggles the value.
(el as HTMLElement).click();
}
});
}

10
static/js/compose.js
View File

@ -119,15 +119,6 @@ export function empty_topic_placeholder() {
return $t({defaultMessage: "(no topic)"});
}
export function toggle_enter_sends_ui() {
const send_button = $("#compose-send-button");
if (user_settings.enter_sends) {
send_button.fadeOut();
} else {
send_button.fadeIn();
}
}
export function create_message_object() {
// Topics are optional, and we provide a placeholder if one isn't given.
let topic = compose_state.topic();
@ -413,6 +404,7 @@ export function render_compose_box() {
giphy_enabled: giphy.is_giphy_enabled(),
}),
);
$(`.enter_sends_${user_settings.enter_sends}`).show();
}
export function initialize() {

11
static/js/composebox_typeahead.js
View File

@ -1097,9 +1097,10 @@ export function initialize() {
$("form#send_message_form").on("keydown", handle_keydown);
$("form#send_message_form").on("keyup", handle_keyup);
$("#enter_sends").on("click", () => {
user_settings.enter_sends = $("#enter_sends").is(":checked");
compose.toggle_enter_sends_ui();
$(".enter_sends").on("click", () => {
user_settings.enter_sends = !user_settings.enter_sends;
$(`.enter_sends_${!user_settings.enter_sends}`).hide();
$(`.enter_sends_${user_settings.enter_sends}`).show();
// Refocus in the content box so you can continue typing or
// press Enter to send.
@ -1111,10 +1112,6 @@ export function initialize() {
data: {enter_sends: user_settings.enter_sends},
});
});
$("#enter_sends").prop("checked", user_settings.enter_sends);
if (user_settings.enter_sends) {
$("#compose-send-button").hide();
}
// limit number of items so the list doesn't fall off the screen
$("#stream_message_recipient_stream").typeahead({

4
static/js/server_events_dispatch.js
View File

@ -685,8 +685,8 @@ export function dispatch_normal_event(event) {
}
if (event.property === "enter_sends") {
user_settings.enter_sends = event.value;
$("#enter_sends").prop("checked", user_settings.enter_sends);
compose.toggle_enter_sends_ui();
$(`.enter_sends_${!user_settings.enter_sends}`).hide();
$(`.enter_sends_${user_settings.enter_sends}`).show();
break;
}
if (event.property === "presence_enabled") {

33
static/styles/compose.css
View File

@ -422,6 +422,7 @@ input.recipient_box {
#compose-send-button {
height: 25px;
width: 40px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 0;
@ -429,14 +430,24 @@ input.recipient_box {
font-size: 0.9em;
}
#send_controls {
font-size: 0.8em;
height: 2.2em;
.enter_sends {
font-size: 12px;
height: 14px;
padding-left: 4px;
opacity: 0.7;
.compose_checkbox_label {
color: hsl(0, 0%, 67%);
margin: 4px;
&:hover {
opacity: 1;
}
.enter_sends_true,
.enter_sends_false {
display: none;
}
}
.compose_left_wrapper {
margin-right: auto;
}
#stream-message,
@ -479,9 +490,11 @@ input.recipient_box {
.compose_right_float_container {
display: flex;
flex-direction: column;
align-items: flex-end;
white-space: nowrap;
gap: 4px;
margin-top: 10px;
margin-top: 2px;
}
a.compose_control_button {
@ -515,12 +528,6 @@ a.compose_control_button.hide {
cursor: ns-resize;
}
#enter_sends {
vertical-align: middle;
margin-top: -2px;
margin-right: 4px;
}
.inline-subscribe-error {
margin-left: 5px;
}

23
static/templates/compose.hbs
View File

@ -95,16 +95,27 @@
<div id="below-compose-content">
<div class="compose_right_float_container order-3">
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
<div class="enter_sends order-2">
<label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
<span class="enter_sends_true">
{{t 'Enter to send' }}
</span>
<span class="enter_sends_false">
{{t 'Ctrl + Enter to send' }}
</span>
<i class="fa fa-exchange" aria-hidden="true"></i>
<span class="enter_sends_true">
{{t "Ctrl + Enter to add a new line" }}
</span>
<span class="enter_sends_false">
{{t "Enter to add a new line" }}
</span>
</label>
</div>
</div>
{{> compose_control_buttons }}
<div class="compose_right_float_container order-2">
<span id="compose_limit_indicator"></span>
<div id="send_controls" class="new-style">
<label id="enter-sends-label" class="compose_checkbox_label checkbox">
<input type="checkbox" tabindex="0" id="enter_sends" />
<span></span>{{t 'Press Enter to send' }}
</label>
</div>
</div>
</div>
</div>

38
static/templates/compose_control_buttons.hbs
View File

@ -1,19 +1,21 @@
<div class="compose_control_buttons_container order-1">
<input type="file" class="file_input notvisible pull-left" multiple />
{{#if file_upload_enabled }}
<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
{{/if}}
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
<a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
<div class="divider">|</div>
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" tabindex=0 data-tippy-content="{{t 'Bold' }}"></a>
<a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" tabindex=0 data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" tabindex=0 data-tippy-content="{{t 'Link' }}"></a>
<div class="divider">|</div>
<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
<span id="sending-indicator"></span>
<div class="compose_left_wrapper order-1">
<div class="compose_control_buttons_container order-1">
<input type="file" class="file_input notvisible pull-left" multiple />
{{#if file_upload_enabled }}
<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
{{/if}}
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
<a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
<div class="divider">|</div>
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" tabindex=0 data-tippy-content="{{t 'Bold' }}"></a>
<a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" tabindex=0 data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" tabindex=0 data-tippy-content="{{t 'Link' }}"></a>
<div class="divider">|</div>
<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
<span id="sending-indicator"></span>
</div>
</div>

3
tools/lib/capitalization.py
View File

@ -168,6 +168,9 @@ IGNORED_PHRASES = [
r"University of California San Diego",
# Used in stream creation form
r"email hidden",
# Use in compose box.
r"to send",
r"to add a new line",
]
# Sort regexes in descending order of their lengths. As a result, the