mirror of https://github.com/apache/superset.git
refactor: icon to icons for sqllab (#15593)
* initial commit * rid of theme * Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> * Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
parent
79d3d06c8a
commit
d8a15e60b9
|
@ -21,7 +21,7 @@ import { t, styled, supersetTheme } from '@superset-ui/core';
|
||||||
|
|
||||||
import { Menu } from 'src/common/components';
|
import { Menu } from 'src/common/components';
|
||||||
import Button, { ButtonProps } from 'src/components/Button';
|
import Button, { ButtonProps } from 'src/components/Button';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import {
|
import {
|
||||||
DropdownButton,
|
DropdownButton,
|
||||||
DropdownButtonProps,
|
DropdownButtonProps,
|
||||||
|
@ -77,6 +77,10 @@ const StyledButton = styled.span`
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
}
|
}
|
||||||
|
span[name='caret-down'] {
|
||||||
|
display: flex;
|
||||||
|
margin-right: ${({ theme }) => theme.gridUnit * -2}px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -116,8 +120,8 @@ const RunQueryActionButton = ({
|
||||||
? {
|
? {
|
||||||
overlay: overlayCreateAsMenu,
|
overlay: overlayCreateAsMenu,
|
||||||
icon: (
|
icon: (
|
||||||
<Icon
|
<Icons.CaretDown
|
||||||
color={
|
iconColor={
|
||||||
isDisabled
|
isDisabled
|
||||||
? supersetTheme.colors.grayscale.base
|
? supersetTheme.colors.grayscale.base
|
||||||
: supersetTheme.colors.grayscale.light5
|
: supersetTheme.colors.grayscale.light5
|
||||||
|
|
|
@ -18,15 +18,21 @@
|
||||||
*/
|
*/
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Row, Col, Input, TextArea } from 'src/common/components';
|
import { Row, Col, Input, TextArea } from 'src/common/components';
|
||||||
import { t, supersetTheme, styled } from '@superset-ui/core';
|
import { t, styled } from '@superset-ui/core';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { Form, FormItem } from 'src/components/Form';
|
import { Form, FormItem } from 'src/components/Form';
|
||||||
import Modal from 'src/components/Modal';
|
import Modal from 'src/components/Modal';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
|
|
||||||
const Styles = styled.span`
|
const Styles = styled.span`
|
||||||
svg {
|
span[role='img'] {
|
||||||
vertical-align: -${supersetTheme.gridUnit * 1.25}px;
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||||
|
svg {
|
||||||
|
vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -150,12 +156,7 @@ export default function SaveQuery({
|
||||||
return (
|
return (
|
||||||
<Styles className="SaveQuery">
|
<Styles className="SaveQuery">
|
||||||
<Button buttonSize="small" onClick={toggleSave}>
|
<Button buttonSize="small" onClick={toggleSave}>
|
||||||
<Icon
|
<Icons.Save iconSize="xl" />
|
||||||
name="save"
|
|
||||||
color={supersetTheme.colors.primary.base}
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>{' '}
|
|
||||||
{isSaved ? t('Save') : t('Save as')}
|
{isSaved ? t('Save') : t('Save as')}
|
||||||
</Button>
|
</Button>
|
||||||
<Modal
|
<Modal
|
||||||
|
|
|
@ -17,11 +17,11 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t, useTheme } from '@superset-ui/core';
|
import { t, useTheme, styled } from '@superset-ui/core';
|
||||||
|
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import CopyToClipboard from 'src/components/CopyToClipboard';
|
import CopyToClipboard from 'src/components/CopyToClipboard';
|
||||||
import { storeQuery } from 'src/utils/common';
|
import { storeQuery } from 'src/utils/common';
|
||||||
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
|
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
|
||||||
|
@ -39,6 +39,16 @@ interface ShareSqlLabQueryPropTypes {
|
||||||
addDangerToast: (msg: string) => void;
|
addDangerToast: (msg: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const StyledIcon = styled(Icons.Link)`
|
||||||
|
&:first-of-type {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
svg {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
function ShareSqlLabQuery({
|
function ShareSqlLabQuery({
|
||||||
queryEditor,
|
queryEditor,
|
||||||
addDangerToast,
|
addDangerToast,
|
||||||
|
@ -86,14 +96,12 @@ function ShareSqlLabQuery({
|
||||||
: t('Save the query to enable this feature');
|
: t('Save the query to enable this feature');
|
||||||
return (
|
return (
|
||||||
<Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
|
<Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
|
||||||
<Icon
|
<StyledIcon
|
||||||
name="link"
|
iconColor={
|
||||||
color={
|
|
||||||
canShare ? theme.colors.primary.base : theme.colors.grayscale.base
|
canShare ? theme.colors.primary.base : theme.colors.grayscale.base
|
||||||
}
|
}
|
||||||
width={20}
|
iconSize="xl"
|
||||||
height={20}
|
/>
|
||||||
/>{' '}
|
|
||||||
{t('Copy link')}
|
{t('Copy link')}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue