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

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.

src/components/structures/RoomStatusBar.js

@@ -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,27 +129,24 @@ 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_RoomStatusBar_connectionLostBar_title">
-                        <div className="mx_RoomView_connectionLostBar_title">
                         Connectivity to the server has been lost.
                     </div>
-                        <div className="mx_RoomView_connectionLostBar_desc">
+                    <div className="mx_RoomStatusBar_connectionLostBar_desc">
                         Sent messages will be stored until your connection has returned.
                     </div>
                 </div>
-                </div>
             );
         }
 
         if (this.props.tabCompleteEntries) {
             return (
-                <div className="mx_RoomView_tabCompleteBar">
+                <div className="mx_RoomStatusBar_tabCompleteBar">
-                    <div className="mx_RoomView_tabCompleteImage">...</div>
+                    <div className="mx_RoomStatusBar_tabCompleteWrapper">
-                    <div className="mx_RoomView_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,20 +157,18 @@ 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_RoomStatusBar_connectionLostBar_title">
-                        <div className="mx_RoomView_connectionLostBar_title">
                         Some of your messages have not been sent.
                     </div>
-                        <div className="mx_RoomView_connectionLostBar_desc">
+                    <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                            <a className="mx_RoomView_resend_link"
+                        <a className="mx_RoomStatusBar_resend_link"
                             onClick={ this.props.onResendAllClick }>
                         Resend all now
                         </a> or select individual messages to re-send.
                     </div>
                 </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 }>
+                <div className="mx_RoomStatusBar_unreadMessagesBar"
-                    <img src="img/newmessages.svg" width="24" height="24" alt=""/>
+                        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_RoomStatusBar_typingBar">
-                    <div className="mx_RoomView_typingImage">...</div>
+                    {typingString}
-                    <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>
             );
         }
 
         if (this.props.hasActiveCall) {
             return (
-                <div className="mx_RoomView_callBar">
+                <div className="mx_RoomStatusBar_callBar">
-                    <img src="img/sound-indicator.svg" width="23" height="20"/>
                     <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>
+        );
     },  
 });