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

Migrates old Card sass file to GlobalStyles (#33183)

Browse Source 
* Card: migrates styles from sass to emotion

* removed LayoutSelector component since it's not used in the codebase

* updates card styles with new color name
This commit is contained in:
Uchechukwu Obasi 2021-04-21 15:39:56 +01:00 committed by GitHub
parent 87a70af7eb
commit 438b403acc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 205 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/index.ts
View File

@ -19,6 +19,7 @@ export {
BasicValueMatcherOptions,
RangeValueMatcherOptions,
} from './transformations/matchers/valueMatchers/types';
export { LayoutModes, LayoutMode } from './types/layout';
export { PanelPlugin, SetFieldConfigOptionsArgs, StandardOptionConfig } from './panel/PanelPlugin';
export { createFieldConfigRegistry } from './panel/registryFactories';
export { QueryRunner, QueryRunnerOptions } from './types/queryRunner';

6
packages/grafana-data/src/types/layout.ts Normal file
View File

@ -0,0 +1,6 @@
export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
export enum LayoutModes {
Grid = 'grid',
List = 'list',
}

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

@ -2,11 +2,13 @@ import React from 'react';
import { Global } from '@emotion/react';
import { useTheme2 } from '..';
import { getElementStyles } from './elements';
import { getCardStyles } from './card';
/** @internal */
export function GlobalStyles() {
const theme = useTheme2();
const types = getElementStyles(theme);
const cards = getCardStyles(theme);
return <Global styles={[types]} />;
return <Global styles={[types, cards]} />;
}

187
packages/grafana-ui/src/themes/GlobalStyles/card.tsx Normal file
View File

@ -0,0 +1,187 @@
import { css } from '@emotion/react';
import { GrafanaThemeV2 } from '@grafana/data';
export function getCardStyles(theme: GrafanaThemeV2) {
return css`
.card-section {
margin-bottom: ${theme.spacing(4)};
}
.card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
}
.card-item {
display: block;
height: 100%;
background: ${theme.colors.background.secondary};
box-shadow: none;
padding: ${theme.spacing(2)};
border-radius: 4px;
&:hover {
background: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
}
.label-tag {
margin-left: ${theme.spacing(1)};
font-size: 11px;
padding: 2px 6px;
}
}
.card-item-body {
display: flex;
overflow: hidden;
}
.card-item-details {
overflow: hidden;
}
.card-item-header {
margin-bottom: ${theme.spacing(2)};
}
.card-item-type {
color: ${theme.colors.text.secondary};
text-transform: uppercase;
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightMedium};
}
.card-item-badge {
margin: 6px 0;
}
.card-item-notice {
font-size: ${theme.typography.size.sm};
}
.card-item-name {
color: ${theme.colors.text.primary};
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.card-item-label {
margin-left: ${theme.spacing(1)};
}
.card-item-sub-name {
color: ${theme.colors.text.secondary};
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.card-item-sub-name--header {
color: ${theme.colors.text.secondary};
text-transform: uppercase;
margin-bottom: ${theme.spacing(2)};
font-size: ${theme.typography.size.sm};
font-weight: bold;
}
.card-list-layout-grid {
.card-item-type {
display: inline-block;
}
.card-item-notice {
font-size: ${theme.typography.size.sm};
display: inline-block;
margin-left: ${theme.spacing(2)};
}
.card-item-header-action {
float: right;
}
.card-item-wrapper {
width: 100%;
padding: ${theme.spacing(0, 2, 2, 0)};
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item-figure {
margin: ${theme.spacing(0, 2, 2, 0)}0;
height: 80px;
img {
width: 80px;
}
}
.card-item-name {
font-size: ${theme.typography.h3.fontSize};
}
${theme.breakpoints.up('md')} {
.card-item-wrapper {
width: 50%;
}
}
${theme.breakpoints.up('lg')} {
.card-item-wrapper {
width: 33.333333%;
}
}
&.card-list-layout-grid--max-2-col {
${theme.breakpoints.up('lg')} {
.card-item-wrapper {
width: 50%;
}
}
}
}
.card-list-layout-list {
.card-item-wrapper {
padding: 0;
width: 100%;
margin-bottom: ${theme.spacing(4)};
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item {
border-radius: 2px;
}
.card-item-header {
float: right;
text-align: right;
}
.card-item-figure {
margin: ${theme.spacing(0, 2, 0, 0)};
img {
width: 48px;
}
}
.card-item-name {
font-size: ${theme.typography.h4.fontSize};
}
.card-item-sub-name {
font-size: ${theme.typography.size.sm};
}
.layout-selector {
margin-right: 0;
}
}
`;
}

27
public/app/core/components/LayoutSelector/LayoutSelector.tsx
View File

@ -1,27 +0,0 @@
import React, { FC } from 'react';
import { RadioButtonGroup } from '@grafana/ui';
export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
export enum LayoutModes {
Grid = 'grid',
List = 'list',
}
interface Props {
mode: LayoutMode;
onLayoutModeChanged: (mode: LayoutMode) => {};
}
const options = [
{ icon: 'table', value: LayoutModes.Grid },
{ icon: 'list-ul', value: LayoutModes.List },
];
const LayoutSelector: FC<Props> = ({ mode, onLayoutModeChanged }) => (
<div className="layout-selector">
<RadioButtonGroup value={mode} options={options} onChange={onLayoutModeChanged} />
</div>
);
export default LayoutSelector;

2
public/app/features/datasources/DataSourceList.test.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import DataSourcesList from './DataSourcesList';
import { getMockDataSources } from './__mocks__/dataSourcesMocks';
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
import { LayoutModes } from '@grafana/data';
const setup = () => {
const props = {

3
public/app/features/datasources/DataSourcesList.tsx
View File

@ -2,8 +2,7 @@
import React, { FC } from 'react';
// Types
import { DataSourceSettings } from '@grafana/data';
import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
import { DataSourceSettings, LayoutMode } from '@grafana/data';
import { Card, Tag, useStyles } from '@grafana/ui';
import { css } from '@emotion/css';

3
public/app/features/datasources/DataSourcesListPage.test.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import { DataSourceSettings, NavModel } from '@grafana/data';
import { DataSourceSettings, NavModel, LayoutModes } from '@grafana/data';
import { DataSourcesListPage, Props } from './DataSourcesListPage';
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
import { getMockDataSources } from './__mocks__/dataSourcesMocks';
import { setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/reducers';

3
public/app/features/datasources/DataSourcesListPage.tsx
View File

@ -8,10 +8,9 @@ import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import DataSourcesList from './DataSourcesList';
// Types
import { DataSourceSettings, NavModel } from '@grafana/data';
import { DataSourceSettings, NavModel, LayoutMode } from '@grafana/data';
import { IconName } from '@grafana/ui';
import { StoreState } from 'app/types';
import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
// Actions
import { loadDataSources } from './state/actions';
import { getNavModel } from 'app/core/selectors/navModel';

3
public/app/features/datasources/state/reducers.test.ts
View File

@ -18,9 +18,8 @@ import {
setIsDefault,
} from './reducers';
import { getMockDataSource, getMockDataSources } from '../__mocks__/dataSourcesMocks';
import { LayoutModes } from 'app/core/components/LayoutSelector/LayoutSelector';
import { DataSourceSettingsState, DataSourcesState } from 'app/types';
import { PluginMeta, PluginMetaInfo, PluginType } from '@grafana/data';
import { PluginMeta, PluginMetaInfo, PluginType, LayoutModes } from '@grafana/data';
import { GenericDataSourcePlugin } from '../settings/PluginSettings';
const mockPlugin = () =>

3
public/app/features/datasources/state/reducers.ts
View File

@ -1,8 +1,7 @@
import { AnyAction, createAction } from '@reduxjs/toolkit';
import { DataSourcePluginMeta, DataSourceSettings } from '@grafana/data';
import { DataSourcePluginMeta, DataSourceSettings, LayoutMode, LayoutModes } from '@grafana/data';
import { DataSourcesState, DataSourceSettingsState, TestingStatus } from 'app/types';
import { LayoutMode, LayoutModes } from 'app/core/components/LayoutSelector/LayoutSelector';
import { DataSourceTypesLoadedPayload } from './actions';
import { GenericDataSourcePlugin } from '../settings/PluginSettings';

2
public/app/features/plugins/PluginList.test.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import PluginList from './PluginList';
import { getMockPlugins } from './__mocks__/pluginMocks';
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
import { LayoutModes } from '@grafana/data';
const setup = (propOverrides?: object) => {
const props = Object.assign(

3
public/app/types/datasources.ts
View File

@ -1,5 +1,4 @@
import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector';
import { DataSourcePluginMeta, DataSourceSettings } from '@grafana/data';
import { DataSourcePluginMeta, DataSourceSettings, LayoutMode } from '@grafana/data';
import { GenericDataSourcePlugin } from 'app/features/datasources/settings/PluginSettings';
import { HealthCheckResultDetails } from '@grafana/runtime/src/utils/DataSourceWithBackend';

1
public/sass/_grafana.scss
View File

@ -34,7 +34,6 @@
// COMPONENTS
@import '../app/features/dashboard/components/AddPanelWidget/AddPanelWidget';
@import 'components/scrollbar';
@import 'components/cards';
@import 'components/buttons';
@import 'components/navs';
@import 'components/tabs';

217
public/sass/components/_cards.scss
View File

@ -1,217 +0,0 @@
.layout-selector {
@include clearfix();
margin-left: $space-md;
text-align: right;
button {
background: $input-label-bg;
color: $text-color-weak;
box-shadow: $card-shadow;
border: none;
padding: $space-sm;
line-height: 1;
font-size: 130%;
float: right;
&:focus {
outline: none;
}
&.active {
background-color: lighten($input-label-bg, 5%);
color: $link-color;
}
&:nth-child(2) {
border-radius: 3px 0 0 3px;
border-right: $panel-border;
}
&:nth-child(1) {
border-radius: 0 3px 3px 0;
}
}
}
.card-section {
margin-bottom: $space-xl;
}
.card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
}
.card-item {
display: block;
height: 100%;
background: $card-background;
box-shadow: $card-shadow;
padding: $space-md;
border-radius: 4px;
&:hover {
background: $card-background-hover;
}
.label-tag {
margin-left: $space-sm;
font-size: 11px;
padding: 2px 6px;
}
}
.card-item-body {
display: flex;
overflow: hidden;
}
.card-item-details {
overflow: hidden;
}
.card-item-header {
margin-bottom: $space-md;
}
.card-item-type {
color: $text-color-weak;
text-transform: uppercase;
font-size: $font-size-sm;
font-weight: $font-weight-semi-bold;
}
.card-item-badge {
margin: 6px 0;
}
.card-item-notice {
font-size: $font-size-sm;
}
.card-item-name {
color: $headings-color;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.card-item-label {
margin-left: $space-sm;
}
.card-item-sub-name {
color: $text-color-weak;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.card-item-sub-name--header {
color: $text-color-weak;
text-transform: uppercase;
margin-bottom: $space-md;
font-size: $font-size-sm;
font-weight: bold;
}
.card-list-layout-grid {
.card-item-type {
display: inline-block;
}
.card-item-notice {
font-size: $font-size-sm;
display: inline-block;
margin-left: $space-md;
}
.card-item-header-action {
float: right;
}
.card-item-wrapper {
width: 100%;
padding: 0 $space-md $space-md 0;
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item-figure {
margin: 0 $space-md $space-md 0;
height: 80px;
img {
width: 80px;
}
}
.card-item-name {
font-size: $font-size-h3;
}
@include media-breakpoint-up(md) {
.card-item-wrapper {
width: 50%;
}
}
@include media-breakpoint-up(lg) {
.card-item-wrapper {
width: 33.333333%;
}
}
&.card-list-layout-grid--max-2-col {
@include media-breakpoint-up(lg) {
.card-item-wrapper {
width: 50%;
}
}
}
}
.card-list-layout-list {
.card-item-wrapper {
padding: 0;
width: 100%;
margin-bottom: $space-xs;
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item {
border-radius: 2px;
}
.card-item-header {
float: right;
text-align: right;
}
.card-item-figure {
margin: 0 $space-md 0 0;
img {
width: 48px;
}
}
.card-item-name {
font-size: $font-size-h4;
}
.card-item-sub-name {
font-size: $font-size-sm;
}
.layout-selector {
margin-right: 0;
}
}