apply redesign to topunreadmessagebar

with placeholder for message count

res/css/structures/_RoomView.scss

@@ -87,8 +87,12 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
-    order: 1;
+.mx_RoomView_body .mx_RoomView_timeline {
+    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_RoomView_body .mx_RoomView_messagePanel {

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -15,39 +15,29 @@ limitations under the License.
 */
 
 .mx_TopUnreadMessagesBar {
-    margin: auto;  /* centre horizontally */
-    max-width: 960px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid $primary-hairline-color;
+    z-index: 1000;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 38px;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
-    display: inline;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp img {
-    padding-left: 10px;
-    padding-right: 31px;
-    vertical-align: middle;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp span {
-    opacity: 0.5;
-}
-
-.mx_TopUnreadMessagesBar_close {
-    float: right;
-    padding-right: 14px;
-    padding-top: 3px;
+    height: 38px;
+    border-radius: 19px;
+    box-sizing: border-box;
+    background: $primary-bg-color;
+    border: 1.3px solid $roomtile-name-color;
     cursor: pointer;
 }
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_TopUnreadMessagesBar {
-        padding-top: 4px;
-        padding-bottom: 4px;
-    }
+.mx_TopUnreadMessagesBar_scrollUp:before {
+    content: "";
+    position: absolute;
+    width: 38px;
+    height: 38px;
+    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask-repeat: no-repeat;
+    mask-position: 9px 13px;
+    background: $roomtile-name-color;
 }

res/img/icon-jump-to-first-unread.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   style="fill:none"
+   version="1.1"
+   viewBox="0 0 18.666187 8.7375818"
+   height="8.7375822"
+   width="18.666187">
+  <defs
+     id="defs8" />
+  <path
+     d="M 17.909095,7.981591 9.3330939,0.74997995 0.75709259,7.981591"
+     style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path2-8-3" />
+</svg>

src/components/structures/RoomView.js

@@ -1794,14 +1794,10 @@ module.exports = React.createClass({
         let topUnreadMessagesBar = null;
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
-            topUnreadMessagesBar = (
-                <div className="mx_RoomView_topUnreadMessagesBar">
-                    <TopUnreadMessagesBar
-                       onScrollUpClick={this.jumpToReadMarker}
-                       onCloseClick={this.forgetReadMarker}
-                    />
-                </div>
-            );
+            topUnreadMessagesBar = (<TopUnreadMessagesBar
+                                       onScrollUpClick={this.jumpToReadMarker}
+                                       onCloseClick={this.forgetReadMarker}
+                                    />);
         }
         const statusBarAreaClass = classNames(
             "mx_RoomView_statusArea",
@@ -1838,9 +1834,11 @@ module.exports = React.createClass({
                 <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
                     <div className={fadableSectionClasses}>
                         { auxPanel }
-                        { topUnreadMessagesBar }
-                        { messagePanel }
-                        { searchResultsPanel }
+                        <div className="mx_RoomView_timeline">
+                            { topUnreadMessagesBar }
+                            { messagePanel }
+                            { searchResultsPanel }
+                        </div>
                         <div className={statusBarAreaClass}>
                             <div className="mx_RoomView_statusAreaBox">
                                 <div className="mx_RoomView_statusAreaBox_line"></div>

src/components/structures/TimelinePanel.js

@@ -749,7 +749,6 @@ var TimelinePanel = React.createClass({
         this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
     },
 
-
     /* update the read-up-to marker to match the read receipt
      */
     forgetReadMarker: function() {

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -21,6 +21,8 @@ const React = require('react');
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import {formatCount} from '../../../utils/FormattingUtils';
+
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -28,28 +30,15 @@ module.exports = React.createClass({
 
     propTypes: {
         onScrollUpClick: PropTypes.func,
-        onCloseClick: PropTypes.func,
     },
 
     render: function() {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
-                        onClick={this.props.onScrollUpClick}>
-                    <img src="img/scrollto.svg" width="24" height="24"
-                        // No point on setting up non empty alt on this image
-                        // as it only complements the text which follows it.
-                        alt=""
-                        title={_t('Scroll to unread messages')}
-                        // In order not to use this title attribute for accessible name
-                        // calculation of the parent button set the role presentation
-                        role="presentation" />
-                    { _t("Jump to first unread message.") }
+                    title={_t('Jump to first unread message.')}
+                    onClick={this.props.onScrollUpClick}>
                 </AccessibleButton>
-                <AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
-                    src="img/cancel.svg" width="18" height="18"
-                    alt={_t("Close")} title={_t("Close")}
-                    onClick={this.props.onCloseClick} />
             </div>
         );
     },

src/i18n/strings/en_EN.json

@@ -604,7 +604,6 @@
     "Stickerpack": "Stickerpack",
     "Hide Stickers": "Hide Stickers",
     "Show Stickers": "Show Stickers",
-    "Scroll to unread messages": "Scroll to unread messages",
     "Jump to first unread message.": "Jump to first unread message.",
     "Invalid alias format": "Invalid alias format",
     "'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",