From 649f35e0d12b93e7c711c18a2c7cf5fab98a2a6b Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 25 Nov 2019 14:51:46 +0100 Subject: [PATCH] Improve labels --- src/components/Navigator/NavigatorSection.tsx | 16 +++++++++++++++- .../Navigator/modes/commands/actions.ts | 7 ++++--- src/components/Navigator/modes/customers.ts | 1 + src/components/Navigator/modes/default/views.ts | 5 +++-- src/components/Navigator/modes/orders.ts | 4 ++-- src/components/Navigator/types.ts | 9 ++++++++- 6 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/components/Navigator/NavigatorSection.tsx b/src/components/Navigator/NavigatorSection.tsx index c4c5b0623..69f7eb603 100644 --- a/src/components/Navigator/NavigatorSection.tsx +++ b/src/components/Navigator/NavigatorSection.tsx @@ -22,8 +22,12 @@ const useStyles = makeStyles( color: theme.palette.text.secondary, fontWeight: 400 }, + display: "flex", margin: theme.spacing(1, 0) }, + itemLabel: { + display: "inline-block" + }, label: { paddingLeft: theme.spacing(2), textTransform: "uppercase" @@ -34,6 +38,9 @@ const useStyles = makeStyles( }, margin: theme.spacing(2, 0), padding: theme.spacing(0, 1) + }, + spacer: { + flex: 1 } }), { @@ -70,7 +77,14 @@ const NavigatorSection: React.FC = props => { selected={highlightedIndex === index} key={[item.label, item.type].join(":")} > - {item.label} + + {item.label} + {item.caption && ( + {item.caption} + )} + + + {item.extraInfo} ); })} diff --git a/src/components/Navigator/modes/commands/actions.ts b/src/components/Navigator/modes/commands/actions.ts index 2d00ab69d..4f2bc1d23 100644 --- a/src/components/Navigator/modes/commands/actions.ts +++ b/src/components/Navigator/modes/commands/actions.ts @@ -9,7 +9,7 @@ import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import { OrderDraftCreate } from "@saleor/orders/types/OrderDraftCreate"; import { productAddUrl } from "@saleor/products/urls"; import { MutationFunction } from "react-apollo"; -import { QuickSearchAction } from "../../types"; +import { QuickSearchActionInput } from "../../types"; import messages from "../messages"; const threshold = 0.05; @@ -24,7 +24,7 @@ export function searchInCommands( intl: IntlShape, navigate: UseNavigatorResult, createOrder: MutationFunction -): QuickSearchAction[] { +): QuickSearchActionInput[] { const actions: Command[] = [ { label: intl.formatMessage(messages.addCategory), @@ -56,6 +56,7 @@ export function searchInCommands( label: action.label, onClick: action.onClick, score: score(action.label, search), + text: action.label, type: "action" })); } @@ -65,7 +66,7 @@ function getCommandModeActions( intl: IntlShape, navigate: UseNavigatorResult, createOrder: MutationFunction -): QuickSearchAction[] { +): QuickSearchActionInput[] { return [...searchInCommands(query, intl, navigate, createOrder)] .filter(action => action.score >= threshold) .sort((a, b) => (a.score <= b.score ? 1 : -1)) diff --git a/src/components/Navigator/modes/customers.ts b/src/components/Navigator/modes/customers.ts index 9efadd43f..4a7e8d7c0 100644 --- a/src/components/Navigator/modes/customers.ts +++ b/src/components/Navigator/modes/customers.ts @@ -12,6 +12,7 @@ export function searchInCustomers( customers: SearchCustomers_search_edges_node[] ): QuickSearchAction[] { return customers.map(customer => ({ + caption: customer.email, label: customer.firstName && customer.lastName ? intl.formatMessage(messages.customerWithName, { diff --git a/src/components/Navigator/modes/default/views.ts b/src/components/Navigator/modes/default/views.ts index 6ae6980f0..dede14220 100644 --- a/src/components/Navigator/modes/default/views.ts +++ b/src/components/Navigator/modes/default/views.ts @@ -21,7 +21,7 @@ import { staffListUrl } from "@saleor/staff/urls"; import { countryListUrl } from "@saleor/taxes/urls"; import { languageListUrl } from "@saleor/translations/urls"; import { webhooksListUrl } from "@saleor/webhooks/urls"; -import { QuickSearchAction } from "../../types"; +import { QuickSearchActionInput } from "../../types"; interface View { label: string; @@ -31,7 +31,7 @@ function searchInViews( search: string, intl: IntlShape, navigate: UseNavigatorResult -): QuickSearchAction[] { +): QuickSearchActionInput[] { const views: View[] = [ { label: intl.formatMessage(sectionNames.attributes), @@ -123,6 +123,7 @@ function searchInViews( label: view.label, onClick: () => navigate(view.url), score: score(view.label, search), + text: view.label, type: "view" })); } diff --git a/src/components/Navigator/modes/orders.ts b/src/components/Navigator/modes/orders.ts index 0156d68c6..d4e3d7da2 100644 --- a/src/components/Navigator/modes/orders.ts +++ b/src/components/Navigator/modes/orders.ts @@ -1,7 +1,7 @@ import { IntlShape } from "react-intl"; import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; -import { maybe } from "@saleor/misc"; +import { maybe, transformOrderStatus } from "@saleor/misc"; import { orderUrl } from "@saleor/orders/urls"; import { CheckIfOrderExists_order } from "../queries/types/CheckIfOrderExists"; import { QuickSearchAction } from "../types"; @@ -26,11 +26,11 @@ function getOrdersModeActions( if (isQueryValidOrderNumber(query) && maybe(() => order.id === gqlId)) { return [ { + extraInfo: transformOrderStatus(order.status, intl).localized, label: intl.formatMessage(messages.goToOrder, { orderNumber: query }), onClick: () => navigate(orderUrl(gqlId)), - score: 1, type: "action" } ]; diff --git a/src/components/Navigator/types.ts b/src/components/Navigator/types.ts index ddfab5999..6a9a505e1 100644 --- a/src/components/Navigator/types.ts +++ b/src/components/Navigator/types.ts @@ -1,10 +1,17 @@ export type QuickSearchActionType = "action" | "customer" | "view"; export interface QuickSearchAction { + caption?: string; + extraInfo?: string; label: string; - score: number; + price?: number; type: QuickSearchActionType; onClick: () => void; } +export interface QuickSearchActionInput extends QuickSearchAction { + score: number; + text: string; +} + export type QuickSearchMode = "default" | "commands" | "orders" | "customers";