Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

fix(console): improve search placeholder text in organization

Browse source
This commit is contained in:
Charles Zhao 2023-11-07 15:12:03 +08:00
parent b5fce550fc
commit 2bf7d784bf
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
33 changed files with 73 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/ds-components/Search/index.module.scss
View file

@ -11,4 +11,8 @@
.searchIcon {
color: var(--color-text-secondary);
}
canvas {
display: none;
}
}

26
packages/console/src/ds-components/Search/index.tsx
View file

@ -1,5 +1,5 @@
import type { FormEventHandler, KeyboardEventHandler } from 'react';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import SearchIcon from '@/assets/icons/search.svg';
@ -17,15 +17,25 @@ type Props = {
onClearSearch?: () => void;
};
/**
* The body-2 font declared in @logto/core-kit/scss/fonts. It is referenced here to calculate the
* width of the placeholder text, which determines the minimum width of the search input field.
*/
const fontBody2 =
'400 14px / 20px -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji';
function Search({
defaultValue = '',
isClearable = false,
placeholder,
placeholder = '',
inputClassName,
onSearch,
onClearSearch,
}: Props) {
const [inputValue, setInputValue] = useState<string>(defaultValue);
const [minInputWidth, setMinInputWidth] = useState<number>(0);
const canvasRef = useRef<HTMLCanvasElement>(null);
const handleSearchKeyPress: KeyboardEventHandler<HTMLInputElement> = (event) => {
if (event.key === 'Enter' && inputValue) {
onSearch?.(inputValue);
@ -40,13 +50,25 @@ function Search({
onSearch?.(inputValue);
};
useEffect(() => {
// Render placeholder text in canvas to calculate its width in CSS pixels.
const ctx = canvasRef.current?.getContext('2d');
if (!ctx) {
return;
}
ctx.font = fontBody2;
setMinInputWidth(ctx.measureText(placeholder).width);
}, [placeholder]);
return (
<div className={styles.search}>
<canvas ref={canvasRef} />
<TextInput
className={inputClassName}
value={inputValue}
icon={<SearchIcon className={styles.searchIcon} />}
placeholder={placeholder}
style={{ minWidth: `${minInputWidth}px` }}
onChange={handleSearchChange}
onKeyPress={handleSearchKeyPress}
/>

2
packages/console/src/pages/Organizations/OrganizationsTable/index.tsx
View file

@ -95,7 +95,7 @@ function OrganizationsTable({ onCreate }: Props) {
<Search
defaultValue={keyword}
isClearable={Boolean(keyword)}
placeholder={t('organization_details.search_user_placeholder')}
placeholder={t('organizations.search_placeholder')}
onSearch={(value) => {
setKeyword(value);
setPage(1);

2
packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/de/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
View file

@ -20,7 +20,7 @@ const organization_details = {
remove_user_from_organization: 'Remove user from organization',
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
at_least_one_user: 'At least one user is required.',
};

1
packages/phrases/src/locales/en/translation/admin-console/organizations.ts
View file

@ -29,6 +29,7 @@ const organization = {
'Doing so will remove the permissions associated with this role from the affected users and delete the relations among organization roles, members in the organization, and organization permissions.',
role: 'Role',
create_role_placeholder: 'Users with view-only permissions.',
search_placeholder: 'Search by organization name or ID',
search_permission_placeholder: 'Type to search and select permissions',
search_role_placeholder: 'Type to search and select roles',
guide: {

2
packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/es/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/fr/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/it/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/ja/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/ko/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/pl-pl/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/pt-br/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/pt-pt/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/ru/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/tr-tr/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/zh-cn/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/zh-hk/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',

2
packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
View file

@ -38,7 +38,7 @@ const organization_details = {
remove_user_from_organization_description:
'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
/** UNTRANSLATED */
search_user_placeholder: 'Type to search and select users',
search_user_placeholder: 'Search by name, email, phone or user ID',
/** UNTRANSLATED */
at_least_one_user: 'At least one user is required.',
};

2
packages/phrases/src/locales/zh-tw/translation/admin-console/organizations.ts
View file

@ -54,6 +54,8 @@ const organizations = {
/** UNTRANSLATED */
create_role_placeholder: 'Users with view-only permissions.',
/** UNTRANSLATED */
search_placeholder: 'Search by organization name or ID',
/** UNTRANSLATED */
search_permission_placeholder: 'Type to search and select permissions',
/** UNTRANSLATED */
search_role_placeholder: 'Type to search and select roles',