forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add RTL support to `OrgTeamsPanel` (#334)
authored by
Joaquín Sánchez
and committed by
GitHub
3ac0f83f
4b26a00b
+19
-16
+19
-16
app/components/OrgTeamsPanel.vue
+19
-16
app/components/OrgTeamsPanel.vue
···
261
261
class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
262
262
>
263
263
<!-- Header -->
264
-
<div class="flex items-center justify-between p-4 border-b border-border">
264
+
<div class="flex items-center justify-start p-4 border-b border-border">
265
265
<h2 id="teams-heading" class="font-mono text-sm font-medium flex items-center gap-2">
266
-
<span class="i-carbon-group w-4 h-4 text-fg-muted" aria-hidden="true" />
266
+
<span class="i-carbon:group w-4 h-4 text-fg-muted" aria-hidden="true" />
267
267
{{ $t('org.teams.title') }}
268
268
<span v-if="teams.length > 0" class="text-fg-muted">({{ teams.length }})</span>
269
269
</h2>
270
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
270
271
<button
271
272
type="button"
272
273
class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
···
275
276
@click="loadTeams"
276
277
>
277
278
<span
278
-
class="i-carbon-renew block w-4 h-4"
279
+
class="i-carbon:renew block w-4 h-4"
279
280
:class="{ 'animate-spin': isLoadingTeams }"
280
281
aria-hidden="true"
281
282
/>
···
286
287
<div class="flex items-center gap-2 p-3 border-b border-border bg-bg">
287
288
<div class="flex-1 relative">
288
289
<span
289
-
class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
290
+
class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon:search w-3.5 h-3.5 text-fg-subtle"
290
291
aria-hidden="true"
291
292
/>
292
293
<label for="teams-search" class="sr-only">{{ $t('org.teams.filter_label') }}</label>
···
297
298
name="teams-search"
298
299
:placeholder="$t('org.teams.filter_placeholder')"
299
300
v-bind="noCorrect"
300
-
class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
301
+
class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
301
302
/>
302
303
</div>
303
304
<div
···
331
332
<!-- Loading state -->
332
333
<div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
333
334
<span
334
-
class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
335
+
class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
335
336
aria-hidden="true"
336
337
/>
337
338
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
···
361
362
<li v-for="teamName in filteredTeams" :key="teamName" class="bg-bg">
362
363
<!-- Team header -->
363
364
<div
364
-
class="flex items-center justify-between p-3 hover:bg-bg-subtle transition-colors duration-200"
365
+
class="flex items-center justify-start p-3 hover:bg-bg-subtle transition-colors duration-200"
365
366
>
366
367
<button
367
368
type="button"
368
-
class="flex-1 flex items-center gap-2 text-left rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
369
+
class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
369
370
:aria-expanded="expandedTeams.has(teamName)"
370
371
:aria-controls="`team-${teamName}-members`"
371
372
@click="toggleTeam(teamName)"
372
373
>
373
374
<span
374
-
class="w-4 h-4 transition-transform duration-200"
375
+
class="w-4 h-4 transition-transform duration-200 rtl-flip"
375
376
:class="[
376
-
expandedTeams.has(teamName) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right',
377
+
expandedTeams.has(teamName) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right',
377
378
'text-fg-muted',
378
379
]"
379
380
aria-hidden="true"
···
390
391
</span>
391
392
<span
392
393
v-if="isLoadingUsers[teamName]"
393
-
class="i-carbon-rotate-180 w-3 h-3 text-fg-muted motion-safe:animate-spin"
394
+
class="i-carbon:rotate-180 w-3 h-3 text-fg-muted motion-safe:animate-spin"
394
395
aria-hidden="true"
395
396
/>
396
397
</button>
398
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
397
399
<button
398
400
type="button"
399
401
class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
400
402
:aria-label="$t('org.teams.delete_team', { name: teamName })"
401
403
@click.stop="handleDestroyTeam(teamName)"
402
404
>
403
-
<span class="i-carbon-trash-can block w-4 h-4" aria-hidden="true" />
405
+
<span class="i-carbon:trash-can block w-4 h-4" aria-hidden="true" />
404
406
</button>
405
407
</div>
406
408
···
419
421
<li
420
422
v-for="user in teamUsers[teamName]"
421
423
:key="user"
422
-
class="flex items-center justify-between py-1 pl-2 pr-1 rounded hover:bg-bg-subtle transition-colors duration-200"
424
+
class="flex items-center justify-start py-1 pl-2 pr-1 rounded hover:bg-bg-subtle transition-colors duration-200"
423
425
>
424
426
<NuxtLink
425
427
:to="{ name: '~username', params: { username: user } }"
···
427
429
>
428
430
@{{ user }}
429
431
</NuxtLink>
432
+
<span class="font-mono text-sm text-fg">{{ teamName }}</span>
430
433
<button
431
434
type="button"
432
435
class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
433
436
:aria-label="$t('org.teams.remove_user', { user })"
434
437
@click="handleRemoveUser(teamName, user)"
435
438
>
436
-
<span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
439
+
<span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
437
440
</button>
438
441
</li>
439
442
</ul>
···
469
472
:aria-label="$t('org.teams.cancel_add_user')"
470
473
@click="showAddUserFor = null"
471
474
>
472
-
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
475
+
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
473
476
</button>
474
477
</form>
475
478
</div>
···
526
529
:aria-label="$t('org.teams.cancel_create')"
527
530
@click="showCreateTeam = false"
528
531
>
529
-
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
532
+
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
530
533
</button>
531
534
</form>
532
535
</div>