mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

[WIP] Implement sticky date separators

Browse source
This commit is contained in:
Luke Barnard 2017-08-23 09:27:32 +01:00
parent 3664a86722
commit 0e876fd213
3 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -75,6 +75,7 @@
"react-dnd-html5-backend": "^2.1.2", "react-dnd-html5-backend": "^2.1.2",
"react-dom": "^15.6.0", "react-dom": "^15.6.0",
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
"react-sticky": "^6.0.1",
"sanitize-html": "^1.11.1", "sanitize-html": "^1.11.1",
"text-encoding-utf-8": "^1.0.1", "text-encoding-utf-8": "^1.0.1",
"ua-parser-js": "^0.7.10", "ua-parser-js": "^0.7.10",

15
src/components/views/messages/DateSeparator.js
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import { _t } from 'matrix-react-sdk/lib/languageHandler'; import { _t } from 'matrix-react-sdk/lib/languageHandler';
import DateUtils from 'matrix-react-sdk/lib/DateUtils'; import DateUtils from 'matrix-react-sdk/lib/DateUtils';
import { Sticky } from 'react-sticky';
function getdaysArray() { function getdaysArray() {
return [ return [
@ -53,7 +54,17 @@ module.exports = React.createClass({
} }
return ( 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>
); );
} },
}); });

20
src/skins/vector/css/vector-web/views/messages/_DateSeparator.scss
View file

@ -16,10 +16,26 @@ limitations under the License.
.mx_DateSeparator { .mx_DateSeparator {
clear: both; clear: both;
margin-top: 32px; margin-top: 0px;
margin-bottom: 8px; margin-bottom: 0px;
margin-left: 63px; margin-left: 63px;
padding-top: 5px;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px solid $primary-hairline-color; 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;
}