Revert recent composer changes (#8840)
* Revert "Prevent new composer from overflowing from non-breakable text (#8829)" This reverts commit57dff8131c. * Revert "Fix scroll jump issue with the composer (#8791)" This reverts commit5167521ea4. * Revert "Fix scroll jump issue with the composer (#8788)" This reverts commitf568a76dc6. * Revert "Revert link color change in composer (#8784)" This reverts commitaedbeb2995. * Revert "Improve composer visiblity (#8578)" This reverts commitf14374a51c.
This commit is contained in:
Michael Telatynski
GitHub
parent
7d3c750247
commit
e7a8dbd04c
18 changed files with 174 additions and 325 deletions
|
|
@ -84,7 +84,6 @@
|
|||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_WidgetAvatar.scss";
|
||||
@import "./views/beta/_BetaCard.scss";
|
||||
@import "./views/buttons/_Cancel.scss";
|
||||
@import "./views/context_menus/_CallContextMenu.scss";
|
||||
@import "./views/context_menus/_DeviceContextMenu.scss";
|
||||
@import "./views/context_menus/_IconizedContextMenu.scss";
|
||||
|
|
|
|||
|
|
@ -32,12 +32,6 @@ limitations under the License.
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mx_MainSplit_timeline {
|
||||
.mx_MessageComposer_wrapper {
|
||||
margin: $spacing-8 $spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_auxPanel {
|
||||
min-width: 0px;
|
||||
width: 100%;
|
||||
|
|
@ -161,7 +155,7 @@ limitations under the License.
|
|||
.mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
|
||||
> .mx_RoomView_MessageList > li > ol {
|
||||
>.mx_RoomView_MessageList > li > ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CancelButton {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--size) / 4);
|
||||
border-radius: 50%;
|
||||
|
||||
line-height: 0;
|
||||
background: $quinary-content;
|
||||
|
||||
svg {
|
||||
width: calc(var(--size) / 2);
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,50 +20,31 @@ limitations under the License.
|
|||
margin: auto;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
"reply reply" auto
|
||||
"composer controls" auto
|
||||
/ 1fr auto;
|
||||
.mx_MessageComposer_replaced_wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* the below is required, without this some unexpected scroll jump
|
||||
will occur when erasing the composer content or jumping to voice note
|
||||
recording */
|
||||
min-height: 45px;
|
||||
.mx_MessageComposer_replaced_valign {
|
||||
height: 60px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview {
|
||||
grid-area: reply;
|
||||
}
|
||||
.mx_MessageComposer_roomReplaced_icon {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-top: 5px;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row {
|
||||
min-width: 0;
|
||||
grid-area: composer;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_controls {
|
||||
grid-area: controls;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
>[role=button] {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_delete {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_stop,
|
||||
.mx_MessageComposer_sendMessage {
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
.mx_VoiceMessagePrimaryContainer {
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
.mx_MessageComposer_roomReplaced_header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_autocomplete_wrapper {
|
||||
|
|
@ -75,36 +56,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid $quaternary-content;
|
||||
border-radius: 12px;
|
||||
padding: $spacing-12 $spacing-8;
|
||||
margin-right: $spacing-16;
|
||||
|
||||
transition: border-color var(--transition-short);
|
||||
|
||||
&[data-notice=true] {
|
||||
border-color: transparent;
|
||||
color: $secondary-content;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $tertiary-content;
|
||||
}
|
||||
|
||||
&[aria-disabled=true] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
|
|
@ -121,16 +73,22 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
|
||||
margin: 0 0 2px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
margin-right: 0; // Counteract the E2EIcon class
|
||||
margin-left: 3px; // Counteract the E2EIcon class
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-style: italic;
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
color: $info-plinth-fg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_wrapper {
|
||||
|
|
@ -166,19 +124,13 @@ limitations under the License.
|
|||
.mx_MessageComposer_editor > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_editor > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@keyframes visualbell {
|
||||
from {
|
||||
background-color: $visual-bell-bg-color;
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: $background;
|
||||
}
|
||||
from { background-color: $visual-bell-bg-color; }
|
||||
to { background-color: $background; }
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_error {
|
||||
|
|
@ -214,14 +166,12 @@ limitations under the License.
|
|||
color: $accent;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button_highlight {
|
||||
background: rgba($accent, 0.25);
|
||||
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent !important;
|
||||
|
|
@ -238,7 +188,6 @@ limitations under the License.
|
|||
padding-left: var(--size);
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 7px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
|
|
@ -312,30 +261,11 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/image-view/more.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessageWrapper {
|
||||
--sendMessageSize: 32px;
|
||||
transition: all var(--transition-short);
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessageWrapper,
|
||||
.mx_MessageComposer_sendMessageWrapper-enter,
|
||||
.mx_MessageComposer_sendMessageWrapper-exit {
|
||||
width: 0;
|
||||
transform: scale(.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessageWrapper-enter-active {
|
||||
width: var(--sendMessageSize);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessage {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: var(--sendMessageSize);
|
||||
height: var(--sendMessageSize);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%;
|
||||
background-color: $accent;
|
||||
|
||||
|
|
@ -428,6 +358,10 @@ limitations under the License.
|
|||
.mx_MessageComposer_input {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -437,7 +371,21 @@ limitations under the License.
|
|||
.mx_MessageComposer.mx_MessageComposer--compact {
|
||||
margin-right: 0;
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding: 0 0 0 25px;
|
||||
}
|
||||
|
||||
&:not(.mx_MessageComposer_e2eStatus) {
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_e2eIcon {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,44 +15,48 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_ReplyPreview {
|
||||
border: 1px solid $system;
|
||||
|
||||
margin-left: calc(-1 * $spacing-16);
|
||||
margin-right: calc(-1 * $spacing-16);
|
||||
padding: $spacing-8 $spacing-16 0 $spacing-16;
|
||||
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
|
||||
border: 1px solid $primary-hairline-color;
|
||||
border-bottom: none;
|
||||
background: $background;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_header {
|
||||
display: flex;
|
||||
font-size: $font-12px;
|
||||
color: $secondary-content;
|
||||
position: relative;
|
||||
.mx_ReplyPreview_section {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
row-gap: $spacing-8;
|
||||
padding: $spacing-8 $spacing-8 0 $spacing-8;
|
||||
|
||||
> svg {
|
||||
width: 1em;
|
||||
vertical-align: middle;
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
.mx_ReplyPreview_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
column-gap: 8px;
|
||||
|
||||
.mx_CancelButton {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
|
||||
.mx_ReplyPreview_header_cancel {
|
||||
background-color: $primary-content;
|
||||
mask: url('$(res)/img/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_header_cancel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: $primary-content;
|
||||
width: 18px;
|
||||
.mx_RoomView_body {
|
||||
.mx_ReplyPreview {
|
||||
// Add box-shadow to the reply preview on the main (left) panel only.
|
||||
// It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,14 @@ limitations under the License.
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// min-height at this level so the mx_BasicMessageComposer_input
|
||||
// still stays vertically centered when less than 55px.
|
||||
// We also set this to ensure the voice message recording widget
|
||||
// doesn't cause a jump.
|
||||
min-height: 55px;
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
padding: 3px 0;
|
||||
// this will center the contenteditable
|
||||
// in it's parent vertically
|
||||
// while keeping the autocomplete at the top
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="currentColor" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
|
||||
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#454545" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 437 B After Width: | Height: | Size: 423 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10 12C10 12.5523 10.4477 13 11 13V16.5C11 17.0523 11.4477 17.5 12 17.5H13.5C14.0523 17.5 14.5 17.0523 14.5 16.5C14.5 15.9477 14.0523 15.5 13.5 15.5H13V12C13 11.4477 12.5523 11 12 11H11C10.4477 11 10 11.4477 10 12ZM12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10 12C10 12.5523 10.4477 13 11 13V16.5C11 17.0523 11.4477 17.5 12 17.5H13.5C14.0523 17.5 14.5 17.0523 14.5 16.5C14.5 15.9477 14.0523 15.5 13.5 15.5H13V12C13 11.4477 12.5523 11 12 11H11C10.4477 11 10 11.4477 10 12ZM12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10Z" fill="black"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 637 B After Width: | Height: | Size: 630 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.999756 0.999756L8.99975 8.99975" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M9.00049 0.999756L1.00049 8.99975" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M0.999756 0.999756L8.99975 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M9.00049 0.999756L1.00049 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 310 B |
Loading…
Add table
Add a link
Reference in a new issue