added select box to dimension attributes if multiple widgets selected

- closes #307
ioBroker · Jan 16, 2024 · c8991bd · c8991bd
1 parent 10e412d
commit c8991bd
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -257,6 +257,9 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
     ### **WORK IN PROGRESS**
 -->
 ## Changelog
+### **WORK IN PROGRESS**
+* (foxriver76) added select box to dimension attributes if multiple widgets selected
+
 ### 2.9.18 (2024-01-15)
 * (foxriver76) fixed issue, that old attributes value is shown in some scenarios
 * (foxriver76) dedicated permission system extended to view level

diff --git a/src/src/Attributes/Widget/WidgetField.jsx b/src/src/Attributes/Widget/WidgetField.jsx
@@ -33,7 +33,7 @@ import {
 import TextDialog from './TextDialog';
 import MaterialIconSelector from '../../Components/MaterialIconSelector';
 import { findWidgetUsages } from '../../Vis/visUtils';
-import { store, recalculateFields } from '../../Store';
+import { store, recalculateFields, selectWidget } from '../../Store';
 import { deepClone } from '../../Utils/utils';
 
 const POSSIBLE_UNITS = ['px', '%', 'em', 'rem', 'vh', 'vw', 'vmin', 'vmax', 'ex', 'ch', 'cm', 'mm', 'in', 'pt', 'pc'];
@@ -704,32 +704,61 @@ const WidgetField = props => {
             }
         }
 
-        return <TextField
-            variant="standard"
-            fullWidth
-            placeholder={isDifferent ? t('different') : null}
-            error={!!error}
-            helperText={typeof error === 'string' ? I18n.t(error) : null}
-            disabled={disabled}
-            InputProps={{
-                classes: { input: Utils.clsx(props.classes.clearPadding, props.classes.fieldContent) },
-                endAdornment: !isDifferent && !customValue ? <Button
-                    size="small"
-                    disabled={disabled}
-                    title={t('Convert %s to %s', unit, unit === '%' ? 'px' : '%')}
-                    onClick={() => {
-                        if (unit !== '%') {
-                            props.onPxToPercent(props.selectedWidgets, field.name, newValues => change(newValues[0]));
-                        } else {
-                            props.onPercentToPx(props.selectedWidgets, field.name, newValues => change(newValues[0]));
-                        }
-                    }}
-                >
-                    {unit}
-                </Button> : null,
-            }}
-            value={value}
-            onChange={e => change(e.target.value)}
+        /** @type string[] */
+        const options = [];
+
+        if (isDifferent && value === '') {
+            for (const wid of props.selectedWidgets) {
+                const selectedWidget = selectWidget(store.getState(), props.selectedView, wid);
+                let val = selectedWidget.style[field.name];
+                val = typeof val === 'number' ? val.toString() : val;
+
+                if (val !== undefined && val !== '' && !options.includes(val)) {
+                    options.push(val);
+                }
+            }
+        }
+
+        const strValue = typeof value === 'number' ? value.toString() : value;
+
+        if (options.length && value !== '' && !options.includes(strValue)) {
+            options.push(strValue);
+        }
+
+        return <Autocomplete
+            options={options}
+            freeSolo
+            value={strValue}
+            onChange={((e, aVal) => change(aVal))}
+            renderInput={params => <TextField
+                {...params}
+                variant="standard"
+                fullWidth
+                placeholder={isDifferent ? t('different') : null}
+                error={!!error}
+                helperText={typeof error === 'string' ? I18n.t(error) : null}
+                disabled={disabled}
+                InputProps={{
+                    ...params.InputProps,
+                    classes: { input: Utils.clsx(props.classes.clearPadding, props.classes.fieldContent) },
+                    endAdornment: !isDifferent && !customValue ? <Button
+                        size="small"
+                        disabled={disabled}
+                        title={t('Convert %s to %s', unit, unit === '%' ? 'px' : '%')}
+                        onClick={() => {
+                            if (unit !== '%') {
+                                props.onPxToPercent(props.selectedWidgets, field.name, newValues => change(newValues[0]));
+                            } else {
+                                props.onPercentToPx(props.selectedWidgets, field.name, newValues => change(newValues[0]));
+                            }
+                        }}
+                    >
+                        {unit}
+                    </Button> : null,
+                }}
+                value={value}
+                onChange={e => change(e.target.value)}
+            />}
         />;
     }