Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Revert recent composer changes #8840

Merged
merged 5 commits into from
Jun 27, 2022
Merged

Revert recent composer changes #8840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
951d613
Revert "Prevent new composer from overflowing from non-breakable text…
t3chguy Jun 14, 2022
2df3699
Revert "Fix scroll jump issue with the composer (#8791)"
t3chguy Jun 14, 2022
c9b5ee7
Revert "Fix scroll jump issue with the composer (#8788)"
t3chguy Jun 14, 2022
cdbdfdb
Revert "Revert link color change in composer (#8784)"
t3chguy Jun 14, 2022
9e8115a
Revert "Improve composer visiblity (#8578)"
t3chguy Jun 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,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";
Expand Down
8 changes: 1 addition & 7 deletions res/css/structures/_RoomView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
}
}
Expand Down
32 changes: 0 additions & 32 deletions res/css/views/buttons/_Cancel.scss
View file
Open in desktop

This file was deleted.

160 changes: 54 additions & 106 deletions res/css/views/rooms/_MessageComposer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

/* 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_ReplyPreview {
grid-area: reply;
}

.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_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}

.mx_VoiceRecordComposerTile_delete {
margin-bottom: 9px;
}
.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}

.mx_VoiceRecordComposerTile_stop,
.mx_MessageComposer_sendMessage {
margin-bottom: $spacing-4;
}
.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
margin-top: 5px;
width: 31px;
height: 31px;
}

.mx_VoiceMessagePrimaryContainer {
margin-right: $spacing-8;
}
.mx_MessageComposer_roomReplaced_header {
font-weight: bold;
}

.mx_MessageComposer_autocomplete_wrapper {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -428,6 +358,10 @@ limitations under the License.
.mx_MessageComposer_input {
min-height: 50px;
}

.mx_MessageComposer_noperm_error {
height: 50px;
}
}

/**
Expand All @@ -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;
}
}
68 changes: 36 additions & 32 deletions res/css/views/rooms/_ReplyPreview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

> svg {
width: 1em;
vertical-align: middle;
margin-right: $spacing-8;
}

.mx_CancelButton {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
.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;

.mx_ReplyPreview_header {
display: flex;
justify-content: space-between;
column-gap: 8px;

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;
}
}
Loading