Merge pull request #22631 from abpframework/blazor-permission-management

Enhance permission modal to align all UI

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

@@ -37,22 +37,25 @@
                     @if (_groups != null && _groups.Any())
                     {
                         <div class="lpx-scroll-pills-container" >
-                            <Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync">
+                            <Tabs @key="_groups"
+                                  VerticalItemsColumnSize="ColumnSize.Is4.OnDesktop"
+                                  TabPosition="TabPosition.Start"
+                                  Pills="true"
+                                  SelectedTab="@_selectedTabName"
+                                  SelectedTabChanged="@OnSelectedTabChangedAsync">
                                 <Items>
                                     @foreach (var group in _groups)
                                     {
                                         <Tab Name="@GetNormalizedGroupName(group.Name)">
                                             @if (group.Permissions.Any(x => x.IsGranted))
                                             {
-                                                <span>
-                                                <b>@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )</b>
-                                            </span>
+                                                <b>@group.DisplayName (@(group.Permissions.Count(x => x.IsGranted)))</b>
                                             }
                                             else
                                             {
-                                                <span>
-                                                @group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )
-                                            </span>
+                                                <small>
+                                                    @group.DisplayName (@(group.Permissions.Count(x => x.IsGranted)))
+                                                </small>
                                             }
                                         </Tab>
                                     }

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs

@@ -58,7 +58,7 @@ public partial class PermissionManagementModal
             var result = await PermissionAppService.GetAsync(_providerName, _providerKey);
 
             _entityDisplayName = entityDisplayName ?? result.EntityDisplayName;
-            _allGroups = result.Groups;
+            _allGroups = result.Groups.OrderBy(x => x.DisplayName).ToList();
             _groups = _allGroups.ToList();
 
             NormalizePermissionGroup();

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

@@ -15,7 +15,7 @@ fieldset legend {
 }
 
 ::deep .lpx-scroll-pills-container ul li {
-    border: 1px solid #e8eef3;
+    border: 1px solid var(--lpx-border-color);
     margin-bottom: 10px;
     border-radius: 10px;
 }
@@ -26,6 +26,15 @@ fieldset legend {
     background-color: #6c5dd3 !important;
 }
 
-::deep .lpx-theme-dark .lpx-scroll-pills-container ul li {
-    border: 1px solid #23262a;
-}
+::deep .nav-pills .nav-link {
+    background: none;
+    border: 0;
+    border-radius: var(--bs-nav-pills-border-radius);
+}
+
+::deep .nav-pills .nav-link:disabled {
+    color: var(--bs-nav-link-disabled-color);
+    background-color: transparent;
+    border-color: transparent;
+}
+