Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add canned searches #42184

Merged
merged 18 commits into from
Jun 3, 2024
Merged

Add canned searches #42184

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
48ce99e
Add canned searches
jnowakow May 15, 2024
6f631fe
Update icon
jnowakow May 15, 2024
71b4c5a
Merge branch 'main' into canned-searches
jnowakow May 15, 2024
d02e711
Fix icon display on ios
jnowakow May 15, 2024
c46501f
Add missing translation and illustrations
jnowakow May 15, 2024
f870dbe
Format es.ts
jnowakow May 15, 2024
afe0d17
Export illustrations correctly
jnowakow May 15, 2024
3d53137
Fix prettier
jnowakow May 15, 2024
c3fab89
Merge branch 'main' into canned-searches
jnowakow May 20, 2024
5a45331
Merge branch 'main' into canned-searches
jnowakow May 23, 2024
95108dc
Merge branch 'main' into canned-searches
jnowakow May 27, 2024
43f4de1
Update svg
jnowakow May 27, 2024
b765ea2
Icon size
jnowakow May 27, 2024
a086515
Merge branch 'main' into canned-searches
jnowakow May 28, 2024
e77f8e0
Restore package-lock.json
jnowakow May 28, 2024
4de2919
Merge branch 'main' into canned-searches
jnowakow May 29, 2024
1292b7d
format
jnowakow May 29, 2024
5be9339
Update checkmarkcircle.svg and rename images
jnowakow May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions assets/images/check-circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions assets/images/simple-illustrations/simple-illustration__checkmark-circle.svg
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did the @Expensify/design export this for you, or did you grab this yourself from Figma? We've had some trouble in the past when contributors grab illustrations themselves so just want to double check.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I grabbed it by myself. So maybe they should be exported once again by design team.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's get @Expensify/design to export these assets and use those instead to make sure they follow the expected format

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dannymcclain you exported the check-circle for me. Are you able to provide me also those two illustrations?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think Danny already uploaded this one for ya, but here it is again: check-circle.svg.zip

jnowakow marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions assets/images/simple-illustrations/simple-illustration__send-money.svg
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one already exists in the repo, right? I think we can use the existing asset and delete this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It exists in docs folder so at least I have to copy it to assets. When I do so the illustration doesn't look good:
image

Compared to how it looks with my export:
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm okay, can you try this one: simple-illustration__sendmoney.svg.zip

And it should get resized down to 48x48. But these all exist in our system at 68x68, so that's what we export them as.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3489,6 +3489,9 @@ const CONST = {
},
TAB_SEARCH: {
ALL: 'all',
SHARED: 'shared',
DRAFTS: 'drafts',
FINISHED: 'finished',
},
STATUS_TEXT_MAX_LENGTH: 100,

