Merge pull request #18842 from abpframework/ux-enhancements

Use outline button variation in modals
abpframework · Jan 25, 2024 · 0ee3c58 · 0ee3c58
2 parents 6beaf7c + 46afb5e
commit 0ee3c58
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 14 deletions.
diff --git a/...c/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs b/...c/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs
@@ -90,13 +90,13 @@ protected virtual string GetCloseButton()
         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();

diff --git a/...eme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js b/...eme.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;

diff --git a/framework/src/Volo.Abp.BlazoriseUI/Components/UiMessageAlert.razor b/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" />

diff --git a/...-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor b/...-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>
         }

diff --git a/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleManagement.razor b/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>

diff --git a/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/UserManagement.razor b/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>

diff --git a/...ement/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor b/...ement/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>

diff --git a/...ent.Blazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor b/...ent.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>
 

diff --git a/...SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.cshtml b/...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>
                 }

diff --git a/...gement/src/Volo.Abp.TenantManagement.Blazor/Pages/TenantManagement/TenantManagement.razor b/...gement/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>