mirror of
https://github.com/apache/superset.git
synced 2026-05-12 03:15:55 +00:00
feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Co-authored-by: Diego Pucci <diegopucci.me@gmail.com> Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me> Co-authored-by: Geido <60598000+geido@users.noreply.github.com> Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com> Co-authored-by: Damian Pendrak <dpendrak@gmail.com> Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com> Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com> Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
committed by
GitHub
parent
2cc1ef88c8
commit
dd129fa403
@@ -21,8 +21,9 @@ import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
|
||||
import { css, styled, t, useTheme } from '@superset-ui/core';
|
||||
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
||||
|
||||
import { Icons } from 'src/components/Icons';
|
||||
import Modal from 'src/components/Modal';
|
||||
import { Icons } from '@superset-ui/core/components/Icons';
|
||||
import { Typography } from '@superset-ui/core/components/Typography';
|
||||
import { Input, Modal } from '@superset-ui/core/components';
|
||||
import withToasts from 'src/components/MessageToasts/withToasts';
|
||||
|
||||
import { OnlyKeyWithType } from 'src/utils/types';
|
||||
@@ -43,28 +44,28 @@ interface AnnotationLayerModalProps {
|
||||
}
|
||||
|
||||
const StyledAnnotationLayerTitle = styled.div`
|
||||
margin: ${({ theme }) => theme.gridUnit * 2}px auto
|
||||
${({ theme }) => theme.gridUnit * 4}px auto;
|
||||
margin: ${({ theme }) => theme.sizeUnit * 2}px auto
|
||||
${({ theme }) => theme.sizeUnit * 4}px auto;
|
||||
`;
|
||||
|
||||
const LayerContainer = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
|
||||
margin-bottom: ${({ theme }) => theme.sizeUnit * 10}px;
|
||||
|
||||
.control-label {
|
||||
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: ${({ theme }) => theme.gridUnit / 2}px;
|
||||
color: ${({ theme }) => theme.colors.error.base};
|
||||
margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
|
||||
color: ${({ theme }) => theme.colorError};
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type='text'] {
|
||||
padding: ${({ theme }) => theme.gridUnit * 1.5}px
|
||||
${({ theme }) => theme.gridUnit * 2}px;
|
||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||
padding: ${({ theme }) => theme.sizeUnit * 1.5}px
|
||||
${({ theme }) => theme.sizeUnit * 2}px;
|
||||
border: 1px solid ${({ theme }) => theme.colorBorder};
|
||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@@ -235,19 +236,19 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
|
||||
show={show}
|
||||
width="55%"
|
||||
title={
|
||||
<h4 data-test="annotation-layer-modal-title">
|
||||
<Typography.Title level={4} data-test="annotation-layer-modal-title">
|
||||
{isEditMode ? (
|
||||
<Icons.EditOutlined
|
||||
iconSize="l"
|
||||
css={css`
|
||||
margin: auto ${theme.gridUnit * 2}px auto 0;
|
||||
margin: auto ${theme.sizeUnit * 2}px auto 0;
|
||||
`}
|
||||
/>
|
||||
) : (
|
||||
<Icons.PlusOutlined
|
||||
iconSize="m"
|
||||
css={css`
|
||||
margin: auto ${theme.gridUnit * 2}px auto 0;
|
||||
margin: auto ${theme.sizeUnit * 2}px auto 0;
|
||||
vertical-align: text-top;
|
||||
`}
|
||||
/>
|
||||
@@ -255,18 +256,18 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
|
||||
{isEditMode
|
||||
? t('Edit annotation layer properties')
|
||||
: t('Add annotation layer')}
|
||||
</h4>
|
||||
</Typography.Title>
|
||||
}
|
||||
>
|
||||
<StyledAnnotationLayerTitle>
|
||||
<h4>{t('Basic information')}</h4>
|
||||
<Typography.Title level={4}>{t('Basic information')}</Typography.Title>
|
||||
</StyledAnnotationLayerTitle>
|
||||
<LayerContainer>
|
||||
<div className="control-label">
|
||||
{t('Annotation layer name')}
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<input
|
||||
<Input
|
||||
name="name"
|
||||
onChange={onTextChange}
|
||||
type="text"
|
||||
@@ -275,7 +276,7 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
|
||||
</LayerContainer>
|
||||
<LayerContainer>
|
||||
<div className="control-label">{t('description')}</div>
|
||||
<textarea
|
||||
<Input.TextArea
|
||||
name="descr"
|
||||
value={currentLayer?.descr}
|
||||
placeholder={t('Description (this can be seen in the list)')}
|
||||
|
||||
Reference in New Issue
Block a user