@iobroker/gui-components 10.1.0 → 10.2.1

package/build/Components/Schedule.js

@@ -2,27 +2,77 @@ import React, { Component } from 'react';
 import { Input, Radio, FormControlLabel, FormGroup, Checkbox, MenuItem, Select, TextField, Box, } from '@mui/material';
 import { I18n } from '../i18n';
 import { Utils } from './Utils';
+/**
+ * Indentation of a group that belongs to the radio button above it. It matches the width of the radio
+ * button (24px icon plus the horizontal padding of `inputRadio`), so the group starts under its label.
+ */
+const SUB_OPTION_INDENT = 45;
+/** A period row - a quiet card instead of the former full-color background */
+function rowStyle(theme) {
+    return {
+        mt: '8px',
+        p: '6px 10px',
+        // the rows are `width: 100%`, so padding and border must not add to that
+        boxSizing: 'border-box',
+        borderRadius: '8px',
+        border: `1px solid ${theme.palette.divider}`,
+        // The mode ("Monthly") and its settings used to be inline-blocks, which wrapped underneath each
+        // other as soon as the settings got wide - with twelve months they always did. As flex items they
+        // stay side by side and only the settings themselves wrap.
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '4px',
+        transition: 'background-color 0.15s ease-in-out',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+        },
+    };
+}
+/** A sub-option inside a period row */
+function subRowStyle(theme) {
+    return {
+        ml: '8px',
+        pl: '12px',
+        pb: '8px',
+        boxSizing: 'border-box',
+        borderLeft: `2px solid ${theme.palette.primary.main}`,
+        borderRadius: '0 8px 8px 0',
+        backgroundColor: theme.palette.action.hover,
+        // these containers are rendered even when their content is null - without this an empty
+        // box with an accent line would be left over next to the unselected period
+        '&:empty': {
+            display: 'none',
+        },
+    };
+}
 const styles = {
-    hr: {
+    hr: (theme) => ({
         border: 0,
-        borderTop: '1px solid gray',
-    },
+        borderTop: `1px solid ${theme.palette.divider}`,
+        margin: '16px 0',
+    }),
+    // Grows into whatever height the parent gives and only scrolls when the content really does not fit.
+    // It used to reserve a fixed height, which showed a scrollbar even when there was room to spare.
     scrollWindow: {
         width: '100%',
-        overflow: 'auto',
-        height: 'calc(100% - 22px)',
+        flex: '1 1 auto',
+        minHeight: 0,
+        overflowY: 'auto',
+        overflowX: 'hidden',
     },
     rowDiv: {
         width: '100%',
     },
     modeDiv: {
         width: 200,
+        flexShrink: 0,
         display: 'inline-block',
         verticalAlign: 'top',
     },
     settingsDiv: {
         display: 'inline-block',
         verticalAlign: 'top',
+        minWidth: 0,
     },
     inputTime: {
         width: 90,
@@ -43,70 +93,105 @@ const styles = {
         padding: '4px 12px',
         verticalAlign: 'top',
     },
+    // Group of checkboxes (weekdays, months, days of the month). All entries have the same width, so
+    // they line up in columns - a CSS grid with `auto-fill` cannot be used here, because none of the
+    // surrounding boxes has a definite width and the grid would collapse into a single column.
     inputGroup: {
-        maxWidth: 400,
-        display: 'inline-block',
+        // The group belongs to the radio button above it, so it is indented by that button's width -
+        // and it fills the rest of the row instead of wrapping into a narrow column while the place
+        // next to it stays empty.
+        marginLeft: SUB_OPTION_INDENT,
+        maxWidth: `calc(100% - ${SUB_OPTION_INDENT}px)`,
+        display: 'flex',
+        flexWrap: 'wrap',
+        columnGap: 8,
     },
     inputGroupElement: {
         width: 120,
+        marginRight: 0,
+    },
+    /** Ends the current line, so the entries start on a line of their own */
+    lineBreak: {
+        flexBasis: '100%',
+        height: 0,
     },
     inputDateDay: {
         width: 60,
+        marginRight: 0,
+    },
+    /** "all"/"none"/"invert" - the same width as an entry, so they line up with the columns below them */
+    inputGroupAction: {
+        width: 120,
+        marginRight: 0,
     },
     inputDateDayCheck: {
         padding: 4,
     },
     inputSmallCheck: {
         padding: 0,
+        // without this, the label sticks directly to the checkbox
+        marginRight: 6,
     },
-    rowOnce: {},
-    rowDays: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#ddeaff' : '#4b5057',
-    }),
-    rowDows: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#DDFFDD' : '#52646c',
-    }),
-    rowDates: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#747a86',
-    }),
-    rowWeeks: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#717680',
-    }),
-    rowMonths: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#DDFFFF' : '#1f5557',
-    }),
-    rowMonthsDates: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#EEFFFF' : '#3c5737',
+    // One period option (once, daily, weekly, monthly, yearly). They used to be told apart by a full color
+    // per row, which made the dialog look like a patchwork. Now they are quiet cards and the hierarchy
+    // comes from the frame and the indentation instead.
+    rowOnce: (theme) => rowStyle(theme),
+    rowDays: (theme) => rowStyle(theme),
+    rowDows: (theme) => rowStyle(theme),
+    rowDates: (theme) => rowStyle(theme),
+    rowWeeks: (theme) => rowStyle(theme),
+    rowMonths: (theme) => rowStyle(theme),
+    rowYears: (theme) => rowStyle(theme),
+    // Sub-options of a period - indented and marked with an accent line on the left
+    // "Dates" belongs to the same level as "Every month"/"Specific months", so it stays flush with them
+    // instead of sitting in an indented box below the month grid.
+    rowMonthsDates: {
+        display: 'block',
+        mt: '6px',
         maxWidth: 600,
+    },
+    rowDaysDows: (theme) => subRowStyle(theme),
+    rowDowsDows: (theme) => subRowStyle(theme),
+    sectionTitle: (theme) => ({
+        m: '16px 0 8px 0',
+        fontSize: '0.72rem',
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+        color: theme.palette.text.secondary,
     }),
