From 38575a653d99f568e8500600f904d3df0920de7f Mon Sep 17 00:00:00 2001 From: David Baker 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 d395076c824..61fb440c54d 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 525f8a5968b..84d63dd5ff1 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 ( - - {({style, isSticky, wasSticky, distanceFromTop}) => { - return ( -
-

{ label }

-
- ); - }} -
+

{ label }

); - }, + } }); 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 5b36359e35c..f676d24bef2 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; -}