Ajoute des icones aux actions admin

This commit is contained in:
2026-04-15 22:05:45 +02:00
parent 0e6115e423
commit 99a3f6d0aa
3 changed files with 41 additions and 6 deletions

View File

@@ -140,8 +140,14 @@
</label> </label>
<div class="admin-toolbar-actions"> <div class="admin-toolbar-actions">
<button class="button secondary small" type="button" @onclick="OpenCreateModal">Ajouter un utilisateur</button> <button class="button secondary small with-icon" type="button" @onclick="OpenCreateModal">
<button class="button ghost small" type="button" @onclick="ReloadUsersAsync" disabled="@IsLoadingUsers">Actualiser</button> <span class="material-icons action-icon" aria-hidden="true">person_add</span>
<span>Ajouter un utilisateur</span>
</button>
<button class="button ghost small with-icon" type="button" @onclick="ReloadUsersAsync" disabled="@IsLoadingUsers">
<span class="material-icons action-icon" aria-hidden="true">refresh</span>
<span>Actualiser</span>
</button>
</div> </div>
</div> </div>
@@ -192,11 +198,19 @@
<td>@BuildUserCardFootnote(user)</td> <td>@BuildUserCardFootnote(user)</td>
<td> <td>
<div class="admin-actions-cell"> <div class="admin-actions-cell">
<button class="button ghost small" type="button" @onclick="@(() => SelectUserAsync(user.Subject))"> <button class="button ghost small icon-button"
Modifier type="button"
title="Modifier"
aria-label="Modifier"
@onclick="@(() => SelectUserAsync(user.Subject))">
<span class="material-icons action-icon" aria-hidden="true">edit</span>
</button> </button>
<button class="button danger small" type="button" @onclick="@(() => PromptDeleteUser(user))"> <button class="button ghost danger small icon-button"
Supprimer type="button"
title="Supprimer"
aria-label="Supprimer"
@onclick="@(() => PromptDeleteUser(user))">
<span class="material-icons action-icon" aria-hidden="true">delete</span>
</button> </button>
</div> </div>
</td> </td>

View File

@@ -18,6 +18,7 @@
<link rel="shortcut icon" href="favicon.png" /> <link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="logo.png" /> <link rel="apple-touch-icon" href="logo.png" />
<link rel="manifest" href="site.webmanifest" /> <link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<link href="ChessCubing.App.styles.css" rel="stylesheet" /> <link href="ChessCubing.App.styles.css" rel="stylesheet" />
<script src="js/chesscubing-interop.js"></script> <script src="js/chesscubing-interop.js"></script>

View File

@@ -196,6 +196,22 @@ p {
padding: 0.7rem 0.9rem; padding: 0.7rem 0.9rem;
} }
.button.with-icon {
gap: 0.5rem;
}
.button.icon-button {
width: 2.55rem;
height: 2.55rem;
padding: 0;
border-radius: 14px;
}
.action-icon {
font-size: 1.15rem;
line-height: 1;
}
.setup-shell { .setup-shell {
position: relative; position: relative;
width: min(1220px, calc(100% - 2rem)); width: min(1220px, calc(100% - 2rem));
@@ -1670,6 +1686,10 @@ body.site-menu-hidden .site-menu-shell {
gap: 0.55rem; gap: 0.55rem;
} }
.admin-actions-cell .button {
flex: 0 0 auto;
}
.admin-chip-success { .admin-chip-success {
background: rgba(69, 185, 127, 0.14); background: rgba(69, 185, 127, 0.14);
color: #dff7ea; color: #dff7ea;