-    rowYears: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#fbffdd' : '#574b33',
-    }),
-    rowDaysDows: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#EEEAFF' : '#573544',
-        pl: '10px',
-        pb: '10px',
-    }),
-    rowDowsDows: (theme) => ({
-        background: theme.palette.mode !== 'dark' ? '#EEFFEE' : '#3d4c54',
-        pl: '10px',
-        pb: '10px',
+    description: (theme) => ({
+        fontSize: '0.95rem',
+        fontWeight: 500,
+        color: theme.palette.primary.main,
+        minHeight: 22,
     }),
 };
-const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+// Translation keys, not display names - they used to be the plain English words, which have no entry in the
+// dictionary, so every weekday and month was shown in English no matter which language was selected.
+const WEEKDAYS = [
+    'ra_Sunday',
+    'ra_Monday',
+    'ra_Tuesday',
+    'ra_Wednesday',
+    'ra_Thursday',
+    'ra_Friday',
+    'ra_Saturday',
+    'ra_Sunday',
+];
 const MONTHS = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
+    'ra_January',
+    'ra_February',
+    'ra_March',
+    'ra_April',
+    'ra_May',
+    'ra_June',
+    'ra_July',
+    'ra_August',
+    'ra_September',
+    'ra_October',
+    'ra_November',
+    'ra_December',
 ];
 const PERIODS = {
     minutes: 'minutes',
@@ -681,7 +766,7 @@ export class Schedule extends Component {
                     }, margin: "normal" })))));
     }
     static getDivider() {
-        return React.createElement("hr", { style: styles.hr });
+        return (React.createElement(Box, { component: "hr", sx: styles.hr }));
     }
     getPeriodModes() {
         const schedule = this.state.schedule;
@@ -695,7 +780,7 @@ export class Schedule extends Component {
             schedule.period.once = Schedule.now2string(true);
         }
         return [
-            React.createElement("div", { key: "once", style: { ...styles.rowDiv, ...styles.rowOnce } },
+            React.createElement(Box, { component: "div", key: "once", sx: Utils.getStyle(this.props.theme, styles.rowDiv, styles.rowOnce) },
                 React.createElement("div", { style: styles.modeDiv },
                     React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!isOnce, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -792,19 +877,26 @@ export class Schedule extends Component {
                         React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) },
                             React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { style: styles.inputRadio, checked: !!schedule.period.dates, onClick: () => {
                                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
-                                        _schedule.period.months ||= 1;
-                                        const dates = [];
-                                        for (let i = 1; i <= 31; i++) {
-                                            dates.push(i);
+                                        if (_schedule.period.dates) {
+                                            // `dates` was only ever assigned with `||=`, so the
+                                            // checkbox could be switched on but never off again
+                                            _schedule.period.dates = '';
+                                        }
+                                        else {
+                                            _schedule.period.months ||= 1;
+                                            const dates = [];
+                                            for (let i = 1; i <= 31; i++) {
+                                                dates.push(i);
+                                            }
+                                            _schedule.period.dates = JSON.stringify(dates);
+                                            _schedule.period.dows = '';
+                                            _schedule.period.years = 0;
+                                            _schedule.period.yearDate = 0;
+                                            _schedule.period.yearMonth = 0;
+                                            _schedule.period.weeks = 0;
+                                            _schedule.period.days = 0;
+                                            _schedule.period.once = '';
                                         }
-                                        _schedule.period.dates ||= JSON.stringify(dates);
-                                        _schedule.period.dows = '';
-                                        _schedule.period.years = 0;
-                                        _schedule.period.yearDate = 0;
-                                        _schedule.period.yearMonth = 0;
-                                        _schedule.period.weeks = 0;
-                                        _schedule.period.days = 0;
-                                        _schedule.period.once = '';
                                         this.onChange(_schedule);
                                     } }), label: I18n.t('sch_periodDates') })),
                         React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates()))) : null)),
