[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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>