From b0a33fe83c185a4093311e7b0eb5a5bf5e61ef3c Mon Sep 17 00:00:00 2001 From: Erik Escoffier Date: Tue, 17 Oct 2023 10:55:16 +0200 Subject: [PATCH 1/5] Move controls to the right --- .../common/map/controls/geocoder.tsx | 2 +- .../common/map/controls/map-options/index.tsx | 4 +-- .../common/map/mapbox-style-override.ts | 8 +++-- .../exploration/components/map/index.tsx | 30 ++++++++++--------- 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/app/scripts/components/common/map/controls/geocoder.tsx b/app/scripts/components/common/map/controls/geocoder.tsx index 2ceeb35e0..edf0b5649 100644 --- a/app/scripts/components/common/map/controls/geocoder.tsx +++ b/app/scripts/components/common/map/controls/geocoder.tsx @@ -12,7 +12,7 @@ export default function GeocoderControl() { }); }, { - position: 'top-left' + position: 'top-right' } ); diff --git a/app/scripts/components/common/map/controls/map-options/index.tsx b/app/scripts/components/common/map/controls/map-options/index.tsx index 6d93d2224..b5ff3b196 100644 --- a/app/scripts/components/common/map/controls/map-options/index.tsx +++ b/app/scripts/components/common/map/controls/map-options/index.tsx @@ -137,7 +137,7 @@ function MapOptions(props: MapOptionsProps) { )} direction='down' - alignment='left' + alignment='right' > Map options @@ -266,7 +266,7 @@ function MapOptions(props: MapOptionsProps) { export default function MapOptionsControl(props: MapOptionsProps) { useThemedControl(() => , { - position: 'top-left' + position: 'top-right' }); return null; } diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts index a6cf2ff0c..4d9541695 100644 --- a/app/scripts/components/common/map/mapbox-style-override.ts +++ b/app/scripts/components/common/map/mapbox-style-override.ts @@ -25,7 +25,7 @@ const MapboxStyleOverride = css` > * { display: flex; - flex-flow: column nowrap; + flex-flow: row nowrap; gap: ${variableGlsp(0.5)}; align-items: flex-start; float: none; @@ -214,7 +214,8 @@ const MapboxStyleOverride = css` color: ${themeVal('type.base.color')}; font: ${themeVal('type.base.style')} ${themeVal('type.base.weight')} 0.875rem/1.25rem ${themeVal('type.base.family')}; - transition: all 0.24s ease 0s; + transition: none; + overflow: hidden; &::before { position: absolute; @@ -234,6 +235,7 @@ const MapboxStyleOverride = css` width: 2rem; min-width: 2rem; background-color: ${themeVal('color.primary')}; + transition: none; &::before { background-image: url(${({ theme }) => @@ -259,7 +261,7 @@ const MapboxStyleOverride = css` right: 0; background: none; border-radius: ${themeVal('shape.rounded')}; - transition: all 0.24s ease 0s; + transition: none; color: inherit; &:hover { diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx index bed9d0610..9911b7aad 100644 --- a/app/scripts/components/exploration/components/map/index.tsx +++ b/app/scripts/components/exploration/components/map/index.tsx @@ -73,10 +73,20 @@ export function ExplorationMap(props: { comparing: boolean }) { /> ))} {/* Map controls */} + - - - - + + + {props.comparing && ( // Compare map layers From c2ac66e65ea87a8c7cfaaf18afe849da9a22a0cc Mon Sep 17 00:00:00 2001 From: Erik Escoffier Date: Tue, 17 Oct 2023 11:01:41 +0200 Subject: [PATCH 2/5] Updated icons --- .../components/common/map/controls/map-options/index.tsx | 4 ++-- app/scripts/components/common/map/mapbox-style-override.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/map/controls/map-options/index.tsx b/app/scripts/components/common/map/controls/map-options/index.tsx index b5ff3b196..4ab825171 100644 --- a/app/scripts/components/common/map/controls/map-options/index.tsx +++ b/app/scripts/components/common/map/controls/map-options/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { glsp, themeVal } from '@devseed-ui/theme-provider'; -import { CollecticonGlobe } from '@devseed-ui/collecticons'; +import { CollecticonMap } from '@devseed-ui/collecticons'; import { Dropdown, DropMenu, @@ -133,7 +133,7 @@ function MapOptions(props: MapOptionsProps) { ( - + )} direction='down' diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts index 4d9541695..5ed34d1ed 100644 --- a/app/scripts/components/common/map/mapbox-style-override.ts +++ b/app/scripts/components/common/map/mapbox-style-override.ts @@ -9,7 +9,7 @@ import { CollecticonMinusSmall, CollecticonMagnifierLeft, CollecticonXmarkSmall, - CollecticonPencil, + CollecticonArea, CollecticonTrashBin } from '@devseed-ui/collecticons'; import { glsp, themeVal } from '@devseed-ui/theme-provider'; @@ -194,7 +194,7 @@ const MapboxStyleOverride = css` .mapbox-gl-draw_polygon.mapbox-gl-draw_polygon::before { background-image: url(${({ theme }) => - iconDataURI(CollecticonPencil, { + iconDataURI(CollecticonArea, { color: theme.color?.surface })}); } From 6a6f688971a7a1a94713ac39ddd85cfa6c14d47b Mon Sep 17 00:00:00 2001 From: Erik Escoffier Date: Tue, 17 Oct 2023 11:52:07 +0200 Subject: [PATCH 3/5] Fix colors --- .../common/map/controls/map-options/index.tsx | 7 +++++++ .../common/map/mapbox-style-override.ts | 21 +++++++++++-------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/app/scripts/components/common/map/controls/map-options/index.tsx b/app/scripts/components/common/map/controls/map-options/index.tsx index 4ab825171..7a1f7c5a5 100644 --- a/app/scripts/components/common/map/controls/map-options/index.tsx +++ b/app/scripts/components/common/map/controls/map-options/index.tsx @@ -61,6 +61,13 @@ const MapOptionsDropdown = styled(Dropdown)` const SelectorButton = styled(Button)` &&& { ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })} + background-color: ${themeVal('color.surface')}; + &:hover { + background-color: ${themeVal('color.surface')}; + } + & path { + fill: ${themeVal('color.base')}; + } } `; diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts index 5ed34d1ed..06f22183b 100644 --- a/app/scripts/components/common/map/mapbox-style-override.ts +++ b/app/scripts/components/common/map/mapbox-style-override.ts @@ -154,19 +154,21 @@ const MapboxStyleOverride = css` .mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out { ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })} + background-color: ${themeVal('color.surface')}; + color: ${themeVal('color.primary')}; } .mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in::before { background-image: url(${({ theme }) => iconDataURI(CollecticonPlusSmall, { - color: theme.color?.surface + color: theme.color?.base })}); } .mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out::before { background-image: url(${({ theme }) => iconDataURI(CollecticonMinusSmall, { - color: theme.color?.surface + color: theme.color?.base })}); } @@ -182,20 +184,21 @@ const MapboxStyleOverride = css` .mapbox-gl-draw_ctrl-draw-btn { ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })} + background-color: ${themeVal('color.surface')}; } .mapbox-gl-draw_ctrl-draw-btn.active { - background-color: ${themeVal('color.base-400a')}; + background-color: ${themeVal('color.surface')}; } .mapbox-gl-draw_ctrl-draw-btn:not(:disabled):hover { - background-color: ${themeVal('color.base-400a')}; + background-color: ${themeVal('color.surface')}; } .mapbox-gl-draw_polygon.mapbox-gl-draw_polygon::before { background-image: url(${({ theme }) => iconDataURI(CollecticonArea, { - color: theme.color?.surface + color: theme.color?.base })}); } } @@ -203,7 +206,7 @@ const MapboxStyleOverride = css` .mapbox-gl-draw_trash.mapbox-gl-draw_trash::before { background-image: url(${({ theme }) => iconDataURI(CollecticonTrashBin, { - color: theme.color?.surface + color: theme.color?.base })}); } } @@ -226,7 +229,7 @@ const MapboxStyleOverride = css` height: 1rem; background-image: url(${({ theme }) => iconDataURI(CollecticonMagnifierLeft, { - color: theme.color?.primary + color: theme.color?.base })}); background-repeat: no-repeat; } @@ -234,13 +237,13 @@ const MapboxStyleOverride = css` &.mapboxgl-ctrl-geocoder--collapsed { width: 2rem; min-width: 2rem; - background-color: ${themeVal('color.primary')}; + background-color: ${themeVal('color.surface')}; transition: none; &::before { background-image: url(${({ theme }) => iconDataURI(CollecticonMagnifierLeft, { - color: theme.color?.surface + color: theme.color?.base })}); } } From aa951ed006114668f69345a0a12c42d1856fbb52 Mon Sep 17 00:00:00 2001 From: Erik Escoffier Date: Tue, 17 Oct 2023 12:13:21 +0200 Subject: [PATCH 4/5] Set control group to horizontal layout --- .../components/common/map/mapbox-style-override.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts index 06f22183b..f7ca93ca2 100644 --- a/app/scripts/components/common/map/mapbox-style-override.ts +++ b/app/scripts/components/common/map/mapbox-style-override.ts @@ -90,7 +90,7 @@ const MapboxStyleOverride = css` } .mapboxgl-ctrl-group { - ${createButtonGroupStyles({ orientation: 'vertical' } as any)} + ${createButtonGroupStyles({ orientation: 'horizontal' } as any)} background: none; &, @@ -113,15 +113,11 @@ const MapboxStyleOverride = css` } } - > button + button { - margin-top: -${themeVal('button.shape.border')}; - } - > button:first-child:not(:last-child) { &, &::after { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0.25rem; } &::after { @@ -132,7 +128,8 @@ const MapboxStyleOverride = css` &, &::after { border-top-left-radius: 0; - border-top-right-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 0.25rem; } &::after { From 57c5e7e60ea41f565c4aabe4d9c4672d7068164c Mon Sep 17 00:00:00 2001 From: Erik Escoffier Date: Tue, 17 Oct 2023 12:39:54 +0200 Subject: [PATCH 5/5] Removed Navigation control --- app/scripts/components/exploration/components/map/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx index 9911b7aad..54eef4fe3 100644 --- a/app/scripts/components/exploration/components/map/index.tsx +++ b/app/scripts/components/exploration/components/map/index.tsx @@ -13,10 +13,7 @@ import { Layer } from './layer'; import Map, { Compare } from '$components/common/map'; import { Basemap } from '$components/common/map/style-generators/basemap'; import GeocoderControl from '$components/common/map/controls/geocoder'; -import { - NavigationControl, - ScaleControl -} from '$components/common/map/controls'; +import { ScaleControl } from '$components/common/map/controls'; import MapCoordsControl from '$components/common/map/controls/coords'; import MapOptionsControl from '$components/common/map/controls/map-options'; import { projectionDefault } from '$components/common/map/controls/map-options/projections';