From 88228a5a3fcd989722bdbf18e26ad69074c292b9 Mon Sep 17 00:00:00 2001 From: Luke Barnard 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 5b75232510..a0ad8a9af6 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 84d63dd5ff..525f8a5968 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 ( -

{ label }

+ + {({style, isSticky, wasSticky, distanceFromTop}) => { + return ( +
+

{ 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 f676d24bef..5b36359e35 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; +}