Migrated palette to TS

ioBroker · Apr 27, 2024 · 52fe07b · 52fe07b
1 parent 438e801
commit 52fe07b
Show file tree

Hide file tree

Showing 12 changed files with 208 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -264,6 +264,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**
+* (bluefox) Allowed applying styles to jqui buttons
+
 ### 2.9.52 (2024-04-25)
 * (bluefox) Navigation was improved: adjustable menu width and bulk edit were added
 

diff --git a/packages/iobroker.vis-2/src/src/Attributes/View/AllViewsDialog.tsx b/packages/iobroker.vis-2/src/src/Attributes/View/AllViewsDialog.tsx
@@ -5,6 +5,7 @@ import {
     Button,
     Dialog, DialogActions,
     DialogContent, DialogTitle, IconButton,
+    Tooltip,
 } from '@mui/material';
 
 import { Close, DragHandle, FormatPaint } from '@mui/icons-material';
@@ -138,19 +139,23 @@ export default function showAllViewsDialog(props: ShowAllViewsDialogProps) {
                                 <div style={{ display: 'inline-block', minWidth: 100, flexGrow: 1 }}>
                                     {item.control}
                                 </div>
-                                {applyToAllButtonVisible ? <IconButton
-                                    size="small"
-                                    onClick={() => {
-                                        const newProject: Project = deepClone(props.project) as Project;
-                                        const _viewsToChange = getViewsWithDifferentValues(props.project, props.field, item.view, null, props.checkFunction) || [];
-                                        _viewsToChange?.forEach(_view => {
-                                            (newProject[_view].settings as Record<string, any>)[props.field.attr] = (newProject[item.view].settings as Record<string, any>)[props.field.attr];
-                                        });
-                                        props.changeProject(newProject);
-                                    }}
+                                {applyToAllButtonVisible ? <Tooltip
+                                    title={I18n.t('Apply to all views')}
+                                    classes={{ tooltip: 'vis-tooltip' }}
                                 >
-                                    <FormatPaint />
-                                </IconButton> : null}
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => {
+                                            const newProject: Project = deepClone(props.project) as Project;
+                                            const _viewsToChange = getViewsWithDifferentValues(props.project, props.field, item.view, null, props.checkFunction) || [];
+                                            _viewsToChange?.forEach(_view => {
+                                                (newProject[_view].settings as Record<string, any>)[props.field.attr] = (newProject[item.view].settings as Record<string, any>)[props.field.attr];
+                                            });
+                                            props.changeProject(newProject);
+                                        }}
+                                    >
+                                        <FormatPaint />
+                                    </IconButton></Tooltip> : null}
                             </div>}
                         </Draggable>)}
                         {dropProvided.placeholder}

