Strolch
/
strolch-wc-paging
mirror of https://github.com/strolch-li/strolch-wc-paging.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Major] Refactored strolch-wc-paging to use flexbox

This commit is contained in:
Robert von Burg 2024-02-26 13:12:06 +01:00
parent 262765d7e8
commit d9206fc4fa
Signed by: eitch
GPG Key ID: 75DB9C85C74331F7
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "strolch-wc-paging",
"description": "Strolch WebComponent Paging",
"version": "0.1.7",
"version": "0.2.0",
"authors": [
"Robert von Burg"
],

57
strolch-wc-paging.html
View File

@ -16,30 +16,40 @@
:host {
display: block;
}
.pager {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
</style>
<!-- Content -->
<div class="g-row g-mt-3 g-mb-1">
<div class="g-3 g-pt-3 g-pl-4">
<div class="pager">
<content></content>
</div>
<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>
<template is="dom-if" if="[[hasContent]]">
<div class="left">
<content></content>
</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 class="g-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
<template is="dom-if" if="[[showSetLimit]]">
<div class="right">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</template>
</div>
</template>
@ -54,7 +64,16 @@
],
<!-- Properties -->
properties: {},
properties: {
hasContent: {
type: Boolean,
value: false
},
showSetLimit: {
type: Boolean,
value: false
}
},
<!-- Observers -->