orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 移除 Modal Toast 等组件移动代码

This commit is contained in:
Argo Zhang 2020-03-03 15:58:30 +08:00
parent 5c3aaea05d
commit bd2c4823ae
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
13 changed files with 206 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/admin/Bootstrap.Admin/Pages/Components/ModalBase.cs
View File

@ -64,18 +64,6 @@ namespace Bootstrap.Admin.Pages.Components
[Parameter]
public bool ShowFooter { get; set; } = true;
/// <summary>
/// OnAfterRender 方法
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitModal(Id);
}
}
/// <summary>
/// SetParametersAsync 方法
/// </summary>

4
src/admin/Bootstrap.Admin/Pages/Components/ToastBase.cs
View File

@ -63,10 +63,6 @@ namespace Bootstrap.Admin.Pages.Components
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitToast(Id);
}
if (_show)
{
_show = false;

14
src/admin/Bootstrap.Admin/Pages/Extensions/JSRuntimeExtensions.cs
View File

@ -46,20 +46,6 @@ namespace Microsoft.JSInterop
/// <param name="jSRuntime"></param>
public static void InitDocument(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initDocument");
/// <summary>
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
/// <param name="id"></param>
public static void InitModal(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initModal", id);
/// <summary>
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
/// <param name="id"></param>
public static void InitToast(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initToast", id);
/// <summary>
/// 弹出 Modal 组件
/// </summary>

148
src/admin/Bootstrap.Admin/Views/Admin/Exceptions.cshtml
View File

@ -52,91 +52,89 @@
<table></table>
</div>
</div>
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="errorList" class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">程序异常日志窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline" id="dataForm" name="dataForm"><div class="form-row"></div></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="errorList" class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">程序异常日志窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline" id="dataForm" name="dataForm"><div class="form-row"></div></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</div>
<div id="errorDetail" class="modal-content icon-content">
<div class="modal-header">
<h5 class="modal-title" id="myDetailModalLabel">程序异常日志窗口</h5>
<button type="button" class="close" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="iconview">
<i id="fa-top" class="fa-target"></i>
<div class="affix">
<div><a href="#fa-top" class="fa fa-arrow-circle-up"></a></div>
<div><a href="#fa-bottom" class="fa fa-arrow-circle-down"></a></div>
</div>
<div id="dataFormDetail" class="ex-content"><div class="text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div></div>
<i id="fa-bottom" class="fa-target"></i>
</div>
<div id="errorDetail" class="modal-content icon-content">
<div class="modal-header">
<h5 class="modal-title" id="myDetailModalLabel">程序异常日志窗口</h5>
<button type="button" class="close" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="iconview">
<i id="fa-top" class="fa-target"></i>
<div class="affix">
<div><a href="#fa-top" class="fa fa-arrow-circle-up"></a></div>
<div><a href="#fa-bottom" class="fa fa-arrow-circle-down"></a></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<div id="dataFormDetail" class="ex-content"><div class="text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div></div>
<i id="fa-bottom" class="fa-target"></i>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
<form class="form-inline">
<div class="row">
<div class="form-group col-12">
<label class="control-label" for="txt_operate_start">起始时间</label>
<div class="input-group date">
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
<form class="form-inline">
<div class="row">
<div class="form-group col-12">
<label class="control-label" for="txt_operate_start">起始时间</label>
<div class="input-group date">
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
</div>
<div class="form-group col-12">
<label class="control-label" for="txt_operate_end">终止时间</label>
<div class="input-group date">
<input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
<div class="form-group col-12">
<label class="control-label" for="txt_operate_end">终止时间</label>
<div class="input-group date">
<input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
}
</div>

34
src/admin/Bootstrap.Admin/Views/Admin/Healths.cshtml
View File

@ -37,27 +37,25 @@
</environment>
<script src="~/js/healths.js" asp-append-version="true"></script>
}
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">健康检查明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body nobar">
<table id="checkDetail"></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">健康检查明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body nobar">
<table id="checkDetail"></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</div>
}
</div>
<div class="card">
<div class="card-header">
健康检查结果

44
src/admin/Bootstrap.Admin/Views/Admin/Logs.cshtml
View File

@ -78,30 +78,28 @@
<table></table>
</div>
</div>
@section modal {
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-row">
<div class="form-group col-12">
<pre id="requestData"></pre>
</div>
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-row">
<div class="form-group col-12">
<pre id="requestData"></pre>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</div>
}
</div>

80
src/admin/Bootstrap.Admin/Views/Admin/Settings.cshtml
View File

@ -25,47 +25,6 @@
<script src="~/lib/longbow/longbow.validate.js"></script>
<script src="~/js/settings.js" asp-append-version="true"></script>
}
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="[data-method='saveNewApp']" data-valid-modal="#dialogNew">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">前台应用设置</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label" for="appKey">应用ID</label>
<input type="text" class="form-control" id="appKey" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<input type="hidden" id="roleID" />
<label class="control-label" for="appName">应用名称</label>
<input type="text" class="form-control" id="appName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-12">
<label class="control-label" for="appUrl">应用首页</label>
<input type="text" class="form-control flex-fill" id="appUrl" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" data-method="saveNewApp">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
}
<div class="card" asp-auth="saveTitle">
<div class="card-header">网站名称设置</div>
<div class="card-body" data-toggle="LgbValidate" data-valid-button="[data-method='title']">
@ -356,4 +315,43 @@
</div>
<div class="card-body" id="sortable">
</div>
</div>
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="[data-method='saveNewApp']" data-valid-modal="#dialogNew">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">前台应用设置</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label" for="appKey">应用ID</label>
<input type="text" class="form-control" id="appKey" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<input type="hidden" id="roleID" />
<label class="control-label" for="appName">应用名称</label>
<input type="text" class="form-control" id="appName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-12">
<label class="control-label" for="appUrl">应用首页</label>
<input type="text" class="form-control flex-fill" id="appUrl" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" data-method="saveNewApp">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>