Expand Down
2 changes: 2 additions & 0 deletions src/components/Icon/Expensicons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import ChatBubbleReply from '@assets/images/chatbubble-reply.svg';
import ChatBubbleUnread from '@assets/images/chatbubble-unread.svg';
import ChatBubble from '@assets/images/chatbubble.svg';
import ChatBubbles from '@assets/images/chatbubbles.svg';
import CheckCircle from '@assets/images/check-circle.svg';
import Checkmark from '@assets/images/checkmark.svg';
import Close from '@assets/images/close.svg';
import ClosedSign from '@assets/images/closed-sign.svg';
Expand Down Expand Up @@ -338,4 +339,5 @@ export {
Lightbulb,
DocumentPlus,
Clear,
CheckCircle,
};
4 changes: 4 additions & 0 deletions src/components/Icon/Illustrations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import Binoculars from '@assets/images/simple-illustrations/simple-illustration_
import CarIce from '@assets/images/simple-illustrations/simple-illustration__car-ice.svg';
import Car from '@assets/images/simple-illustrations/simple-illustration__car.svg';
import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustration__checkmark-circle.svg';
import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg';
import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
Expand Down Expand Up @@ -75,6 +76,7 @@ import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustra
import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg';
import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
import SendMoney from '@assets/images/simple-illustrations/simple-illustration__send-money.svg';
import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg';
Expand Down Expand Up @@ -176,4 +178,6 @@ export {
Tag,
CarIce,
Lightbulb,
SendMoney,
CheckmarkCircle,
};
3 changes: 3 additions & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,9 @@ export default {
action: 'Action',
expenses: 'Expenses',
tax: 'Tax',
shared: 'Shared',
drafts: 'Drafts',
finished: 'Finished',
},
location: {
useCurrent: 'Use current location',
Expand Down
3 changes: 3 additions & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,9 @@ export default {
action: 'Acción',
expenses: 'Gastos',
tax: 'Impuesto',
shared: 'Compartido',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
shared: 'Compartido',
shared: 'Compartidos',

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bump @jnowakow. I think we should change this to plural since all other ones are plural too

drafts: 'Borradores',
finished: 'Finalizado',
Comment on lines +327 to +329
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did these translations get approved internally?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
finished: 'Finalizado',
finished: 'Finalizados',

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@luacmartins they got approved

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha I asked for another translation and got the plural like I suggested above. I think it makes sense to use the plural, since all other items are plural too, e.g. Expenses, Drafts

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bump @jnowakow. I think we should change this to plural since all other ones are plural too

},
connectionComplete: {
title: 'Conexión Completa',
Expand Down
32 changes: 27 additions & 5 deletions src/pages/Search/SearchFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import CONST from '@src/CONST';
import type {Route} from '@src/ROUTES';
import ROUTES from '@src/ROUTES';
import type IconAsset from '@src/types/utils/IconAsset';
import SearchFiltersNarrow from './SearchFiltersNarrow';

type SearchFiltersProps = {
query: string;
Expand All @@ -37,13 +38,34 @@ function SearchFilters({query}: SearchFiltersProps) {
icon: Expensicons.Receipt,
route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
},
{
title: translate('common.shared'),
query: CONST.TAB_SEARCH.SHARED,
icon: Expensicons.Send,
route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SHARED),
},
{
title: translate('common.drafts'),
query: CONST.TAB_SEARCH.DRAFTS,
icon: Expensicons.Pencil,
route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS),
},
{
title: translate('common.finished'),
query: CONST.TAB_SEARCH.FINISHED,
icon: Expensicons.CheckCircle,
route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.FINISHED),
},
];
const activeItemIndex = filterItems.findIndex((item) => item.query === query);

// We're not showing the filters on mobile yet since there's only one search option.
// We'll introduce the filters as part of https://github.com/Expensify/App/issues/39878
if (isSmallScreenWidth) {
return;
return (
<SearchFiltersNarrow
filterItems={filterItems}
activeItemIndex={activeItemIndex}
/>
);
}

return (
Expand All @@ -58,8 +80,8 @@ function SearchFilters({query}: SearchFiltersProps) {
interactive
title={item.title}
icon={item.icon}
iconWidth={variables.iconSizeLarge}
iconHeight={variables.iconSizeLarge}
iconWidth={variables.iconSizeNormal}
iconHeight={variables.iconSizeNormal}
luacmartins marked this conversation as resolved.
Show resolved Hide resolved
wrapperStyle={styles.sectionMenuItem}
focused={index === activeItemIndex}
hoverAndPressStyle={styles.hoveredComponentBG}
Expand Down
12 changes: 12 additions & 0 deletions src/pages/Search/SearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@ function SearchPage({route}: SearchPageProps) {

const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')},
shared: {
icon: Illustrations.SendMoney,
title: translate('common.shared'),
},
drafts: {
icon: Illustrations.Pencil,
title: translate('common.drafts'),
},
finished: {
icon: Illustrations.CheckmarkCircle,
title: translate('common.finished'),
},
jnowakow marked this conversation as resolved.
Show resolved Hide resolved
};

const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
Expand Down
Loading