Improve labels

This commit is contained in:
dominik-zeglen 2019-11-25 14:51:46 +01:00
parent 42b55e860b
commit 649f35e0d1
6 changed files with 33 additions and 9 deletions

View file

@ -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<NavigatorSectionProps> = props => {
selected={highlightedIndex === index}
key={[item.label, item.type].join(":")}
>
{item.label}
<span className={classes.itemLabel}>
<span>{item.label}</span>
{item.caption && (
<Typography variant="caption">{item.caption}</Typography>
)}
</span>
<span className={classes.spacer} />
{item.extraInfo}
</MenuItem>
);
})}

View file

@ -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<OrderDraftCreate, {}>
): 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<OrderDraftCreate, {}>
): QuickSearchAction[] {
): QuickSearchActionInput[] {
return [...searchInCommands(query, intl, navigate, createOrder)]
.filter(action => action.score >= threshold)
.sort((a, b) => (a.score <= b.score ? 1 : -1))

View file

@ -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, {

View file

@ -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"
}));
}

View file

@ -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"
}
];

View file

@ -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";