@@ -898,7 +990,7 @@ export class Schedule extends Component {
                             }
                             this.onChange(_schedule);
                         } }), label: I18n.t('sch_periodWeekdays') }),
-                isSpecific && (schedule.period.days === 1 || schedule.period.weeks) && (React.createElement(FormGroup, { row: true, style: { ...styles.inputGroup, width: 150 } }, [1, 2, 3, 4, 5, 6, 0].map(i => (React.createElement(FormControlLabel, { key: `specific_${i}`, style: styles.inputGroupElement, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: schedule.period.dows.includes(i.toString()), onChange: e => {
+                isSpecific && (schedule.period.days === 1 || schedule.period.weeks) && (React.createElement(FormGroup, { row: true, style: styles.inputGroup }, [1, 2, 3, 4, 5, 6, 0].map(i => (React.createElement(FormControlLabel, { key: `specific_${i}`, style: styles.inputGroupElement, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: schedule.period.dows.includes(i.toString()), onChange: e => {
                             const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                             let daysOfWeek;
                             try {
@@ -992,8 +1084,8 @@ export class Schedule extends Component {
             dates.push(i);
         }
         const parsedDates = JSON.parse(schedule.period.dates);
-        return (React.createElement(FormGroup, { row: true, style: { ...styles.inputGroup, maxWidth: 620 } },
-            React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: parsedDates.length === 31, onChange: () => {
+        return (React.createElement(FormGroup, { row: true, style: styles.inputGroup },
+            React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: parsedDates.length === 31, onChange: () => {
                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                         const _dates = [];
                         for (let i = 1; i <= 31; i++) {
@@ -1002,12 +1094,12 @@ export class Schedule extends Component {
                         _schedule.period.dates = JSON.stringify(_dates);
                         this.onChange(_schedule);
                     } }), label: I18n.t('sch_all') }),
-            React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: !parsedDates.length, onChange: () => {
+            React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: !parsedDates.length, onChange: () => {
                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                         _schedule.period.dates = '[]';
                         this.onChange(_schedule);
                     } }), label: I18n.t('sch_no_one') }),
-            parsedDates.length !== 31 && !!parsedDates.length && (React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: false, onChange: () => {
+            parsedDates.length !== 31 && !!parsedDates.length && (React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: false, onChange: () => {
                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                         const result = [];
                         const _parsedDates = JSON.parse(_schedule.period.dates);
@@ -1020,7 +1112,7 @@ export class Schedule extends Component {
                         _schedule.period.dates = JSON.stringify(result);
                         this.onChange(_schedule);
                     } }), label: I18n.t('sch_invert') })),
-            React.createElement("div", null),
+            React.createElement(Box, { component: "div", sx: styles.lineBreak }),
             dates.map(i => (React.createElement(FormControlLabel, { key: `date_${i}`, style: !i
                     ? {
                         ...styles.inputDateDay,
@@ -1092,7 +1184,7 @@ export class Schedule extends Component {
                             this.onChange(_schedule);
                         } }), label: I18n.t('sch_periodSpecificMonths') }),
                 typeof schedule.period.months === 'string' && (React.createElement(FormGroup, { row: true, style: styles.inputGroup },
-                    React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: parsedMonths.length === 12, onChange: () => {
+                    React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: parsedMonths.length === 12, onChange: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                                 const months = [];
                                 for (let i = 1; i <= 12; i++) {
@@ -1101,12 +1193,12 @@ export class Schedule extends Component {
                                 _schedule.period.months = JSON.stringify(months);
                                 this.onChange(_schedule);
                             } }), label: I18n.t('sch_all') }),
-                    React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: !parsedMonths.length, onChange: () => {
+                    React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: !parsedMonths.length, onChange: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                                 _schedule.period.months = '[]';
                                 this.onChange(_schedule);
                             } }), label: I18n.t('sch_no_one') }),
-                    parsedMonths.length !== 12 && !!parsedMonths.length && (React.createElement(FormControlLabel, { style: styles.inputDateDay, control: React.createElement(Checkbox, { style: styles.inputDateDayCheck, checked: false, onChange: () => {
+                    parsedMonths.length !== 12 && !!parsedMonths.length && (React.createElement(FormControlLabel, { style: styles.inputGroupAction, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: false, onChange: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                                 const result = [];
                                 const _parsedMonths = JSON.parse(_schedule.period.months);
@@ -1119,7 +1211,7 @@ export class Schedule extends Component {
                                 _schedule.period.months = JSON.stringify(result);
                                 this.onChange(_schedule);
                             } }), label: I18n.t('sch_invert') })),
-                    React.createElement("div", null),
+                    React.createElement(Box, { component: "div", sx: styles.lineBreak }),
                     MONTHS.map((month, i) => (React.createElement(FormControlLabel, { key: `month_${i}`, style: styles.inputGroupElement, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: typeof schedule.period.months === 'string'
                                 ? JSON.parse(schedule.period.months).includes(i + 1)
                                 : schedule.period.months === i, onChange: e => {
@@ -1260,14 +1352,20 @@ export class Schedule extends Component {
                     }, margin: "normal" })))));
     }
     render() {
-        return (React.createElement("div", { style: { height: 'calc(100% - 48px)', width: '100%', overflow: 'hidden' } },
-            React.createElement("div", null, this.state.desc),
+        return (React.createElement("div", { style: {
+                height: '100%',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            } },
+            React.createElement(Box, { component: "div", sx: styles.description }, this.state.desc),
             React.createElement("div", { style: styles.scrollWindow },
-                React.createElement("h5", null, I18n.t('sch_time')),
+                React.createElement(Box, { component: "h5", sx: styles.sectionTitle }, I18n.t('sch_time')),
                 this.getTimePeriodElements(),
                 this.getTimeExactElements(),
                 Schedule.getDivider(),
-                React.createElement("h5", null, I18n.t('sch_period')),
+                React.createElement(Box, { component: "h5", sx: styles.sectionTitle }, I18n.t('sch_period')),
                 this.getPeriodModes(),
                 !this.state.schedule.period.once && Schedule.getDivider(),
                 !this.state.schedule.period.once && this.getValidSettings())));