mirror of
https://github.com/element-hq/element-web.git
synced 2024-11-30 23:31:28 +03:00
Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
commit
8a8aea0927
3 changed files with 34 additions and 36 deletions
|
@ -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",
|
||||
|
|
|
@ -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 (
|
||||
<h2 className="mx_DateSeparator">{ label }</h2>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue