From 8304660894fa30afa82d9f5bac2ddcd6f2808999 Mon Sep 17 00:00:00 2001 From: Robin Davies Date: Sun, 6 Oct 2024 03:24:48 -0400 Subject: [PATCH] Improved shading of list selects. --- react/src/App.tsx | 13 +++++ react/src/OptionsDialog.tsx | 102 +++++++++++++++++++++++++++++++++++ react/src/SettingsDialog.tsx | 21 +++++++- react/src/WindowScale.tsx | 18 ++++++- 4 files changed, 151 insertions(+), 3 deletions(-) create mode 100644 react/src/OptionsDialog.tsx diff --git a/react/src/App.tsx b/react/src/App.tsx index b7c8603..6738e2d 100644 --- a/react/src/App.tsx +++ b/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: { diff --git a/react/src/OptionsDialog.tsx b/react/src/OptionsDialog.tsx new file mode 100644 index 0000000..bdae319 --- /dev/null +++ b/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 ( + + {title && ( + + + {title} + + + )} + {title && ( + + )} + + + + {options.map( + (item: OptionItem,index) => { + return ( + handleListItemClick(item)} key={item.key} selected={item === currentSelection} > + + + ); + } + )} + + + + ); +} + +export default OptionsDialog; diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx index d5ab736..f70b42a 100644 --- a/react/src/SettingsDialog.tsx +++ b/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 })( ( { this.handleThemeSelection(); }} > + onClick={() => { this.setState({ showWindowScaleDialog: true }); }} >
@@ -953,6 +957,19 @@ const SettingsDialog = withStyles(styles, { withTheme: true })( open={this.state.showSystemMidiBindingsDialog} onClose={() => { this.setState({ showSystemMidiBindingsDialog: false }); }} /> + {this.state.showWindowScaleDialog && ( + this.setState({ showWindowScaleDialog: false }))} + title="Window Scale" + + onOk={(item) => { + this.setState({ showWindowScaleDialog: false }); + setWindowScale(item.key as number); + + }} + /> + + )} ); diff --git a/react/src/WindowScale.tsx b/react/src/WindowScale.tsx index fc68daf..aac1d4f 100644 --- a/react/src/WindowScale.tsx +++ b/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 } \ No newline at end of file