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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue