diff options
Diffstat (limited to 'Timeline/ClientApp/src/timeline')
| -rw-r--r-- | Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx | 33 | ||||
| -rw-r--r-- | Timeline/ClientApp/src/timeline/timeline-ui.sass | 2 |
2 files changed, 27 insertions, 8 deletions
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx index 3aaafd2b..6d834832 100644 --- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx @@ -43,6 +43,8 @@ export default function TimelinePageTemplateUI< >(
props: TimelinePageTemplateUIProps<TTimeline, TEditItems>
): React.ReactElement | null {
+ const { timeline } = props;
+
const { t } = useTranslation();
const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);
@@ -71,19 +73,29 @@ export default function TimelinePageTemplateUI< setCardHeight(height);
}, []);
+ const genCardCollapseLocalStorageKey = (timelineName: string): string =>
+ `timeline.${timelineName}.cardCollapse`;
+
+ const cardCollapseLocalStorageKey =
+ timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;
+
const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(
false
);
- const toggleInfoCardCollapse = React.useCallback((collapse) => {
- setInfoCardCollapse(collapse);
- }, []);
+ React.useEffect(() => {
+ if (cardCollapseLocalStorageKey != null) {
+ const savedCollapse =
+ window.localStorage.getItem(cardCollapseLocalStorageKey) === 'true';
+ setInfoCardCollapse(savedCollapse);
+ }
+ }, [cardCollapseLocalStorageKey]);
let body: React.ReactElement;
if (props.error != null) {
body = <p className="text-danger">{t(props.error)}</p>;
} else {
- if (props.timeline != null) {
+ if (timeline != null) {
let timelineBody: React.ReactElement;
if (props.posts != null) {
if (props.posts === 'forbid') {
@@ -102,7 +114,7 @@ export default function TimelinePageTemplateUI< <TimelinePostEdit
onPost={props.onPost}
onHeightChange={onPostEditHeightChange}
- timelineName={props.timeline.name}
+ timelineName={timeline.name}
/>
</>
);
@@ -121,11 +133,18 @@ export default function TimelinePageTemplateUI< >
<CollapseButton
collapse={infoCardCollapse}
- toggle={toggleInfoCardCollapse}
+ onClick={() => {
+ const newState = !infoCardCollapse;
+ setInfoCardCollapse(newState);
+ window.localStorage.setItem(
+ genCardCollapseLocalStorageKey(timeline.name),
+ newState.toString()
+ );
+ }}
className="float-right m-1 info-card-collapse-button"
/>
<CardComponent
- timeline={props.timeline}
+ timeline={timeline}
onManage={props.onManage}
onMember={props.onMember}
onHeight={onCardHeightChange}
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/timeline/timeline-ui.sass index 8f0da6a4..27aaf072 100644 --- a/Timeline/ClientApp/src/timeline/timeline-ui.sass +++ b/Timeline/ClientApp/src/timeline/timeline-ui.sass @@ -9,7 +9,7 @@ transform-origin: right top
transition: transform 0.5s
- & [data-collapse='true']
+ &[data-collapse='true']
.info-card-content
transform: scale(0)
|