ioBroker · foxriver76 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/README.md b/README.md
@@ -265,6 +265,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 ## Changelog
 ### **WORK IN PROGRESS**
 * (foxriver76) fixed issue that last image is never shown in image8 widget
+* (foxriver76) added possibility to define background and title color for jqui dialog
 * (foxriver76) make it possible to click through signal image if in front of widget
 
 ### 2.9.32 (2024-02-16)

diff --git a/src/src/Vis/Widgets/JQui/JQuiButton.jsx b/src/src/Vis/Widgets/JQui/JQuiButton.jsx
@@ -131,6 +131,7 @@ class JQuiButton extends VisRxWidget {
                 },
                 {
                     name: 'style',
+                    label: 'Style',
                     hidden: data => !!data.externalDialog,
                     fields: [
                         { name: 'no_style', type: 'checkbox', hidden: data => data.jquery_style },
@@ -253,6 +254,7 @@ class JQuiButton extends VisRxWidget {
                         },
                         {
                             name: 'dialog_class',
+                            label: 'CSS Class',
                             type: 'text',
                             hidden: data => !data.html_dialog && !data.contains_view,
                         },
@@ -277,6 +279,18 @@ class JQuiButton extends VisRxWidget {
                             type: 'checkbox',
                             hidden: data => !data.html_dialog && !data.contains_view && !!data.closeOnClick,
                         },
+                        {
+                            name: 'dialogBackgroundColor',
+                            label: 'Background color',
+                            type: 'color',
+                            hidden: data => !data.html_dialog && !data.contains_view,
+                        },
+                        {
+                            name: 'dialogTitleColor',
+                            type: 'color',
+                            label: 'Text color',
+                            hidden: data => !data.html_dialog && !data.contains_view,
+                        },
                         /*
                         {
                             name: 'dialog_top',
@@ -549,7 +563,9 @@ class JQuiButton extends VisRxWidget {
     }
 
     renderRxDialog(dialogStyle, content) {
+        console.log('test');
         if (this.state.rxData.modal) {
+            console.log('in');
             return <Dialog
                 // fullWidth
                 maxWidth="xl"
@@ -562,19 +578,22 @@ class JQuiButton extends VisRxWidget {
                     }
                 }}
             >
-                {this.state.rxData.title ? <DialogTitle>{this.state.rxData.title}</DialogTitle> : null}
-                {!this.state.rxData.hideCloseButton || !this.state.rxData.closeOnClick ? <IconButton
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        zIndex: 800,
-                    }}
-                    onClick={() => this.showDialog(false)}
-                >
-                    <Close />
-                </IconButton> : null}
-                <DialogContent>{content}</DialogContent>
+                <div style={{ backgroundColor: this.state.rxData.dialogBackgroundColor }}>
+                    {this.state.rxData.title ? <DialogTitle sx={{ color: this.state.rxData.dialogTitleColor }}>{this.state.rxData.title}</DialogTitle> : null}
+                    {!this.state.rxData.hideCloseButton || !this.state.rxData.closeOnClick ? <IconButton
+                        sx={{ color: this.state.rxData.dialogTitleColor }}
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            zIndex: 800,
+                        }}
+                        onClick={() => this.showDialog(false)}
+                    >
+                        <Close />
+                    </IconButton> : null}
+                    <DialogContent>{content}</DialogContent>
+                </div>
             </Dialog>;
         }
 
@@ -589,6 +608,7 @@ class JQuiButton extends VisRxWidget {
             dialogStyle.minHeight = 100;
         }
 
+        dialogStyle.backgroundColor = 'blue';
         const paperStyle = { ...dialogStyle };
         delete paperStyle.top;
         delete paperStyle.left;
@@ -607,7 +627,7 @@ class JQuiButton extends VisRxWidget {
             }}
         >
             <Paper
-                style={paperStyle}
+                style={{ ...paperStyle, background: 'red !important' }}
             >
                 {this.state.rxData.title ?
                     <DialogTitle style={{ padding: '16px 0 0 0' }}>

diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json
@@ -359,6 +359,7 @@
   "Show view": "Seite zeigen",
   "Specify filter to see more icons": "EinenFilter angeben, um weitere Symbole anzuzeigen",
   "States Debounce Time (millis)": "Zustands-Entprellzeit (Millisekunden)",
+  "Style": "Stil",
   "Su": "So",
   "Surface Duo - Landscape": "Surface Duo - Landschaft",
   "Surface Duo - Portrait": "Surface Duo – Hochformat",

diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json
@@ -359,6 +359,7 @@
   "Show view": "Show view",
   "Specify filter to see more icons": "Specify filter to see more icons",
   "States Debounce Time (millis)": "States Debounce Time (millis)",
+  "Style": "Style",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Landscape",
   "Surface Duo - Portrait": "Surface Duo - Portrait",

diff --git a/src/src/i18n/es.json b/src/src/i18n/es.json
@@ -359,6 +359,7 @@
   "Show view": "Mostrar vista",
   "Specify filter to see more icons": "Especificar filtro para ver más iconos",
   "States Debounce Time (millis)": "Estados Tiempo de rebote (milis)",
+  "Style": "Estilo",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Paisaje",
   "Surface Duo - Portrait": "Surface Duo - Retrato",

diff --git a/src/src/i18n/fr.json b/src/src/i18n/fr.json
@@ -359,6 +359,7 @@
   "Show view": "Afficher la vue",
   "Specify filter to see more icons": "Spécifiez le filtre pour voir plus d'icônes",
   "States Debounce Time (millis)": "Temps anti-rebond des États (millis)",
+  "Style": "Style",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Paysage",
   "Surface Duo - Portrait": "Surface Duo - Portrait",

diff --git a/src/src/i18n/it.json b/src/src/i18n/it.json
@@ -359,6 +359,7 @@
   "Show view": "Mostra vista",
   "Specify filter to see more icons": "Specifica il filtro per vedere più icone",
   "States Debounce Time (millis)": "Tempo di rimbalzo degli Stati (milli)",
+  "Style": "Stile",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Paesaggio",
   "Surface Duo - Portrait": "Surface Duo - Ritratto",

diff --git a/src/src/i18n/nl.json b/src/src/i18n/nl.json
@@ -359,6 +359,7 @@
   "Show view": "Toon weergave",
   "Specify filter to see more icons": "Geef een filter op om meer pictogrammen te zien",
   "States Debounce Time (millis)": "Debouncetijd van staten (millis)",
+  "Style": "Stijl",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Liggend",
   "Surface Duo - Portrait": "Surface Duo - Portret",

diff --git a/src/src/i18n/pl.json b/src/src/i18n/pl.json
@@ -359,6 +359,7 @@
   "Show view": "Pokaż widok",
   "Specify filter to see more icons": "Określ filtr, aby zobaczyć więcej ikon",
   "States Debounce Time (millis)": "Stany odbicia czasu (milis)",
+  "Style": "Styl",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo — krajobraz",
   "Surface Duo - Portrait": "Surface Duo — portret",

diff --git a/src/src/i18n/pt.json b/src/src/i18n/pt.json
@@ -359,6 +359,7 @@
   "Show view": "Mostrar visualização",
   "Specify filter to see more icons": "Especifique o filtro para ver mais ícones",
   "States Debounce Time (millis)": "Estados Debounce Time (milis)",
+  "Style": "Estilo",
   "Su": "Su",
   "Surface Duo - Landscape": "Surface Duo - Paisagem",
   "Surface Duo - Portrait": "Surface Duo - Retrato",

diff --git a/src/src/i18n/ru.json b/src/src/i18n/ru.json
@@ -359,6 +359,7 @@
   "Show view": "Показать страницу",
   "Specify filter to see more icons": "Укажите фильтр, чтобы увидеть больше значков",
   "States Debounce Time (millis)": "Время игнорирования дребезга (млн)",
+  "Style": "Стиль",
   "Su": "Вс",
   "Surface Duo - Landscape": "Surface Duo - Пейзаж",
   "Surface Duo - Portrait": "Surface Duo — портрет",

diff --git a/src/src/i18n/uk.json b/src/src/i18n/uk.json
@@ -359,6 +359,7 @@
   "Show view": "Показати вид",
   "Specify filter to see more icons": "Укажіть фільтр, щоб побачити більше значків",
   "States Debounce Time (millis)": "Час усунення дребезгу в штатах (мілісекунди)",
+  "Style": "Стиль",
   "Su": "Нд",
   "Surface Duo - Landscape": "Surface Duo - Пейзаж",
   "Surface Duo - Portrait": "Surface Duo – Портрет",

diff --git a/src/src/i18n/zh-cn.json b/src/src/i18n/zh-cn.json
@@ -359,6 +359,7 @@
   "Show view": "显示视图",
   "Specify filter to see more icons": "指定过滤器以查看更多图标",
   "States Debounce Time (millis)": "状态去抖时间（毫秒）",
+  "Style": "风格",
   "Su": "苏",
   "Surface Duo - Landscape": "Surface Duo - 风景",
   "Surface Duo - Portrait": "Surface Duo - 纵向",