@iobroker/gui-components 10.3.0 → 10.3.1

package/README.md

@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@iobroker/gui-components": "^10.3.0",
+        "@iobroker/gui-components": "^10.3.1",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,10 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.3.1 (2026-09-15)
+
+- (@GermanBluefox) Changed: the details of the selected object in the narrow view of the object browser were reworked - theme colors, the full ID with a copy button, a dash for empty values and buttons with tooltips
+
 ### 10.3.0 (2026-09-14)
 
 - (@GermanBluefox) Added: the icon selector offers a library of 448 icons for rooms, buildings, furniture, lighting, climate, windows and shading, security, energy, water, household appliances, multimedia, garden, weather, people and more. Every icon has a name in all 11 languages, and the search looks through all categories. The icons are taken from Material Design Icons (Apache License 2.0), painted with `currentColor` and loaded only when the dialog is opened. The classic room and device icons stay available as their own categories

package/build/Components/ObjectBrowser/renderLeaf.js

@@ -842,7 +842,7 @@ export function renderLeaf(that, item, isExpanded, counter) {
     };
     let colValue = showValueCell ? (React.createElement("div", { style: {
             ...styles.cellValue,
-            width: that.width !== 'xs' ? colWidth('val') : 'calc(100% - 100px)',
+            width: that.width !== 'xs' ? colWidth('val') : '100%',
             // An empty inline-block has no height, so a state without a value would offer nothing
             // to tap on in the narrow details view.
             minHeight: narrowStyleWithDetails ? 20 : undefined,
@@ -904,80 +904,91 @@ export function renderLeaf(that, item, isExpanded, counter) {
             width: that.width !== 'xs' ? colWidth('buttons') : undefined,
         } }, renderColumnButtons(that, id, item))) : null;
     let colDetails = null;
-    if (that.width === 'xs' && that.state.focused === id) {
-        colMiddle = colMiddle.filter(a => a);
-        let renderedMiddle;
-        if (!colMiddle.length) {
-            renderedMiddle = null;
-        }
-        else {
-            renderedMiddle = colMiddle.map(it => {
-                if (!it) {
-                    return null;
-                }
-                return (React.createElement("div", { key: it.type, style: styles.cellDetailsLine },
-                    React.createElement("span", { style: styles.cellDetailsName },
-                        that.texts[it.type],
-                        ":"),
-                    it.el,
-                    React.createElement("div", { style: { flexGrow: 1 } }),
-                    it.onClick ? (React.createElement(IconEdit, { style: styles.cellCopyButtonInDetails, onClick: () => {
-                            if (it?.onClick) {
-                                it.onClick();
-                            }
-                        } })) : null));
-            });
-        }
-        if (!colCustom.length) {
+    if (narrowStyleWithDetails) {
+        /** Texts of the middle columns: the cells are always rendered, so an empty one must be detected here */
+        const middleTexts = {
+            filter_type: obj?.type,
+            filter_role: common?.role,
+            filter_room: item.data.rooms,
+            filter_func: item.data.funcs,
+        };
+        const editTitles = {
+            filter_role: 'ra_Edit role',
+            filter_room: 'ra_Edit room',
+            filter_func: 'ra_Edit function',
+        };
+        /** One line of the details: the label, the value (or a dash) and the buttons for it */
+        const detailsLine = (key, label, value, actions = []) => (React.createElement("div", { key: key, style: styles.cellDetailsLine },
+            React.createElement("span", { style: styles.cellDetailsName }, label),
+            React.createElement(Box, { sx: styles.cellDetailsValue }, value || React.createElement("span", { style: styles.cellDetailsEmpty }, "\u2013")),
+            actions.map(action => (React.createElement(Tooltip, { key: action.title, title: action.title, slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { size: "small", sx: styles.cellDetailsButton, onClick: action.onClick }, action.icon))))));
+        const copyTitle = that.props.t('ra_Copy to clipboard');
+        const copyIcon = React.createElement(IconCopy, { style: styles.cellDetailsIcon });
+        const editIcon = React.createElement(IconEdit, { style: styles.cellDetailsIcon });
+        if (!colCustom?.length) {
             colCustom = null;
         }
+        // a folder without an object has nothing but its ID, so the header does not need a separator then
+        const hasLines = !!colName || !!colMiddle?.some(it => it) || !!colCustom || that.objects[id]?.type === 'state';
         colDetails = (React.createElement(Paper
         // `renderItem` pushes this panel into the array of rows, so it needs its own key
         , { 
             // `renderItem` pushes this panel into the array of rows, so it needs its own key
-            key: `details_${id}`, style: {
-                width: '100%',
-                // the padding must be inside of the width, else the row is wider than the table
-                boxSizing: 'border-box',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: 10,
-                backgroundColor: that.props.theme.palette.mode === 'dark' ? '#333' : '#ccc',
-            } },
-            React.createElement("div", { style: styles.cellDetailsLine },
-                React.createElement("div", { style: { flexGrow: 1 } }),
-                React.createElement(IconCopy, { style: styles.cellCopyButtonInDetails, onClick: e => that.onCopy(e, id) })),
-            colName && (React.createElement("div", { style: styles.cellDetailsLine },
-                React.createElement("span", { style: styles.cellDetailsName },
-                    that.texts.name,
-                    ":"),
-                colName,
-                React.createElement("div", { style: { flexGrow: 1 } }),
-                item.data?.title ? (React.createElement(IconCopy, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => that.onCopy(e, item.data?.title) })) : null)),
-            renderedMiddle,
-            colCustom && React.createElement("div", { style: styles.cellDetailsLine }, colCustom),
-            that.objects[id]?.type === 'state' && (React.createElement("div", { style: styles.cellDetailsLine },
-                React.createElement("span", { style: styles.cellDetailsName },
-                    that.texts.value,
-                    ":"),
-                colValue,
-                React.createElement("div", { style: { flexGrow: 1 } }),
-                React.createElement(IconCopy, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => {
-                        const { valText } = formatValue({
-                            state: that.states[id],
-                            obj: that.objects[id],
-                            texts: that.texts,
-                            dateFormat: that.props.dateFormat ||
-                                that.systemConfig?.common.dateFormat ||
-                                DEFAULT_DATE_FORMAT,
-                            isFloatComma: that.props.isFloatComma === undefined
-                                ? (that.systemConfig?.common.isFloatComma ?? true)
-                                : that.props.isFloatComma,
-                        });
-                        that.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
-                    }, key: "cc" }),
-                valueEditable ? (React.createElement(IconEdit, { style: styles.cellCopyButtonInDetails, onClick: editValue, key: "ce" })) : null)),
-            colButtons && React.createElement("div", { style: { ...styles.cellDetailsLine, justifyContent: 'right' } }, colButtons)));
+            key: `details_${id}`, elevation: 0, sx: styles.cellDetails },
+            React.createElement("div", { style: {
+                    ...styles.cellDetailsHeader,
+                    ...(hasLines ? styles.cellDetailsHeaderWithLines : undefined),
+                } },
+                React.createElement(Box, { sx: styles.cellDetailsId }, id),
+                React.createElement(Tooltip, { title: copyTitle, slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { size: "small", sx: styles.cellDetailsButton, onClick: e => that.onCopy(e, id) }, copyIcon))),
+            colName
+                ? detailsLine('name', that.texts.name, colName, item.data?.title
+                    ? [{ title: copyTitle, icon: copyIcon, onClick: e => that.onCopy(e, item.data?.title) }]
+                    : [])
+                : null,
+            colMiddle?.map(it => it
+                ? detailsLine(it.type, that.texts[it.type], it.type in middleTexts && !middleTexts[it.type] ? null : it.el, it.onClick
+                    ? [
+                        {
+                            title: that.props.t(editTitles[it.type] || 'ra_Edit'),
+                            icon: editIcon,
+                            onClick: () => it.onClick?.(),
+                        },
+                    ]
+                    : [])
+                : null),
+            colCustom ? React.createElement("div", { style: styles.cellDetailsLine }, colCustom) : null,
+            that.objects[id]?.type === 'state'
+                ? // an editable state without value has its own edit button here, so show a dash instead of the empty cell
+                    detailsLine('value', that.texts.value, columnValue ? colValue : null, [
+                        {
+                            title: that.texts.copyState,
+                            icon: copyIcon,
+                            onClick: e => {
+                                const { valText } = formatValue({
+                                    state: that.states[id],
+                                    obj: that.objects[id],
+                                    texts: that.texts,
+                                    dateFormat: that.props.dateFormat ||
+                                        that.systemConfig?.common.dateFormat ||
+                                        DEFAULT_DATE_FORMAT,
+                                    isFloatComma: that.props.isFloatComma === undefined
+                                        ? (that.systemConfig?.common.isFloatComma ?? true)
+                                        : that.props.isFloatComma,
+                                });
+                                that.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
+                            },
+                        },
+                        // Tapping the value itself only works when there is something to tap on -
+                        // a state that was never written renders nothing
+                        ...(valueEditable
+                            ? [{ title: that.props.t('ra_Edit value'), icon: editIcon, onClick: editValue }]
+                            : []),
+                    ])
+                : null,
+            colButtons ? React.createElement(Box, { sx: styles.cellDetailsButtons }, colButtons) : null));
         colName = null;
         colMiddle = null;
         colCustom = null;