github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-04-27 17:48:17 -05:00
Code Issues 1.3k Packages Projects Releases 54 Wiki Activity

Search Bar Changes (#1408)

Browse Source 
Co-authored-by: Jed Fox <git@jedfox.com>
This commit is contained in:
Neil
2023-07-30 22:38:29 +01:00
committed by GitHub
parent d349354c9d
commit 46af4556a9
11 changed files with 107 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/desktop-client/src/components/ManageRules.js
View File

@@ -33,8 +33,8 @@ import { colors } from '../style';
import Button from './common/Button';
import ExternalLink from './common/ExternalLink';
import Input from './common/Input';
import LinkButton from './common/LinkButton';
import Search from './common/Search';
import Stack from './common/Stack';
import Text from './common/Text';
import View from './common/View';
@@ -694,7 +694,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
return (
<SelectedProvider instance={selectedInst}>
<View style={{ overflow: 'hidden' }}>
<View>
<View
style={{
flexDirection: 'row',
@@ -722,23 +722,10 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
</Text>
</View>
<View style={{ flex: 1 }} />
<Input
<Search
placeholder="Filter rules..."
value={filter}
onChange={e => {
setFilter(e.target.value);
}}
style={{
width: 350,
borderColor: isModal ? null : 'transparent',
backgroundColor: isModal ? null : colors.n11,
':focus': isModal
? null
: {
backgroundColor: 'white',
'::placeholder': { color: colors.n8 },
},
}}
onChange={setFilter}
/>
</View>
<View style={{ flex: 1 }}>

58
packages/desktop-client/src/components/accounts/Header.js
View File

@@ -7,17 +7,15 @@ import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
import DownloadThickBottom from '../../icons/v2/DownloadThickBottom';
import Pencil1 from '../../icons/v2/Pencil1';
import SvgRemove from '../../icons/v2/Remove';
import SearchAlternate from '../../icons/v2/SearchAlternate';
import { styles, colors } from '../../style';
import AnimatedRefresh from '../AnimatedRefresh';
import Button from '../common/Button';
import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
import InputWithContent from '../common/InputWithContent';
import Menu from '../common/Menu';
import MenuButton from '../common/MenuButton';
import MenuTooltip from '../common/MenuTooltip';
import Search from '../common/Search';
import Stack from '../common/Stack';
import View from '../common/View';
import { FilterButton } from '../filters/FiltersMenu';
@@ -234,55 +232,15 @@ export function AccountHeader({
<Add width={10} height={10} style={{ marginRight: 3 }} /> Add New
</Button>
)}
<View>
<View style={{ flexShrink: 0 }}>
<FilterButton onApply={onApplyFilter} />
</View>
<InputWithContent
leftContent={
<SearchAlternate
style={{
width: 13,
height: 13,
flexShrink: 0,
color: search ? colors.p7 : 'inherit',
margin: 5,
marginRight: 0,
}}
/>
}
rightContent={
search && (
<Button
type="bare"
style={{ padding: 8 }}
onClick={() => onSearch('')}
title="Clear search term"
>
<SvgRemove style={{ width: 8, height: 8 }} />
</Button>
)
}
inputRef={searchInput}
value={search}
<View style={{ flex: 1 }} />
<Search
placeholder="Search"
onKeyDown={e => {
if (e.key === 'Escape') onSearch('');
}}
getStyle={focused => [
{
backgroundColor: 'transparent',
borderWidth: 0,
boxShadow: 'none',
transition: 'color .15s',
'& input::placeholder': {
color: colors.n1,
transition: 'color .25s',
},
},
focused && { boxShadow: '0 0 0 2px ' + colors.b5 },
!focused && search !== '' && { color: colors.p4 },
]}
onChange={e => onSearch(e.target.value)}
value={search}
onChange={onSearch}
inputRef={searchInput}
/>
{workingHard ? (
<View>
@@ -306,7 +264,7 @@ export function AccountHeader({
<Button
type="bare"
disabled={search !== '' || filters.length > 0}
style={{ padding: 6 }}
style={{ padding: 6, marginLeft: 10 }}
onClick={onToggleSplits}
title={
splitsExpanded.state.mode === 'collapse'

11
packages/desktop-client/src/components/common/Input.tsx
View File

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
import { css } from 'glamor';
import { useProperFocus } from '../../hooks/useProperFocus';
import { styles, colors } from '../../style';
import { styles, theme } from '../../style';
import { type HTMLPropsWithStyle } from '../../types/utils';
export const defaultInputStyle = {
@@ -40,11 +40,14 @@ const Input = ({
{...css(
defaultInputStyle,
{
whiteSpace: 'nowrap',
overflow: 'hidden',
flexShrink: 0,
':focus': {
border: '1px solid ' + colors.b5,
boxShadow: '0 1px 1px ' + colors.b7,
border: '1px solid ' + theme.formInputBorderSelected,
boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
},
'::placeholder': { color: colors.n7 },
'::placeholder': { color: theme.formInputTextPlaceholder },
},
styles.smallText,
style,

13
packages/desktop-client/src/components/common/InputWithContent.tsx
View File

@@ -2,7 +2,7 @@ import { type ComponentProps, type ReactNode, useState } from 'react';
import { type CSSProperties } from 'glamor';
import { colors } from '../../style';
import { theme } from '../../style';
import Input, { defaultInputStyle } from './Input';
import View from './View';
@@ -11,6 +11,7 @@ type InputWithContentProps = ComponentProps<typeof Input> & {
leftContent: ReactNode;
rightContent: ReactNode;
inputStyle?: CSSProperties;
focusStyle?: CSSProperties;
style?: CSSProperties;
getStyle?: (focused: boolean) => CSSProperties;
};
@@ -18,6 +19,7 @@ export default function InputWithContent({
leftContent,
rightContent,
inputStyle,
focusStyle,
style,
getStyle,
...props
@@ -30,15 +32,14 @@ export default function InputWithContent({
defaultInputStyle,
{
padding: 0,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
focused && {
border: '1px solid ' + colors.b5,
boxShadow: '0 1px 1px ' + colors.b7,
},
style,
focused &&
(focusStyle ?? {
boxShadow: '0 0 0 1px ' + theme.formInputShadowSelected,
}),
getStyle && getStyle(focused),
]}
>

66
packages/desktop-client/src/components/common/Search.tsx
View File

@@ -1,8 +1,11 @@
import { type ChangeEvent, type Ref } from 'react';
import { colors } from '../../style';
import SvgRemove from '../../icons/v2/Remove';
import SearchAlternate from '../../icons/v2/SearchAlternate';
import { theme } from '../../style';
import Input from './Input';
import Button from './Button';
import InputWithContent from './InputWithContent';
type SearchProps = {
inputRef: Ref<HTMLInputElement>;
@@ -19,25 +22,68 @@ export default function Search({
onChange,
placeholder,
isInModal,
width = 350,
width = 250,
}: SearchProps) {
return (
<Input
<InputWithContent
inputRef={inputRef}
placeholder={placeholder}
value={value}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
style={{
width,
flex: '',
borderColor: isInModal ? null : 'transparent',
backgroundColor: isInModal ? null : colors.n11,
backgroundColor: isInModal ? null : theme.formInputBackground,
}}
focusStyle={
isInModal
? null
: {
boxShadow: '0 0 0 1px ' + theme.formInputShadowSelected,
backgroundColor: theme.formInputBackgroundSelected,
}
}
leftContent={
<SearchAlternate
style={{
width: 13,
height: 13,
flexShrink: 0,
color: value ? theme.altMenuItemTextSelected : 'inherit',
margin: 5,
marginRight: 0,
}}
/>
}
rightContent={
value && (
<Button
type="bare"
style={{ padding: 8 }}
onClick={() => onChange('')}
title="Clear search term"
>
<SvgRemove style={{ width: 8, height: 8 }} />
</Button>
)
}
inputStyle={{
'::placeholder': {
color: theme.formInputTextPlaceholder,
transition: 'color .25s',
},
':focus': isInModal
? null
: {
backgroundColor: 'white',
'::placeholder': { color: colors.n8 },
'::placeholder': {
color: theme.formInputTextPlaceholderSelected,
},
},
}}
value={value}
placeholder={placeholder}
onKeyDown={e => {
if (e.key === 'Escape') onChange('');
}}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
/>
);
}

29
packages/desktop-client/src/components/payees/index.js
View File

@@ -26,8 +26,8 @@ import Merge from '../../icons/v0/Merge';
import ArrowThinRight from '../../icons/v1/ArrowThinRight';
import { colors } from '../../style';
import Button from '../common/Button';
import Input from '../common/Input';
import Menu from '../common/Menu';
import Search from '../common/Search';
import Text from '../common/Text';
import View from '../common/View';
import {
@@ -479,10 +479,10 @@ export const ManagePayees = forwardRef(
style={{
flexDirection: 'row',
alignItems: 'center',
padding: '0 10px 5px',
padding: '0 0 15px',
}}
>
<View>
<View style={{ flexShrink: 0 }}>
<Button
type="bare"
style={{ marginRight: 10 }}
@@ -506,7 +506,11 @@ export const ManagePayees = forwardRef(
/>
)}
</View>
<View>
<View
style={{
flexShrink: 0,
}}
>
{(orphanedOnly ||
(orphanedPayees && orphanedPayees.length > 0)) && (
<Button
@@ -530,23 +534,10 @@ export const ManagePayees = forwardRef(
)}
</View>
<View style={{ flex: 1 }} />
<Input
id="filter-input"
<Search
placeholder="Filter payees..."
value={filter}
onChange={e => {
applyFilter(e.target.value);
tableNavigator.onEdit(null);
}}
style={{
width: 350,
borderColor: 'transparent',
backgroundColor: colors.n11,
':focus': {
backgroundColor: 'white',
'::placeholder': { color: colors.n8 },
},
}}
onChange={applyFilter}
/>
</View>

2
packages/desktop-client/src/components/schedules/index.js
View File

@@ -72,7 +72,7 @@ export default function Schedules() {
<View
style={{
marginTop: 20,
marginTop: 15,
flexBasis: (ROW_HEIGHT - 1) * (Math.max(schedules.length, 1) + 1),
overflow: 'hidden',
}}

2
packages/desktop-client/src/components/table.tsx
View File

@@ -865,7 +865,7 @@ export function SelectedItemsButton({ name, keyHandlers, items, onSelect }) {
}
return (
<View>
<View style={{ marginLeft: 10, flexShrink: 0 }}>
<KeyHandlers keys={keyHandlers || {}} />
<Button

7
packages/desktop-client/src/style/themes/dark.ts
View File

@@ -60,7 +60,7 @@ export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy150;
export const altMenuItemTextHover = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.navy150;
export const altMenuItemTextSelected = colorPalette.purple400;
export const altMenuItemTextHeader = colorPalette.purple500;
export const altMenuBorder = colorPalette.navy200;
export const altMenuBorderHover = colorPalette.purple400;
@@ -119,7 +119,7 @@ export const errorText = colorPalette.red200;
export const errorAccent = colorPalette.red500;
export const formLabelText = colorPalette.purple150;
export const formInputBackground = colorPalette.navy800;
export const formInputBackgroundSelected = colorPalette.purple400;
export const formInputBackgroundSelected = colorPalette.navy700;
export const formInputBackgroundSelection = colorPalette.purple400;
export const formInputBorder = colorPalette.navy600;
export const formInputTextReadOnlySelection = colorPalette.navy800;
@@ -127,8 +127,9 @@ export const formInputBorderSelected = colorPalette.purple400;
export const formInputText = colorPalette.navy150;
export const formInputTextSelected = colorPalette.black;
export const formInputTextPlaceholder = colorPalette.navy150;
export const formInputTextPlaceholderSelected = colorPalette.navy100;
export const formInputTextSelection = colorPalette.navy800;
export const formInputShadowSelected = colorPalette.purple400;
export const formInputShadowSelected = colorPalette.purple200;
export const formInputTextHighlight = colorPalette.purple400;
export const pillBackground = colorPalette.navy600;
export const pillText = colorPalette.navy200;

5
packages/desktop-client/src/style/themes/light.ts
View File

@@ -119,7 +119,7 @@ export const errorText = colorPalette.red500;
export const errorAccent = colorPalette.red200;
export const formLabelText = colorPalette.blue500;
export const formInputBackground = colorPalette.navy50;
export const formInputBackgroundSelected = colorPalette.purple500;
export const formInputBackgroundSelected = colorPalette.white;
export const formInputBackgroundSelection = colorPalette.purple500;
export const formInputBorder = colorPalette.navy300;
export const formInputTextReadOnlySelection = colorPalette.navy50;
@@ -127,8 +127,9 @@ export const formInputBorderSelected = colorPalette.purple500;
export const formInputText = colorPalette.navy700;
export const formInputTextSelected = colorPalette.navy50;
export const formInputTextPlaceholder = colorPalette.navy300;
export const formInputTextPlaceholderSelected = colorPalette.navy200;
export const formInputTextSelection = colorPalette.navy100;
export const formInputShadowSelected = colorPalette.purple500;
export const formInputShadowSelected = colorPalette.purple300;
export const formInputTextHighlight = colorPalette.purple500;
export const pillBackground = colorPalette.navy150;
export const pillText = colorPalette.navy800;

6
upcoming-release-notes/1408.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [carkom]
---
Improving Search Bar for all pages.