44
src/admin/Bootstrap.Admin/Views/Admin/Traces.cshtml
View File

@ -78,30 +78,28 @@
<table></table>
</div>
</div>
@section modal {
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-row">
<div class="form-group col-12">
<pre id="requestData"></pre>
</div>
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-row">
<div class="form-group col-12">
<pre id="requestData"></pre>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</div>
}
</div>

3
src/admin/Bootstrap.Admin/Views/Shared/_Admin.cshtml
View File

@ -46,6 +46,3 @@
</div>
@RenderBody()
</section>
@section modal {
@RenderSection("modal", false)
}

1
src/admin/Bootstrap.Admin/Views/Shared/_Bootstrap.cshtml
View File

@ -34,4 +34,3 @@
@await Html.PartialAsync("Header")
@RenderBody()
@await Html.PartialAsync("Footer")
@RenderSection("modal", false)

72
src/admin/Bootstrap.Admin/Views/Shared/_Default.cshtml
View File

@ -34,43 +34,6 @@
<script src="~/lib/longbow/longbow.validate.js" asp-append-version="true"></script>
@RenderSection("javascript", false)
}
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnSubmit" data-valid-modal="#dialogNew">
@RenderSection("modal", false)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
@RenderSection("query", false)
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
</div>
@RenderSection("customModal", false)
}
<div id="toolbar" class="d-none">
<div class="gear btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
@ -105,3 +68,38 @@
</div>
</div>
@await RenderSectionAsync("body", false)
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnSubmit" data-valid-modal="#dialogNew">
@RenderSection("modal", false)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
@RenderSection("query", false)
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
</div>
@RenderSection("customModal", false)

2
src/admin/Bootstrap.Admin/wwwroot/css/site-responsive.css
View File

@ -25,7 +25,7 @@
@media (min-width: 768px) {
.main-content {
position: fixed;
position: absolute;
overflow: auto;
-ms-overflow-style: auto;
}

6
src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
View File

@ -108,12 +108,6 @@
$('[data-toggle="tooltip"]').tooltip();
$('.sidebar').addNiceScroll().autoScrollSidebar();
},
initModal: function (id) {
$('#' + id).appendTo($('body'));
},
initToast: function (id) {
$('#' + id).appendTo($('body'));
},
toggleModal: function (modalId) {
$(modalId).modal('toggle');
},