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

compose: Refactor compose box from <table> to <div> structure.

Browse Source 
`<td>` elements are fixed-width, so we refactor the entire
`<table>` structure for responsive design.

This fixes a bug with how the `To:` block looks in other languages.

Fixes #9152.
This commit is contained in:
Cynthia Lin
2018-03-30 16:46:43 -07:00
committed by Tim Abbott
parent fe34001dd1
commit fca8479065
3 changed files with 55 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/styles/compose.css
View File

@@ -69,6 +69,7 @@
padding: 0px; padding: 0px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
} }
.compose_table .right_part .icon-vector-narrow { .compose_table .right_part .icon-vector-narrow {
@@ -82,13 +83,13 @@
} }
.compose_table .pm_recipient { .compose_table .pm_recipient {
margin: 0px 20px 0px 10px; margin-left: 5px;
margin-right: 20px;
display: flex; display: flex;
width: 100%; width: 100%;
} }
.compose_table #private-message .to_text { .compose_table #private-message .to_text {
width: 65px;
vertical-align: middle; vertical-align: middle;
font-weight: 600; font-weight: 600;
@@ -172,7 +173,6 @@ table.compose_table {
display: none; display: none;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 5px;
} }
#compose_invite_users, #compose_invite_users,
@@ -386,7 +386,7 @@ input.recipient_box {
#stream-message, #stream-message,
#private-message { #private-message {
display: none; display: flex;
} }
.compose_table .drafts-link { .compose_table .drafts-link {

1
static/styles/zulip.css
View File

@@ -893,6 +893,7 @@ td.pointer {
border-radius: 3px 0px 0px 0px; border-radius: 3px 0px 0px 0px;
/* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */ /* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%), inset 2px 0px 1px -2px hsl(0, 0%, 20%) !important; box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%), inset 2px 0px 1px -2px hsl(0, 0%, 20%) !important;
width: 10px;
} }
.summary_row_private_message .summary_colorblock { .summary_row_private_message .summary_colorblock {

76
templates/zerver/compose.html
View File

@@ -56,45 +56,33 @@
<button type="button" class="close" id='compose_close' title="{{ _('Cancel compose') }} (Esc)">&times;</button> <button type="button" class="close" id='compose_close' title="{{ _('Cancel compose') }} (Esc)">&times;</button>
<form id="send_message_form" action="/json/messages" method="post"> <form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }} {{ csrf_input }}
<table class="compose_table"> <div class="compose_table">
<tbody> <div id="stream-message">
<tr class="ztable_layout_row"> <div class="message_header_colorblock message_header_stream left_part"></div>
<td class="ztable_comp_col1" /> <div class="right_part">
<td class="ztable_comp_col2" />
</tr>
<tr id="stream-message">
<td class="message_header_colorblock message_header_stream left_part">
</td>
<td class="right_part">
<span id="compose-lock-icon"> <span id="compose-lock-icon">
<i class="icon-vector-lock" title="{{ _('This is an invite-only stream') }}"></i> <i class="icon-vector-lock" title="{{ _('This is an invite-only stream') }}"></i>
</span> </span>
<input type="text" class="recipient_box" name="stream" id="stream" <input type="text" class="recipient_box" name="stream" id="stream" maxlength="30" value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}" />
maxlength="30"
value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}"/>
<i class="icon-vector-narrow icon-vector-small"></i> <i class="icon-vector-narrow icon-vector-small"></i>
<input type="text" class="recipient_box" name="subject" id="subject" <input type="text" class="recipient_box" name="subject" id="subject" maxlength="60" value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}" />
maxlength="60" </div>
value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}"/> </div>
</td> <div id="private-message">
</tr> <div class="to_text">
<tr id="private-message">
<td class="to_text">
<span>{{ _('To') }}:</span> <span>{{ _('To') }}:</span>
</td> </div>
<td class="right_part"> <div class="right_part">
<div class="pm_recipient"> <div class="pm_recipient">
<div class="pill-container" data-before="{{ _('You and') }}"> <div class="pill-container" data-before="{{ _('You and') }}">
<div class="input" contenteditable="true" id="private_message_recipient" name="recipient" <div class="input" contenteditable="true" id="private_message_recipient" name="recipient" data-no-recipients-text="{{ _('Add one or more users') }}" data-some-recipients-text="{{ _('Add another user...') }}"></div>
data-no-recipients-text="{{ _('Add one or more users') }}" data-some-recipients-text="{{ _('Add another user...') }}"></div>
</div> </div>
</div> </div>
</td> </div>
</tr> </div>
<tr> <div>
<td class="messagebox" colspan="2"> <div class="messagebox" colspan="2">
<textarea class="new_message_textarea" name="content" id='compose-textarea' <textarea class="new_message_textarea" name="content" id='compose-textarea' value="" placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea>
value="" placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea>
<div class="scrolling_list" id="preview_message_area" style="display:none;"> <div class="scrolling_list" id="preview_message_area" style="display:none;">
<div id="markdown_preview_spinner"></div> <div id="markdown_preview_spinner"></div>
<div id="preview_content"></div> <div id="preview_content"></div>
@@ -102,21 +90,12 @@
<div class="drag"></div> <div class="drag"></div>
<div id="below-compose-content"> <div id="below-compose-content">
<input type="file" id="file_input" class="notvisible pull-left" multiple /> <input type="file" id="file_input" class="notvisible pull-left" multiple />
<a class="message-control-button icon-vector-smile" <a class="message-control-button icon-vector-smile" id="emoji_map" href="#" title="{{ _('Add emoji') }}"></a>
id="emoji_map" href="#" title="{{ _('Add emoji') }}"></a> <a class="message-control-button icon-vector-font" title="{{ _('Formatting') }}" data-overlay-trigger="markdown-help"></a>
<a class="message-control-button icon-vector-font" <a class="message-control-button icon-vector-paper-clip notdisplayed" id="attach_files" href="#" title="{{ _('Attach files') }}"></a> {% if jitsi_server_url %}
title="{{ _('Formatting') }}" data-overlay-trigger="markdown-help"></a> <a class="message-control-button fa fa-video-camera" id="video_link" href="#" title="{{ _('Add video call') }}"></a> {% endif %}
<a class="message-control-button icon-vector-paper-clip notdisplayed" <a id="undo_markdown_preview" class="message-control-button icon-vector-edit" style="display:none;" title="{{ _('Write') }}"></a>
id="attach_files" href="#" title="{{ _('Attach files') }}"></a> <a id="markdown_preview" class="message-control-button icon-vector-eye-open" title="{{ _('Preview') }}"></a>
{% if jitsi_server_url %}
<a class="message-control-button fa fa-video-camera"
id="video_link" href="#" title="{{ _('Add video call') }}"></a>
{% endif %}
<a id="undo_markdown_preview"
class="message-control-button icon-vector-edit"
style="display:none;" title="{{ _('Write') }}"></a>
<a id="markdown_preview" class="message-control-button icon-vector-eye-open"
title="{{ _('Preview') }}"></a>
<a class="drafts-link" href="#drafts" title="{{ _('Drafts') }} (d)">{{ _('Drafts') }}</a> <a class="drafts-link" href="#drafts" title="{{ _('Drafts') }} (d)">{{ _('Drafts') }}</a>
<span id="sending-indicator"></span> <span id="sending-indicator"></span>
<div id="send_controls" class="new-style"> <div id="send_controls" class="new-style">
@@ -126,10 +105,9 @@
<button type="submit" id="compose-send-button" class="button small send_message" tabindex="150" title="{{ _('Send') }} (Ctrl + Enter)">{{ _('Send') }}</button> <button type="submit" id="compose-send-button" class="button small send_message" tabindex="150" title="{{ _('Send') }} (Ctrl + Enter)">{{ _('Send') }}</button>
</div> </div>
</div> </div>
</td> </div>
</tr> </div>
</tbody> </div>
</table>
</form> </form>
</div> </div>
</div> </div>