[Major] Refactored strolch-wc-paging to use flexbox
This commit is contained in:
parent
262765d7e8
commit
d9206fc4fa
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "strolch-wc-paging",
|
"name": "strolch-wc-paging",
|
||||||
"description": "Strolch WebComponent Paging",
|
"description": "Strolch WebComponent Paging",
|
||||||
"version": "0.1.7",
|
"version": "0.2.0",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Robert von Burg"
|
"Robert von Burg"
|
||||||
],
|
],
|
||||||
|
|
|
@ -16,30 +16,40 @@
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pager {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div class="g-row g-mt-3 g-mb-1">
|
<div class="pager">
|
||||||
<div class="g-3 g-pt-3 g-pl-4">
|
|
||||||
|
|
||||||
<content></content>
|
<template is="dom-if" if="[[hasContent]]">
|
||||||
|
<div class="left">
|
||||||
</div>
|
<content></content>
|
||||||
<div class="g-6">
|
|
||||||
<div class="g-m-2 g-center">
|
|
||||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
|
||||||
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
|
||||||
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]]<template is="dom-if"
|
|
||||||
if="[[isNonZero(dataObj.dataSetSize)]]"> ([[dataObj.dataSetSize]])</template></span>
|
|
||||||
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
|
||||||
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="center">
|
||||||
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||||
|
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
||||||
|
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]]<template is="dom-if"
|
||||||
|
if="[[isNonZero(dataObj.dataSetSize)]]"> ([[dataObj.dataSetSize]])</template></span>
|
||||||
|
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
||||||
|
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="g-3">
|
|
||||||
<paper-button on-tap="_setLimit">10</paper-button>
|
<template is="dom-if" if="[[showSetLimit]]">
|
||||||
<paper-button on-tap="_setLimit">50</paper-button>
|
<div class="right">
|
||||||
<paper-button on-tap="_setLimit">100</paper-button>
|
<paper-button on-tap="_setLimit">10</paper-button>
|
||||||
</div>
|
<paper-button on-tap="_setLimit">50</paper-button>
|
||||||
|
<paper-button on-tap="_setLimit">100</paper-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
@ -54,7 +64,16 @@
|
||||||
],
|
],
|
||||||
|
|
||||||
<!-- Properties -->
|
<!-- Properties -->
|
||||||
properties: {},
|
properties: {
|
||||||
|
hasContent: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
showSetLimit: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
<!-- Observers -->
|
<!-- Observers -->
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue