Merge pull request #4991 from vector-im/revert-4939-luke/feature-sticky-date-separators

Revert "Implement sticky date separators"

package.json

@@ -75,7 +75,6 @@
     "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",

src/components/views/messages/DateSeparator.js

@@ -15,26 +15,45 @@ limitations under the License.
 */
 
 import React from 'react';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import DateUtils from 'matrix-react-sdk/lib/DateUtils';
-import { Sticky } from 'react-sticky';
+
+function getdaysArray() {
+	return [
+        _t('Sunday'),
+        _t('Monday'),
+        _t('Tuesday'),
+        _t('Wednesday'),
+        _t('Thursday'),
+        _t('Friday'),
+        _t('Saturday'),
+    ];
+}
 
 module.exports = React.createClass({
     displayName: 'DateSeparator',
     render: function() {
-        const date = new Date(this.props.ts);
+        var date = new Date(this.props.ts);
-        const label = DateUtils.formatDateSeparator(date);
+        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);
+        }
+
         return (
-            <Sticky relative={true} disableCompensation={true}>
+            <h2 className="mx_DateSeparator">{ label }</h2>
-                {({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>
         );
-    },
+    }
 });

src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss

@@ -16,26 +16,10 @@ limitations under the License.
 
 .mx_DateSeparator {
     clear: both;
-    margin-top: 0px;
+    margin-top: 32px;
-    margin-bottom: 0px;
+    margin-bottom: 8px;
     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;
-}