Improve composer visiblity (#8578)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Germain 2022-06-07 08:28:29 +01:00 committed by GitHub
parent 8c13a0f8d4
commit f14374a51c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 323 additions and 174 deletions

View file

@ -0,0 +1,32 @@
/*
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;
}
}

View file

@ -20,31 +20,48 @@ limitations under the License.
margin: auto;
border-top: 1px solid $primary-hairline-color;
position: relative;
padding-left: 42px;
padding-right: 16px;
}
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}
display: grid;
grid-template:
"reply reply" auto
"composer controls" auto
/ 1fr auto;
.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 {
grid-area: composer;
}
.mx_MessageComposer_roomReplaced_header {
font-weight: bold;
.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;
}
a {
color: $accent;
}
}
.mx_MessageComposer_autocomplete_wrapper {
@ -56,7 +73,36 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
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;
}
}
.mx_MessageComposer .mx_MessageComposer_avatar {
@ -73,22 +119,16 @@ limitations under the License.
}
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 20px;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
margin: 0 0 2px;
width: 12px;
height: 12px;
align-self: end;
}
.mx_MessageComposer_noperm_error {
width: 100%;
height: 60px;
font-style: italic;
color: $info-plinth-fg-color;
display: flex;
align-items: center;
justify-content: center;
color: $tertiary-content;
font-size: $font-12px;
}
.mx_MessageComposer_input_wrapper {
@ -124,13 +164,19 @@ 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 {
@ -166,12 +212,14 @@ 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;
@ -188,6 +236,7 @@ limitations under the License.
padding-left: var(--size);
border-radius: 50%;
margin-right: 6px;
margin-bottom: 7px;
&:last-child {
margin-right: auto;
@ -261,11 +310,30 @@ 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: 32px;
height: 32px;
width: var(--sendMessageSize);
height: var(--sendMessageSize);
border-radius: 100%;
background-color: $accent;
@ -358,10 +426,6 @@ limitations under the License.
.mx_MessageComposer_input {
min-height: 50px;
}
.mx_MessageComposer_noperm_error {
height: 50px;
}
}
/**
@ -371,21 +435,7 @@ 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;
}
}

View file

@ -15,48 +15,44 @@ limitations under the License.
*/
.mx_ReplyPreview {
border: 1px solid $primary-hairline-color;
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-bottom: none;
background: $background;
max-height: 50vh;
overflow: auto;
}
.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;
font-size: $font-12px;
color: $secondary-content;
position: relative;
.mx_ReplyPreview_header {
display: flex;
justify-content: space-between;
column-gap: 8px;
> svg {
width: 1em;
vertical-align: middle;
margin-right: $spacing-8;
}
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_CancelButton {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
.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;
}
.mx_ReplyPreview_header_cancel {
position: absolute;
right: 0;
color: $primary-content;
width: 18px;
}

View file

@ -30,14 +30,8 @@ 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