kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2504 from leigh-pointer/PagerPointer

Browse Source 
A change to the Pager bar to set the mouse pointer to pointer
This commit is contained in:
Shaun Walker 2022-11-23 11:26:57 -05:00 committed by GitHub
commit a1aab62cea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 107 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
Oqtane.Client/Modules/Controls/Pager.razor
View File

@ -8,16 +8,16 @@
@if ((Toolbar == "Top" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems) @if ((Toolbar == "Top" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems)
{ {
<ul class="pagination justify-content-center my-2"> <ul class="pagination justify-content-center my-2">
<li class="page-item@((_page > 1) ? "" : " disabled")"> <li class="page-item@((_page > 1) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages && _displayPages > 1) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_page > _displayPages) ? "" : " disabled")"> <li class="page-item@((_page > _displayPages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a>
</li> </li>
} }
<li class="page-item@((_page > 1) ? "" : " disabled")"> <li class="page-item@((_page > 1) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
</li> </li>
@for (int i = _startPage; i <= _endPage; i++) @for (int i = _startPage; i <= _endPage; i++)
@ -25,27 +25,27 @@
var pager = i; var pager = i;
if (pager == _page) if (pager == _page)
{ {
<li class="page-item active"> <li class="page-item page-pointer active">
<a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a> <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
</li> </li>
} }
else else
{ {
<li class="page-item"> <li class="page-item page-pointer">
<a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a> <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
</li> </li>
} }
} }
<li class="page-item@((_page < _pages) ? "" : " disabled")"> <li class="page-item@((_page < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages && _displayPages > 1) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_endPage < _pages) ? "" : " disabled")"> <li class="page-item@((_endPage < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a>
</li> </li>
} }
<li class="page-item@((_page < _pages) ? "" : " disabled")"> <li class="page-item@((_page < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a>
</li> </li>
<li class="page-item disabled"> <li class="page-item disabled">
@ -55,46 +55,46 @@
} }
@if (Format == "Table" && Row != null) @if (Format == "Table" && Row != null)
{ {
<div class="table-responsive"> <div class="table-responsive">
<table class="@Class"> <table class="@Class">
<thead> <thead>
<tr class="@RowClass">@Header</tr> <tr class="@RowClass">@Header</tr>
</thead> </thead>
<tbody> <tbody>
@foreach (var item in ItemList) @foreach (var item in ItemList)
{ {
<tr class="@RowClass">@Row(item)</tr> <tr class="@RowClass">@Row(item)</tr>
@if (Detail != null) @if (Detail != null)
{ {
<tr>@Detail(item)</tr> <tr>@Detail(item)</tr>
} }
} }
</tbody> </tbody>
<tfoot> <tfoot>
<tr class="@RowClass">@Footer</tr> <tr class="@RowClass">@Footer</tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
} }
@if (Format == "Grid" && Row != null) @if (Format == "Grid" && Row != null)
{ {
int count = 0; int count = 0;
int rows = 0; int rows = 0;
int cols = 0; int cols = 0;
if (ItemList != null) if (ItemList != null)
{ {
if (_columns == 0) if (_columns == 0)
{ {
count = ItemList.Count(); count = ItemList.Count();
rows = 1; rows = 1;
cols = count; cols = count;
} }
else else
{ {
count = (int)Math.Ceiling(ItemList.Count() / (decimal)_columns) * _columns; count = (int)Math.Ceiling(ItemList.Count() / (decimal)_columns) * _columns;
rows = count / _columns; rows = count / _columns;
cols = _columns; cols = _columns;
} }
} }
<div class="@Class"> <div class="@Class">
@for (int row = 0; row < rows; row++) @for (int row = 0; row < rows; row++)
@ -116,19 +116,19 @@
} }
</div> </div>
} }
@if ((Toolbar == "Bottom" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems) @if ((Toolbar == "Bottom" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems)
{ {
<ul class="pagination justify-content-center my-2"> <ul class="pagination justify-content-center my-2">
<li class="page-item@((_page > 1) ? "" : " disabled")"> <li class="page-item@((_page > 1) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages && _displayPages > 1) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_page > _displayPages) ? "" : " disabled")"> <li class="page-item@((_page > _displayPages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a>
</li> </li>
} }
<li class="page-item@((_page > 1) ? "" : " disabled")"> <li class="page-item@((_page > 1) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
</li> </li>
@for (int i = _startPage; i <= _endPage; i++) @for (int i = _startPage; i <= _endPage; i++)
@ -136,100 +136,100 @@
var pager = i; var pager = i;
if (pager == _page) if (pager == _page)
{ {
<li class="page-item active"> <li class="page-item page-pointer active">
<a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a> <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
</li> </li>
} }
else else
{ {
<li class="page-item"> <li class="page-item page-pointer">
<a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a> <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
</li> </li>
} }
} }
<li class="page-item@((_page < _pages) ? "" : " disabled")"> <li class="page-item@((_page < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages && _displayPages > 1) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_endPage < _pages) ? "" : " disabled")"> <li class="page-item@((_endPage < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a>
</li> </li>
} }
<li class="page-item@((_page < _pages) ? "" : " disabled")"> <li class="page-item@((_page < _pages) ? " page-pointer" : " disabled")">
<a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a>
</li> </li>
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" style="white-space: nowrap;">@Localizer["PageOfPages", _page, _pages]</a> <a class="page-link" style="white-space: nowrap;">@Localizer["PageOfPages", _page, _pages]</a>
</li> </li>
</ul> </ul>
} }
} }
@code { @code {
private IStringLocalizer Localizer; private IStringLocalizer Localizer;
private int _pages = 0; private int _pages = 0;
private int _page = 1; private int _page = 1;
private int _maxItems = 10; private int _maxItems = 10;
private int _displayPages = 5; private int _displayPages = 5;
private int _startPage = 0; private int _startPage = 0;
private int _endPage = 0; private int _endPage = 0;
private int _columns = 0; private int _columns = 0;
[Parameter] [Parameter]
public string Format { get; set; } // Table or Grid public string Format { get; set; } // Table or Grid
[Parameter] [Parameter]
public string Toolbar { get; set; } // Top, Bottom or Both public string Toolbar { get; set; } // Top, Bottom or Both
[Parameter] [Parameter]
public RenderFragment Header { get; set; } = null; // only applicable to Table layouts public RenderFragment Header { get; set; } = null; // only applicable to Table layouts
[Parameter] [Parameter]
public RenderFragment<TableItem> Row { get; set; } = null; // required public RenderFragment<TableItem> Row { get; set; } = null; // required
[Parameter] [Parameter]
public RenderFragment Footer { get; set; } = null; // only applicable to Table layouts public RenderFragment Footer { get; set; } = null; // only applicable to Table layouts
[Parameter] [Parameter]
public RenderFragment<TableItem> Detail { get; set; } = null; // only applicable to Table layouts public RenderFragment<TableItem> Detail { get; set; } = null; // only applicable to Table layouts
[Parameter] [Parameter]
public IEnumerable<TableItem> Items { get; set; } // the IEnumerable data source public IEnumerable<TableItem> Items { get; set; } // the IEnumerable data source
[Parameter] [Parameter]
public string PageSize { get; set; } // number of items to display on a page public string PageSize { get; set; } // number of items to display on a page
[Parameter] [Parameter]
public string Columns { get; set; } // only applicable to Grid layouts - default is zero indicating use responsive behavior public string Columns { get; set; } // only applicable to Grid layouts - default is zero indicating use responsive behavior
[Parameter] [Parameter]
public string CurrentPage { get; set; } // sets the initial page to display public string CurrentPage { get; set; } // sets the initial page to display
[Parameter] [Parameter]
public string DisplayPages { get; set; } // maximum number of page numbers to display for user selection public string DisplayPages { get; set; } // maximum number of page numbers to display for user selection
[Parameter] [Parameter]
public string Class { get; set; } // class for the containing element - ie. <table> for Table or <div> for Grid public string Class { get; set; } // class for the containing element - ie. <table> for Table or <div> for Grid
[Parameter] [Parameter]
public string RowClass { get; set; } // class for row element - ie. <tr> for Table or <div> for Grid public string RowClass { get; set; } // class for row element - ie. <tr> for Table or <div> for Grid
[Parameter] [Parameter]
public string ColumnClass { get; set; } // class for column element - only applicable to Grid format public string ColumnClass { get; set; } // class for column element - only applicable to Grid format
[Parameter] [Parameter]
public Action<int> OnPageChange { get; set; } // a method to be executed in the calling component when the page changes public Action<int> OnPageChange { get; set; } // a method to be executed in the calling component when the page changes
private IEnumerable<TableItem> ItemList { get; set; } private IEnumerable<TableItem> ItemList { get; set; }
protected override void OnInitialized() protected override void OnInitialized()
{ {
Localizer = LocalizerFactory.Create(GetType().FullName); Localizer = LocalizerFactory.Create(GetType().FullName);
} }
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
if (string.IsNullOrEmpty(Format)) if (string.IsNullOrEmpty(Format))
{ {
Format = "Table"; Format = "Table";
@ -276,7 +276,7 @@
} }
} }
if (!string.IsNullOrEmpty(PageSize)) if (!string.IsNullOrEmpty(PageSize))
{ {
_maxItems = int.Parse(PageSize); _maxItems = int.Parse(PageSize);
} }
@ -299,7 +299,7 @@
{ {
_page = 1; _page = 1;
} }
if (_page < 1) _page = 1; if (_page < 1) _page = 1;
_startPage = 0; _startPage = 0;
_endPage = 0; _endPage = 0;

7
Oqtane.Server/wwwroot/css/app.css
View File

@ -213,3 +213,10 @@ app {
right: 0.75rem; right: 0.75rem;
top: 0.5rem; top: 0.5rem;
} }
/* Oqtane Conrol Styles */
/* Pager */
.page-pointer {
cursor: pointer;
}