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

compose: Improve responsiveness for compose recipient. 

This allows the dropdown to display larger names, and also
overall improves the compose recipient experience on small
screens.
This commit is contained in:
evykassirer 2023-03-28 14:29:46 -07:00 committed by Tim Abbott
parent 5ca73388c0
commit 5948671f92
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/styles/compose.css
View File

@ -96,7 +96,8 @@
}
}
.right_part {
.right_part,
#compose-stream-recipient {
padding: 0;
display: flex;
align-items: center;
@ -501,6 +502,8 @@ input.recipient_box {
#compose_select_stream_widget,
#compose_select_stream_widget .button {
margin: 0;
min-width: 0;
flex: 1;
}
#stream_message_recipient_topic.recipient_box {
@ -604,6 +607,10 @@ input.recipient_box {
}
}
#compose-stream-recipient {
min-width: 0;
}
#compose-stream-recipient,
#compose-private-recipient {
display: flex;
@ -748,6 +755,8 @@ a.compose_control_button.hide {
#compose_stream_selection_dropdown {
display: flex;
justify-content: flex-start;
flex: 0 1 200px;
min-width: 0;
.stream_header_colorblock {
margin: 0;
@ -756,7 +765,7 @@ a.compose_control_button.hide {
.dropdown-toggle {
border-radius: 0 4px 4px 0 !important;
display: flex;
max-width: 130px;
min-width: 0;
}
.dropup .dropdown-menu {
@ -785,7 +794,6 @@ a.compose_control_button.hide {
.fa-chevron-down {
float: right;
padding-left: 5px;
padding-bottom: 2px;
color: hsl(0deg 0% 58%);
font-weight: lighter;
}
@ -796,6 +804,14 @@ a.compose_control_button.hide {
}
}
#stream_message_recipient_topic {
min-width: 0;
}
#id_compose_select_stream {
display: flex;
}
.dropdown-menu {
& ul {
list-style: none;
@ -866,13 +882,6 @@ a.compose_control_button.hide {
}
@media (width < $mm_min) {
#stream_message_recipient_topic.recipient_box {
/* The max-width here is designed to allow this to share space with
the Stream input in small windows, without leaving empty space. */
max-width: calc(100% - 90px);
min-width: 110px;
}
#compose-content {
margin-right: 5px;
margin-left: 5px;

20
web/templates/compose.hbs
View File

@ -68,18 +68,16 @@
</template>
</div>
<div id="compose-stream-recipient" class="order-1">
<div class="right_part">
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle order-1" data-tooltip-template-id="narrow_to_compose_recipients_tooltip" tabindex="0">
</a>
<div id="compose_stream_selection_dropdown" class="new-style">
<div class="stream_header_colorblock"></div>
{{> settings/dropdown_list_widget
widget_name="compose_select_stream"
list_placeholder=(t 'Filter streams')}}
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle order-1" data-tooltip-template-id="narrow_to_compose_recipients_tooltip" tabindex="0">
</a>
<div id="compose_stream_selection_dropdown" class="new-style">
<div class="stream_header_colorblock"></div>
{{> settings/dropdown_list_widget
widget_name="compose_select_stream"
list_placeholder=(t 'Filter streams')}}
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
</div>
<div id="compose-private-recipient" class="order-1">
<div class="to_text">