PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Show jump-to-bottom icon even when there is other stuff in the status bar

Browse source 
Also includes a general simplification of the classes being used in the status
bar.

This should fix vector-im/vector-web#879. Obviously it needs corresponding
changes in the CSS in vector-web.
This commit is contained in:
Richard van der Hoff 2016-02-09 14:42:32 +00:00
parent 7fd56351a9
commit 30b4b91cf3
1 changed files with 83 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
src/components/structures/RoomStatusBar.js
View file

@ -76,7 +76,50 @@ module.exports = React.createClass({
});
},
render: function() {
// return suitable content for the image on the left of the status bar.
//
// if wantPlaceholder is true, we include a "..." placeholder if
// there is nothing better to put in.
_getIndicator: function(wantPlaceholder) {
if (this.props.numUnreadMessages) {
return (
<div className="mx_RoomStatusBar_scrollDownIndicator"
onClick={ this.props.onScrollToBottomClick }>
<img src="img/newmessages.svg" width="24" height="24"
alt=""/>
</div>
);
}
if (!this.props.atEndOfLiveTimeline) {
return (
<div className="mx_RoomStatusBar_scrollDownIndicator"
onClick={ this.props.onScrollToBottomClick }>
<img src="img/scrolldown.svg" width="24" height="24"
alt="Scroll to bottom of page"
title="Scroll to bottom of page"/>
</div>
);
}
if (this.props.hasActiveCall) {
return (
<img src="img/sound-indicator.svg" width="23" height="20"/>
);
}
if (wantPlaceholder) {
return (
<div className="mx_RoomStatusBar_placeholderIndicator">...</div>
);
}
return null;
},
// return suitable content for the main (text) part of the status bar.
_getContent: function() {
var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
@ -86,15 +129,13 @@ module.exports = React.createClass({
// a connection!
if (this.state.syncState === "ERROR") {
return (
<div className="mx_RoomView_connectionLostBar">
<div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
<div className="mx_RoomView_connectionLostBar_textArea">
<div className="mx_RoomView_connectionLostBar_title">
Connectivity to the server has been lost.
</div>
<div className="mx_RoomView_connectionLostBar_desc">
Sent messages will be stored until your connection has returned.
</div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
Connectivity to the server has been lost.
</div>
<div className="mx_RoomStatusBar_connectionLostBar_desc">
Sent messages will be stored until your connection has returned.
</div>
</div>
);
@ -102,11 +143,10 @@ module.exports = React.createClass({
if (this.props.tabCompleteEntries) {
return (
<div className="mx_RoomView_tabCompleteBar">
<div className="mx_RoomView_tabCompleteImage">...</div>
<div className="mx_RoomView_tabCompleteWrapper">
<div className="mx_RoomStatusBar_tabCompleteBar">
<div className="mx_RoomStatusBar_tabCompleteWrapper">
<TabCompleteBar entries={this.props.tabCompleteEntries} />
<div className="mx_RoomView_tabCompleteEol" title="->|">
<div className="mx_RoomStatusBar_tabCompleteEol" title="->|">
<TintableSvg src="img/eol.svg" width="22" height="16"/>
Auto-complete
</div>
@ -117,18 +157,16 @@ module.exports = React.createClass({
if (this.props.hasUnsentMessages) {
return (
<div className="mx_RoomView_connectionLostBar">
<div className="mx_RoomStatusBar_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
<div className="mx_RoomView_connectionLostBar_textArea">
<div className="mx_RoomView_connectionLostBar_title">
Some of your messages have not been sent.
</div>
<div className="mx_RoomView_connectionLostBar_desc">
<a className="mx_RoomView_resend_link"
onClick={ this.props.onResendAllClick }>
Resend all now
</a> or select individual messages to re-send.
</div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
Some of your messages have not been sent.
</div>
<div className="mx_RoomStatusBar_connectionLostBar_desc">
<a className="mx_RoomStatusBar_resend_link"
onClick={ this.props.onResendAllClick }>
Resend all now
</a> or select individual messages to re-send.
</div>
</div>
);
@ -141,8 +179,8 @@ module.exports = React.createClass({
(this.props.numUnreadMessages > 1 ? "s" : "");
return (
<div className="mx_RoomView_unreadMessagesBar" onClick={ this.props.onScrollToBottomClick }>
<img src="img/newmessages.svg" width="24" height="24" alt=""/>
<div className="mx_RoomStatusBar_unreadMessagesBar"
onClick={ this.props.onScrollToBottomClick }>
{unreadMsgs}
</div>
);
@ -151,30 +189,35 @@ module.exports = React.createClass({
var typingString = WhoIsTyping.whoIsTypingString(this.props.room);
if (typingString) {
return (
<div className="mx_RoomView_typingBar">
<div className="mx_RoomView_typingImage">...</div>
<span className="mx_RoomView_typingText">{typingString}</span>
</div>
);
}
if (!this.props.atEndOfLiveTimeline) {
return (
<div className="mx_RoomView_scrollToBottomBar" onClick={ this.props.onScrollToBottomClick }>
<img src="img/scrolldown.svg" width="24" height="24" alt="Scroll to bottom of page" title="Scroll to bottom of page"/>
<div className="mx_RoomStatusBar_typingBar">
{typingString}
</div>
);
}
if (this.props.hasActiveCall) {
return (
<div className="mx_RoomView_callBar">
<img src="img/sound-indicator.svg" width="23" height="20"/>
<div className="mx_RoomStatusBar_callBar">
<b>Active call</b>
</div>
);
}
return <div />;
return null;
},
render: function() {
var content = this._getContent();
var indicator = this._getIndicator(content !== null);
return (
<div className="mx_RoomStatusBar">
<div className="mx_RoomStatusBar_indicator">
{indicator}
</div>
{content}
</div>
);
},
});