mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
6cf33c4275
This commit makes a working toggler in compose_actions that adds the compose-fullscreen class to the compose that removes the max-height from the compose textarea and adds flex elements above so that the height automatically adjust with the device height. This results in making the compose box full screen sized. The compose_height.js maintains the state of the height of the compose box. Also, when the compose box is closed, the compose box is reset to it's default behaviour and original height. So, everytime user need not toggle off the compose full size and only for specific message it is used. It also adds destroy autosize on compose_height state change. It destroys the autosize of textarea when the full screen sized compose box is toggled on. And everytime when it is turned off, it reinitialises the autosize. This also adds a condition in autosize_textarea to only autosize when composebox is not in full height state. Fixes #17660
602 lines
11 KiB
CSS
602 lines
11 KiB
CSS
#compose_buttons {
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.new_message_button {
|
|
margin-left: 4px;
|
|
|
|
.button.small {
|
|
font-size: 1em;
|
|
padding: 3px 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.compose_mobile_button {
|
|
span {
|
|
font-size: 1.2em !important;
|
|
font-weight: 400;
|
|
line-height: 1em;
|
|
}
|
|
}
|
|
|
|
.message-control-link {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.reply_button_container {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
|
|
.compose_reply_button {
|
|
width: 100%;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
.compose_reply_button_recipient_label {
|
|
color: hsl(215, 47%, 30%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile_button_container {
|
|
@media (width >= $sm_min) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.stream_button_container,
|
|
.private_button_container {
|
|
@media (width < $sm_min) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Main geometry for this element is in zulip.css */
|
|
#compose-content {
|
|
border-top: 1px solid hsla(0, 0%, 0%, 0.07);
|
|
transition: background-color 200ms linear;
|
|
padding: 4px 4px 8px 4px;
|
|
border-left: 1px solid hsl(0, 0%, 93%);
|
|
border-right: 1px solid hsl(0, 0%, 93%);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.ztable_comp_col1 {
|
|
width: 10px;
|
|
}
|
|
|
|
.message_comp {
|
|
display: none;
|
|
padding: 10px 10px 8px 5px;
|
|
}
|
|
|
|
.autocomplete_secondary {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.active .autocomplete_secondary {
|
|
opacity: 1;
|
|
}
|
|
|
|
.compose_table {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.stream-selection-header-colorblock {
|
|
&.message_header_private_message {
|
|
border-radius: 3px 0 0 3px;
|
|
border-bottom: 0;
|
|
background-color: hsl(0, 0%, 27%);
|
|
}
|
|
}
|
|
|
|
.right_part {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.fa-angle-right {
|
|
font-size: 0.9em;
|
|
-webkit-text-stroke: 0.05em;
|
|
position: relative;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
.pm_recipient {
|
|
margin-left: 5px;
|
|
margin-right: 20px;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
#private-message .to_text {
|
|
vertical-align: middle;
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
#compose-lock-icon {
|
|
position: relative;
|
|
left: 5px;
|
|
width: 0;
|
|
}
|
|
|
|
.message_header {
|
|
background: none;
|
|
background-color: hsl(0, 0%, 92%);
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.messagebox {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.message-control-link {
|
|
position: relative;
|
|
margin-right: 5px;
|
|
top: 3px;
|
|
}
|
|
}
|
|
|
|
#send_message_form {
|
|
margin: 0;
|
|
height: 100%;
|
|
|
|
.messagebox-wrapper {
|
|
flex: 1;
|
|
}
|
|
|
|
.messagebox {
|
|
/* normally 5px 14px; pull in the right and bottom a bit */
|
|
cursor: default;
|
|
padding: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.message_content {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
#below-compose-content {
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
#compose_limit_indicator {
|
|
position: relative;
|
|
margin-right: 8px;
|
|
top: 3px;
|
|
float: right;
|
|
font-size: 12px;
|
|
color: hsl(39, 100%, 50%);
|
|
|
|
&.over_limit {
|
|
color: hsl(0, 100%, 50%);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#compose {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
#compose-container {
|
|
width: 100%;
|
|
/* This should match the value for .app-main */
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
}
|
|
|
|
#compose_top_right {
|
|
position: absolute;
|
|
right: 0;
|
|
float: right;
|
|
|
|
button {
|
|
background: transparent;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
opacity: 0.6;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-left: 4px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse_composebox_button,
|
|
#compose_close {
|
|
display: none;
|
|
}
|
|
|
|
.compose_invite_user,
|
|
.compose_private_stream_alert,
|
|
.compose-all-everyone,
|
|
.compose-announce,
|
|
.compose_not_subscribed {
|
|
padding: 4px 0 4px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#compose_not_subscribed_close {
|
|
top: 1px;
|
|
right: 10px;
|
|
}
|
|
|
|
.compose_invite_close,
|
|
.compose_private_stream_alert_close {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
|
|
width: 10px;
|
|
}
|
|
|
|
.compose-all-everyone-controls,
|
|
.compose-announce-controls,
|
|
.compose_invite_user_controls,
|
|
.compose_private_stream_alert_controls {
|
|
float: right;
|
|
position: relative;
|
|
}
|
|
|
|
.compose_invite_user p,
|
|
.compose_not_subscribed p {
|
|
margin: 0;
|
|
display: inline-block;
|
|
max-width: calc(100% - 100px);
|
|
}
|
|
|
|
#error-message-sub-button {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
/* Like .nav-tabs > li > a */
|
|
div[id^="message-edit-send-status"],
|
|
#compose-send-status {
|
|
padding: 8px 14px 8px 14px;
|
|
margin-bottom: 8px;
|
|
line-height: 20px;
|
|
display: none;
|
|
}
|
|
|
|
#compose-send-status .progress {
|
|
height: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Like .alert .close */
|
|
.send-status-close,
|
|
.compose-send-status-close {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
color: hsl(0, 0%, 0%);
|
|
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
|
|
opacity: 0.2;
|
|
float: right;
|
|
}
|
|
|
|
.send-status-close:hover,
|
|
.compose-send-status-close:hover {
|
|
cursor: pointer;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#out-of-view-notification {
|
|
position: relative;
|
|
margin-bottom: 6px;
|
|
|
|
background-color: hsla(152, 51%, 63%, 0.25);
|
|
border: 1px solid hsla(0, 0%, 0%, 0.1);
|
|
border-radius: 4px;
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 4px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
color: hsl(0, 0%, 0%);
|
|
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.compose-notifications-content {
|
|
padding: 4px 22px 4px 22px;
|
|
text-align: center;
|
|
}
|
|
|
|
.composition-area {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
textarea.new_message_textarea {
|
|
display: table-cell;
|
|
width: calc(100% - 12px);
|
|
padding: 5px;
|
|
height: 1.5em;
|
|
max-height: 22em;
|
|
margin-bottom: 0;
|
|
resize: vertical !important;
|
|
margin-top: 5px;
|
|
|
|
&.over_limit {
|
|
box-shadow: 0 0 0 1pt hsl(0, 100%, 50%) !important;
|
|
}
|
|
}
|
|
|
|
textarea.new_message_textarea,
|
|
.compose_table .recipient_box {
|
|
border: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
box-shadow: none;
|
|
transition: border 0.2s ease;
|
|
|
|
&:focus {
|
|
border: 1px solid hsl(0, 0%, 67%);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
input.recipient_box {
|
|
margin: 0;
|
|
height: 1.1em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#stream_message_recipient_stream.recipient_box {
|
|
width: 20%;
|
|
border-radius: 0 3px 3px 0;
|
|
border-left: 0;
|
|
min-width: 120px;
|
|
|
|
&:focus {
|
|
border-left: none;
|
|
}
|
|
|
|
&.lock-padding {
|
|
padding-left: 18px;
|
|
}
|
|
}
|
|
|
|
#stream_message_recipient_topic.recipient_box {
|
|
width: calc(20% + 14px);
|
|
min-width: 140px;
|
|
max-width: 165px;
|
|
}
|
|
|
|
#private_message_recipient.recipient_box {
|
|
width: 100%;
|
|
}
|
|
|
|
#compose-send-button {
|
|
/* To arrange the right tab order for the compose box keyboard UI,
|
|
this element appears before its proper position in the DOM and is configured
|
|
to float right, so that tabbing from the compose box goes here and then
|
|
to the message controls to its left, to ensure "Tab then Enter" sends messages. */
|
|
border-radius: 4px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
border: 1px solid hsl(170, 68%, 41%);
|
|
background-color: hsl(170, 48%, 54%);
|
|
color: hsl(0, 0%, 100%);
|
|
float: right;
|
|
font-size: 0.9em;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 10px hsl(170, 48%, 54%), 0 0 5px hsl(170, 48%, 54%);
|
|
}
|
|
}
|
|
|
|
#send_controls {
|
|
float: right;
|
|
position: relative;
|
|
font-size: 0.8em;
|
|
height: 2.2em;
|
|
|
|
.compose_checkbox_label {
|
|
color: hsl(0, 0%, 67%);
|
|
margin: 4px;
|
|
}
|
|
}
|
|
|
|
#stream-message,
|
|
#private-message {
|
|
display: flex;
|
|
}
|
|
|
|
#private-message {
|
|
align-items: center;
|
|
}
|
|
|
|
#sending-indicator {
|
|
top: 2px;
|
|
position: relative;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
|
|
.compose_giphy_link .compose_gif_icon {
|
|
position: relative;
|
|
font-size: 23px;
|
|
top: -4px;
|
|
}
|
|
|
|
a.compose_control_button {
|
|
display: block;
|
|
opacity: 0.7;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
width: auto;
|
|
height: 15px;
|
|
margin-right: 8px;
|
|
padding-top: 5px;
|
|
text-align: center;
|
|
float: left;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* This is used to override the
|
|
* properties of `a.compose_control_button`
|
|
* without using `!important`.
|
|
*/
|
|
a.compose_control_button.hide {
|
|
display: none;
|
|
}
|
|
|
|
.drag {
|
|
display: none;
|
|
height: 18px;
|
|
width: 100%;
|
|
top: 23px;
|
|
position: relative;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
#enter_sends {
|
|
vertical-align: middle;
|
|
margin-top: -2px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.inline-subscribe-error {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.preview_message_area {
|
|
/* minus 5px padding. */
|
|
width: calc(100% - 12px);
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
/* the maximum height the textarea gets to. */
|
|
max-height: 308px;
|
|
/* the minimum height the textarea collapses to. */
|
|
min-height: 42px;
|
|
overflow: auto;
|
|
|
|
border: 1px solid hsl(0, 0%, 67%);
|
|
border-radius: 4px;
|
|
background-color: hsla(0, 0%, 0%, 0.02);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.markdown_preview_spinner {
|
|
margin: auto;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
background: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.typeahead-header {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#typeahead-header-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
&.typeahead {
|
|
background: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.compose_mobile_stream_button i,
|
|
.compose_mobile_private_button i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* This max-width must be synced with message_viewport.is_narrow */
|
|
@media (width < $xl_min) {
|
|
#compose-content {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
#compose-content {
|
|
margin-right: 7px;
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
|
|
@media (width < $mm_min) {
|
|
#stream_message_recipient_topic.recipient_box {
|
|
width: calc(100% - 175px);
|
|
min-width: 95px;
|
|
}
|
|
|
|
#compose-content {
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
#compose.compose-fullscreen {
|
|
height: 100%;
|
|
z-index: 99;
|
|
|
|
#compose-container {
|
|
margin-top: 50px;
|
|
height: calc(100% - 50px);
|
|
}
|
|
|
|
.message_comp {
|
|
flex: 1;
|
|
display: flex !important;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#compose-textarea {
|
|
max-height: none !important;
|
|
flex: 1;
|
|
}
|
|
}
|