Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update rte autocomplete styling (#10503)

Browse Source 
* amend className to reflect usage
* move new class into file used by Send/Edit composers
* add border styling to autocomplete
This commit is contained in:
alunturner 2023-04-04 14:52:57 +01:00 committed by GitHub
parent b77b2df29b
commit 7a250f41ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
View File

@ -84,10 +84,3 @@ limitations under the License.
border-color: $quaternary-content;
}
}
.mx_SendWysiwygComposer_AutoCompleteWrapper {
position: relative;
> .mx_Autocomplete {
min-width: 100%;
}
}

13
res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View File

@ -146,3 +146,16 @@ limitations under the License.
color: $tertiary-content;
}
}
.mx_WysiwygComposer_AutoCompleteWrapper {
position: relative;
/* Due to the fact that editing a message now has a larger amount of grey
colour above it (due to the rich text buttons above the composer), we need
to give the autocomplete a bit more visual separation by using a border.
*/
> .mx_Autocomplete {
border: 1px solid $quinary-content;
border-radius: 8px;
}
}

2
src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
View File

@ -119,7 +119,7 @@ const WysiwygAutocomplete = forwardRef(
}
return room ? (
<div className="mx_SendWysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
<div className="mx_WysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
<Autocomplete
ref={ref}
query={buildQuery(suggestion)}