Skip to content

Commit

Permalink
Merge pull request #4991 from vector-im/revert-4939-luke/feature-stic…
Browse files Browse the repository at this point in the history
…ky-date-separators

Revert "Implement sticky date separators"
  • Loading branch information
dbkr authored Sep 6, 2017
2 parents 7202556 + 38575a6 commit d374425
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 34 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
49 changes: 34 additions & 15 deletions src/components/views/messages/DateSeparator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
}
});
20 changes: 2 additions & 18 deletions src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit d374425

Please sign in to comment.