Skip to content

Commit

Permalink
Improved styling for Configuration/Logs pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@calledude
calledude committed Dec 28, 2023
1 parent dfa8b2f commit ef3f0e1
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 69 deletions.
111 changes: 56 additions & 55 deletions Modix.Web/Components/Configuration/Claims.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,67 +10,68 @@
@using Modix.Web.Models.Common;

<PageTitle>Modix - Claims</PageTitle>
<MudText Typo="Typo.h4">Claim Assignments</MudText>

@if (ClaimData is not null && MappedClaims is not null && Roles is not null && _selectedRole is not null)
{
<MudGrid Class="pl-1">
<MudItem xs="8" md="4">
<MudPaper>
<MudList SelectedValue="@_selectedRole" Clickable="true" DisablePadding="true">
@foreach (var role in Roles.Values)
<div class="mt-sm-4">
<MudText Typo="Typo.h4">Claim Assignments</MudText>
<div class="d-flex flex-md-row flex-column">
<div class="mr-md-8">
<MudPaper>
<MudList SelectedValue="@_selectedRole" Clickable="true" DisablePadding="true">
@foreach (var role in Roles.Values)
{
<MudListItem Value="@role.Id" OnClick="() => _selectedRole = role.Id" Text="@role.Name" />
<MudDivider />
}
</MudList>
</MudPaper>
</div>
<div>
@foreach (var claimData in ClaimData.OrderBy(x => x.Value.Name).GroupBy(x => x.Value.Category))
{
<MudText Typo="Typo.h6">@claimData.Key.ToString().Titleize()</MudText>
foreach (var groupedClaimData in claimData)
{
<MudListItem Value="@role.Id" OnClick="() => _selectedRole = role.Id" Text="@role.Name" />
<MudDivider />
MappedClaims.TryGetValue((_selectedRole, groupedClaimData.Key), out var mappedClaimForRole);

<MudCard Class="pa-3 mb-5">
<div class="d-flex flex-sm-row flex-column">
<MudText Inline="true">
<b>@groupedClaimData.Value.Name.Titleize()</b>
</MudText>
<MudSpacer />
<MudButtonGroup Class="align-center" Size="Size.Small" Variant="Variant.Outlined" OverrideStyles="false">
<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, ClaimMappingType.Denied)"
Variant="@(mappedClaimForRole?.Type == ClaimMappingType.Denied ? Variant.Filled : Variant.Outlined)"
Color="Color.Error"
DisableElevation="true">
X
</MudButton>

<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, null)"
Variant="@(mappedClaimForRole is null ? Variant.Filled : Variant.Outlined)"
Color="Color.Dark"
DisableElevation="true">
–
</MudButton>

<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, ClaimMappingType.Granted)"
Variant="@(mappedClaimForRole?.Type == ClaimMappingType.Granted ? Variant.Filled : Variant.Outlined)"
Color="Color.Success"
DisableElevation="true">
✓
</MudButton>
</MudButtonGroup>
</div>
<MudText>@groupedClaimData.Value.Description</MudText>

</MudCard>
}
</MudList>
</MudPaper>
</MudItem>

<MudItem xs="11" md="8">
@foreach (var claimData in ClaimData.OrderBy(x => x.Value.Name).GroupBy(x => x.Value.Category))
{
<MudText Typo="Typo.h6">@claimData.Key.ToString().Titleize()</MudText>
foreach (var groupedClaimData in claimData)
{
MappedClaims.TryGetValue((_selectedRole, groupedClaimData.Key), out var mappedClaimForRole);

<MudCard Class="pa-3 mb-5">
<div class="d-flex flex-sm-row flex-column">
<MudText Inline="true">
<b>@groupedClaimData.Value.Name.Titleize()</b>
</MudText>
<MudSpacer />
<MudButtonGroup Size="Size.Small" Variant="Variant.Outlined" OverrideStyles="false">
<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, ClaimMappingType.Denied)"
Variant="@(mappedClaimForRole?.Type == ClaimMappingType.Denied ? Variant.Filled : Variant.Outlined)"
Color="Color.Error"
DisableElevation="true">
X
</MudButton>

<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, null)"
Variant="@(mappedClaimForRole is null ? Variant.Filled : Variant.Outlined)"
Color="Color.Dark"
DisableElevation="true">
–
</MudButton>

<MudButton OnClick="() => ModifyMapping(_selectedRole.Value, groupedClaimData.Key, ClaimMappingType.Granted)"
Variant="@(mappedClaimForRole?.Type == ClaimMappingType.Granted ? Variant.Filled : Variant.Outlined)"
Color="Color.Success"
DisableElevation="true">
✓
</MudButton>
</MudButtonGroup>
</div>
<MudText>@groupedClaimData.Value.Description</MudText>

</MudCard>
}
}
</MudItem>
</MudGrid>
</div>
</div>
</div>
}

@code {
Expand Down
15 changes: 8 additions & 7 deletions Modix.Web/Pages/Configuration.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

<CascadingAuthenticationState>

<MudGrid>
<MudItem xs="9" md="2" lg="1">
<MudText Typo="Typo.h6">Configuration</MudText>
<div class="d-flex flex-sm-row flex-column">
<div class="mb-4 px-4">
<MudText Class="mb-1" Typo="Typo.h6">Configuration</MudText>
<MudPaper>
<MudList SelectedValue="@SubPage" Clickable="true">
<MudListItem Value="@("roles")" Href="/config/roles" Text="Roles" />
Expand All @@ -28,8 +28,8 @@
<MudListItem Value="@("claims")" Href="/config/claims" Text="Claims" />
</MudList>
</MudPaper>
</MudItem>
<MudItem xs="12" md="9" lg="11">
</div>
<div class="flex-grow-1 px-4 mb-4">
@if (SubPage == "roles")
{
<AuthorizeView Roles="@nameof(AuthorizationClaim.DesignatedRoleMappingRead)">
Expand All @@ -48,8 +48,9 @@
<Claims />
</AuthorizeView>
}
</MudItem>
</MudGrid>
</div>
</div>

</CascadingAuthenticationState>

@code {
Expand Down
15 changes: 8 additions & 7 deletions Modix.Web/Pages/Logs.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@

<CascadingAuthenticationState>

<MudGrid>
<MudItem xs="9" md="2" lg="1">
<MudText Typo="Typo.h6">Logs</MudText>
<div class="d-flex flex-sm-row flex-column">
<div class="mb-4 px-4">
<MudText Class="mb-1" Typo="Typo.h6">Logs</MudText>
<MudPaper>
<MudList SelectedValue="@SubPage" Clickable="true">
<MudListItem Value="@("deletedMessages")" Href="/logs/deletedMessages" Text="Deletions" />
<MudDivider />
<MudListItem Value="@("infractions")" Href="/logs/infractions" Text="Infractions" />
</MudList>
</MudPaper>
</MudItem>
<MudItem xs="12" md="9" lg="11">
</div>
<div class="mb-4">
@if (SubPage == "infractions")
{
<AuthorizeView Roles="@nameof(AuthorizationClaim.ModerationRead)">
Expand All @@ -34,8 +34,9 @@
<DeletedMessages />
</AuthorizeView>
}
</MudItem>
</MudGrid>
</div>
</div>

</CascadingAuthenticationState>

@code {
Expand Down

0 comments on commit ef3f0e1

Please sign in to comment.