imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(theme-shared): add ngb-pagination to table component

Browse Source 
#2924
pull/2927/head
mehmet-erim 5 years ago
parent 8c914a7698
commit 8213b0e70d
5 changed files with 371 additions and 25 deletions
Show Stats Download Patch File Download Diff File

4
npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
Unescape View File

@ -123,4 +123,8 @@ background-color: rgba(0, 0, 0, 0.6);
.confirmation .confirmation-dialog .footer .confirmation-button--confirm:hover {
background-color: #2e819b;
}
.ui-table .pagination-wrapper {
background-color: #f4f4f4;
border: 1px solid #c8c8c8;
}
`;

17
npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
Unescape View File

@ -3,12 +3,17 @@
<ng-container
*ngTemplateOutlet="scrollable ? scrollableTemplate : defaultTemplate"
></ng-container>
<abp-pagination
*ngIf="rows"
[totalPages]="totalPages"
[(value)]="page"
(valueChange)="pageChange.emit($event)"
></abp-pagination>
<div class="pagination-wrapper">
<ngb-pagination
[class.op-0]="!totalPages"
[collectionSize]="totalPages"
[pageSize]="1"
[page]="page"
(pageChange)="pageChange.emit($event)"
[maxSize]="3"
[rotate]="true"
></ngb-pagination>
</div>
</div>
</div>

353
npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
Unescape View File

@ -0,0 +1,353 @@
.ui-table {
position: relative;
.ui-table-tbody > tr:nth-child(even):hover,
.ui-table-tbody > tr:hover {
filter: brightness(90%);
}
.ui-table-tbody > tr.empty-row:hover {
filter: none;
}
.ui-table-tbody > tr.empty-row > div.empty-row-content {
padding: 10px;
text-align: center;
}
.ui-table-caption,
.ui-table-summary {
background-color: #f4f4f4;
color: #333333;
border: 1px solid #c8c8c8;
padding: 0.571em 1em;
text-align: center;
}
.ui-table-caption {
border-bottom: 0 none;
font-weight: 700;
}
.ui-table-summary {
border-top: 0 none;
font-weight: 700;
}
.ui-table-thead > tr > th {
padding: 0.571em 0.857em;
border: 1px solid #c8c8c8;
font-weight: 700;
color: #333333;
background-color: #f4f4f4;
}
.ui-table-tbody > tr > td {
padding: 0.571em 0.857em;
}
.ui-table-tfoot > tr > td {
padding: 0.571em 0.857em;
border: 1px solid #c8c8c8;
font-weight: 700;
color: #333333;
background-color: #ffffff;
}
.ui-sortable-column {
-moz-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
-webkit-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.ui-sortable-column:focus {
outline: 0 none;
outline-offset: 0;
-webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
box-shadow: inset 0 0 0 0.2em #8dcdff;
}
.ui-sortable-column .ui-sortable-column-icon {
color: #848484;
}
.ui-sortable-column:not(.ui-state-highlight):hover {
background-color: #e0e0e0;
color: #333333;
}
.ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon {
color: #333333;
}
.ui-sortable-column.ui-state-highlight {
background-color: #007ad9;
color: #ffffff;
}
.ui-sortable-column.ui-state-highlight .ui-sortable-column-icon {
color: #ffffff;
}
.ui-editable-column input {
font-size: 14px;
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ui-editable-column input:focus {
outline: 1px solid #007ad9;
outline-offset: 2px;
}
.ui-table-tbody > tr {
background-color: #ffffff;
color: #333333;
}
.ui-table-tbody > tr > td {
background-color: inherit;
border: 1px solid #c8c8c8;
}
.ui-table-tbody > tr.ui-state-highlight {
background-color: #007ad9;
color: #ffffff;
}
.ui-table-tbody > tr.ui-state-highlight a {
color: #ffffff;
}
.ui-table-tbody > tr.ui-contextmenu-selected {
background-color: #007ad9;
color: #ffffff;
}
.ui-table-tbody > tr.ui-table-dragpoint-top > td {
-webkit-box-shadow: inset 0 2px 0 0 #007ad9;
-moz-box-shadow: inset 0 2px 0 0 #007ad9;
box-shadow: inset 0 2px 0 0 #007ad9;
}
.ui-table-tbody > tr.ui-table-dragpoint-bottom > td {
-webkit-box-shadow: inset 0 -2px 0 0 #007ad9;
-moz-box-shadow: inset 0 -2px 0 0 #007ad9;
box-shadow: inset 0 -2px 0 0 #007ad9;
}
.ui-table-tbody > tr:nth-child(even) {
background-color: #f9f9f9;
}
.ui-table-tbody > tr:nth-child(even).ui-state-highlight {
background-color: #007ad9;
color: #ffffff;
}
.ui-table-tbody > tr:nth-child(even).ui-state-highlight a {
color: #ffffff;
}
.ui-table-tbody > tr:nth-child(even).ui-contextmenu-selected {
background-color: #007ad9;
color: #ffffff;
}
&.ui-table-hoverable-rows
.ui-table-tbody
> tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
cursor: pointer;
background-color: #eaeaea;
color: #333333;
}
.ui-column-resizer-helper {
background-color: #007ad9;
}
@media screen and (max-width: 40em) {
&.ui-table-responsive .ui-paginator-top {
border-bottom: 1px solid #c8c8c8;
}
&.ui-table-responsive .ui-paginator-bottom {
border-top: 1px solid #c8c8c8;
}
&.ui-table-responsive .ui-table-tbody > tr > td {
border: 0 none;
}
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.ui-table-tbody > tr > td,
.ui-table-tfoot > tr > td,
.ui-table-thead > tr > th {
padding: 0.571em 0.857em;
}
.ui-sortable-column {
cursor: pointer;
}
p-sorticon {
vertical-align: middle;
}
.ui-table-auto-layout > .ui-table-wrapper {
overflow-x: auto;
}
.ui-table-auto-layout > .ui-table-wrapper > table {
table-layout: auto;
}
.ui-table-caption,
.ui-table-summary {
padding: 0.25em 0.5em;
text-align: center;
font-weight: 700;
}
.ui-table-caption {
border-bottom: 0;
}
.ui-table-summary {
border-top: 0;
}
.ui-paginator-top {
border-bottom: 0;
}
.ui-paginator-bottom {
border-top: 0;
}
.ui-table-scrollable-wrapper {
position: relative;
}
.ui-table-scrollable-footer,
.ui-table-scrollable-header {
overflow: hidden;
border: 0;
}
.ui-table-scrollable-body {
overflow: auto;
position: relative;
}
.ui-table-virtual-table {
position: absolute;
}
.ui-table-loading-virtual-table {
display: none;
}
.ui-table-frozen-view .ui-table-scrollable-body {
overflow: hidden;
}
.ui-table-frozen-view > .ui-table-scrollable-body > table > .ui-table-tbody > tr > td:last-child {
border-right: 0;
}
.ui-table-unfrozen-view {
position: absolute;
top: 0;
}
.ui-table-resizable > .ui-table-wrapper {
overflow-x: auto;
}
.ui-table-resizable .ui-table-tbody > tr > td,
.ui-table-resizable .ui-table-tfoot > tr > td,
.ui-table-resizable .ui-table-thead > tr > th {
overflow: hidden;
}
.ui-table-resizable .ui-resizable-column {
background-clip: padding-box;
position: relative;
}
.ui-table-resizable-fit .ui-resizable-column:last-child .ui-column-resizer {
display: none;
}
.ui-column-resizer {
display: block;
position: absolute !important;
top: 0;
right: 0;
margin: 0;
width: 0.5em;
height: 100%;
padding: 0;
cursor: col-resize;
border: 1px solid rgba(0, 0, 0, 0);
}
.ui-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.ui-table-tbody > tr > td.ui-editing-cell {
padding: 0;
}
.ui-table-tbody > tr > td.ui-editing-cell p-celleditor > * {
width: 100%;
}
.ui-table-reorder-indicator-down,
.ui-table-reorder-indicator-up {
position: absolute;
display: none;
}
.ui-table-responsive .ui-table-tbody > tr > td .ui-column-title {
display: none;
}
@media screen and (max-width: 40em) {
.ui-table-responsive .ui-table-tfoot > tr > td,
.ui-table-responsive .ui-table-thead > tr > th,
.ui-table-responsive colgroup {
display: none !important;
}
.ui-table-responsive .ui-table-tbody > tr > td {
text-align: left;
display: block;
border: 0;
width: 100% !important;
box-sizing: border-box;
float: left;
clear: left;
}
.ui-table-responsive .ui-table-tbody > tr > td .ui-column-title {
padding: 0.4em;
min-width: 30%;
display: inline-block;
margin: -0.4em 1em -0.4em -0.4em;
font-weight: 700;
}
}
.ui-widget {
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 14px;
text-decoration: none;
}
.page-item.disabled .page-link,
.page-link {
background-color: transparent;
border: none;
}
.page-item.disabled .page-link {
box-shadow: none;
}
.pagination {
margin-bottom: 0;
}
.pagination-wrapper {
display: flex;
justify-content: center;
border-top: 0;
padding: 0;
}
.op-0 {
opacity: 0;
}
}

18
npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
Unescape View File

@ -14,23 +14,7 @@ import {
@Component({
selector: 'abp-table',
templateUrl: 'table.component.html',
styles: [
`
.ui-table .ui-table-tbody > tr:nth-child(even):hover,
.ui-table .ui-table-tbody > tr:hover {
filter: brightness(90%);
}
.ui-table .ui-table-tbody > tr.empty-row:hover {
filter: none;
}
.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {
padding: 10px;
text-align: center;
}
`,
],
styleUrls: ['table.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class TableComponent {

4
npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
Unescape View File

@ -1,7 +1,7 @@
import { CoreModule, LazyLoadService } from '@abp/ng.core';
import { DatePipe } from '@angular/common';
import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
import { ButtonComponent } from './components/button/button.component';
@ -38,7 +38,7 @@ export function appendScript(injector: Injector) {
}
@NgModule({
imports: [CoreModule, NgxValidateCoreModule],
imports: [CoreModule, NgxValidateCoreModule, NgbPaginationModule],
declarations: [
BreadcrumbComponent,
ButtonComponent,

Write Preview
Loading…
Cancel
Save