[Enhancement] Map control style improve (#1253)

* allow passing logo component to map control for the exported image * tiny map control style fix Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Sep 2, 2020 · f54d6af · f54d6af
1 parent 3e40a48
commit f54d6af
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 76 deletions.
diff --git a/examples/demo-app/src/reducers/index.js b/examples/demo-app/src/reducers/index.js
@@ -129,7 +129,10 @@ export const loadRemoteResourceSuccess = (state, action) => {
     {
       payload: {
         datasets,
-        config
+        config,
+        options: {
+          centerMap: Boolean(!action.config)
+        }
       }
     }
   );

diff --git a/src/components/common/color-legend.js b/src/components/common/color-legend.js
@@ -150,7 +150,7 @@ export default class ColorLegend extends Component {
 
     return (
       <StyledLegend>
-        <svg width={width - 24} height={height}>
+        <svg width={width} height={height}>
           {legends.data.map((color, idx) => (
             <LegendRow
               key={idx}

diff --git a/src/components/common/logo.js b/src/components/common/logo.js
@@ -79,7 +79,7 @@ const KeplerGlLogo = ({appName, appWebsite = KEPLER_GL_WEBSITE, version}) => (
 
 KeplerGlLogo.propTypes = {
   appName: PropTypes.string,
-  version: PropTypes.string,
+  version: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   appWebsite: PropTypes.string
 };
 

diff --git a/src/components/map-container.js b/src/components/map-container.js
@@ -72,7 +72,7 @@ const Attribution = () => (
         aria-label="Mapbox logo"
       />
     </div>
-    <div>
+    <div className="attrition-link">
       <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
         © kepler.gl |{' '}
       </a>

diff --git a/src/components/map/map-control.js b/src/components/map/map-control.js
@@ -50,7 +50,6 @@ import {LOCALE_CODES} from 'localization/locales';
 
 const StyledMapControl = styled.div`
   right: 0;
-  width: ${props => props.theme.mapControl.width}px;
   padding: ${props => props.theme.mapControl.padding}px;
   z-index: 10;
   margin-top: ${props => props.top || 0}px;
@@ -78,6 +77,7 @@ const StyledMapControlPanelContent = styled.div.attrs({
   ${props => props.theme.dropdownScrollBar};
   max-height: 500px;
   min-height: 100px;
+  min-width: ${props => props.theme.mapControl.width}px;
   overflow: auto;
 `;
 
@@ -150,35 +150,44 @@ const LayerSelectorPanel = React.memo(({items, onMapToggleLayer, isActive, toggl
 
 LayerSelectorPanel.displayName = 'LayerSelectorPanel';
 
-const MapControlPanel = React.memo(({children, header, onClick, scale = 1, isExport}) => (
-  <StyledMapControlPanel
-    style={{
-      transform: `scale(${scale}) translate(calc(-${25 * (scale - 1)}% - ${10 *
-        scale}px), calc(${25 * (scale - 1)}% + ${10 * scale}px))`,
-      marginBottom: '8px'
-    }}
-  >
-    <StyledMapControlPanelHeader>
-      {isExport ? (
-        <KeplerGlLogo version={false} appName="kepler.gl" />
-      ) : (
-        <span style={{verticalAlign: 'middle'}}>
-          <FormattedMessage id={header} />
-        </span>
-      )}
-      {isExport ? null : (
-        <IconRoundSmall className="close-map-control-item" onClick={onClick}>
-          <Close height="16px" />
-        </IconRoundSmall>
-      )}
-    </StyledMapControlPanelHeader>
-    <StyledMapControlPanelContent>{children}</StyledMapControlPanelContent>
-  </StyledMapControlPanel>
-));
+const MapControlPanel = React.memo(
+  ({children, header, onClick, scale = 1, isExport, disableClose = false, logoComponent}) => (
+    <StyledMapControlPanel
+      style={{
+        transform: `scale(${scale})`,
+        marginBottom: '8px'
+      }}
+    >
+      <StyledMapControlPanelHeader>
+        {isExport && logoComponent ? (
+          logoComponent
+        ) : header ? (
+          <span style={{verticalAlign: 'middle'}}>
+            <FormattedMessage id={header} />
+          </span>
+        ) : null}
+        {isExport ? null : (
+          <IconRoundSmall className="close-map-control-item" onClick={onClick}>
+            <Close height="16px" />
+          </IconRoundSmall>
+        )}
+      </StyledMapControlPanelHeader>
+      <StyledMapControlPanelContent>{children}</StyledMapControlPanelContent>
+    </StyledMapControlPanel>
+  )
+);
 
 MapControlPanel.displayName = 'MapControlPanel';
 
-const MapLegendPanel = ({layers, isActive, scale, onToggleMenuPanel, isExport}) =>
+export const MapLegendPanel = ({
+  layers,
+  isActive,
+  scale,
+  onToggleMenuPanel,
+  isExport,
+  disableClose,
+  logoComponent
+}) =>
   !isActive ? (
     <MapControlButton
       key={2}
@@ -199,6 +208,8 @@ const MapLegendPanel = ({layers, isActive, scale, onToggleMenuPanel, isExport})
       header={'header.layerLegend'}
       onClick={onToggleMenuPanel}
       isExport={isExport}
+      disableClose={disableClose}
+      logoComponent={logoComponent}
     >
       <MapLegend layers={layers} />
     </MapControlPanel>
@@ -354,6 +365,7 @@ const LocalePanel = React.memo(
 
 LocalePanel.displayName = 'LocalePanel';
 
+const LegendLogo = <KeplerGlLogo version={false} appName="kepler.gl" />;
 const MapControlFactory = () => {
   class MapControl extends Component {
     static propTypes = {
@@ -372,6 +384,7 @@ const MapControlFactory = () => {
       top: PropTypes.number.isRequired,
       onSetLocale: PropTypes.func.isRequired,
       locale: PropTypes.string.isRequired,
+      logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
       // optional
       readOnly: PropTypes.bool,
@@ -383,7 +396,8 @@ const MapControlFactory = () => {
     static defaultProps = {
       isSplit: false,
       top: 0,
-      mapIndex: 0
+      mapIndex: 0,
+      logoComponent: LegendLogo
     };
 
     layerSelector = props => props.layers;
@@ -419,7 +433,8 @@ const MapControlFactory = () => {
         scale,
         readOnly,
         locale,
-        top
+        top,
+        logoComponent
       } = this.props;
 
       const {
@@ -473,6 +488,8 @@ const MapControlFactory = () => {
                 onMapToggleLayer={onMapToggleLayer}
                 isActive={mapLegend.active}
                 onToggleMenuPanel={() => onToggleMapControl('mapLegend')}
+                disableClose={mapLegend.disableClose}
+                logoComponent={logoComponent}
               />
             </ActionPanel>
           ) : null}

diff --git a/src/components/map/map-legend.js b/src/components/map/map-legend.js
@@ -121,15 +121,12 @@ MultiColorLegend.displayName = 'MultiColorLegend';
 
 export const LayerColorLegend = React.memo(({description, config, width, colorChannel}) => {
   const enableColorBy = description.measure;
-  const {scale, field, domain, range, property, key} = colorChannel;
+  const {scale, field, domain, range, property} = colorChannel;
   const [colorScale, colorField, colorDomain] = [scale, field, domain].map(k => config[k]);
   const colorRange = config.visConfig[range];
 
   return (
     <div>
-      <div className="legend--layer_type">
-        <FormattedMessage id={`layer.${key}`} />
-      </div>
       <div className="legend--layer_color-schema">
         <div>
           {enableColorBy ? <VisualChannelMetric name={enableColorBy} /> : null}

diff --git a/src/components/plot-container.js b/src/components/plot-container.js
@@ -33,7 +33,7 @@ import {getScaleFromImageSize} from 'utils/export-utils';
 import {findMapBounds} from 'utils/data-utils';
 import geoViewport from '@mapbox/geo-viewport';
 
-const CLASS_FILTER = ['mapboxgl-control-container', 'attrition-logo'];
+const CLASS_FILTER = ['mapboxgl-control-container', 'attrition-link', 'attrition-logo'];
 const DOM_FILTER_FUNC = node => !CLASS_FILTER.includes(node.className);
 const OUT_OF_SCREEN_POSITION = -9999;
 

diff --git a/src/constants/default-settings.js b/src/constants/default-settings.js
@@ -137,7 +137,7 @@ export const DIMENSIONS = {
     headerHeight: 96
   },
   mapControl: {
-    width: 204,
+    width: 184,
     padding: 12
   }
 };

diff --git a/src/styles/base.js b/src/styles/base.js
@@ -149,8 +149,8 @@ export const dropdownWapperMargin = 4;
 export const switchWidth = 24;
 export const switchHeight = 12;
 export const switchLabelMargin = 12;
-export const switchButtonTopMargin = 0;
-export const switchButtonLeftMargin = -1;
+export const switchBtnTopMargin = 0;
+export const switchBtnLeftMargin = -1;
 
 export const switchTrackBgd = '#29323C';
 export const switchTrackBgdActive = activeColor;
@@ -552,9 +552,9 @@ const switchTrack = css`
 const switchButton = css`
   transition: ${props => props.theme.transition};
   position: absolute;
-  top: ${props => props.theme.switchButtonTopMargin};
+  top: ${props => props.theme.switchBtnTopMargin};
   left: ${props =>
-    (props.checked ? props.theme.switchWidth / 2 : props.theme.switchButtonLeftMargin) -
+    (props.checked ? props.theme.switchWidth / 2 : props.theme.switchBtnLeftMargin) -
     props.theme.switchLabelMargin}px;
   content: '';
   display: block;
@@ -1000,7 +1000,8 @@ export const theme = {
   switchBtnWidth,
   switchBtnHeight,
   switchLabelMargin,
-  switchButtonLeftMargin,
+  switchBtnLeftMargin,
+  switchBtnTopMargin,
 
   secondarySwitchTrackBgd,
   secondarySwitchBtnBgd,

diff --git a/test/browser/components/map/map-legend-test.js b/test/browser/components/map/map-legend-test.js
@@ -97,14 +97,7 @@ function testGeojsonLegend(t, geojsonLegend) {
   );
   const fillColorLegend = geojsonLegend.find(LayerColorLegend).at(0);
   const strokeColorLegend = geojsonLegend.find(LayerColorLegend).at(1);
-  t.equal(
-    fillColorLegend
-      .find('.legend--layer_type')
-      .at(0)
-      .text(),
-    'Color',
-    'geojson color legend should have Fill Color'
-  );
+
   t.equal(
     fillColorLegend.find(SingleColorLegend).length,
     1,
@@ -118,14 +111,7 @@ function testGeojsonLegend(t, geojsonLegend) {
     geojsonLayer.config.color,
     'geojson color legend should be correct color'
   );
-  t.equal(
-    strokeColorLegend
-      .find('.legend--layer_type')
-      .at(0)
-      .text(),
-    'Stroke Color',
-    'geojson color legend should have Stroke Color'
-  );
+
   t.equal(
     strokeColorLegend.find(SingleColorLegend).length,
     1,
@@ -165,14 +151,7 @@ function testPointLayerLegend(t, pointLegend) {
     'point layer legend should render 0 point layer size legend'
   );
   const pointColorLegend = pointLegend.find(LayerColorLegend).at(0);
-  t.equal(
-    pointColorLegend
-      .find('.legend--layer_type')
-      .at(0)
-      .text(),
-    'Color',
-    'point layer legend should have title Color'
-  );
+
   t.equal(
     pointColorLegend.find(VisualChannelMetric).length,
     1,
@@ -210,14 +189,7 @@ function testHexagonLayerLegend(t, hexagonLegend) {
     'hexagon layer legend should render 0 size legend'
   );
   const hexagonColorLegend = hexagonLegend.find(LayerColorLegend).at(0);
-  t.equal(
-    hexagonColorLegend
-      .find('.legend--layer_type')
-      .at(0)
-      .text(),
-    'Color',
-    'hexagon layer legend should have title Color'
-  );
+
   t.equal(
     hexagonColorLegend.find(VisualChannelMetric).length,
     1,