diff --git a/src/components/debug-panel/debug-panel.tsx b/src/components/debug-panel/debug-panel.tsx index ef6ca86e..9674012e 100644 --- a/src/components/debug-panel/debug-panel.tsx +++ b/src/components/debug-panel/debug-panel.tsx @@ -24,6 +24,7 @@ import { setDebugOptions, selectDebugOptions, } from "../../redux/slices/debug-options-slice"; +import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice"; const CloseButtonWrapper = styled.div` position: absolute; @@ -64,6 +65,11 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => { const layout = useAppLayout(); const dispatch = useAppDispatch(); const debugOptions = useAppSelector(selectDebugOptions); + const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId); + const minimapDisabled = selectedBaseMapId === "ArcGis"; + if (minimapDisabled && debugOptions.minimap) { + dispatch(setDebugOptions({ minimap: false })); + } return ( @@ -84,6 +90,7 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => { dispatch(setDebugOptions({ minimap: !debugOptions.minimap })) } diff --git a/src/components/toogle-switch/toggle-switch.tsx b/src/components/toogle-switch/toggle-switch.tsx index 23892695..6cec8ed7 100644 --- a/src/components/toogle-switch/toggle-switch.tsx +++ b/src/components/toogle-switch/toggle-switch.tsx @@ -1,5 +1,8 @@ -import styled from "styled-components"; -import { color_canvas_primary_inverted } from "../../constants/colors"; +import styled, { css } from "styled-components"; +import { + color_canvas_primary_inverted, + dim_canvas_tertiary, +} from "../../constants/colors"; const Switch = styled.div` position: relative; @@ -17,12 +20,17 @@ const Input = styled.input` const Label = styled.label<{ title?: string; htmlFor?: string; + disabled: boolean; }>` font-size: 6px; width: 28px; height: 18px; border-radius: 8px; - cursor: pointer; + ${({ disabled }) => + !disabled && + css` + cursor: pointer; + `} ${Input} { opacity: 0; width: 0; @@ -30,9 +38,8 @@ const Label = styled.label<{ } `; -const Slider = styled.span` +const Slider = styled.span<{ disabled: boolean }>` position: absolute; - cursor: pointer; top: 1px; left: 0; right: 0; @@ -54,16 +61,25 @@ const Slider = styled.span` transition: 0.4s; border-radius: 8px; } - &:hover { - background-color: ${({ theme }) => - theme.colors.switchDisabledBackgroundHovered}; - } + ${({ disabled }) => + !disabled && + css` + &:hover { + background-color: ${({ theme }) => + theme.colors.switchDisabledBackgroundHovered}; + } + `} ${Input}:checked + & { background: ${({ theme }) => theme.colors.switchCheckedBackground}; - &:hover { - background: ${({ theme }) => theme.colors.switchCheckedBackgroundHovered}; - } + ${({ disabled }) => + !disabled && + css` + &:hover { + background: ${({ theme }) => + theme.colors.switchCheckedBackgroundHovered}; + } + `} } ${Input}:checked + &::before { @@ -71,30 +87,42 @@ const Slider = styled.span` -ms-transform: translateX(11px); transform: translateX(11px); } + + ${Input}:disabled + &::before { + background-color: ${dim_canvas_tertiary}; + } `; -/** - * TODO: Add types to component - */ +type ToggleSwitchProps = { + checked: boolean; + onChange: () => void; + name?: string; + id?: string; + title?: string; + disabled?: boolean; +}; + export const ToggleSwitch = ({ checked, onChange, name = "", id = "", title = "", -}) => { + disabled = false, +}: ToggleSwitchProps) => { return ( - ); diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 4aa283a4..205dc470 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -29,6 +29,7 @@ export const color_accent_tertiary = "#FDCECE"; export const dim_canvas_primary = "#616678"; export const dim_canvas_secondary = "#CDCFD6"; +export const dim_canvas_tertiary = "#808080"; export const COLORS_BY_ATTRIBUTE: { min: { diff --git a/src/pages/debug-app/debug-app.tsx b/src/pages/debug-app/debug-app.tsx index b64c081f..b32f1cb3 100644 --- a/src/pages/debug-app/debug-app.tsx +++ b/src/pages/debug-app/debug-app.tsx @@ -236,7 +236,7 @@ export const DebugApp = () => { setColoredTilesMap({}); setSelectedTile(null); dispatch(resetDebugOptions()); - dispatch(setDebugOptions({ minimap: true })); + dispatch(setDebugOptions({ minimap: !(selectedBaseMapId === "ArcGis") })); dispatch(clearBSLStatisitcsSummary()); dispatch(setFiltersByAttrubute({ filter: null })); }, [activeLayers, buildingExplorerOpened]);