diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx index 53c6f73a2e09f..9bc963c9fce3d 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx @@ -28,7 +28,6 @@ import DeckGL from 'deck.gl'; import { styled } from '@superset-ui/core'; import Tooltip from './components/Tooltip'; import 'mapbox-gl/dist/mapbox-gl.css'; -import './css/deckgl.css'; const TICK = 250; // milliseconds diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.css b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.css deleted file mode 100644 index dc54046e4c258..0000000000000 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.css +++ /dev/null @@ -1,25 +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. - */ -.BootstrapSliderWrapper .slider-selection { - background: #efefef; -} - -.BootstrapSliderWrapper .slider-handle { - background: #b3b3b3; -} diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.jsx index 51698b5dfae04..0ff45f5ea2c54 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.jsx @@ -19,12 +19,23 @@ import React from 'react'; import ReactBootstrapSlider from 'react-bootstrap-slider'; import 'bootstrap-slider/dist/css/bootstrap-slider.min.css'; -import './BootstrapSliderWrapper.css'; +import { styled } from '@superset-ui/core'; + +const StyledSlider = styled.div` + ${({ theme }) => ` + .slider-selection { + background: ${theme.colors.grayscale.light2}; + } + .slider-handle { + background: ${theme.colors.grayscale.light1}; + } + `} +`; export default function BootstrapSliderWrapper(props) { return ( - + - + ); } diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.css b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.css deleted file mode 100644 index 706dfaf0cd23b..0000000000000 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.css +++ /dev/null @@ -1,44 +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. - */ -div.legend { - font-size: 90%; - position: absolute; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 20px; - outline: none; - overflow-y: scroll; - max-height: 200px; -} - -ul.categories { - list-style: none; - padding-left: 0; - margin: 0; -} - -ul.categories li a { - color: rgb(51, 51, 51); - text-decoration: none; -} - -ul.categories li a span { - margin-right: 10px; -} diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.jsx index bb18626b699f6..40f13bb514d5b 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.jsx @@ -21,9 +21,36 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { formatNumber } from '@superset-ui/core'; - -import './Legend.css'; +import { formatNumber, styled } from '@superset-ui/core'; + +const StyledLegend = styled.div` + ${({ theme }) => ` + font-size: ${theme.typography.sizes.s}px; + position: absolute; + background: ${theme.colors.grayscale.light5}; + box-shadow: 0 0 ${theme.gridUnit}px ${theme.colors.grayscale.light2}; + margin: ${theme.gridUnit * 6}px; + padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 5}px; + outline: none; + overflow-y: scroll; + max-height: 200px; + + & ul { + list-style: none; + padding-left: 0; + margin: 0; + + & li a { + color: ${theme.colors.grayscale.base}; + text-decoration: none; + + & span { + margin-right: ${theme.gridUnit * 3}px; + } + } + } + `} +`; const categoryDelimiter = ' - '; @@ -106,9 +133,9 @@ export default class Legend extends React.PureComponent { }; return ( -
- -
+ + + ); } } diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.css b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.css deleted file mode 100644 index f4b6f5de2eea1..0000000000000 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.css +++ /dev/null @@ -1,46 +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. - */ -.play-slider { - display: flex; - height: 40px; - width: 100%; - margin: 0; -} - -.play-slider-controls { - flex: 0 0 80px; - text-align: middle; -} - -.play-slider-scrobbler { - flex: 1; -} - -.slider.slider-horizontal { - width: 100% !important; -} - -.slider-button { - color: #b3b3b3; - margin-right: 5px; -} - -div.slider > div.tooltip.tooltip-main.top.in { - margin-left: 0 !important; -} diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.jsx index d0ec3199d4c81..eda7803f21754 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.jsx @@ -26,9 +26,39 @@ import React from 'react'; import PropTypes from 'prop-types'; import Mousetrap from 'mousetrap'; -import { t } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import BootrapSliderWrapper from './BootstrapSliderWrapper'; -import './PlaySlider.css'; + +const StyledSlider = styled.div` + ${({ theme }) => ` + display: flex; + height: 40px; + width: 100%; + margin: 0; + + .play-slider-controls { + flex: 0 0 80px; + text-align: middle; + } + + .play-slider-scrobbler { + flex: 1; + } + + .slider.slider-horizontal { + width: 100% !important; + } + + .slider-button { + color: ${theme.colors.grayscale.light1}; + margin-right: ${theme.gridUnit}px; + } + + div.slider > div.tooltip.tooltip-main.top.in { + margin-left: 0 !important; + } + `} +`; const propTypes = { start: PropTypes.number.isRequired, @@ -167,7 +197,7 @@ export default class PlaySlider extends React.PureComponent { this.props; return ( -
+
-
+ ); } } diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/css/deckgl.css b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/css/deckgl.css deleted file mode 100644 index f836c27f08781..0000000000000 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/css/deckgl.css +++ /dev/null @@ -1,22 +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. - */ -.deckgl-tooltip > div { - overflow: hidden; - text-overflow: ellipsis; -}