From 8cd03181ac0d324851d814443f4bd7f14924153d Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 1 Apr 2022 13:13:16 -0300
Subject: [PATCH] refactor: Removes the CSS files from the DeckGL plugin
(#19465)
---
.../src/DeckGLContainer.jsx | 1 -
.../src/components/BootstrapSliderWrapper.css | 25 ----------
.../src/components/BootstrapSliderWrapper.jsx | 17 +++++--
.../src/components/Legend.css | 44 ------------------
.../src/components/Legend.jsx | 39 +++++++++++++---
.../src/components/PlaySlider.css | 46 -------------------
.../src/components/PlaySlider.jsx | 38 +++++++++++++--
.../src/css/deckgl.css | 22 ---------
8 files changed, 81 insertions(+), 151 deletions(-)
delete mode 100644 superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.css
delete mode 100644 superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.css
delete mode 100644 superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.css
delete mode 100644 superset-frontend/plugins/legacy-preset-chart-deckgl/src/css/deckgl.css
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;
-}