mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Fix: Bookmarks - make expanding not move everything up; remember expanded / collapsed state (#96945)
* fix: expanding bookmarks not move everything up * chore: delete unused code * Update public/app/features/trails/DataTrailBookmarks.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * fix: remove type assertion to fix betterer --------- Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
This commit is contained in:
parent
6be6c87c7c
commit
1dffd3e554
@ -1,5 +1,5 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { useState } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data';
|
import { GrafanaTheme2 } from '@grafana/data';
|
||||||
import { IconButton, useStyles2 } from '@grafana/ui';
|
import { IconButton, useStyles2 } from '@grafana/ui';
|
||||||
@ -14,9 +14,16 @@ type Props = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function DataTrailsBookmarks({ onSelect, onDelete }: Props) {
|
export function DataTrailsBookmarks({ onSelect, onDelete }: Props) {
|
||||||
const [toggleBookmark, setToggleBookmark] = useState(false);
|
const [toggleBookmark, setToggleBookmark] = useState(() => {
|
||||||
|
const savedState = localStorage.getItem('toggleBookmark');
|
||||||
|
return savedState ? JSON.parse(savedState) : false;
|
||||||
|
});
|
||||||
const styles = useStyles2(getStyles);
|
const styles = useStyles2(getStyles);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem('toggleBookmark', JSON.stringify(toggleBookmark));
|
||||||
|
}, [toggleBookmark]);
|
||||||
|
|
||||||
if (getTrailStore().bookmarks.length === 0) {
|
if (getTrailStore().bookmarks.length === 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -103,8 +103,8 @@ function getStyles(theme: GrafanaTheme2) {
|
|||||||
return {
|
return {
|
||||||
container: css({
|
container: css({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
marginTop: '84px',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
boxSizing: 'border-box', // Ensure padding doesn't cause overflow
|
boxSizing: 'border-box', // Ensure padding doesn't cause overflow
|
||||||
|
Loading…
Reference in New Issue
Block a user