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

simplify DOM and style to design

Browse source
This commit is contained in:
Bruno Windels 2018-11-12 18:19:18 +01:00
parent 465d767bf1
commit 20b8994714
4 changed files with 47 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

105
res/css/views/rooms/_WhoIsTypingTile.scss
View file

@ -15,73 +15,31 @@ limitations under the License.
*/
.mx_WhoIsTypingTile {
margin-left: 65px;
min-height: 50px;
font-size: 14px;
margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
height: 40px;
display: flex;
align-items: center;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_indicator {
padding-left: 17px;
padding-right: 12px;
margin-left: -73px;
margin-top: 15px;
float: left;
width: 24px;
.mx_WhoIsTypingTile_avatars {
flex: 0 0 83px; // 18 + 65
text-align: center;
}
.mx_WhoIsTypingTile_placeholderIndicator span {
color: $primary-fg-color;
opacity: 0.5;
position: relative;
top: -4px;
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
animation-iteration-count: infinite;
*/
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(1) {
animation-delay: 0.3s;
}
.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(2) {
animation-delay: 0.6s;
}
.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(3) {
animation-delay: 0.9s;
}
@keyframes bounce {
from {
opacity: 0.5;
top: 0;
}
to {
opacity: 0.2;
top: -3px;
}
}
.mx_WhoIsTypingTile_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
}
.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
.mx_WhoIsTypingTile_typingIndicatorRemaining {
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
display: inline-block;
color: #acacac;
background-color: #ddd;
@ -93,31 +51,34 @@ limitations under the License.
font-size: 0.8em;
vertical-align: top;
text-align: center;
position: absolute;
}
.mx_WhoIsTypingTile_typingBar {
height: 50px;
line-height: 50px;
color: $primary-fg-color;
opacity: 0.5;
overflow-y: hidden;
display: block;
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-weight: 600;
color: $eventtile-meta-color;
}
.mx_WhoIsTypingTile_label > span:after {
background-image: url('../../img/spinner.gif');
background-size: 16px;
background-position: right;
background-repeat: no-repeat;
right: 0px;
top: 0;
bottom: 0;
margin-left: 10px;
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
content: "";
}
.mx_MatrixChat_useCompactLayout {
.mx_WhoIsTypingTile {
min-height: 40px;
}
.mx_WhoIsTypingTile_indicator {
margin-top: 10px;
}
.mx_WhoIsTypingTile_typingBar {
height: 40px;
line-height: 40px;
height: 35px;
}
}