@iobroker/dm-gui-components 10.0.22 → 10.1.0

package/README.md

@@ -197,6 +197,19 @@ const indicator = {
 -->
 
 ## Changelog
+### 10.1.0 (2026-11-05)
+- (@GermanBluefox) Redesigned the device cards (big and small): device tile with a live connection LED, compact status pills that are only tinted when a value needs attention, a facts grid and an action footer
+- (@GermanBluefox) Added animations: the animated icons of `@iobroker/gui-components` (refresh, filter, delete, upload, folder, copy, play/pause, result) and own ones (battery, signal and update icons, hover animations of the actions, value ticks, LED pulse on status changes, snapping switch)
+- (@GermanBluefox) Added: a successful action is confirmed with a check mark, the error toast shows an animated cross
+- (@GermanBluefox) Changed: "No response from the backend" and the copy confirmations no longer use `window.alert`
+- (@GermanBluefox) Added: "Reset filters" button in the toolbar and in the empty list
+- (@GermanBluefox) Redesigned the instance selection and the empty states
+- (@GermanBluefox) Animations respect `prefers-reduced-motion`
+- (@GermanBluefox) Corrected: a slider or select control without `stateId` never got its range or options and showed only "..."
+
+### 10.0.23 (2026-09-21)
+- (@BenAhrdt) Supported explicit line breaks in status indicator tooltips
+
 ### 10.0.22 (2026-09-18)
 - (@GermanBluefox) Updated packages
 - (@GermanBluefox) Renamed `Config manager` to `Konfig-Manager` (DE)

package/build/AnimatedIcons.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Own animated icons of the device manager, in the style of the animated icons of `@iobroker/gui-components`:
+ * plain CSS/SVG, `currentColor`, the size of the MUI icons and less motion if the user asked for it.
+ */
+import React, { type CSSProperties } from 'react';
+interface OwnIconProps {
+    className?: string;
+    style?: CSSProperties;
+    /** Accessible name. Without it, the icon is decorative. */
+    ariaLabel?: string;
+}
+/** Color of the charge of a battery with this level */
+export declare function batteryColor(level: number): string;
+export interface IconBatteryProps extends OwnIconProps {
+    /** Charge in percent. Without it the battery is shown without a level (e.g. for a voltage). */
+    level?: number;
+    /** The battery is charging: the charge fills up again and again */
+    charging?: boolean;
+}
+/** Battery whose charge slides to the new level when it changes */
+export declare function IconBattery(props: IconBatteryProps): React.JSX.Element;
+export interface IconSignalProps extends OwnIconProps {
+    /** Signal strength (RSSI) in dBm */
+    rssi: number;
+}
+/** Four bars for the signal strength. When it changes, the bars light up or go out one after another. */
+export declare function IconSignal(props: IconSignalProps): React.JSX.Element;
+/** An update can be installed: the arrow drops into the tray while the mouse is over the icon or its button */
+export declare function IconUpdate(props: OwnIconProps): React.JSX.Element;
+/**
+ * Lets the new value of a status slide in when it changes (not on the first render).
+ *
+ * @param value the shown value
+ * @returns the ref for the element that shows the value
+ */
+export declare function useValueTick<T extends HTMLElement>(value: unknown): React.RefObject<T | null>;
+export {};

package/build/AnimatedIcons.js

@@ -0,0 +1,108 @@
+/**
+ * Own animated icons of the device manager, in the style of the animated icons of `@iobroker/gui-components`:
+ * plain CSS/SVG, `currentColor`, the size of the MUI icons and less motion if the user asked for it.
+ */
+import React, { useEffect, useRef } from 'react';
+import { useDmStyles } from './styles';
+function svgProps(props, className) {
+    return {
+        viewBox: '0 0 24 24',
+        width: '1em',
+        height: '1em',
+        className: `${className}${props.className ? ` ${props.className}` : ''}`,
+        style: { fontSize: '1.5rem', flexShrink: 0, ...props.style },
+        role: props.ariaLabel ? 'img' : undefined,
+        'aria-label': props.ariaLabel,
+        'aria-hidden': props.ariaLabel ? undefined : true,
+    };
+}
+/** True if the user asked the system for less motion */
+function prefersReducedMotion() {
+    return !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+/** Color of the charge of a battery with this level */
+export function batteryColor(level) {
+    if (level > 55) {
+        return 'var(--dm-ok, #00ac00)';
+    }
+    if (level > 25) {
+        return '#e6b800';
+    }
+    if (level > 10) {
+        return 'var(--dm-warn, #da8200)';
+    }
+    return 'var(--dm-err, #ff0000)';
+}
+/** Battery whose charge slides to the new level when it changes */
+export function IconBattery(props) {
+    useDmStyles();
+    const known = typeof props.level === 'number' && !props.charging;
+    const level = known ? Math.max(0, Math.min(100, props.level)) : 100;
+    // An empty battery still shows a sliver, so that its color is visible
+    const scale = known ? Math.max(0.08, level / 100) : 1;
+    let className = 'dm-bat';
+    if (props.charging) {
+        className += ' dm-bat-charging';
+    }
+    else if (!known) {
+        className += ' dm-bat-unknown';
+    }
+    const svg = svgProps(props, className);
+    return (React.createElement("svg", { ...svg, style: { ...svg.style, '--dm-bat': known ? batteryColor(level) : undefined } },
+        React.createElement("rect", { className: "dm-bat-body", x: "2.8", y: "6.8", width: "16.4", height: "10.4", rx: "2.2" }),
+        React.createElement("rect", { className: "dm-bat-cap", x: "19.9", y: "9.9", width: "2", height: "4.2", rx: "0.8" }),
+        React.createElement("rect", { className: "dm-bat-fill", x: "4.6", y: "8.6", width: "12.8", height: "6.8", rx: "0.9", style: { transform: `scaleX(${scale})` } }),
+        props.charging ? (React.createElement("path", { className: "dm-bat-bolt", d: "M11.9 7.4 8.4 12.6h2.9l-.6 4 3.6-5.3h-2.9z" })) : null));
+}
+/** Number of the lit bars for a signal strength in dBm */
+function signalBars(rssi) {
+    if (rssi >= -55) {
+        return 4;
+    }
+    if (rssi >= -67) {
+        return 3;
+    }
+    if (rssi >= -80) {
+        return 2;
+    }
+    return 1;
+}
+/** Four bars for the signal strength. When it changes, the bars light up or go out one after another. */
+export function IconSignal(props) {
+    useDmStyles();
+    const bars = signalBars(props.rssi);
+    return (React.createElement("svg", { ...svgProps(props, 'dm-sig') }, [0, 1, 2, 3].map(i => (React.createElement("rect", { key: i, className: i < bars ? 'dm-sig-on' : undefined, x: 3 + i * 5, y: 16 - i * 4, width: "3.2", height: 4 + i * 4, rx: "1" })))));
+}
+/** An update can be installed: the arrow drops into the tray while the mouse is over the icon or its button */
+export function IconUpdate(props) {
+    useDmStyles();
+    return (React.createElement("svg", { ...svgProps(props, 'dm-upd') },
+        React.createElement("path", { d: "M4 14.5v3.2A2.3 2.3 0 0 0 6.3 20h11.4a2.3 2.3 0 0 0 2.3-2.3v-3.2" }),
+        React.createElement("path", { className: "dm-upd-arrow", d: "M12 3.5v10.5M7.6 9.8 12 14.2l4.4-4.4" })));
+}
+/**
+ * Lets the new value of a status slide in when it changes (not on the first render).
+ *
+ * @param value the shown value
+ * @returns the ref for the element that shows the value
+ */
+export function useValueTick(value) {
+    const ref = useRef(null);
+    const previous = useRef(value);
+    useEffect(() => {
+        if (Object.is(previous.current, value)) {
+            return;
+        }
+        const goesUp = typeof value === 'number' && typeof previous.current === 'number' && value > previous.current;
+        previous.current = value;
+        if (!ref.current?.animate || prefersReducedMotion()) {
+            return;
+        }
+        ref.current.animate([
+            { transform: `translateY(${goesUp ? 45 : -45}%)`, opacity: 0 },
+            { transform: 'none', opacity: 1 },
+        ], { duration: 300, easing: 'cubic-bezier(0.2, 0.8, 0.3, 1)' });
+    }, [value]);
+    return ref;
+}
+//# sourceMappingURL=AnimatedIcons.js.map

package/build/AnimatedIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedIcons.js","sourceRoot":"./src/","sources":["AnimatedIcons.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Own animated icons of the device manager, in the style of the animated icons of `@iobroker/gui-components`:\n * plain CSS/SVG, `currentColor`, the size of the MUI icons and less motion if the user asked for it.\n */\nimport React, { useEffect, useRef, type CSSProperties } from 'react';\n\nimport { useDmStyles } from './styles';\n\ninterface OwnIconProps {\n    className?: string;\n    style?: CSSProperties;\n    /** Accessible name. Without it, the icon is decorative. */\n    ariaLabel?: string;\n}\n\nfunction svgProps(props: OwnIconProps, className: string): React.SVGProps<SVGSVGElement> {\n    return {\n        viewBox: '0 0 24 24',\n        width: '1em',\n        height: '1em',\n        className: `${className}${props.className ? ` ${props.className}` : ''}`,\n        style: { fontSize: '1.5rem', flexShrink: 0, ...props.style },\n        role: props.ariaLabel ? 'img' : undefined,\n        'aria-label': props.ariaLabel,\n        'aria-hidden': props.ariaLabel ? undefined : true,\n    };\n}\n\n/** True if the user asked the system for less motion */\nfunction prefersReducedMotion(): boolean {\n    return !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Color of the charge of a battery with this level */\nexport function batteryColor(level: number): string {\n    if (level > 55) {\n        return 'var(--dm-ok, #00ac00)';\n    }\n    if (level > 25) {\n        return '#e6b800';\n    }\n    if (level > 10) {\n        return 'var(--dm-warn, #da8200)';\n    }\n    return 'var(--dm-err, #ff0000)';\n}\n\nexport interface IconBatteryProps extends OwnIconProps {\n    /** Charge in percent. Without it the battery is shown without a level (e.g. for a voltage). */\n    level?: number;\n    /** The battery is charging: the charge fills up again and again */\n    charging?: boolean;\n}\n\n/** Battery whose charge slides to the new level when it changes */\nexport function IconBattery(props: IconBatteryProps): React.JSX.Element {\n    useDmStyles();\n    const known = typeof props.level === 'number' && !props.charging;\n    const level = known ? Math.max(0, Math.min(100, props.level!)) : 100;\n    // An empty battery still shows a sliver, so that its color is visible\n    const scale = known ? Math.max(0.08, level / 100) : 1;\n    let className = 'dm-bat';\n    if (props.charging) {\n        className += ' dm-bat-charging';\n    } else if (!known) {\n        className += ' dm-bat-unknown';\n    }\n    const svg = svgProps(props, className);\n    return (\n        <svg\n            {...svg}\n            style={{ ...svg.style, '--dm-bat': known ? batteryColor(level) : undefined } as CSSProperties}\n        >\n            <rect\n                className=\"dm-bat-body\"\n                x=\"2.8\"\n                y=\"6.8\"\n                width=\"16.4\"\n                height=\"10.4\"\n                rx=\"2.2\"\n            />\n            <rect\n                className=\"dm-bat-cap\"\n                x=\"19.9\"\n                y=\"9.9\"\n                width=\"2\"\n                height=\"4.2\"\n                rx=\"0.8\"\n            />\n            <rect\n                className=\"dm-bat-fill\"\n                x=\"4.6\"\n                y=\"8.6\"\n                width=\"12.8\"\n                height=\"6.8\"\n                rx=\"0.9\"\n                style={{ transform: `scaleX(${scale})` }}\n            />\n            {props.charging ? (\n                <path\n                    className=\"dm-bat-bolt\"\n                    d=\"M11.9 7.4 8.4 12.6h2.9l-.6 4 3.6-5.3h-2.9z\"\n                />\n            ) : null}\n        </svg>\n    );\n}\n\n/** Number of the lit bars for a signal strength in dBm */\nfunction signalBars(rssi: number): number {\n    if (rssi >= -55) {\n        return 4;\n    }\n    if (rssi >= -67) {\n        return 3;\n    }\n    if (rssi >= -80) {\n        return 2;\n    }\n    return 1;\n}\n\nexport interface IconSignalProps extends OwnIconProps {\n    /** Signal strength (RSSI) in dBm */\n    rssi: number;\n}\n\n/** Four bars for the signal strength. When it changes, the bars light up or go out one after another. */\nexport function IconSignal(props: IconSignalProps): React.JSX.Element {\n    useDmStyles();\n    const bars = signalBars(props.rssi);\n    return (\n        <svg {...svgProps(props, 'dm-sig')}>\n            {[0, 1, 2, 3].map(i => (\n                <rect\n                    key={i}\n                    className={i < bars ? 'dm-sig-on' : undefined}\n                    x={3 + i * 5}\n                    y={16 - i * 4}\n                    width=\"3.2\"\n                    height={4 + i * 4}\n                    rx=\"1\"\n                />\n            ))}\n        </svg>\n    );\n}\n\n/** An update can be installed: the arrow drops into the tray while the mouse is over the icon or its button */\nexport function IconUpdate(props: OwnIconProps): React.JSX.Element {\n    useDmStyles();\n    return (\n        <svg {...svgProps(props, 'dm-upd')}>\n            <path d=\"M4 14.5v3.2A2.3 2.3 0 0 0 6.3 20h11.4a2.3 2.3 0 0 0 2.3-2.3v-3.2\" />\n            <path\n                className=\"dm-upd-arrow\"\n                d=\"M12 3.5v10.5M7.6 9.8 12 14.2l4.4-4.4\"\n            />\n        </svg>\n    );\n}\n\n/**\n * Lets the new value of a status slide in when it changes (not on the first render).\n *\n * @param value the shown value\n * @returns the ref for the element that shows the value\n */\nexport function useValueTick<T extends HTMLElement>(value: unknown): React.RefObject<T | null> {\n    const ref = useRef<T>(null);\n    const previous = useRef(value);\n    useEffect(() => {\n        if (Object.is(previous.current, value)) {\n            return;\n        }\n        const goesUp = typeof value === 'number' && typeof previous.current === 'number' && value > previous.current;\n        previous.current = value;\n        if (!ref.current?.animate || prefersReducedMotion()) {\n            return;\n        }\n        ref.current.animate(\n            [\n                { transform: `translateY(${goesUp ? 45 : -45}%)`, opacity: 0 },\n                { transform: 'none', opacity: 1 },\n            ],\n            { duration: 300, easing: 'cubic-bezier(0.2, 0.8, 0.3, 1)' },\n        );\n    }, [value]);\n    return ref;\n}\n"]}

package/build/Communication.d.ts

@@ -49,6 +49,8 @@ export type CommunicationState = {
     showInput: InputAction | null;
     inputValue: string | boolean | number | null;
     selectedInstance: string;
+    /** Changes after each successful action: a check mark confirms it for a moment. 0 - nothing to show */
+    resultFlash?: number;
 };
 /**
  * Communication Component
@@ -56,12 +58,15 @@ export type CommunicationState = {
 export default class Communication<P extends CommunicationProps, S extends CommunicationState> extends Component<P, S> {
     private protocol;
     private responseTimeout;
+    private resultFlashTimeout;
     instanceHandler: (action: ActionBase) => () => void;
     deviceHandler: (deviceId: DeviceId, action: ActionBase) => () => void;
     controlHandler: (deviceId: DeviceId, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
     controlStateHandler: (deviceId: DeviceId, control: ControlBase) => () => Promise<ioBroker.State | null>;
     constructor(props: P);
     componentWillUnmount(): void;
+    /** Confirms a successful action: the spinner is followed by a check mark that draws itself */
+    showResultFlash(): void;
     loadAllData(): Promise<void>;
     loadDeviceList(): void;
     updateDevice(_update: DeviceInfo): void;
@@ -76,7 +81,9 @@ export default class Communication<P extends CommunicationProps, S extends Commu
     loadInstanceInfos(): Promise<InstanceDetails>;
     renderMessageDialog(): React.JSX.Element | null;
     renderConfirmDialog(): React.JSX.Element | null;
+    /** The toast shows errors: the cross draws itself and shakes */
     renderSnackbar(): React.JSX.Element;
+    renderResultFlash(): React.JSX.Element | null;
     getOkButton(button?: ActionButton | 'apply' | 'cancel' | 'close'): React.JSX.Element;
     getCancelButton(button?: ActionButton | 'apply' | 'cancel' | 'close'): React.JSX.Element;
     renderFormDialog(): React.JSX.Element | null;

package/build/Communication.js

@@ -1,5 +1,5 @@
-import { I18n, Icon, Utils, } from '@iobroker/gui-components';
-import { Check, Close, ContentCopy } from '@mui/icons-material';
+import { I18n, Icon, IconCopyToClipboard, IconResult, Utils, } from '@iobroker/gui-components';
+import { Check, Close } from '@mui/icons-material';
 import { Backdrop, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, MenuItem, Select, Slider, Snackbar, TextField, ThemeProvider, Typography, } from '@mui/material';
 import React, { Component } from 'react';
 import JsonConfig from './JsonConfig';
@@ -8,12 +8,16 @@ import { DmProtocolV2 } from './protocol/DmProtocolV2';
 import { DmProtocolV3 } from './protocol/DmProtocolV3';
 import { UnknownDmProtocol } from './protocol/UnknownDmProtocol';
 import { getTranslation } from './Utils';
+import { ensureDmStyles, getThemeVars } from './styles';
+/** How long the check mark after a successful action is shown (the CSS animation takes as long) */
+const RESULT_FLASH_DURATION = 1250;
 /**
  * Communication Component
  */
 export default class Communication extends Component {
     protocol = new UnknownDmProtocol();
     responseTimeout = null;
+    resultFlashTimeout = null;
     // eslint-disable-next-line react/no-unused-class-component-methods
     instanceHandler;
     // eslint-disable-next-line react/no-unused-class-component-methods
@@ -24,6 +28,7 @@ export default class Communication extends Component {
     controlStateHandler;
     constructor(props) {
         super(props);
+        ensureDmStyles();
         this.state = {
             showSpinner: false,
             showToast: null,
@@ -34,6 +39,7 @@ export default class Communication extends Component {
             showConfirmation: null,
             showInput: null,
             inputValue: null,
+            resultFlash: 0,
             selectedInstance: this.props.selectedInstance ??
                 this.props.instance ??
                 (window.localStorage.getItem('dmSelectedInstance') || ''),
@@ -76,6 +82,21 @@ export default class Communication extends Component {
             clearTimeout(this.responseTimeout);
             this.responseTimeout = null;
         }
+        if (this.resultFlashTimeout) {
+            clearTimeout(this.resultFlashTimeout);
+            this.resultFlashTimeout = null;
+        }
+    }
+    /** Confirms a successful action: the spinner is followed by a check mark that draws itself */
+    showResultFlash() {
+        if (this.resultFlashTimeout) {
+            clearTimeout(this.resultFlashTimeout);
+        }
+        this.setState({ resultFlash: Date.now() });
+        this.resultFlashTimeout = setTimeout(() => {
+            this.resultFlashTimeout = null;
+            this.setState({ resultFlash: 0 });
+        }, RESULT_FLASH_DURATION);
     }
     // eslint-disable-next-line class-methods-use-this
     loadAllData() {
@@ -98,8 +119,7 @@ export default class Communication extends Component {
         const send = async () => {
             this.setState({ showSpinner: true });
             this.responseTimeout = setTimeout(() => {
-                this.setState({ showSpinner: false });
-                window.alert(I18n.t('ra_No response from the backend'));
+                this.setState({ showSpinner: false, showToast: I18n.t('ra_No response from the backend') });
             }, messageToSend.timeout || 5000);
             const response = await this.protocol.sendAction(command, messageToSend);
             if (this.responseTimeout) {
@@ -219,6 +239,7 @@ export default class Communication extends Component {
                     }
                     else {
                         this.setState({ showSpinner: false });
+                        this.showResultFlash();
                     }
                     break;
                 default:
@@ -295,8 +316,18 @@ export default class Communication extends Component {
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: () => confirm.handleClose(true), autoFocus: true }, getTranslation('yesButtonText')),
                 React.createElement(Button, { variant: "contained", color: "grey", onClick: () => confirm.handleClose(false), autoFocus: true }, getTranslation('noButtonText')))));
     }
+    /** The toast shows errors: the cross draws itself and shakes */
     renderSnackbar() {
-        return (React.createElement(Snackbar, { open: !!this.state.showToast, autoHideDuration: 6_000, onClose: () => this.setState({ showToast: null }), message: this.state.showToast }));
+        return (React.createElement(Snackbar, { open: !!this.state.showToast, autoHideDuration: 6_000, onClose: () => this.setState({ showToast: null }), message: this.state.showToast ? (React.createElement("span", { className: "dm-toast" },
+                React.createElement(IconResult, { type: "error", replay: this.state.showToast }),
+                this.state.showToast)) : null }));
+    }
+    renderResultFlash() {
+        if (!this.state.resultFlash) {
+            return null;
+        }
+        return (React.createElement("div", { key: this.state.resultFlash, className: "dm-result", style: getThemeVars(this.props.theme) },
+            React.createElement(IconResult, { type: "success" })));
     }
     getOkButton(button) {
         if (typeof button === 'string') {
@@ -359,7 +390,9 @@ export default class Communication extends Component {
                                 ? button.color
                                 : undefined,
                             ...(button.style || undefined),
-                        }, onClick: () => {
+                        }, 
+                        // The copy symbol confirms the copy with a check mark
+                        onClick: () => {
                             if (button.copyToClipboardAttr && form.data) {
                                 const val = form.data[button.copyToClipboardAttr];
                                 if (typeof val === 'string') {
@@ -368,16 +401,14 @@ export default class Communication extends Component {
                                 else {
                                     Utils.copyToClipboard(JSON.stringify(val, null, 2));
                                 }
-                                window.alert(I18n.t('copied'));
                             }
                             else if (form.data) {
                                 Utils.copyToClipboard(JSON.stringify(form.data, null, 2));
-                                window.alert(I18n.t('copied'));
                             }
                             else {
-                                window.alert(I18n.t('nothingToCopy'));
+                                this.setState({ showToast: I18n.t('nothingToCopy') });
                             }
-                        }, startIcon: button?.icon ? React.createElement(Icon, { src: button?.icon }) : React.createElement(ContentCopy, null) }, getTranslation(button?.label || 'ctcButtonText', button?.noTranslation)));
+                        }, startIcon: button?.icon ? React.createElement(Icon, { src: button?.icon }) : React.createElement(IconCopyToClipboard, null) }, getTranslation(button?.label || 'ctcButtonText', button?.noTranslation)));
                 }
                 else if (button === 'apply' || button.type === 'apply') {
                     buttons.push(this.getOkButton(button));
@@ -587,7 +618,8 @@ export default class Communication extends Component {
             this.renderProgressDialog(),
             this.renderConfirmationDialog(),
             this.renderInputDialog(),
-            this.renderSpinner()));
+            this.renderSpinner(),
+            this.renderResultFlash()));
     }
 }
 //# sourceMappingURL=Communication.js.map