public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v10.0.x] DataSourcePicker: Design tweak proposal (#68819)

Browse Source 
DataSourcePicker: Design tweak proposal (#68747)

* DataSourcePicker: Design tweak proposal

* Revert unrelated change

* Remove unrelated change

* Fixed spacing of logo

(cherry picked from commit 2f6d538044)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Grot (@grafanabot)
2023-05-25 10:38:19 +02:00
committed by GitHub
co-authored by Torkel Ödegaard
parent 1320d12aa7
commit 8c8ecef1ca
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/datasources/components/picker/DataSourceCard.tsx
+12 -6
View File
@@ -23,15 +23,15 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
> >
<Card.Heading className={styles.heading}> <Card.Heading className={styles.heading}>
<div className={styles.headingContent}> <div className={styles.headingContent}>
<span className={styles.name}>{ds.name}</span> <span className={styles.name}>
<span className={styles.separator}>|</span> {ds.name} {ds.isDefault ? <TagList tags={['default']} /> : null}
</span>
<small className={styles.type}>{description || ds.meta.name}</small> <small className={styles.type}>{description || ds.meta.name}</small>
</div> </div>
</Card.Heading> </Card.Heading>
<Card.Figure className={styles.logo}> <Card.Figure className={styles.logo}>
<img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} /> <img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} />
</Card.Figure> </Card.Figure>
<Card.Tags>{ds.isDefault ? <TagList tags={['default']} /> : null}</Card.Tags>
</Card> </Card>
); );
} }
@@ -46,7 +46,7 @@ function getStyles(theme: GrafanaTheme2) {
// Move to list component // Move to list component
margin-bottom: 0; margin-bottom: 0;
border-radius: 0; border-radius: 0;
padding: ${theme.spacing(1.5)}; padding: ${theme.spacing(1)};
`, `,
heading: css` heading: css`
width: 100%; width: 100%;
@@ -62,26 +62,32 @@ function getStyles(theme: GrafanaTheme2) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: flex;
justify-content: space-between;
`, `,
logo: css` logo: css`
width: 32px; width: 32px;
height: 32px; height: 32px;
padding-right: ${theme.spacing(1.5)}; padding: ${theme.spacing(0, 1)};
display: flex; display: flex;
align-items: center; align-items: center;
> img { > img {
max-height: 100%; max-height: 100%;
min-width: 32px; min-width: 24px;
} }
`, `,
name: css` name: css`
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
display: flex;
gap: ${theme.spacing(2)};
`, `,
type: css` type: css`
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: flex;
align-items: center;
`, `,
separator: css` separator: css`
margin: 0 ${theme.spacing(1)}; margin: 0 ${theme.spacing(1)};