mirror of https://github.com/vector-im/riot-web
simplify DOM and style to design
Bruno Windels
parent
465d767bf1
commit
20b8994714
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@ $topleftmenu-color: #212121;
|
|||
$roomheader-color: #45474a;
|
||||
$roomheader-addroom-color: #929eb4;
|
||||
$roomtopic-color: #9fa9ba;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ $topleftmenu-color: $primary-fg-color;
|
|||
$roomheader-color: $primary-fg-color;
|
||||
$roomheader-addroom-color: $primary-bg-color;
|
||||
$roomtopic-color: $settings-grey-fg-color;
|
||||
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(69, 69, 69, 0.8);
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
// MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
||||
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
|
||||
const client = MatrixClientPeg.get();
|
||||
if (client) {
|
||||
// client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
||||
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ module.exports = React.createClass({
|
|||
|
||||
if (othersCount > 0) {
|
||||
avatars.push(
|
||||
<span className="mx_WhoIsTypingTile_typingIndicatorRemaining" key="others">
|
||||
<span className="mx_WhoIsTypingTile_remainingAvatarPlaceholder" key="others">
|
||||
+{ othersCount }
|
||||
</span>,
|
||||
);
|
||||
|
|
@ -97,36 +97,24 @@ module.exports = React.createClass({
|
|||
return avatars;
|
||||
},
|
||||
|
||||
// return suitable content for the main (text) part of the status bar.
|
||||
_getContent: function() {
|
||||
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||
|
||||
render: function() {
|
||||
const typingString = WhoIsTyping.whoIsTypingString(
|
||||
this.state.usersTyping,
|
||||
this.props.whoIsTypingLimit,
|
||||
);
|
||||
if (typingString) {
|
||||
return (
|
||||
<div className="mx_WhoIsTypingTile_typingBar">
|
||||
<EmojiText>{ typingString }</EmojiText>
|
||||
</div>
|
||||
);
|
||||
if (!typingString) {
|
||||
return (<div className="mx_WhoIsTypingTile_empty" />);
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// if (this.state.usersTyping.length === 0) {
|
||||
// return;
|
||||
// }
|
||||
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||
|
||||
return (
|
||||
<div className="mx_WhoIsTypingTile">
|
||||
<div className="mx_WhoIsTypingTile_indicator">
|
||||
<div className="mx_WhoIsTypingTile_typingIndicatorAvatars">
|
||||
{ this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
|
||||
</div>
|
||||
<div className="mx_WhoIsTypingTile_avatars">
|
||||
{ this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
|
||||
</div>
|
||||
<div role="alert">
|
||||
{ this._getContent() }
|
||||
<div className="mx_WhoIsTypingTile_label">
|
||||
<EmojiText>{ typingString }</EmojiText>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue