Skip to content

Commit

Permalink
187811059 inspector palette tuneup (#1334)
Browse files Browse the repository at this point in the history 
* Fixes map measure inspector palette styling

* Fixes map base layer control styling

* Styles point style slider

* Tunes up map layer inspector palette styling

* PR fixes
  • Loading branch information
@eireland
eireland authored Jul 10, 2024
1 parent c2d6c07 commit ac3050c
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 37 deletions.
14 changes: 6 additions & 8 deletions v3/src/components/data-display/inspector/display-item-format-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
)
}}
isDisabled={pointDisplayType === "bars"}>
<SliderTrack/>
<SliderThumb/>
<SliderTrack bg="#b8b8b8"/>
<SliderThumb border="1px solid #cfcfcf"/>
</Slider>
</Flex>
</FormControl>
Expand All @@ -98,9 +98,9 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro

{ renderSliderControlIfAny() }

<FormControl isDisabled={displayItemDescription.pointStrokeSameAsFill}>
<FormControl isDisabled={displayItemDescription.pointStrokeSameAsFill} className="palette-form-control">
<Flex className="palette-row">
<FormLabel className="form-label">{t("DG.Inspector.stroke")}</FormLabel>
<FormLabel className="form-label stroke">{t("DG.Inspector.stroke")}</FormLabel>
<Input type="color" className="color-picker-thumb" value={displayItemDescription.pointStrokeColor}
onChange={(e) => {
displayItemDescription.applyModelChange(
Expand All @@ -112,8 +112,6 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
)
}}/>
</Flex>
</FormControl>
<FormControl>
<>
{ /*todo: The legend color controls are not in place yet*/ }
{dataConfiguration.attributeID("legend") &&
Expand All @@ -125,7 +123,7 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
<Flex className="palette-row">
{/* Sets the min and max colors for numeric legend. Currently not implemented so
this sets the same color for all the points*/}
<FormLabel className="form-label">{t("DG.Inspector.legendColor")}</FormLabel>
<FormLabel className="form-label legend">{t("DG.Inspector.legendColor")}</FormLabel>
<Input type="color" className="color-picker-thumb" value={missingColor}
onChange={e => displayItemDescription.setPointColor(e.target.value)}/>
<Input type="color" className="color-picker-thumb" value={missingColor}
Expand All @@ -134,7 +132,7 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
</FormControl>)
:(
<Flex className="palette-row">
<FormLabel className="form-label">{t("DG.Inspector.color")}</FormLabel>
<FormLabel className="form-label color">{t("DG.Inspector.color")}</FormLabel>
<Input type="color" className="color-picker-thumb"
value={displayItemDescription.pointColor}
onChange={e => {
Expand Down
13 changes: 6 additions & 7 deletions v3/src/components/map/components/inspector-panel/map-base-layer-control.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react"
import {clsx} from "clsx"
import {observer} from "mobx-react-lite"
import {Box, Checkbox, Flex, HStack} from "@chakra-ui/react"
import {Box, Checkbox, Flex} from "@chakra-ui/react"
import {t} from "../../../../utilities/translation/translate"
import {ITileModel} from "../../../../models/tiles/tile-model"
import {BaseMapKey} from "../../map-types"
Expand All @@ -18,7 +19,7 @@ export const MapBaseLayerControl = observer(function MapBaseLayerControl(
if (!mapModel) return null

const classNameForSegment = (layerName: string) => {
return mapModel.baseMapLayerName === layerName ? 'map-base-button-selected' : 'map-base-button'
return clsx("map-base-button", layerName, { selected: layerName === mapModel.baseMapLayerName })
}

const toggleVisibility = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -48,30 +49,28 @@ export const MapBaseLayerControl = observer(function MapBaseLayerControl(
return (
<Flex className="palette-form map-base-control" direction="row">
<Checkbox
className='map-layers-checkbox'
className="palette-checkbox"
data-testid={`map-layers-checkbox-base`}
defaultChecked={mapModel.baseMapLayerIsVisible}
onChange={toggleVisibility}
padding="2px"
>
{t('V3.map.inspector.base')}
</Checkbox>
<HStack spacing='5px' className='map-base-segmented'>
<Flex className='map-base-segmented'>
<Box data-testid={`map-layers-base-oceans`} className={classNameForSegment('oceans')}
onClick={()=>{ changeBaseMapLayer('oceans') }}>
{t('V3.map.inspector.oceans')}
</Box>
<Box> | </Box>
<Box data-testid={`map-layers-base-topo`} className={classNameForSegment('topo')}
onClick={()=>{ changeBaseMapLayer('topo') }}>
{t('V3.map.inspector.topo')}
</Box>
<Box> | </Box>
<Box data-testid={`map-layers-base-streets`} className={classNameForSegment('streets')}
onClick={()=>{ changeBaseMapLayer('streets') }}>
{t('V3.map.inspector.streets')}
</Box>
</HStack>
</Flex>
</Flex>
)
})
85 changes: 67 additions & 18 deletions v3/src/components/map/components/inspector-panel/map-inspector.scss
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,83 @@
.inspector-panel.map.data-display {
.codap-inspector-palette {
.map-layers-checkbox {
font-weight: bold;
font-size: 12px;
min-width: 205px;
min-height: 100px;
font-weight: bold;

.palette-form {
height: fit-content;

.palette-row {
height: 30px;

.form-label.color {
margin-right: 4px;
}
}

.palette-checkbox {
height: 20px;
width: 180px;
margin: 2px 0;
}

.map-values-controls {
display: flex;
flex-direction: column;
margin: 5px;

.map-values-layer-label{
display: flex;
align-items: center;
}
}
}

.map-base-control {
margin: 1px;

.palette-checkbox{
width: 80px;
}

.map-base-segmented {
border: 1px solid #cccccc;
height: 18px;
width: 170px;
margin: 5px;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
font-size: 12px;
border-radius: 4px;
justify-content: center;
cursor: pointer;

.map-base-button {
border-radius: 5px;
padding: 5px;
background-image: linear-gradient(to bottom, #f7f7f7, #e7e7e7);
}
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 18px;

.map-base-button-selected {
border-radius: 5px;
padding: 5px;
background-image: linear-gradient(to bottom, #5DA3EE, #437BD4);
color: white;
font-weight: bold;
text-shadow: black 1px 1px;
&.oceans {
border: 1px solid #cccccc;
border-radius: 4px 0 0 4px;
width: 57.5px;
}
&.streets {
border: 1px solid #cccccc;
border-radius: 0 4px 4px 0;
width: 54.5px;
}
&.topo {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
width: 45px;
border-radius: 0;
}
&.selected {
background-image: linear-gradient(to bottom, #5DA3EE, #437BD4);
color: white;
text-shadow: black 1px 1px;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion v3/src/components/map/components/inspector-panel/map-layers-palette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const MapLayersPalette = observer(function MapLayersPalette(
return (
<div className="map-layer-controls" key={layer.id}>
<Checkbox
className='map-layers-checkbox'
className="palette-checkbox"
data-testid={`map-layers-checkbox-layer`}
defaultChecked={layer.isVisible}
onChange={() => {
Expand Down
6 changes: 3 additions & 3 deletions v3/src/components/map/components/inspector-panel/map-measure-palette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const MapMeasurePalette = ({tile, panelRect, buttonRect, setShowPalette}:
<Box className='map-values-layer-label' data-testid={`map-values-layer-label`}>
{layer.dataConfiguration.dataset?.name}
</Box>
<Checkbox className='map-values-checkbox' data-testid={`map-values-grid-checkbox`}
<Checkbox className="palette-checkbox" data-testid={`map-values-grid-checkbox`}
defaultChecked={layer.gridModel.isVisible}
onChange={() => {
const op = layer.gridModel.isVisible ? 'hide' : 'show'
Expand All @@ -40,7 +40,7 @@ export const MapMeasurePalette = ({tile, panelRect, buttonRect, setShowPalette}:
>
{t("DG.Inspector.mapGrid")}
</Checkbox>
<Checkbox className='map-values-checkbox' data-testid={`map-values-points-checkbox`}
<Checkbox className="palette-checkbox" data-testid={`map-values-points-checkbox`}
defaultChecked={layer.pointsAreVisible}
onChange={() => {
const op = layer.pointsAreVisible ? 'hide' : 'show'
Expand All @@ -54,7 +54,7 @@ export const MapMeasurePalette = ({tile, panelRect, buttonRect, setShowPalette}:
>
{t("DG.Inspector.mapPoints")}
</Checkbox>
<Checkbox className='map-values-checkbox' data-testid={`map-values-lines-checkbox`}
<Checkbox className="palette-checkbox" data-testid={`map-values-lines-checkbox`}
defaultChecked={layer.connectingLinesAreVisible}
onChange={() => {
const op = layer.connectingLinesAreVisible ? 'hide' : 'show'
Expand Down

0 comments on commit ac3050c

Please sign in to comment.