paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose_box: Improve structures around compose buttons.

Browse Source
This commit is contained in:
Karl Stolley
2023-11-01 12:43:48 -05:00
committed by Tim Abbott
parent e608a389af
commit 9f00b513f7
11 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/compose_call_ui.js
View File

@@ -17,13 +17,13 @@ export function update_audio_and_video_chat_button_display() {
export function update_video_chat_button_display() { export function update_video_chat_button_display() {
const show_video_chat_button = compose_call.compute_show_video_chat_button(); const show_video_chat_button = compose_call.compute_show_video_chat_button();
$("#below-compose-content .video_link").toggle(show_video_chat_button); $(".compose-control-buttons-container .video_link").toggle(show_video_chat_button);
$(".message-edit-feature-group .video_link").toggle(show_video_chat_button); $(".message-edit-feature-group .video_link").toggle(show_video_chat_button);
} }
export function update_audio_chat_button_display() { export function update_audio_chat_button_display() {
const show_audio_chat_button = compose_call.compute_show_audio_chat_button(); const show_audio_chat_button = compose_call.compute_show_audio_chat_button();
$("#below-compose-content .audio_link").toggle(show_audio_chat_button); $(".compose-control-buttons-container .audio_link").toggle(show_audio_chat_button);
$(".message-edit-feature-group .audio_link").toggle(show_audio_chat_button); $(".message-edit-feature-group .audio_link").toggle(show_audio_chat_button);
} }

8
web/src/compose_setup.js
View File

@@ -44,8 +44,12 @@ export function initialize() {
// Register hooks for compose_actions. // Register hooks for compose_actions.
setup_compose_actions_hooks(); setup_compose_actions_hooks();
$("#below-compose-content .video_link").toggle(compose_call.compute_show_video_chat_button()); $(".compose-control-buttons-container .video_link").toggle(
$("#below-compose-content .audio_link").toggle(compose_call.compute_show_audio_chat_button()); compose_call.compute_show_video_chat_button(),
);
$(".compose-control-buttons-container .audio_link").toggle(
compose_call.compute_show_audio_chat_button(),
);
$("textarea#compose-textarea").on("keydown", (event) => { $("textarea#compose-textarea").on("keydown", (event) => {
compose_ui.handle_keydown(event, $("textarea#compose-textarea").expectOne()); compose_ui.handle_keydown(event, $("textarea#compose-textarea").expectOne());

2
web/src/compose_validate.js
View File

@@ -619,7 +619,7 @@ export function check_overflow_text() {
// expensive. // expensive.
const text = compose_state.message_content(); const text = compose_state.message_content();
const max_length = page_params.max_message_length; const max_length = page_params.max_message_length;
const $indicator = $("#compose_limit_indicator"); const $indicator = $("#compose-limit-indicator");
if (text.length > max_length) { if (text.length > max_length) {
$indicator.addClass("over_limit"); $indicator.addClass("over_limit");

10
web/styles/compose.css
View File

@@ -238,19 +238,15 @@
} }
} }
#below-compose-content { #message-formatting-controls-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
margin-top: 6px; margin-top: 6px;
margin-bottom: -2px; margin-bottom: -2px;
.compose_bottom_top_container {
display: flex;
}
} }
#compose_limit_indicator { #compose-limit-indicator {
margin-right: 8px; margin-right: 8px;
font-size: 12px; font-size: 12px;
color: hsl(39deg 100% 50%); color: hsl(39deg 100% 50%);
@@ -862,7 +858,7 @@ textarea.new_message_textarea,
min-height: var(--compose-recipient-box-min-height); min-height: var(--compose-recipient-box-min-height);
} }
.compose_control_buttons_container { .compose-control-buttons-container {
margin-right: auto; margin-right: auto;
display: flex; display: flex;
gap: 4px; gap: 4px;

2
web/styles/dark_theme.css
View File

@@ -606,7 +606,7 @@
border-color: hsl(0deg 0% 0% / 90%); border-color: hsl(0deg 0% 0% / 90%);
} }
.compose_control_buttons_container .divider { .compose-control-buttons-container .divider {
color: hsl(236deg 33% 90% / 50%); color: hsl(236deg 33% 90% / 50%);
} }

8
web/templates/compose.hbs
View File

@@ -86,7 +86,7 @@
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template"> <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
{{t 'Drafts' }} {{t 'Drafts' }}
</a> </a>
<span id="compose_limit_indicator"></span> <span id="compose-limit-indicator"></span>
<div class="message-send-controls"> <div class="message-send-controls">
<button type="submit" id="compose-send-button" class="button small send_message compose-submit-button animated-purple-button"> <button type="submit" id="compose-send-button" class="button small send_message compose-submit-button animated-purple-button">
<img class="loader" alt="" src="" /> <img class="loader" alt="" src="" />
@@ -99,10 +99,8 @@
</div> </div>
</div> </div>
<div id="below-compose-content"> <div id="message-formatting-controls-container">
<div class="compose_bottom_top_container"> {{> compose_control_buttons }}
{{> compose_control_buttons }}
</div>
</div> </div>
</div> </div>
</div> </div>

2
web/templates/compose_control_buttons.hbs
View File

@@ -1,4 +1,4 @@
<div class="compose_control_buttons_container order-1"> <div class="compose-control-buttons-container order-1">
<input type="file" class="file_input notvisible" multiple /> <input type="file" class="file_input notvisible" multiple />
{{#if file_upload_enabled }} {{#if file_upload_enabled }}
<div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Upload files' }}"> <div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Upload files' }}">

2
web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
View File

@@ -1,4 +1,4 @@
<div class="compose_control_buttons_container preview_mode_disabled"> <div class="compose-control-buttons-container preview_mode_disabled">
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a> <a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} 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' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a> <a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="bulleted" class="compose_control_button fa fa-list-ul formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a> <a role="button" data-format-type="bulleted" class="compose_control_button fa fa-list-ul formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>

