Merge pull request #18842 from abpframework/ux-enhancements

Use outline button variation in modals

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs

@@ -90,13 +90,13 @@ public class AbpModalFooterTagHelperService : AbpTagHelperService<AbpModalFooter
         return element.ToHtmlString();
     }
 
-    protected virtual string GetCancelButton()
+    protected virtual string GetCancelButton(bool isDestructive = false)
     {
         var element = new TagBuilder("button");
         element.Attributes.Add("type", "button");
         element.Attributes.Add("data-bs-dismiss", "modal");
         element.AddCssClass("btn");
-        element.AddCssClass("btn-secondary");
+        element.AddCssClass("btn-outline-primary");
         element.InnerHtml.Append(_localizer["Cancel"]);
 
         return element.ToHtmlString();

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js

@@ -103,6 +103,13 @@ var abp = abp || {};
         abp.libs.sweetAlert.config.default.confirmButtonText = l('Ok');
         abp.libs.sweetAlert.config.default.denyButtonText = l('No');
         abp.libs.sweetAlert.config.default.cancelButtonText = l('Cancel');
+        abp.libs.sweetAlert.config.default.buttonsStyling = false;
+        abp.libs.sweetAlert.config.default.customClass = {
+            confirmButton: "btn btn-primary",
+            cancelButton: "btn btn-outline-primary mx-2",
+            denyButton: "btn btn-outline-primary mx-2"
+        };
+
         abp.libs.sweetAlert.config.confirm.title = l('AreYouSure');
         abp.libs.sweetAlert.config.confirm.confirmButtonText = l('Yes');
         abp.libs.sweetAlert.config.confirm.showCancelButton = true;

framework/src/Volo.Abp.BlazoriseUI/Components/UiMessageAlert.razor

@@ -22,7 +22,7 @@
         <ModalFooter class="d-flex justify-content-center">
                 @if ( IsConfirmation )
                 {
-                    <Button Color="Color.Danger" Padding="Padding.Is3.OnX" Margin="Margin.Is1.OnX" Clicked="@OnCancelClicked">
+                    <Button Color="Color.Primary" Outline Padding="Padding.Is3.OnX" Margin="Margin.Is1.OnX" Clicked="@OnCancelClicked">
                         @if ( Options?.CancelButtonIcon != null )
                         {
                             <Icon Name="@Options.CancelButtonIcon" Margin="Margin.Is2.FromEnd" />

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor

@@ -95,8 +95,8 @@
                 </Tabs>
             </ModalBody>
             <ModalFooter>
-                <Button Color="Color.Primary" Clicked="@(async () => await DeleteAsync(ProviderName,ProviderKey))">@L["ResetToDefault"]</Button>
-                <Button Color="Color.Secondary" Clicked="CloseModal">@L["Cancel"]</Button>
+                <Button class="btn btn-link" Clicked="CloseModal">@L["Cancel"]</Button>
+                <Button Color="Color.Primary" Outline Clicked="@(async () => await DeleteAsync(ProviderName,ProviderKey))">@L["ResetToDefault"]</Button>
                 <Button Color="Color.Primary" Clicked="SaveAsync">@L["Save"]</Button>
             </ModalFooter>
         }

modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleManagement.razor

@@ -63,7 +63,7 @@
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@CreateEntityAsync"/>
                 </ModalFooter>
             </Form>
@@ -101,7 +101,7 @@
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@UpdateEntityAsync"/>
                 </ModalFooter>
             </Form>

modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/UserManagement.razor

@@ -154,7 +154,7 @@
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@CreateEntityAsync" />
                 </ModalFooter>
             </Form>
@@ -275,7 +275,7 @@
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@UpdateEntityAsync" />
                 </ModalFooter>
             </Form>

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

@@ -81,7 +81,7 @@
             }
         </ModalBody>
         <ModalFooter>
-            <Button Color="Color.Secondary" Clicked="CloseModal">@L["Cancel"]</Button>
+            <Button Color="Color.Primary" Outline Clicked="CloseModal">@L["Cancel"]</Button>
             <Button Color="Color.Primary" Clicked="SaveAsync">@L["Save"]</Button>
         </ModalFooter>
     </ModalContent>

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor

@@ -95,7 +95,7 @@
                 <SubmitButton Clicked="@UpdateSettingsAsync"/>
                 @if (HasSendTestEmailPermission)
                 {
-                    <Button style="margin: 0.25rem" Color="Color.Primary" Clicked="OpenSendTestEmailModalAsync">@L["SendTestEmail"]</Button>
+                    <Button style="margin: 0.25rem" Color="Color.Primary" Outline Clicked="OpenSendTestEmailModalAsync">@L["SendTestEmail"]</Button>
                 }
             </Column>
             

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.cshtml

@@ -31,7 +31,7 @@
                 </abp-button>
                 @if (await PermissionChecker.IsGrantedAsync(SettingManagementPermissions.EmailingTest))
                 {
-                    <abp-button button-type="Primary" id="SendTestEmailButton">
+                    <abp-button button-type="Outline_Primary" id="SendTestEmailButton">
                         <i class="fa fa-send"></i> @L["SendTestEmail"]
                     </abp-button>
                 }

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor/Pages/TenantManagement/TenantManagement.razor

@@ -85,7 +85,7 @@
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@CreateEntityAsync"/>
                 </ModalFooter>
             </Form>
@@ -119,7 +119,7 @@
                     <ExtensionProperties TEntityType="TenantUpdateDto" TResourceType="AbpTenantManagementResource" Entity="@EditingEntity" LH="@LH" ModalType="ExtensionPropertyModalType.EditModal" />
                 </ModalBody>
                 <ModalFooter>
-                    <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
+                    <Button Color="Color.Primary" Outline Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
                     <SubmitButton Clicked="@UpdateEntityAsync"/>
                 </ModalFooter>
             </Form>