Reduce clutter in action tables

This commit is contained in:
Robert Marshall 2021-05-31 08:32:12 +01:00
parent 8933c6a372
commit 88e2a058f6
3 changed files with 30 additions and 10 deletions

View file

@ -11,13 +11,18 @@
<table class="actions"> <table class="actions">
@foreach (var apiKey in Model) @foreach (var apiKey in Model)
{ {
<tr> <tr class="@(apiKey.Enabled ?"green":"red")">
<td>@apiKey.Name</td> <td>@apiKey.Name</td>
<td class="stretch"><pre>@apiKey.Key</pre></td> <td class="stretch"><pre>@apiKey.Key</pre></td>
<td><img src="/images/copy.svg" alt="Copy" title="Copy" onclick="navigator.clipboard.writeText('@apiKey.Key')" /></td> <td><img src="/images/copy.svg" alt="Copy" title="Copy" onclick="navigator.clipboard.writeText('@apiKey.Key')" /></td>
<td>@(apiKey.Enabled?"Enabled":"Disabled")</td> @if (apiKey.Enabled)
<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td> {
<td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td> <td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
}
else
{
<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
}
<td><a asp-action="DeleteApiKey" asp-route-key="@apiKey.Key"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td> <td><a asp-action="DeleteApiKey" asp-route-key="@apiKey.Key"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
</tr> </tr>
} }

View file

@ -9,12 +9,17 @@
<table class="actions"> <table class="actions">
@foreach (var alias in Model) @foreach (var alias in Model)
{ {
<tr> <tr class="@(alias.Active?"green":"red")">
<td>@alias.Source</td> <td>@alias.Source</td>
<td class="stretch">@alias.Destination</td> <td class="stretch">@alias.Destination</td>
<td>@(alias.Active?"Enabled":"Disabled")</td> @if (alias.Active)
<td><a asp-action="EnableAlias" asp-route-id="@alias.Id"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td> {
<td><a asp-action="DisableAlias" asp-route-id="@alias.Id"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td> <td><a asp-action="DisableAlias" asp-route-id="@alias.Id"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
}
else
{
<td><a asp-action="EnableAlias" asp-route-id="@alias.Id"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
}
<td><a asp-action="DeleteAlias" asp-route-id="@alias.Id"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td> <td><a asp-action="DeleteAlias" asp-route-id="@alias.Id"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
</tr> </tr>
} }

View file

@ -235,8 +235,18 @@ table.actions {
border-collapse: collapse; border-collapse: collapse;
width:100%; width:100%;
tr:hover { tr{
background: $Grey-300; &.green{
background: $LightGreen-A100;
}
&.red{
background: $Red-A100;
}
&:hover {
background: $Grey-300;
}
} }
td { td {