mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
refactor: icon to icons for annotations & css templates modals (#15611)
* inital commit * add css templates
This commit is contained in:
parent
abc18b13d0
commit
cc765b51c7
@ -21,9 +21,10 @@ import { styled, t } from '@superset-ui/core';
|
|||||||
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
||||||
import { RangePicker } from 'src/components/DatePicker';
|
import { RangePicker } from 'src/components/DatePicker';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import Modal from 'src/components/Modal';
|
import Modal from 'src/components/Modal';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
|
import { StyledIcon } from 'src/views/CRUD/utils';
|
||||||
import { JsonEditor } from 'src/components/AsyncAceEditor';
|
import { JsonEditor } from 'src/components/AsyncAceEditor';
|
||||||
|
|
||||||
import { AnnotationObject } from './types';
|
import { AnnotationObject } from './types';
|
||||||
@ -48,10 +49,6 @@ const StyledJsonEditor = styled(JsonEditor)`
|
|||||||
border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
|
border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledIcon = styled(Icon)`
|
|
||||||
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AnnotationContainer = styled.div`
|
const AnnotationContainer = styled.div`
|
||||||
margin-bottom: ${({ theme }) => theme.gridUnit * 5}px;
|
margin-bottom: ${({ theme }) => theme.gridUnit * 5}px;
|
||||||
|
|
||||||
@ -281,9 +278,9 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
|
|||||||
title={
|
title={
|
||||||
<h4 data-test="annotaion-modal-title">
|
<h4 data-test="annotaion-modal-title">
|
||||||
{isEditMode ? (
|
{isEditMode ? (
|
||||||
<StyledIcon name="edit-alt" />
|
<Icons.EditAlt css={StyledIcon} />
|
||||||
) : (
|
) : (
|
||||||
<StyledIcon name="plus-large" />
|
<Icons.PlusLarge css={StyledIcon} />
|
||||||
)}
|
)}
|
||||||
{isEditMode ? t('Edit annotation') : t('Add annotation')}
|
{isEditMode ? t('Edit annotation') : t('Add annotation')}
|
||||||
</h4>
|
</h4>
|
||||||
|
@ -20,7 +20,8 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
|
|||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
||||||
|
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
|
import { StyledIcon } from 'src/views/CRUD/utils';
|
||||||
import Modal from 'src/components/Modal';
|
import Modal from 'src/components/Modal';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
|
|
||||||
@ -39,10 +40,6 @@ const StyledAnnotationLayerTitle = styled.div`
|
|||||||
${({ theme }) => theme.gridUnit * 4}px auto;
|
${({ theme }) => theme.gridUnit * 4}px auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledIcon = styled(Icon)`
|
|
||||||
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LayerContainer = styled.div`
|
const LayerContainer = styled.div`
|
||||||
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
|
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
|
||||||
|
|
||||||
@ -234,9 +231,9 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
|
|||||||
title={
|
title={
|
||||||
<h4 data-test="annotation-layer-modal-title">
|
<h4 data-test="annotation-layer-modal-title">
|
||||||
{isEditMode ? (
|
{isEditMode ? (
|
||||||
<StyledIcon name="edit-alt" />
|
<Icons.EditAlt css={StyledIcon} />
|
||||||
) : (
|
) : (
|
||||||
<StyledIcon name="plus-large" />
|
<Icons.PlusLarge css={StyledIcon} />
|
||||||
)}
|
)}
|
||||||
{isEditMode
|
{isEditMode
|
||||||
? t('Edit annotation layer properties')
|
? t('Edit annotation layer properties')
|
||||||
|
@ -20,7 +20,8 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
|
|||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
||||||
|
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
|
import { StyledIcon } from 'src/views/CRUD/utils';
|
||||||
import Modal from 'src/components/Modal';
|
import Modal from 'src/components/Modal';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import { CssEditor } from 'src/components/AsyncAceEditor';
|
import { CssEditor } from 'src/components/AsyncAceEditor';
|
||||||
@ -45,10 +46,6 @@ const StyledCssEditor = styled(CssEditor)`
|
|||||||
border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
|
border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledIcon = styled(Icon)`
|
|
||||||
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TemplateContainer = styled.div`
|
const TemplateContainer = styled.div`
|
||||||
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
|
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
|
||||||
|
|
||||||
@ -228,9 +225,9 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
|
|||||||
title={
|
title={
|
||||||
<h4 data-test="css-template-modal-title">
|
<h4 data-test="css-template-modal-title">
|
||||||
{isEditMode ? (
|
{isEditMode ? (
|
||||||
<StyledIcon name="edit-alt" />
|
<Icons.EditAlt css={StyledIcon} />
|
||||||
) : (
|
) : (
|
||||||
<StyledIcon name="plus-large" />
|
<Icons.PlusLarge css={StyledIcon} />
|
||||||
)}
|
)}
|
||||||
{isEditMode
|
{isEditMode
|
||||||
? t('Edit CSS template properties')
|
? t('Edit CSS template properties')
|
||||||
|
@ -23,6 +23,8 @@ import {
|
|||||||
SupersetClientResponse,
|
SupersetClientResponse,
|
||||||
logging,
|
logging,
|
||||||
styled,
|
styled,
|
||||||
|
SupersetTheme,
|
||||||
|
css,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import Chart from 'src/types/Chart';
|
import Chart from 'src/types/Chart';
|
||||||
import rison from 'rison';
|
import rison from 'rison';
|
||||||
@ -297,6 +299,11 @@ export const CardStyles = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const StyledIcon = (theme: SupersetTheme) => css`
|
||||||
|
margin: auto ${theme.gridUnit * 2}px auto 0;
|
||||||
|
color: ${theme.colors.grayscale.base};
|
||||||
|
`;
|
||||||
|
|
||||||
export /* eslint-disable no-underscore-dangle */
|
export /* eslint-disable no-underscore-dangle */
|
||||||
const isNeedsPassword = (payload: any) =>
|
const isNeedsPassword = (payload: any) =>
|
||||||
typeof payload === 'object' &&
|
typeof payload === 'object' &&
|
||||||
|
Loading…
Reference in New Issue
Block a user