From 38575a653d99f568e8500600f904d3df0920de7f Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Wed, 6 Sep 2017 17:36:43 +0100
Subject: [PATCH] Revert "Implement sticky date separators"
---
package.json | 1 -
.../views/messages/DateSeparator.js | 49 +++++++++++++------
.../views/messages/_DateSeparator.scss | 20 +-------
3 files changed, 36 insertions(+), 34 deletions(-)
diff --git a/package.json b/package.json
index d395076c..61fb440c 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 525f8a59..84d63dd5 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/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);
- const label = DateUtils.formatDateSeparator(date);
+ 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);
+ }
+
return (
- <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>
+ <h2 className="mx_DateSeparator">{ label }</h2>
);
- },
+ }
});
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 5b36359e..f676d24b 100644
--- a/src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
+++ b/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-bottom: 0px;
+ margin-top: 32px;
+ 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;
-}