mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
fix(collections): name the phone label chip after what it opens
The chip that opens the label manager was labelled with collections.linkLabel, which is the caption of a link in the list editor. English calls that one "Label" so it happened to read correctly there, but German got "Bezeichnung", Russian "Название" and Ukrainian "Підпис": wrong word, and long enough to push the filter row out of its panel. It uses collections.labels.title now, which is the manager it opens and is shorter in every locale. collections.select was the other one over the edge. It is only an aria-label on the desktop filter bar, so the eight locales whose word did not fit are on a shorter one now. The truncate on the chip labels never worked: a flex item keeps min-width:auto, so the row grew past the panel instead of shrinking its chips. With min-w-0 a long label name or a bumped-up text size ellipsises inside the panel.
This commit is contained in:
@@ -27,8 +27,13 @@ import { CancelPill, PrimaryPill } from './MCollSheetKit'
|
||||
const HEADER_CIRCLE =
|
||||
'flex h-[38px] w-[38px] flex-none items-center justify-center rounded-full border border-[color:var(--m-gbr)] bg-[color:var(--m-sheet)] text-m-ink shadow-[0_5px_12px_-8px_rgba(0,0,0,.18)]'
|
||||
|
||||
// min-w-0 is what lets the truncate on the chip labels engage: a flex item keeps
|
||||
// min-width:auto by default, so the row grew past the panel instead of shrinking
|
||||
// its chips. The labels are short enough to fit in every locale now, but a long
|
||||
// label name in the filter chip, or a bumped-up text size, still has to ellipsise
|
||||
// inside the panel rather than spill out of it.
|
||||
const FILTER_CHIP =
|
||||
'flex flex-1 items-center justify-center gap-[5px] rounded-full py-2 text-[0.75rem] font-semibold'
|
||||
'flex min-w-0 flex-1 items-center justify-center gap-[5px] rounded-full py-2 text-[0.75rem] font-semibold'
|
||||
|
||||
const CHIP_IDLE = 'border border-[color:var(--m-rowbr)] bg-m-sheetop text-m-ink'
|
||||
const CHIP_ON = 'border border-transparent bg-m-act text-m-actfg'
|
||||
@@ -273,7 +278,7 @@ export default function MCollections() {
|
||||
{canManageLabels && (
|
||||
<button type="button" onClick={() => c.setShowLabelManager(true)} className={`${FILTER_CHIP} ${CHIP_IDLE}`}>
|
||||
<Plus size={12} strokeWidth={2.2} className="flex-none" />
|
||||
<span className="truncate">{t('collections.linkLabel')}</span>
|
||||
<span className="truncate">{t('collections.labels.title')}</span>
|
||||
</button>
|
||||
)}
|
||||
{showSelect && (
|
||||
|
||||
@@ -239,7 +239,7 @@ describe('MCollections', () => {
|
||||
expect(screen.queryByRole('button', { name: 'collections.editListTitle' })).not.toBeInTheDocument()
|
||||
expect(screen.queryByRole('button', { name: 'collections.share.title' })).not.toBeInTheDocument()
|
||||
// No per-list labels on the union.
|
||||
expect(screen.queryByRole('button', { name: /collections.linkLabel/ })).not.toBeInTheDocument()
|
||||
expect(screen.queryByRole('button', { name: /collections.labels.title/ })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-MOB-COLSCR-005: without an active list the generic page title is used', () => {
|
||||
@@ -365,7 +365,7 @@ describe('MCollections', () => {
|
||||
fireEvent.click(chips[1])
|
||||
expect(screen.getByText('collections.labels.empty')).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /collections.linkLabel/ }))
|
||||
fireEvent.click(screen.getByRole('button', { name: /collections.labels.title/ }))
|
||||
expect(fn('setShowLabelManager')).toHaveBeenCalledWith(true)
|
||||
})
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Editor',
|
||||
'collections.role.admin': 'Administrador',
|
||||
'collections.picker.allLists': 'Todas as listas',
|
||||
'collections.select': 'Selecionar',
|
||||
'collections.select': 'Escolher',
|
||||
'collections.selectAll': 'Selecionar tudo',
|
||||
'collections.deselectAll': 'Desmarcar tudo',
|
||||
'collections.moveToList': 'Mover para lista',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Editor',
|
||||
'collections.role.admin': 'Administrador',
|
||||
'collections.picker.allLists': 'Totes les llistes',
|
||||
'collections.select': 'Seleccionar',
|
||||
'collections.select': 'Triar',
|
||||
'collections.selectAll': 'Seleccionar-ho tot',
|
||||
'collections.deselectAll': 'Deseleccionar-ho tot',
|
||||
'collections.moveToList': 'Moure a la llista',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Bearbeiter',
|
||||
'collections.role.admin': 'Admin',
|
||||
'collections.picker.allLists': 'Alle Listen',
|
||||
'collections.select': 'Auswählen',
|
||||
'collections.select': 'Wählen',
|
||||
'collections.selectAll': 'Alle auswählen',
|
||||
'collections.deselectAll': 'Auswahl aufheben',
|
||||
'collections.moveToList': 'In Liste verschieben',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Editor',
|
||||
'collections.role.admin': 'Administrador',
|
||||
'collections.picker.allLists': 'Todas las listas',
|
||||
'collections.select': 'Seleccionar',
|
||||
'collections.select': 'Elegir',
|
||||
'collections.selectAll': 'Seleccionar todo',
|
||||
'collections.deselectAll': 'Deseleccionar todo',
|
||||
'collections.moveToList': 'Mover a lista',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Éditeur',
|
||||
'collections.role.admin': 'Admin',
|
||||
'collections.picker.allLists': 'Toutes les listes',
|
||||
'collections.select': 'Sélectionner',
|
||||
'collections.select': 'Choisir',
|
||||
'collections.selectAll': 'Tout sélectionner',
|
||||
'collections.deselectAll': 'Tout désélectionner',
|
||||
'collections.moveToList': 'Déplacer vers une liste',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Szerkesztő',
|
||||
'collections.role.admin': 'Adminisztrátor',
|
||||
'collections.picker.allLists': 'Összes lista',
|
||||
'collections.select': 'Kijelölés',
|
||||
'collections.select': 'Jelölés',
|
||||
'collections.selectAll': 'Összes kijelölése',
|
||||
'collections.deselectAll': 'Kijelölés megszüntetése',
|
||||
'collections.moveToList': 'Áthelyezés listába',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Editore',
|
||||
'collections.role.admin': 'Admin',
|
||||
'collections.picker.allLists': 'Tutte le liste',
|
||||
'collections.select': 'Seleziona',
|
||||
'collections.select': 'Scegli',
|
||||
'collections.selectAll': 'Seleziona tutto',
|
||||
'collections.deselectAll': 'Deseleziona tutto',
|
||||
'collections.moveToList': 'Sposta in lista',
|
||||
|
||||
@@ -10,7 +10,7 @@ const collection: TranslationStrings = {
|
||||
'collections.role.editor': 'Bewerker',
|
||||
'collections.role.admin': 'Beheerder',
|
||||
'collections.picker.allLists': 'Alle lijsten',
|
||||
'collections.select': 'Selecteren',
|
||||
'collections.select': 'Kiezen',
|
||||
'collections.selectAll': 'Alles selecteren',
|
||||
'collections.deselectAll': 'Selectie opheffen',
|
||||
'collections.moveToList': 'Naar lijst verplaatsen',
|
||||
|
||||
Reference in New Issue
Block a user