mirror of
https://github.com/plausible/analytics.git
synced 2024-12-24 01:54:34 +03:00
b64f9de51a
* Adds New Dark Mode Assets * Moves triangle for dropdown to a reasonable position * Majority .eex dark implementation * Fixes Logo Positioning * Adds theme flag to user schema, uses it * Uses correct variables for theme applicator script * Minor missed theme changes/fallbacks * Individual Component Support + Theme Context * Sources Tab Support This was a pain to test D: * Partial Stats Sections Support * More of stats modules supported * Modal +table support * Improves some Flatpickr in light theme, supports dark theme * Fixes missed settings tab colors * Finishes Devices module support * Fixes bar graph colors * Better colorizes maps module * Undoes colorized bars (they looked bad, on second thought) * Fixes loading indicator * Finishes conversions module * Adds changelog entry The PR number could be wrong, will double check * Fixes missed header color * Fixes naming of migration and removes static alter * Does migration correctly As I said, my Elixir is pretty weak heh * Adds support for spike notifications setting * Improves contrast and visibility for email settings * Add initial implementation for sticky header * Minor mobile formatting improvements * Finishes (probably) pinned header feature * Adds changelog entry for pinned header * Updates PR number in sticky header changelog entry * Wraps up code cleanup + feature * Merge conflicts are hard, apparently * Removes extraneous tailwind variants * Fixes mentioned issues * Removes option to unsticky * py-3 * Tailwind in CSS
36 lines
876 B
JavaScript
36 lines
876 B
JavaScript
import React from 'react';
|
|
|
|
export const withPinnedHeader = (WrappedComponent, flagName) => {
|
|
return class extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
stuck: false
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.observer = new IntersectionObserver((entries) => {
|
|
if (entries[0].intersectionRatio === 0)
|
|
this.setState({ stuck: true });
|
|
else if (entries[0].intersectionRatio === 1)
|
|
this.setState({ stuck: false });
|
|
}, {
|
|
threshold: [0, 1]
|
|
});
|
|
|
|
this.observer.observe(document.querySelector("#stats-container-top"));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.observer.unobserve(document.querySelector("#stats-container-top"));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<WrappedComponent stuck={this.state.stuck}{...this.props}/>
|
|
);
|
|
}
|
|
}
|
|
}
|