imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2997 from matrix-org/bwindels/pill-avatars

Browse source 
Message editing: render avatars for pills in the editor
This commit is contained in:
Bruno Windels 2019-05-21 12:11:06 +00:00 • committed by GitHub
commit 2d4d608ed6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 198 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

37
res/css/views/elements/_MessageEditor.scss
View file

@ -21,6 +21,7 @@ limitations under the License.
// padding around and in the editor.
// Actual values from fiddling around in inspector
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_MessageEditor_editor {
border-radius: 4px;
@ -33,20 +34,28 @@ limitations under the License.
max-height: 200px;
overflow-x: auto;
span {
display: inline-block;
padding: 0 5px;
border-radius: 4px;
color: white;
}
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
span.user-pill, span.room-pill {
border-radius: 16px;
display: inline-block;
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
padding-left: 5px;
padding-right: 5px;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: 16px;
font-size: 10.4px;
}
}
}
@ -61,7 +70,7 @@ limitations under the License.
z-index: 100;
right: 0;
margin: 0 -110px 0 0;
padding-right: 104px;
padding-right: 147px;
.mx_AccessibleButton {
margin-left: 5px;

7
res/css/views/rooms/_EventTile.scss
View file

@ -40,7 +40,12 @@ limitations under the License.
}
.mx_EventTile_continuation {
padding-top: 0px ! important;
padding-top: 0px !important;
&.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
}
.mx_EventTile_isEditing {