diff --git a/packages/iobroker.vis-2/src/src/Attributes/Widget/index.jsx b/packages/iobroker.vis-2/src/src/Attributes/Widget/index.jsx
@@ -1008,7 +1008,7 @@ class Widget extends Component {
             classes={{
                 root: Utils.clsx(classes.clearPadding, this.state.accordionOpen[group.name]
                     ? classes.groupSummaryExpanded : classes.groupSummary, classes.lightedPanel),
-                content:  Utils.clsx(classes.clearPadding, this.state.accordionOpen[group.name] && classes.accordionOpenedSummary),
+                content:  Utils.clsx(classes.clearPadding, this.state.accordionOpen[group.name] && group.hasValues && classes.accordionOpenedSummary),
                 expanded: classes.clearPadding,
                 expandIcon: classes.clearPadding,
             }}

diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiBinaryState.jsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiBinaryState.jsx
@@ -29,6 +29,7 @@ import {
 
 // eslint-disable-next-line import/no-cycle
 import VisRxWidget from '../../visRxWidget';
+import VisBaseWidget from "@/Vis/visBaseWidget";
 
 class JQuiBinaryState extends VisRxWidget {
     constructor(props) {
@@ -778,10 +779,17 @@ class JQuiBinaryState extends VisRxWidget {
         if (!type && this.props.tpl === 'tplJquiRadio') {
             type = 'radio';
         }
+        if (buttonStyle.borderWidth) {
+            buttonStyle.borderWidth = VisBaseWidget.correctStylePxValue(buttonStyle.borderWidth);
+        }
+        if (buttonStyle.fontSize) {
+            buttonStyle.fontSize = VisBaseWidget.correctStylePxValue(buttonStyle.fontSize);
+        }
 
         // extra no rxData here, as it is not possible to set it with bindings
         buttonStyle.width = '100%';
         buttonStyle.height = '100%';
+        buttonStyle.minWidth = 'unset';
         let content;
         const bodyStyle = { textAlign: 'center' };
         if (type === 'radio') {

diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiButton.jsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiButton.jsx
@@ -36,6 +36,7 @@ import {
 import { isVarFinite } from '../../../Utils/utils';
 // eslint-disable-next-line import/no-cycle
 import VisRxWidget from '../../visRxWidget';
+import VisBaseWidget from "@/Vis/visBaseWidget";
 
 class JQuiButton extends VisRxWidget {
     constructor(props) {
@@ -762,6 +763,12 @@ class JQuiButton extends VisRxWidget {
                 buttonStyle[attr] = value;
             }
         });
+        if (buttonStyle.borderWidth) {
+            buttonStyle.borderWidth = VisBaseWidget.correctStylePxValue(buttonStyle.borderWidth);
+        }
+        if (buttonStyle.fontSize) {
+            buttonStyle.fontSize = VisBaseWidget.correctStylePxValue(buttonStyle.fontSize);
+        }
 
         // the following widgets are resizable by default
         let visResizable = this.state.data.visResizable;
@@ -787,6 +794,7 @@ class JQuiButton extends VisRxWidget {
         } else {
             buttonStyle.padding = this.state.rxData.padding;
         }
+        buttonStyle.minWidth = 'unset';
 
         let buttonText;
         if (this.state.rxData.html) {

diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiButtonDialogClose.jsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiButtonDialogClose.jsx
@@ -27,6 +27,7 @@ import {
 
 // eslint-disable-next-line import/no-cycle
 import VisRxWidget from '../../visRxWidget';
+import VisBaseWidget from "@/Vis/visBaseWidget";
 
 class JQuiButtonDialogClose extends VisRxWidget {
     constructor(props) {
@@ -284,6 +285,13 @@ class JQuiButtonDialogClose extends VisRxWidget {
                 buttonStyle[attr] = value;
             }
         });
+        buttonStyle.minWidth = 'unset';
+        if (buttonStyle.borderWidth) {
+            buttonStyle.borderWidth = VisBaseWidget.correctStylePxValue(buttonStyle.borderWidth);
+        }
+        if (buttonStyle.fontSize) {
+            buttonStyle.fontSize = VisBaseWidget.correctStylePxValue(buttonStyle.fontSize);
+        }
 
         // extra no rxData here, as it is not possible to set it with bindings
         if (this.state.data.visResizable) {

diff --git a/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiState.jsx b/packages/iobroker.vis-2/src/src/Vis/Widgets/JQui/JQuiState.jsx
@@ -38,6 +38,7 @@ import {
 import VisRxWidget from '../../visRxWidget';
 import BulkEditor from './BulkEditor';
 import { deepClone } from '../../../Utils/utils';
+import VisBaseWidget from "@/Vis/visBaseWidget";
 
 class JQuiState extends VisRxWidget {
     static getWidgetInfo() {
@@ -539,6 +540,13 @@ class JQuiState extends VisRxWidget {
                 buttonStyle[attr] = value;
             }
         });
+        buttonStyle.minWidth = 'unset';
+        if (buttonStyle.borderWidth) {
+            buttonStyle.borderWidth = VisBaseWidget.correctStylePxValue(buttonStyle.borderWidth);
+        }
+        if (buttonStyle.fontSize) {
+            buttonStyle.fontSize = VisBaseWidget.correctStylePxValue(buttonStyle.fontSize);
+        }
 
         let content;
         if (