IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 10:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: More SCSS cleanup (#90132)

Browse Source 
* convert TagBadge to a functional component

* migrate label and label-tag styles to TagBadge

* migrate filter-table to emotion globals

* migrate query-part styles to emotion globals

* move tag color to be an inline style
This commit is contained in:
Ashley Harrison 2024-07-05 14:33:43 +01:00 committed by GitHub
parent 1f90784a83
commit 680f5ed2cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 253 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.betterer.results
View File

@ -1216,9 +1216,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/core/components/TimeSeries/utils.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -1450,8 +1448,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
],
"public/app/features/admin/UserListAdminPage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -5837,10 +5834,6 @@ exports[`better eslint`] = {
"public/app/features/variables/pickers/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./OptionsPicker/OptionsPicker\`)", "0"]
],
"public/app/features/variables/pickers/shared/VariableLink.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/variables/pickers/shared/VariableOptions.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],

10
packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
View File

@ -8,12 +8,14 @@ import { getCardStyles } from './card';
import { getCodeStyles } from './code';
import { getElementStyles } from './elements';
import { getExtraStyles } from './extra';
import { getFilterTableStyles } from './filterTable';
import { getFontStyles } from './fonts';
import { getFormElementStyles } from './forms';
import { getJsonFormatterStyles } from './jsonFormatter';
import { getLegacySelectStyles } from './legacySelect';
import { getMarkdownStyles } from './markdownStyles';
import { getPageStyles } from './page';
import { getQueryPartStyles } from './queryPart';
import { getRcTimePickerStyles } from './rcTimePicker';
import { getSkeletonStyles } from './skeletonStyles';
import { getSlateStyles } from './slate';
@ -27,19 +29,21 @@ export function GlobalStyles() {
<Global
styles={[
getAccessibilityStyles(theme),
getAgularPanelStyles(theme),
getCodeStyles(theme),
getElementStyles(theme),
getExtraStyles(theme),
getFilterTableStyles(theme),
getFontStyles(theme),
getFormElementStyles(theme),
getJsonFormatterStyles(theme),
getPageStyles(theme),
getCardStyles(theme),
getAgularPanelStyles(theme),
getMarkdownStyles(theme),
getPageStyles(theme),
getQueryPartStyles(theme),
getRcTimePickerStyles(theme),
getSkeletonStyles(theme),
getSlateStyles(theme),
getRcTimePickerStyles(theme),
getUplotStyles(theme),
getLegacySelectStyles(theme),
]}

79
packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts Normal file
View File

@ -0,0 +1,79 @@
import { css } from '@emotion/react';
import { GrafanaTheme2 } from '@grafana/data';
export function getFilterTableStyles(theme: GrafanaTheme2) {
return css({
'.filter-table *': {
boxSizing: 'border-box',
},
'.filter-table': {
width: '100%',
borderCollapse: 'separate',
tbody: {
'tr:nth-child(odd)': {
background: theme.colors.emphasize(theme.colors.background.primary, 0.02),
},
},
th: {
width: 'auto',
padding: theme.spacing(0.5, 1),
textAlign: 'left',
lineHeight: '30px',
height: '30px',
whiteSpace: 'nowrap',
},
td: {
padding: theme.spacing(0.5, 1),
lineHeight: '30px',
height: '30px',
whiteSpace: 'nowrap',
},
'.link-td': {
padding: 0,
lineHeight: '30px',
height: '30px',
whiteSpace: 'nowrap',
a: {
display: 'block',
padding: theme.spacing(0, 1),
height: '30px',
},
},
'.ellipsis': {
display: 'block',
width: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
'.expanded': {
borderColor: theme.components.panel.background,
},
'.expanded > td': {
paddingBottom: 0,
},
'.filter-table__avatar': {
width: '25px',
height: '25px',
borderRadius: '50%',
},
'&--hover': {
'tbody tr:hover': {
background: theme.colors.emphasize(theme.colors.background.primary, 0.05),
},
},
},
});
}

15
packages/grafana-ui/src/themes/GlobalStyles/queryPart.ts Normal file
View File

@ -0,0 +1,15 @@
import { css } from '@emotion/react';
import { GrafanaTheme2 } from '@grafana/data';
export function getQueryPartStyles(theme: GrafanaTheme2) {
return css({
'.query-part': {
backgroundColor: theme.colors.background.secondary,
'&:hover': {
background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),
},
},
});
}

45
public/app/core/components/TagFilter/TagBadge.tsx
View File

@ -1,6 +1,8 @@
import { css } from '@emotion/css';
import * as React from 'react';
import { getTagColorsFromName, Icon } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { getTagColorsFromName, Icon, useStyles2 } from '@grafana/ui';
export interface Props {
label: string;
@ -9,26 +11,39 @@ export interface Props {
onClick?: React.MouseEventHandler<SVGElement>;
}
export class TagBadge extends React.Component<Props> {
constructor(props: Props) {
super(props);
}
render() {
const { label, removeIcon, count, onClick } = this.props;
export const TagBadge = ({ count, label, onClick, removeIcon }: Props) => {
const { color } = getTagColorsFromName(label);
const tagStyle = {
backgroundColor: color,
};
const styles = useStyles2(getStyles);
const countLabel = count !== 0 && <span style={{ marginLeft: '3px' }}>{`(${count})`}</span>;
return (
<span className={`label label-tag`} style={tagStyle}>
<span
className={styles.badge}
style={{
backgroundColor: color,
}}
>
{removeIcon && <Icon onClick={onClick} name="times" />}
{label} {countLabel}
</span>
);
}
}
};
export const getStyles = (theme: GrafanaTheme2) => ({
badge: css({
...theme.typography.bodySmall,
backgroundColor: theme.v1.palette.gray1,
borderRadius: theme.shape.radius.default,
color: theme.v1.palette.white,
display: 'inline-block',
height: '20px',
lineHeight: '20px',
padding: theme.spacing(0, 0.75),
verticalAlign: 'baseline',
whiteSpace: 'nowrap',
'&:hover': {
opacity: 0.85,
},
}),
});

58
public/app/core/components/TagFilter/TagFilter.tsx
View File

@ -6,7 +6,7 @@ import { escapeStringForRegex, GrafanaTheme2 } from '@grafana/data';
import { Icon, MultiSelect, useStyles2 } from '@grafana/ui';
import { t } from 'app/core/internationalization';
import { TagBadge } from './TagBadge';
import { TagBadge, getStyles as getTagBadgeStyles } from './TagBadge';
import { TagOption, TagSelectOption } from './TagOption';
export interface TermCount {
@ -167,31 +167,35 @@ export const TagFilter = ({
TagFilter.displayName = 'TagFilter';
const getStyles = (theme: GrafanaTheme2) => ({
tagFilter: css`
position: relative;
min-width: 180px;
flex-grow: 1;
const getStyles = (theme: GrafanaTheme2) => {
const tagBadgeStyles = getTagBadgeStyles(theme);
.label-tag {
margin-left: 6px;
cursor: pointer;
}
`,
clear: css`
background: none;
border: none;
text-decoration: underline;
font-size: 12px;
padding: none;
position: absolute;
top: -17px;
right: 0;
cursor: pointer;
color: ${theme.colors.text.secondary};
return {
tagFilter: css({
position: 'relative',
minWidth: '180px',
flexGrow: 1,
&:hover {
color: ${theme.colors.text.primary};
}
`,
});
[`.${tagBadgeStyles.badge}`]: {
marginLeft: '6px',
cursor: 'pointer',
},
}),
clear: css({
background: 'none',
border: 'none',
textDecoration: 'underline',
fontSize: '12px',
padding: 'none',
position: 'absolute',
top: '-17px',
right: 0,
cursor: 'pointer',
color: theme.colors.text.secondary,
'&:hover': {
color: theme.colors.text.primary,
},
}),
};
};

4
public/app/features/admin/UserLdapSyncInfo.tsx
View File

@ -5,6 +5,8 @@ import { Button, LinkButton } from '@grafana/ui';
import { contextSrv } from 'app/core/core';
import { AccessControlAction, SyncInfo, UserDTO } from 'app/types';
import { TagBadge } from '../../core/components/TagFilter/TagBadge';
interface Props {
ldapSyncInfo: SyncInfo;
user: UserDTO;
@ -40,7 +42,7 @@ export class UserLdapSyncInfo extends PureComponent<Props, State> {
<td>External sync</td>
<td>User synced via LDAP. Some changes must be done in LDAP or mappings.</td>
<td>
<span className="label label-tag">LDAP</span>
<TagBadge label="LDAP" removeIcon={false} count={0} onClick={undefined} />
</td>
</tr>
<tr>

63
public/app/features/variables/pickers/shared/VariableLink.tsx
View File

@ -7,6 +7,7 @@ import { Icon, useStyles2 } from '@grafana/ui';
import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
import { t } from 'app/core/internationalization';
import { getStyles as getTagBadgeStyles } from '../../../../core/components/TagFilter/TagBadge';
import { ALL_VARIABLE_TEXT } from '../../constants';
interface Props {
@ -76,34 +77,38 @@ const VariableLinkText = ({ text }: VariableLinkTextProps) => {
);
};
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
max-width: 500px;
padding-right: 10px;
padding: 0 ${theme.spacing(1)};
background-color: ${theme.components.input.background};
border: 1px solid ${theme.components.input.borderColor};
border-radius: ${theme.shape.radius.default};
display: flex;
align-items: center;
color: ${theme.colors.text};
height: ${theme.spacing(theme.components.height.md)};
const getStyles = (theme: GrafanaTheme2) => {
const tagBadgeStyles = getTagBadgeStyles(theme);
.label-tag {
margin: 0 5px;
}
return {
container: css({
maxWidth: '500px',
paddingRight: '10px',
padding: theme.spacing(0, 1),
backgroundColor: theme.components.input.background,
border: `1px solid ${theme.components.input.borderColor}`,
borderRadius: theme.shape.radius.default,
display: 'flex',
alignItems: 'center',
color: theme.colors.text.primary,
height: theme.spacing(theme.components.height.md),
&:disabled {
background-color: ${theme.colors.action.disabledBackground};
color: ${theme.colors.action.disabledText};
border: 1px solid ${theme.colors.action.disabledBackground};
}
`,
textAndTags: css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: ${theme.spacing(0.25)};
user-select: none;
`,
});
[`.${tagBadgeStyles.badge}`]: {
margin: '0 5px',
},
'&:disabled': {
backgroundColor: theme.colors.action.disabledBackground,
color: theme.colors.action.disabledText,
border: `1px solid ${theme.colors.action.disabledBackground}`,
},
}),
textAndTags: css({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
marginRight: theme.spacing(0.25),
userSelect: 'none',
}),
};
};

46
public/sass/_angular.scss
View File

@ -2,6 +2,7 @@
// once angular is disabled, this file can be deleted
@use 'sass:map';
@use 'sass:color';
.edit-tab-content {
flex-grow: 1;
@ -1935,3 +1936,48 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
width: 100%;
}
}
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: $font-size-base * 0.846;
font-weight: $font-weight-semi-bold;
line-height: 14px; // ensure proper line-height if floated
color: $white;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: $gray-1;
}
// Labels & Badges
.label-tag {
background-color: $purple;
color: color.adjust($white, $lightness: -5%);
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
font-size: 12px;
padding: 0px 6px;
line-height: 20px;
height: 20px;
svg {
margin-bottom: 0;
}
&:hover {
opacity: 0.85;
background-color: color.adjust($purple, $lightness: -10%);
}
}
.query-part__link {
cursor: pointer;
&--no-value {
color: $text-muted;
}
}

