From ac9902e52a704f52e508757fef7cf8c9b517f11b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 3 Dec 2018 14:55:24 +0100
Subject: [PATCH] apply redesign to topunreadmessagebar

with placeholder for message count
---
 res/css/structures/_RoomView.scss             |  8 +++-
 .../views/rooms/_TopUnreadMessagesBar.scss    | 48 ++++++++-----------
 res/img/icon-jump-to-first-unread.svg         | 16 +++++++
 src/components/structures/RoomView.js         | 20 ++++----
 src/components/structures/TimelinePanel.js    |  1 -
 .../views/rooms/TopUnreadMessagesBar.js       | 19 ++------
 src/i18n/strings/en_EN.json                   |  1 -
 7 files changed, 54 insertions(+), 59 deletions(-)
 create mode 100644 res/img/icon-jump-to-first-unread.svg

diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 67facaa322..72dca953f9 100644
--- a/res/css/structures/_RoomView.scss
+++ b/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 {
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 1ee56d9532..c4ca035a2e 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/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;
 }
diff --git a/res/img/icon-jump-to-first-unread.svg b/res/img/icon-jump-to-first-unread.svg
new file mode 100644
index 0000000000..652ccec20d
--- /dev/null
+++ b/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>
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 1f770c66c6..bce24ddc8e 100644
--- a/src/components/structures/RoomView.js
+++ b/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>
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index f5dc6c7ef4..c44655ff18 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/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() {
diff --git a/src/components/views/rooms/TopUnreadMessagesBar.js b/src/components/views/rooms/TopUnreadMessagesBar.js
index b2648e55a9..ed04ce594d 100644
--- a/src/components/views/rooms/TopUnreadMessagesBar.js
+++ b/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>
         );
     },
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4ab130e923..c137253a43 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",