brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Add labels to colors

This commit is contained in:
Brandon Presley 2022-11-30 14:32:42 +13:00
parent 4375a9c24e
commit 8e31dc2186
3 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
MassiveFab.tsx
View File

@ -1,4 +1,4 @@
import {ComponentProps} from 'react' import {ComponentProps, useMemo} from 'react'
import {FAB, useTheme} from 'react-native-paper' import {FAB, useTheme} from 'react-native-paper'
import {CombinedDarkTheme, CombinedDefaultTheme} from './App' import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
import {lightColors} from './colors' import {lightColors} from './colors'
@ -6,9 +6,13 @@ import {lightColors} from './colors'
export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) { export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
const {colors} = useTheme() const {colors} = useTheme()
const fabColor = lightColors.includes(colors.primary) const fabColor = useMemo(
? CombinedDarkTheme.colors.background () =>
: CombinedDefaultTheme.colors.background lightColors.map(color => color.hex).includes(colors.primary)
? CombinedDarkTheme.colors.background
: CombinedDefaultTheme.colors.background,
[colors.primary],
)
return ( return (
<FAB <FAB

36
SettingsPage.tsx
View File

@ -241,24 +241,14 @@ export default function SettingsPage() {
]} ]}
/> />
)} )}
{'date format'.includes(term.toLowerCase()) && (
<Select
value={date}
onChange={changeDate}
items={formatOptions.map(option => ({
label: `Date format: ${format(today, option)}`,
value: option,
}))}
/>
)}
{'color'.includes(term.toLowerCase()) && ( {'color'.includes(term.toLowerCase()) && (
<Select <Select
value={darkColor} value={darkColor}
onChange={changeDarkColor} onChange={changeDarkColor}
items={lightColors.map(colorOption => ({ items={lightColors.map(color => ({
label: 'Dark color', label: `Dark color: ${color.name}`,
value: colorOption, value: color.hex,
color: colorOption, color: color.hex,
}))} }))}
/> />
)} )}
@ -266,10 +256,20 @@ export default function SettingsPage() {
<Select <Select
value={lightColor} value={lightColor}
onChange={changeLightColor} onChange={changeLightColor}
items={darkColors.map(colorOption => ({ items={darkColors.map(color => ({
label: 'Light color', label: `Light color: ${color.name}`,
value: colorOption, value: color.hex,
color: colorOption, color: color.hex,
}))}
/>
)}
{'date format'.includes(term.toLowerCase()) && (
<Select
value={date}
onChange={changeDate}
items={formatOptions.map(option => ({
label: `Date format: ${format(today, option)}`,
value: option,
}))} }))}
/> />
)} )}

20
colors.ts
View File

@ -1,19 +1,19 @@
import {DarkTheme, DefaultTheme} from 'react-native-paper' import {DarkTheme, DefaultTheme} from 'react-native-paper'
export const lightColors = [ export const lightColors = [
DarkTheme.colors.primary, {hex: DarkTheme.colors.primary, name: 'Purple'},
'#B3E5FC', {hex: '#B3E5FC', name: 'Blue'},
'#FA8072', {hex: '#FA8072', name: 'Salmon'},
'#FFC0CB', {hex: '#FFC0CB', name: 'Pink'},
'#E9DCC9', {hex: '#E9DCC9', name: 'Linen'},
'#BBA1CE', {hex: '#BBA1CE', name: 'Light purple'},
] ]
export const darkColors = [ export const darkColors = [
DefaultTheme.colors.primary, {hex: DefaultTheme.colors.primary, name: 'Purple'},
'#007AFF', {hex: '#007AFF', name: 'Blue'},
'#000000', {hex: '#000000', name: 'Black'},
'#CD5C5C', {hex: '#CD5C5C', name: 'Red'},
] ]
export const colorShade = (color: any, amount: number) => { export const colorShade = (color: any, amount: number) => {