3
public/sass/_grafana.scss
View File

@ -16,14 +16,11 @@
// COMPONENTS
@import 'components/buttons';
@import 'components/alerts';
@import 'components/tags';
@import 'components/gf-form';
@import 'components/filter-table';
@import 'components/modals';
@import 'components/dropdown';
@import 'components/infobox';
@import 'components/query_editor';
@import 'components/query_part';
@import 'components/dashboard_grid';
// PAGES

92
public/sass/components/_filter-table.scss
View File

@ -1,92 +0,0 @@
// ==========================================================================
// FILTER TABLE
// ==========================================================================
// Table
// --------------------------------------------------------------------------
.filter-table * {
box-sizing: border-box;
}
.filter-table {
width: 100%;
border-collapse: separate;
tbody {
tr:nth-child(odd) {
background: $table-bg-odd;
}
}
th {
width: auto;
padding: $space-inset-squish-md;
text-align: left;
line-height: 30px;
height: 30px;
white-space: nowrap;
}
td {
padding: $space-inset-squish-md;
line-height: 30px;
height: 30px;
white-space: nowrap;
&.filter-table__switch-cell {
padding: 0;
border-right: 3px solid $page-bg;
}
}
.link-td {
padding: 0;
line-height: 30px;
height: 30px;
white-space: nowrap;
&.filter-table__switch-cell {
padding: 0;
border-right: 3px solid $page-bg;
}
a {
display: block;
padding: 0px $space-sm;
height: 30px;
}
}
.ellipsis {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expanded {
border-color: $panel-bg;
}
.expanded > td {
padding-bottom: 0;
}
.filter-table__avatar {
width: 25px;
height: 25px;
border-radius: 50%;
}
&--hover {
tbody tr:hover {
background: $table-bg-hover;
}
}
}
.filter-table__weak-italic {
font-style: italic;
color: $text-color-weak;
}

12
public/sass/components/_query_editor.scss
View File

@ -13,12 +13,6 @@
.tight-form-func {
background: $tight-form-func-bg;
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
}
input[type='text'].tight-form-func-param {
@ -53,12 +47,6 @@ input[type='text'].tight-form-func-param {
.tight-form-func {
background: $tight-form-func-bg;
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
}
.rst-text::before {

29
public/sass/components/_query_part.scss
View File

@ -1,29 +0,0 @@
.query-part {
background-color: $tight-form-func-bg;
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
.query-part__last {
display: none;
}
&:hover .query-part__last {
display: inline;
}
&:hover {
background: $tight-form-func-highlight-bg;
}
}
.query-part__link {
cursor: pointer;
&--no-value {
color: $text-muted;
}
}

59
public/sass/components/_tags.scss
View File

@ -1,59 +0,0 @@
@use 'sass:color';
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: $font-size-base * 0.846;
font-weight: $font-weight-semi-bold;
line-height: 14px; // ensure proper line-height if floated
color: $white;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: $gray-1;
}
// Labels & Badges
.label-tag {
background-color: $purple;
color: color.adjust($white, $lightness: -5%);
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
font-size: 12px;
padding: 0px 6px;
line-height: 20px;
height: 20px;
svg {
margin-bottom: 0;
}
.icon-tag {
position: relative;
top: 1px;
padding-right: 4px;
}
&.muted {
opacity: 0.85;
background-color: color.adjust($purple, $lightness: -10%);
color: $text-muted;
}
&:hover {
opacity: 0.85;
background-color: color.adjust($purple, $lightness: -10%);
}
&--gray {
opacity: 0.85;
background-color: $gray-1;
border-color: $gray-2;
&:hover {
background-color: $gray-1;
}
}
}