mirror of https://github.com/apache/superset.git
chore: Move styles of Dashboard and FilterScopeSelector modals to Emotion (#11779)
* Remove unused component * Move styles from dashboard.less and filter-scope-selector.less to Emotion * Write padding style short-hand way
This commit is contained in:
parent
e974b0be05
commit
19e5ce0ac7
|
@ -76,6 +76,7 @@ export default class ModalTrigger extends React.Component {
|
|||
title={this.props.modalTitle}
|
||||
footer={this.props.modalFooter}
|
||||
hideFooter={!this.props.modalFooter}
|
||||
width={this.props.width}
|
||||
maxWidth={this.props.maxWidth}
|
||||
responsive={this.props.responsive}
|
||||
>
|
||||
|
|
|
@ -1,80 +0,0 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from 'src/components/Button';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
import ModalTrigger from '../../components/ModalTrigger';
|
||||
|
||||
const propTypes = {
|
||||
triggerNode: PropTypes.node.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default class DeleteComponentModal extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.modal = null;
|
||||
this.close = this.close.bind(this);
|
||||
this.deleteTab = this.deleteTab.bind(this);
|
||||
this.setModalRef = this.setModalRef.bind(this);
|
||||
}
|
||||
|
||||
setModalRef(ref) {
|
||||
this.modal = ref;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.modal.close();
|
||||
}
|
||||
|
||||
deleteTab() {
|
||||
this.modal.close();
|
||||
this.props.onDelete();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ModalTrigger
|
||||
ref={this.setModalRef}
|
||||
triggerNode={this.props.triggerNode}
|
||||
modalBody={
|
||||
<div className="dashboard-modal delete">
|
||||
<h1>{t('Delete dashboard tab?')}</h1>
|
||||
<div>
|
||||
Deleting a tab will remove all content within it. You may still
|
||||
reverse this action with the <b>undo</b> button (cmd + z) until
|
||||
you save your changes.
|
||||
</div>
|
||||
<div className="dashboard-modal-actions-container">
|
||||
<Button onClick={this.close}>{t('Cancel')}</Button>
|
||||
<Button buttonStyle="primary" onClick={this.deleteTab}>
|
||||
{t('Delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DeleteComponentModal.propTypes = propTypes;
|
|
@ -19,7 +19,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Select from 'src/components/Select';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { Alert } from 'react-bootstrap';
|
||||
import Button from 'src/components/Button';
|
||||
|
||||
|
@ -53,6 +53,10 @@ export const options = [
|
|||
[86400, t('24 hours')],
|
||||
].map(o => ({ value: o[0], label: o[1] }));
|
||||
|
||||
const RefreshWarningContainer = styled.div`
|
||||
margin-top: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
`;
|
||||
|
||||
class RefreshIntervalModal extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -104,13 +108,13 @@ class RefreshIntervalModal extends React.PureComponent {
|
|||
onChange={this.handleFrequencyChange}
|
||||
/>
|
||||
{showRefreshWarning && (
|
||||
<div className="refresh-warning-container">
|
||||
<RefreshWarningContainer>
|
||||
<Alert bsStyle="warning">
|
||||
<div>{refreshWarning}</div>
|
||||
<br />
|
||||
<strong>{t('Are you sure you want to proceed?')}</strong>
|
||||
</Alert>
|
||||
</div>
|
||||
</RefreshWarningContainer>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@superset-ui/core';
|
||||
|
||||
import ModalTrigger from '../../../components/ModalTrigger';
|
||||
import FilterScope from '../../containers/FilterScope';
|
||||
|
@ -26,6 +27,11 @@ const propTypes = {
|
|||
triggerNode: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
const FilterScopeModalBody = styled.div(({ theme: { gridUnit } }) => ({
|
||||
padding: gridUnit * 2,
|
||||
paddingBottom: gridUnit * 3,
|
||||
}));
|
||||
|
||||
export default class FilterScopeModal extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -43,14 +49,14 @@ export default class FilterScopeModal extends React.PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<ModalTrigger
|
||||
dialogClassName="filter-scope-modal"
|
||||
ref={this.modal}
|
||||
triggerNode={this.props.triggerNode}
|
||||
modalBody={
|
||||
<div className="dashboard-modal filter-scope">
|
||||
<FilterScopeModalBody>
|
||||
<FilterScope onCloseModal={this.handleCloseModal} />
|
||||
</div>
|
||||
</FilterScopeModalBody>
|
||||
}
|
||||
width="80%"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import cx from 'classnames';
|
||||
import Button from 'src/components/Button';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
|
||||
import buildFilterScopeTreeEntry from '../../util/buildFilterScopeTreeEntry';
|
||||
import getFilterScopeNodesTree from '../../util/getFilterScopeNodesTree';
|
||||
|
@ -49,6 +49,24 @@ const propTypes = {
|
|||
onCloseModal: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ActionsContainer = styled.div`
|
||||
height: ${({ theme }) => theme.gridUnit * 16}px;
|
||||
|
||||
// TODO: replace hardcoded color with theme variable after refactoring filter-scope-selector.less to Emotion
|
||||
border-top: ${({ theme }) => theme.gridUnit / 4}px solid #cfd8dc;
|
||||
padding: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
margin: 0 0 0 ${({ theme }) => -theme.gridUnit * 6}px;
|
||||
text-align: right;
|
||||
|
||||
.btn {
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default class FilterScopeSelector extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -512,7 +530,7 @@ export default class FilterScopeSelector extends React.PureComponent {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="dashboard-modal-actions-container">
|
||||
<ActionsContainer>
|
||||
<Button buttonSize="sm" onClick={this.onClose}>
|
||||
{t('Close')}
|
||||
</Button>
|
||||
|
@ -521,7 +539,7 @@ export default class FilterScopeSelector extends React.PureComponent {
|
|||
{t('Save')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</ActionsContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -120,42 +120,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.ant-modal-root {
|
||||
.ant-modal-body {
|
||||
padding: 24px 24px 29px 24px !important;
|
||||
}
|
||||
|
||||
.filter-scope-modal {
|
||||
.ant-modal {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-warning-container {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.dashboard-modal-actions-container {
|
||||
margin-top: 24px;
|
||||
text-align: right;
|
||||
|
||||
.btn {
|
||||
margin-right: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-modal.delete {
|
||||
.btn.btn-primary {
|
||||
background: @danger;
|
||||
border-color: @danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-bs-container-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
|
|
@ -39,13 +39,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dashboard-modal-actions-container {
|
||||
height: 64px;
|
||||
border-top: 1px solid @gray-light;
|
||||
padding: 24px;
|
||||
margin: 0 0 0 -24px;
|
||||
}
|
||||
|
||||
.warning-message {
|
||||
padding: 24px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue