IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Datalinks: UX improvements (#91352)

Browse Source
This commit is contained in:
Adela Almasan 2024-08-06 10:10:37 -06:00 committed by GitHub
parent 9456535567
commit e91f16fc46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
View File

@ -166,11 +166,14 @@ export const DataLinksInlineEditor = ({
const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({ const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({
wrapper: css({ wrapper: css({
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
gap: 16,
}), }),
oneClickOverlay: css({ oneClickOverlay: css({
height: 'auto', height: 'auto',
minHeight: 69,
border: `1px dashed ${theme.colors.border.medium}`, border: `1px dashed ${theme.colors.border.medium}`,
paddingBottom: 10,
fontSize: 10, fontSize: 10,
color: theme.colors.text.link, color: theme.colors.text.link,
}), }),

45
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
View File

@ -4,7 +4,7 @@ import { Draggable } from '@hello-pangea/dnd';
import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data'; import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../../themes'; import { useStyles2 } from '../../../themes';
import { isCompactUrl } from '../../../utils/dataLinks'; import { isCompactUrl } from '../../../utils';
import { FieldValidationMessage } from '../../Forms/FieldValidationMessage'; import { FieldValidationMessage } from '../../Forms/FieldValidationMessage';
import { Icon } from '../../Icon/Icon'; import { Icon } from '../../Icon/Icon';
import { IconButton } from '../../IconButton/IconButton'; import { IconButton } from '../../IconButton/IconButton';
@ -39,10 +39,6 @@ export const DataLinksListItem = ({ link, onEdit, onRemove, index, itemKey }: Da
{...provided.draggableProps} {...provided.draggableProps}
key={index} key={index}
> >
<div className={cx(styles.dragHandle, styles.icons)} {...provided.dragHandleProps}>
<Icon name="draggabledots" size="lg" />
</div>
<div className={styles.linkDetails}> <div className={styles.linkDetails}>
<div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}> <div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}>
{hasTitle ? title : 'Data link title not provided'} {hasTitle ? title : 'Data link title not provided'}
@ -59,9 +55,12 @@ export const DataLinksListItem = ({ link, onEdit, onRemove, index, itemKey }: Da
</FieldValidationMessage> </FieldValidationMessage>
)} )}
</div> </div>
<div> <div className={styles.icons}>
<IconButton name="pen" onClick={onEdit} tooltip="Edit data link title" /> <IconButton name="pen" onClick={onEdit} className={styles.icon} tooltip="Edit data link" />
<IconButton name="times" onClick={onRemove} tooltip="Remove data link title" /> <IconButton name="trash-alt" onClick={onRemove} className={styles.icon} tooltip="Remove data link" />
<div className={styles.dragIcon} {...provided.dragHandleProps}>
<Icon name="draggabledots" size="lg" />
</div>
</div> </div>
</div> </div>
</> </>
@ -78,17 +77,16 @@ const getDataLinkListItemStyles = (theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '100%', width: '100%',
marginBottom: theme.spacing(2), padding: '5px 0 5px 10px',
padding: '10px 0 0 10px', borderRadius: theme.shape.radius.default,
'&:last-child': { background: theme.colors.background.secondary,
marginBottom: 0, gap: 8,
},
}), }),
linkDetails: css({ linkDetails: css({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
maxWidth: '80%', maxWidth: `calc(100% - 100px)`,
}), }),
errored: css({ errored: css({
color: theme.colors.error.text, color: theme.colors.error.text,
@ -118,20 +116,13 @@ const getDataLinkListItemStyles = (theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
}), }),
dragHandle: css({ dragIcon: css({
cursor: 'grab', cursor: 'grab',
// create focus ring around the whole row when the drag handle is tab-focused color: theme.colors.text.secondary,
// needs position: relative on the drag row to work correctly margin: theme.spacing(0, 0.5),
'&:focus-visible&:after': { }),
bottom: 0, icon: css({
content: '""', color: theme.colors.text.secondary,
left: 0,
position: 'absolute',
right: 0,
top: 0,
outline: `2px solid ${theme.colors.primary.main}`,
outlineOffset: '-2px',
},
}), }),
}; };
}; };