Improved shading of list selects.

react/src/App.tsx

@@ -102,6 +102,19 @@ const theme = createTheme(
         :
         {
             components: {
+                /* make the selection state for MuiListItemButtons a smidgen darker (light theme only) */
+                MuiListItemButton: {
+                    styleOverrides: {
+                    root: ({ theme }) => ({
+                        '&.Mui-selected': {
+                        backgroundColor: 'rgba(0, 0, 0, 0.2)', // Adjust for desired darkness
+                        '&:hover': {
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)', // Slightly darker on hover
+                        },
+                        },
+                    }),
+                    },
+                },
                 MuiButton: {
                     styleOverrides: {
                         containedPrimary: {

react/src/OptionsDialog.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// Copyright (c) 2022 Robin Davies
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import { useState } from 'react';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogEx from './DialogEx';
+import DialogContent from '@mui/material/DialogContent';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+
+
+export interface OptionItem {
+    key: string | number;
+    text: string;
+};
+
+export interface OptionsDialogProps {
+    open: boolean;
+    title?: string;
+    options: OptionItem[];
+    value: string | number;
+    onOk: (result: OptionItem) => void;
+    minWidth?: number | string;
+    onClose: () => void;
+}
+
+
+function OptionsDialog(props: OptionsDialogProps) {
+    //const classes = useStyles();
+    const { options, value, onOk, onClose, open,title,minWidth } = props;
+
+    let initialSelection : OptionItem | undefined = undefined;
+    for (let option of options)
+    {
+        if (option.key === value)
+        {
+            initialSelection = option;
+            break;
+        }
+    }
+    
+    const [currentSelection, setCurrentSelection] = useState(initialSelection)
+
+    const handleListItemClick = (item: OptionItem) => {
+        setCurrentSelection(item);
+        onOk(item);
+    };
+    const handleCancel = () => {
+        onClose();
+    };
+    return (
+        <DialogEx tag="options" onClose={handleCancel} aria-labelledby="select-option" open={open}  >
+        {title && (
+            <DialogTitle style={{paddingLeft: 8}}>
+                <Typography variant="body2" color="textSecondary">
+                    {title}
+                </Typography>
+            </DialogTitle>
+        )}
+        {title && (
+            <Divider />
+        )}
+
+        <DialogContent style={{padding: 0, margin: 0}}>
+            <List style={{ marginLeft: 3, marginRight: 3 ,minWidth: minWidth }}>
+                {options.map(
+                    (item: OptionItem,index) => {
+                        return (
+                            <ListItemButton onClick={() => handleListItemClick(item)} key={item.key} selected={item === currentSelection} >
+                                <ListItemText primary={item.text} />
+                            </ListItemButton>
+                        );
+                    }
+                )}
+            </List>
+        </DialogContent>
+        </DialogEx>
+    );
+}
+
+export default OptionsDialog;

react/src/SettingsDialog.tsx

@@ -51,7 +51,8 @@ import SelectThemeDialog from './SelectThemeDialog';
 import Slide, { SlideProps } from '@mui/material/Slide';
 import { createStyles, Theme } from '@mui/material/styles';
 import { WithStyles, withStyles } from '@mui/styles';
-import { canScaleWindow, getWindowScaleText } from './WindowScale';
+import { canScaleWindow, getWindowScaleOptions, getWindowScaleText, setWindowScale, getWindowScale } from './WindowScale';
+import OptionsDialog from './OptionsDialog';
 
 
 
@@ -76,6 +77,7 @@ interface SettingsDialogState {
     wifiConfigSettings: WifiConfigSettings;
     wifiDirectConfigSettings: WifiDirectConfigSettings;
 
+    showWindowScaleDialog: boolean;
     showWifiConfigDialog: boolean;
     showWifiDirectConfigDialog: boolean;
     showGovernorSettingsDialog: boolean;
@@ -182,6 +184,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                 wifiDirectConfigSettings: this.model.wifiDirectConfigSettings.get(),
                 governorSettings: this.model.governorSettings.get(),
                 continueDisabled: true,
+
+                showWindowScaleDialog: false,
                 showWifiConfigDialog: false,
                 showWifiDirectConfigDialog: false,
                 showGovernorSettingsDialog: false,
@@ -711,7 +715,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                             (
                                                 <ButtonBase
                                                     className={classes.setting}
-                                                    onClick={() => { this.handleThemeSelection(); }}  >
+                                                    onClick={() => { this.setState({ showWindowScaleDialog: true }); }}  >
                                                     <SelectHoverBackground selected={false} showHover={true} />
                                                     <div style={{ width: "100%" }}>
                                                         <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
@@ -953,6 +957,19 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                         open={this.state.showSystemMidiBindingsDialog}
                         onClose={() => { this.setState({ showSystemMidiBindingsDialog: false }); }}
                     />
+                    {this.state.showWindowScaleDialog && (
+                        <OptionsDialog open={this.state.showWindowScaleDialog} options={getWindowScaleOptions()} value={getWindowScale()}
+                            onClose={(() => this.setState({ showWindowScaleDialog: false }))}
+                            title="Window Scale"
+
+                            onOk={(item) => {
+                                this.setState({ showWindowScaleDialog: false });
+                                setWindowScale(item.key as number);
+
+                            }}
+                        />
+
+                    )}
                 </DialogEx >
 
             );

react/src/WindowScale.tsx

@@ -4,7 +4,8 @@ import {isAndroidHosted} from './AndroidHost';
 var validScales = [1.0,1.10,1.25,1.35,1.50,1.75,2.0,2.5];
 
 export function canScaleWindow(): boolean {
-    return getValidWindowScales().length > 1;
+    return false;
+    // return getValidWindowScales().length > 1;
 }
 
 export function getValidWindowScales(): number[]
@@ -45,4 +46,19 @@ export function getWindowScaleText(scale?: number)
     }
     let iValue = Math.round(value*100);
     return iValue.toString() + "%";
+}
+
+var gOptions: {key: number, text: string}[] = [];
+export function getWindowScaleOptions() {
+    if (gOptions.length !== 0)
+    {
+        return gOptions;
+    }
+    let result: {key: number, text: string}[] = [];
+    for (let value of getValidWindowScales())
+    {
+        result.push({key: value, text: getWindowScaleText(value)});
+    }
+    gOptions = result;
+    return result
 }