IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 12:14:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

DataSourcePicker: Design tweak proposal (#68747)

Browse Source 
* DataSourcePicker: Design tweak proposal

* Revert unrelated change

* Remove unrelated change

* Fixed spacing of logo
This commit is contained in:
Torkel Ödegaard 2023-05-22 14:53:40 +02:00 committed by GitHub
parent 6dbadf614b
commit 2f6d538044
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/datasources/components/picker/DataSourceCard.tsx
View File

@ -23,15 +23,15 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
>
<Card.Heading className={styles.heading}>
<div className={styles.headingContent}>
<span className={styles.name}>{ds.name}</span>
<span className={styles.separator}>|</span>
<span className={styles.name}>
{ds.name} {ds.isDefault ? <TagList tags={['default']} /> : null}
</span>
<small className={styles.type}>{description || ds.meta.name}</small>
</div>
</Card.Heading>
<Card.Figure className={styles.logo}>
<img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} />
</Card.Figure>
<Card.Tags>{ds.isDefault ? <TagList tags={['default']} /> : null}</Card.Tags>
</Card>
);
}
@ -46,7 +46,7 @@ function getStyles(theme: GrafanaTheme2) {
// Move to list component
margin-bottom: 0;
border-radius: 0;
padding: ${theme.spacing(1.5)};
padding: ${theme.spacing(1)};
`,
heading: css`
width: 100%;
@ -62,26 +62,32 @@ function getStyles(theme: GrafanaTheme2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: space-between;
`,
logo: css`
width: 32px;
height: 32px;
padding-right: ${theme.spacing(1.5)};
padding: ${theme.spacing(0, 1)};
display: flex;
align-items: center;
> img {
max-height: 100%;
min-width: 32px;
min-width: 24px;
}
`,
name: css`
color: ${theme.colors.text.primary};
display: flex;
gap: ${theme.spacing(2)};
`,
type: css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
`,
separator: css`
margin: 0 ${theme.spacing(1)};