From 88228a5a3fcd989722bdbf18e26ad69074c292b9 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 30 Aug 2017 14:06:50 +0100
Subject: [PATCH] Implement sticky date separators

Codep https://github.com/matrix-org/matrix-react-sdk/pull/1353
---
 package.json                                  |  1 +
 .../views/messages/DateSeparator.js           | 49 ++++++-------------
 .../views/messages/_DateSeparator.scss        | 20 +++++++-
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 5b75232510e..a0ad8a9af62 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.6.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-sticky": "^6.0.1",
     "sanitize-html": "^1.11.1",
     "text-encoding-utf-8": "^1.0.1",
     "ua-parser-js": "^0.7.10",
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 84d63dd5ff1..525f8a5968b 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -15,45 +15,26 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import DateUtils from 'matrix-react-sdk/lib/DateUtils';
-
-function getdaysArray() {
-	return [
-        _t('Sunday'),
-        _t('Monday'),
-        _t('Tuesday'),
-        _t('Wednesday'),
-        _t('Thursday'),
-        _t('Friday'),
-        _t('Saturday'),
-    ];
-}
+import { Sticky } from 'react-sticky';
 
 module.exports = React.createClass({
     displayName: 'DateSeparator',
     render: function() {
-        var date = new Date(this.props.ts);
-        var today = new Date();
-        var yesterday = new Date();
-        var days = getdaysArray();
-        yesterday.setDate(today.getDate() - 1);
-        var label;
-        if (date.toDateString() === today.toDateString()) {
-            label = _t('Today');
-        }
-        else if (date.toDateString() === yesterday.toDateString()) {
-            label = _t('Yesterday');
-        }
-        else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            label = days[date.getDay()];
-        }
-        else {
-            label = DateUtils.formatFullDate(date, this.props.showTwelveHour);
-        }
-
+        const date = new Date(this.props.ts);
+        const label = DateUtils.formatDateSeparator(date);
         return (
-            <h2 className="mx_DateSeparator">{ label }</h2>
+            <Sticky relative={true} disableCompensation={true}>
+                {({style, isSticky, wasSticky, distanceFromTop}) => {
+                    return (
+                        <div className={"mx_DateSeparator_container mx_DateSeparator_container" + (isSticky ? '_sticky' : '')}
+                            style={{top: isSticky ? -distanceFromTop + "px" : 0}}
+                        >
+                            <h2 className="mx_DateSeparator">{ label }</h2>
+                        </div>
+                    );
+                }}
+            </Sticky>
         );
-    }
+    },
 });
diff --git a/src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss b/src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
index f676d24bef2..5b36359e35c 100644
--- a/src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
+++ b/src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
@@ -16,10 +16,26 @@ limitations under the License.
 
 .mx_DateSeparator {
     clear: both;
-    margin-top: 32px;
-    margin-bottom: 8px;
+    margin-top: 0px;
+    margin-bottom: 0px;
     margin-left: 63px;
+    padding-top: 5px;
     padding-bottom: 6px;
     border-bottom: 1px solid $primary-hairline-color;
 }
 
+.mx_DateSeparator_container {
+    margin-top: 27px;
+    margin-bottom: 8px;
+    background-color: $primary-bg-color;
+    z-index: 3;
+}
+
+.mx_DateSeparator_container_sticky {
+    position: relative;
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_DateSeparator_container_sticky .mx_DateSeparator {
+    border: 0px;
+}