2
web/templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs
View File

@@ -1,3 +1,3 @@
<div class="compose_control_buttons_container order-1 {{#if preview_mode_on}} preview_mode {{/if}}"> <div class="compose-control-buttons-container order-1 {{#if preview_mode_on}} preview_mode {{/if}}">
{{> compose_control_buttons_in_popover}} {{> compose_control_buttons_in_popover}}
</div> </div>

2
web/tests/compose_validate.test.js
View File

@@ -547,7 +547,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
page_params.max_message_length = 10000; page_params.max_message_length = 10000;
const $textarea = $("textarea#compose-textarea"); const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose_limit_indicator"); const $indicator = $("#compose-limit-indicator");
const $send_button = $("#compose-send-button"); const $send_button = $("#compose-send-button");
let banner_rendered = false; let banner_rendered = false;
mock_template("compose_banner/compose_banner.hbs", false, (data) => { mock_template("compose_banner/compose_banner.hbs", false, (data) => {

8
web/tests/compose_video.test.js
View File

@@ -30,7 +30,7 @@ const server_events_dispatch = zrequire("server_events_dispatch");
const compose_setup = zrequire("compose_setup"); const compose_setup = zrequire("compose_setup");
function stub_out_video_calls() { function stub_out_video_calls() {
const $elem = $("#below-compose-content .video_link"); const $elem = $(".compose-control-buttons-container .video_link");
$elem.toggle = (show) => { $elem.toggle = (show) => {
/* istanbul ignore if */ /* istanbul ignore if */
if (show) { if (show) {
@@ -251,7 +251,7 @@ test("test_video_chat_button_toggle disabled", ({override}) => {
page_params.realm_video_chat_provider = realm_available_video_chat_providers.disabled.id; page_params.realm_video_chat_provider = realm_available_video_chat_providers.disabled.id;
compose_setup.initialize(); compose_setup.initialize();
assert.equal($("#below-compose-content .video_link").visible(), false); assert.equal($(".compose-control-buttons-container .video_link").visible(), false);
}); });
test("test_video_chat_button_toggle no url", ({override}) => { test("test_video_chat_button_toggle no url", ({override}) => {
@@ -260,7 +260,7 @@ test("test_video_chat_button_toggle no url", ({override}) => {
page_params.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id; page_params.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id;
page_params.jitsi_server_url = null; page_params.jitsi_server_url = null;
compose_setup.initialize(); compose_setup.initialize();
assert.equal($("#below-compose-content .video_link").visible(), false); assert.equal($(".compose-control-buttons-container .video_link").visible(), false);
}); });
test("test_video_chat_button_toggle enabled", ({override}) => { test("test_video_chat_button_toggle enabled", ({override}) => {
@@ -269,5 +269,5 @@ test("test_video_chat_button_toggle enabled", ({override}) => {
page_params.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id; page_params.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id;
page_params.realm_jitsi_server_url = "https://meet.jit.si"; page_params.realm_jitsi_server_url = "https://meet.jit.si";
compose_setup.initialize(); compose_setup.initialize();
assert.equal($("#below-compose-content .video_link").visible(), true); assert.equal($(".compose-control-buttons-container .video_link").visible(), true);
}); });