tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #22282 from abpframework/permission-scrollable 

Enhance Permission Management Modal with scrollable tabs and improved styling
pull/22339/head
Yağmur Çelik 2 years ago
committed by GitHub
parent
942939810c f59af10a34
commit
54664bcba0
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 107
      modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
  2. 10
      modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css

107
modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
View File

@ -5,7 +5,7 @@
<ModalTitle>@L["Permissions"] - @_entityDisplayName</ModalTitle> <ModalTitle>@L["Permissions"] - @_entityDisplayName</ModalTitle>
<CloseButton Clicked="CloseModal" /> <CloseButton Clicked="CloseModal" />
</ModalHeader> </ModalHeader>
<ModalBody MaxHeight="50"> <ModalBody Overflow="Overflow.Hidden">
<Row Class="row d-flex align-items-center mb-2"> <Row Class="row d-flex align-items-center mb-2">
<Column> <Column>
@ -36,62 +36,65 @@
@if (_groups != null && _groups.Any()) @if (_groups != null && _groups.Any())
{ {
<Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync"> <div class="lpx-scroll-pills-container" >
<Items> <Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync">
@foreach (var group in _groups) <Items>
{ @foreach (var group in _groups)
<Tab Name="@GetNormalizedGroupName(group.Name)"> {
@if (group.Permissions.Any(x => x.IsGranted)) <Tab Name="@GetNormalizedGroupName(group.Name)">
{ @if (group.Permissions.Any(x => x.IsGranted))
<span> {
<span>
<b>@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )</b> <b>@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )</b>
</span> </span>
} }
else else
{ {
<span> <span>
@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) ) @group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )
</span> </span>
} }
</Tab> </Tab>
} }
</Items> </Items>
<Content> <Content>
@foreach (var group in _groups) @foreach (var group in _groups)
{ {
<TabPanel Name="@GetNormalizedGroupName(group.Name)"> <TabPanel Name="@GetNormalizedGroupName(group.Name)">
<div class="w-100" style="height: 500px;overflow-y: auto">
<Field> <Field>
<Check <Check
Disabled="@(IsPermissionGroupDisabled(group))" Disabled="@(IsPermissionGroupDisabled(group))"
Checked="@(group.Permissions.All(x => x.IsGranted))" Checked="@(group.Permissions.All(x => x.IsGranted))"
Cursor="Cursor.Pointer" Cursor="Cursor.Pointer"
CheckedChanged="@(b => GroupGrantAllChanged(b, group))" CheckedChanged="@(b => GroupGrantAllChanged(b, group))"
TValue="bool"> TValue="bool">
@L["SelectAllInThisTab"] @L["SelectAllInThisTab"]
</Check> </Check>
</Field> </Field>
<Divider /> <Divider />
@foreach (var permission in group.Permissions) @foreach (var permission in group.Permissions)
{ {
<Field Style="@($"margin-inline-start: {GetPermissionDepthOrDefault(permission.Name) * 20}px")"> <Field Style="@($"margin-inline-start: {GetPermissionDepthOrDefault(permission.Name) * 20}px")">
<Check <Check
Disabled="@(IsDisabledPermission(permission))" Disabled="@(IsDisabledPermission(permission))"
Cursor="Cursor.Pointer" Cursor="Cursor.Pointer"
Checked="@permission.IsGranted" Checked="@permission.IsGranted"
CheckedChanged="@(b => PermissionChanged(b, group, permission))" CheckedChanged="@(b => PermissionChanged(b, group, permission))"
TValue="bool"> TValue="bool">
@GetShownName(permission) @GetShownName(permission)
</Check> </Check>
</Field> </Field>
} }
</div>
</TabPanel> </TabPanel>
} }
</Content> </Content>
</Tabs> </Tabs>
</div>
} }
</fieldset> </fieldset>

10
modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css
View File

@ -3,29 +3,29 @@ fieldset legend {
width: auto; width: auto;
} }
.lpx-scroll-pills-container ul { ::deep .lpx-scroll-pills-container ul {
display: block; display: block;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
.lpx-scroll-pills-container .tab-content { ::deep .lpx-scroll-pills-container .tab-content {
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.lpx-scroll-pills-container ul li { ::deep .lpx-scroll-pills-container ul li {
border: 1px solid #e8eef3; border: 1px solid #e8eef3;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 10px; border-radius: 10px;
} }
.lpx-scroll-pills-container ul li a.active { ::deep .lpx-scroll-pills-container ul li a.active {
color: #fff !important; color: #fff !important;
border-color: #6c5dd3 !important; border-color: #6c5dd3 !important;
background-color: #6c5dd3 !important; background-color: #6c5dd3 !important;
} }
.lpx-theme-dark .lpx-scroll-pills-container ul li { ::deep .lpx-theme-dark .lpx-scroll-pills-container ul li {
border: 1px solid #23262a; border: 1px solid #23262a;
} }
Write Preview
Loading…
Cancel
Save