Skip to content

Commit

Permalink
Add fullWidth for large size screen display (opensearch-project#182)
Browse files Browse the repository at this point in the history
Signed-off-by: Junqiu Lei <[email protected]>
  • Loading branch information
junqiu-lei authored Jan 10, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 7eb646e commit 4a86a27
Showing 5 changed files with 37 additions and 353 deletions.
Original file line number Diff line number Diff line change
@@ -179,12 +179,12 @@ export const CustomMapSource = ({
<div>
<EuiPanel paddingSize="s">
<EuiForm>
<EuiFormRow label="Custom type" helpText="Choose custom map type.">
<EuiFormRow label="Custom type" helpText="Choose custom map type." fullWidth={true}>
<EuiSelect
options={customMapTypeOptions}
value={customType}
onChange={onChangeCustomType}
fullWidth
fullWidth={true}
/>
</EuiFormRow>
</EuiForm>
@@ -196,6 +196,7 @@ export const CustomMapSource = ({
helpText="Raster tile map service URL."
isInvalid={isInvalidURL(customMapURL)}
error={isInvalidURL(customMapURL) ? 'Invalid URL' : undefined}
fullWidth={true}
>
<EuiFieldText
placeholder="https://www.example.com/tiles/{z}/{x}/{y}.png"
@@ -209,6 +210,7 @@ export const CustomMapSource = ({
<EuiFormRow
label="TMS attribution"
helpText="The attribution for this TMS layer, displayed at right-bottom map."
fullWidth={true}
>
<EuiFieldText
value={customMapAttribution}
@@ -225,6 +227,7 @@ export const CustomMapSource = ({
helpText="Web map service URL"
isInvalid={isInvalidURL(customMapURL)}
error={isInvalidURL(customMapURL) ? 'Invalid URL' : undefined}
fullWidth={true}
>
<EuiFieldText
placeholder="https://www.example.com/wms/dataset"
@@ -238,24 +241,27 @@ export const CustomMapSource = ({
<EuiFormRow
label="WMS layers*"
helpText="The names of the layers to include in the map image. For more than one name, use a comma-separated list."
fullWidth={true}
>
<EuiFieldText value={WMSLayers} onChange={onChangeWMSLayers} fullWidth={true} />
</EuiFormRow>
<EuiSpacer size="m" />
<EuiFormRow label="WMS version*">
<EuiFormRow label="WMS version*" fullWidth={true}>
<EuiFieldText value={WMSVersion} onChange={onChangeWMSVersion} fullWidth={true} />
</EuiFormRow>
<EuiSpacer size="m" />
<EuiFormRow
label="WMS format*"
helpText="The format of the map image to return. The most common formats are 'image/png' and 'image/jpeg'."
fullWidth={true}
>
<EuiFieldText value={WMSFormat} onChange={onChangeWMSFormat} fullWidth={true} />
</EuiFormRow>
<EuiSpacer size="m" />
<EuiFormRow
label="WMS CRS"
helpText="The coordinate reference system (CRS) to use for the map image."
fullWidth={true}
>
<EuiFieldText
value={WMSCoordinateSystem}
@@ -267,13 +273,15 @@ export const CustomMapSource = ({
<EuiFormRow
label="WMS bbox"
helpText="The bounding box of the region to include in the map image."
fullWidth={true}
>
<EuiFieldText value={WMSBbox} onChange={onChangeWMSBbox} fullWidth={true} />
</EuiFormRow>
<EuiSpacer size="m" />
<EuiFormRow
label="WMS attribution"
helpText="The attribution for this WMS layer, displayed at right-bottom map."
fullWidth={true}
>
<EuiFieldText
value={customMapAttribution}
@@ -285,6 +293,7 @@ export const CustomMapSource = ({
<EuiFormRow
label="WMS styles"
helpText="The styles to be used for each of the layers in the map image."
fullWidth={true}
>
<EuiFieldText value={WMSStyles} onChange={onChangeWMSStyles} fullWidth={true} />
</EuiFormRow>
Original file line number Diff line number Diff line change
@@ -226,6 +226,7 @@ export const DocumentLayerSource = ({
isInvalid={!indexPattern}
error={errorsMap.datasource}
data-test-subj={'indexPatternSelect'}
fullWidth={true}
>
<IndexPatternSelect
savedObjectsClient={savedObjectsClient}
@@ -239,6 +240,7 @@ export const DocumentLayerSource = ({
}}
isClearable={false}
data-test-subj={'indexPatternSelect'}
fullWidth={true}
/>
</EuiFormRow>
</EuiFlexItem>
@@ -248,6 +250,7 @@ export const DocumentLayerSource = ({
isInvalid={!selectedField}
error={errorsMap.geoFields}
data-test-subj={'geoFieldSelect'}
fullWidth={true}
>
<EuiComboBox
options={formatFieldsToComboBox(geoFields)}
@@ -262,6 +265,7 @@ export const DocumentLayerSource = ({
defaultMessage: 'Select data field',
})}
data-test-subj={'geoFieldSelect'}
fullWidth={true}
/>
</EuiFormRow>
</EuiFlexItem>
@@ -274,6 +278,7 @@ export const DocumentLayerSource = ({
onChange={onDocumentRequestNumberChange}
aria-label="Use aria labels when no actual label is in use"
isInvalid={hasInvalidRequestNumber}
fullWidth={true}
/>
{hasInvalidRequestNumber && (
<EuiFormErrorText>
@@ -347,6 +352,7 @@ export const DocumentLayerSource = ({
placeholder={i18n.translate('documentLayer.selectDataFieldPlaceholder', {
defaultMessage: 'Add tooltip fields',
})}
fullWidth={true}
/>
</EuiFlexItem>
</EuiFlexGrid>
Original file line number Diff line number Diff line change
@@ -130,7 +130,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig

const ColorPicker = ({ color, setColor, label }: ColorPickerProps) => {
return (
<EuiFormRow label={label}>
<EuiFormRow label={label} fullWidth={true}>
<EuiColorPicker
color={color}
onChange={setColor}
@@ -151,7 +151,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig

const WidthSelector = ({ label, onWidthChange, size, hasInvalid }: WidthSelectorProps) => {
return (
<EuiFormRow label={label}>
<EuiFormRow label={label} fullWidth={true}>
<EuiFlexItem>
<EuiFieldNumber
placeholder="Select thickness"
15 changes: 10 additions & 5 deletions public/components/layer_config/layer_basic_settings.tsx
Original file line number Diff line number Diff line change
@@ -99,31 +99,34 @@ export const LayerBasicSettings = ({
</EuiTitle>
<EuiSpacer size="m" />
<EuiForm>
<EuiFormRow label="Type">
<EuiFormRow label="Type" fullWidth={true}>
<EuiFieldText
name="layerType"
value={layersTypeNameMap[selectedLayerConfig.type]}
readOnly={true}
fullWidth={true}
/>
</EuiFormRow>
<EuiFormRow label="Name" error={errors} isInvalid={invalid}>
<EuiFormRow label="Name" error={errors} isInvalid={invalid} fullWidth={true}>
<EuiFieldText
name="layerName"
value={selectedLayerConfig.name}
onChange={onNameChange}
isInvalid={invalid}
fullWidth={true}
/>
</EuiFormRow>

<EuiFormRow label="Description">
<EuiFormRow label="Description" fullWidth={true}>
<EuiTextArea
placeholder="Enter description"
value={selectedLayerConfig.description}
onChange={onDescriptionChange}
fullWidth={true}
/>
</EuiFormRow>

<EuiFormRow label="Zoom levels">
<EuiFormRow label="Zoom levels" fullWidth={true}>
<EuiDualRange
min={MAP_DEFAULT_MIN_ZOOM}
max={MAP_DEFAULT_MAX_ZOOM}
@@ -133,9 +136,10 @@ export const LayerBasicSettings = ({
maxInputProps={{ 'aria-label': 'Max value' }}
onChange={onZoomChange}
aria-label="DualRange with inputs for zoom level"
fullWidth={true}
/>
</EuiFormRow>
<EuiFormRow label="Opacity">
<EuiFormRow label="Opacity" fullWidth={true}>
<EuiRange
min={MAP_LAYER_DEFAULT_MIN_OPACITY}
max={MAP_LAYER_DEFAULT_MAX_OPACITY}
@@ -145,6 +149,7 @@ export const LayerBasicSettings = ({
showInput
aria-label="Range for layer opacity"
append={<EuiFormLabel>%</EuiFormLabel>}
fullWidth={true}
/>
</EuiFormRow>
</EuiForm>
350 changes: 7 additions & 343 deletions yarn.lock

Large diffs are not rendered by default.

0 comments on commit 4a86a27

Please sign in to comment.