From c8991bd9c72532be27d0791b6ee8fa2a1771e236 Mon Sep 17 00:00:00 2001 From: foxriver76 Date: Tue, 16 Jan 2024 08:09:55 +0100 Subject: [PATCH] added select box to dimension attributes if multiple widgets selected - closes #307 --- README.md | 3 + src/src/Attributes/Widget/WidgetField.jsx | 83 +++++++++++++++-------- 2 files changed, 59 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index a43a673c..a6fe4c9b 100644 --- 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 index 1f3c1794..bcc7e0cc 100644 --- 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 { - if (unit !== '%') { - props.onPxToPercent(props.selectedWidgets, field.name, newValues => change(newValues[0])); - } else { - props.onPercentToPx(props.selectedWidgets, field.name, newValues => change(newValues[0])); - } - }} - > - {unit} - : 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 change(aVal))} + renderInput={params => { + if (unit !== '%') { + props.onPxToPercent(props.selectedWidgets, field.name, newValues => change(newValues[0])); + } else { + props.onPercentToPx(props.selectedWidgets, field.name, newValues => change(newValues[0])); + } + }} + > + {unit} + : null, + }} + value={value} + onChange={e => change(e.target.value)} + />} />; }