From 85dfef87ab8be42016fb146b4cc2fe0589a83fb1 Mon Sep 17 00:00:00 2001 From: Jaz Date: Tue, 16 May 2023 23:06:08 -0700 Subject: [PATCH] Use a three-state radio button for color mode --- src/view/com/util/Link.tsx | 9 +- src/view/shell/Drawer.tsx | 135 ++++++++++++++++++++++---- src/view/shell/desktop/RightNav.tsx | 144 ++++++++++++++++++++-------- 3 files changed, 227 insertions(+), 61 deletions(-) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index f753f01c..e4735442 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -229,14 +229,19 @@ function onPressInner( } else if ( !e.defaultPrevented && // onPress prevented default // @ts-ignore Web only -prf - !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys + !(e.metaKey || e.altKey || e.shiftKey) && // ignore clicks with modifier keys // @ts-ignore Web only -prf (e.button == null || e.button === 0) && // ignore everything but left clicks // @ts-ignore Web only -prf [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc. ) { e.preventDefault() - shouldHandle = true + if (e.ctrlKey && Platform.OS === 'web') { + shouldHandle = false + window.open(href, '_blank') + } else { + shouldHandle = true + } } if (shouldHandle) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index ea215378..2c7c6524 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -1,6 +1,7 @@ import React, {ComponentProps} from 'react' import { Linking, + Pressable, SafeAreaView, StyleProp, StyleSheet, @@ -125,10 +126,13 @@ export const DrawerContent = observer(() => { Linking.openURL(FEEDBACK_FORM_URL) }, [track]) - const onColorModePress = React.useCallback(() => { - track('Menu:ItemClicked', {url: '#cycleColorMode'}) - store.shell.setColorMode(nextColorMode()) - }, [track, store]) + const onColorModePress = React.useCallback( + (mode: string) => { + track('Menu:ItemClicked', {url: '#cycleColorMode'}) + store.shell.setColorMode(mode) + }, + [track, store], + ) // rendering // = @@ -291,23 +295,33 @@ export const DrawerContent = observer(() => { {!isWeb && ( - - } - strokeWidth={2} - /> - + + + Set color theme + + + + + + + )} { ) }) +interface SelectableBtnProps { + current: string + value: string + label: string + left?: boolean + right?: boolean + onChange: (v: string) => void +} + +function SelectableBtn({ + current, + value, + label, + left, + right, + onChange, +}: SelectableBtnProps) { + const pal = usePalette('default') + const palPrimary = usePalette('inverted') + return ( + onChange(value)} + accessibilityRole="button" + accessibilityLabel={value} + accessibilityHint={`Set color theme to ${value}`}> + + {label} + + + ) +} + const styles = StyleSheet.create({ view: { flex: 1, @@ -502,6 +555,46 @@ const styles = StyleSheet.create({ marginRight: 6, }, + colorModeText: { + marginLeft: 10, + marginBottom: 6, + }, + + selectableBtns: { + flexDirection: 'row', + marginLeft: 10, + }, + selectableBtn: { + flexDirection: 'row', + justifyContent: 'center', + borderWidth: 1, + borderLeftWidth: 0, + paddingHorizontal: 10, + paddingVertical: 10, + }, + selectableBtnLeft: { + borderTopLeftRadius: 8, + borderBottomLeftRadius: 8, + borderLeftWidth: 1, + }, + selectableBtnRight: { + borderTopRightRadius: 8, + borderBottomRightRadius: 8, + }, + + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, + toggleBtn: { + paddingHorizontal: 0, + }, + footer: { flexDirection: 'row', justifyContent: 'space-between', diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 084e9560..f81c218c 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,43 +1,20 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL} from 'lib/constants' -import {s} from 'lib/styles' +import {colors, s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon} from 'lib/icons' import {formatCount} from 'view/com/util/numeric/format' export const DesktopRightNav = observer(function DesktopRightNav() { const store = useStores() const pal = usePalette('default') - const colorModes = ['light', 'dark', 'system'] - const modeAccessibilityText = { - light: 'Sets display to light mode', - dark: 'Sets display to dark mode', - system: 'Sets display to system default', - } - const modeHelpText = { - light: 'Light Theme', - dark: 'Dark Theme', - system: 'System Default Theme', - } - - const nextColorMode = () => { - return colorModes[ - (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length - ] - } - - const onModePress = React.useCallback(() => { - store.shell.setColorMode(nextColorMode()) - }, [store]) return ( @@ -76,19 +53,31 @@ export const DesktopRightNav = observer(function DesktopRightNav() { - - - - - - {modeHelpText[store.shell.colorMode]} - - + + Set color theme + + + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + ) @@ -132,6 +121,45 @@ const InviteCodes = observer(() => { ) }) +interface SelectableBtnProps { + current: string + value: string + label: string + left?: boolean + right?: boolean + onChange: (v: string) => void +} + +function SelectableBtn({ + current, + value, + label, + left, + right, + onChange, +}: SelectableBtnProps) { + const pal = usePalette('default') + const palPrimary = usePalette('inverted') + return ( + onChange(value)} + accessibilityRole="button" + accessibilityLabel={value} + accessibilityHint={`Set color theme to ${value}`}> + + {label} + + + ) +} + const styles = StyleSheet.create({ rightNav: { position: 'absolute', @@ -174,4 +202,44 @@ const styles = StyleSheet.create({ height: 26, borderRadius: 15, }, + + colorModeText: { + marginLeft: 10, + marginBottom: 6, + }, + + selectableBtns: { + flexDirection: 'row', + marginLeft: 10, + }, + selectableBtn: { + flexDirection: 'row', + justifyContent: 'center', + borderWidth: 1, + borderLeftWidth: 0, + paddingHorizontal: 10, + paddingVertical: 10, + }, + selectableBtnLeft: { + borderTopLeftRadius: 8, + borderBottomLeftRadius: 8, + borderLeftWidth: 1, + }, + selectableBtnRight: { + borderTopRightRadius: 8, + borderBottomRightRadius: 8, + }, + + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, + toggleBtn: { + paddingHorizontal: 0, + }, })