diff --git a/src/index.html b/src/index.html index d1549a0..0dc7c81 100644 --- a/src/index.html +++ b/src/index.html @@ -58,6 +58,7 @@ + diff --git a/src/scripts/script.js b/src/scripts/script.js index 5f08bdc..a48f4b2 100644 --- a/src/scripts/script.js +++ b/src/scripts/script.js @@ -85,7 +85,7 @@ registryUI.removeServer = function(url) { } registryUI.updateHistory = function(url) { - history.pushState(null, '', (url ? '?url=' + registryUI.encodeURI(url) : '?') + window.location.hash); + registryUI.updateQueryString({ url: registryUI.encodeURI(url) }) registryUI._url = url; } @@ -100,10 +100,12 @@ registryUI.getUrlQueryParam = function () { }; registryUI.encodeURI = function(url) { + if (!url) { return; } return url.indexOf('&') < 0 ? window.encodeURIComponent(url) : btoa(url); }; registryUI.decodeURI = function(url) { + if (!url) { return; } return url.startsWith('http') ? window.decodeURIComponent(url) : atob(url); }; diff --git a/src/scripts/utils.js b/src/scripts/utils.js index 96067a6..877f4f5 100644 --- a/src/scripts/utils.js +++ b/src/scripts/utils.js @@ -65,4 +65,50 @@ registryUI.getHistoryIcon = function(attribute) { default: '' } +} + +registryUI.getPage = function(elts, page, limit) { + if (!limit) { limit = 100; } + if (!elts) { return []; } + return elts.slice((page - 1) * limit, limit * page); +} + +registryUI.getNumPages = function(elts, limit) { + if (!limit) { limit = 100; } + if (!elts) { return 0; } + return Math.trunc(elts.length / limit) + 1; +} + +registryUI.getPageLabels = function(page, nPages) { + var pageLabels = []; + var maxItems = 10; + if (nPages === 1) { return pageLabels; } + if (page !== 1 && nPages >= maxItems) { + pageLabels.push({'icon': 'first_page', page: 1}); + pageLabels.push({'icon': 'chevron_left', page: page - 1}); + } + var start = Math.round(Math.max(1, Math.min(page - maxItems / 2, nPages - maxItems + 1))); + for (var i = start; i < Math.min(nPages + 1, start + maxItems); i++) { + pageLabels.push({ + page: i, + current: i === page, + 'space-left': page === 1 && nPages > maxItems, + 'space-right': page === nPages && nPages > maxItems + }); + } + if (page !== nPages && nPages >= maxItems) { + pageLabels.push({'icon': 'chevron_right', page: page + 1}); + pageLabels.push({'icon': 'last_page', page: nPages}); + } + return pageLabels; +} + +registryUI.updateQueryString = function(qs) { + var search = ''; + for (var key in qs) { + if (qs[key] !== undefined) { + search += (search.length > 0 ? '&' : '?') +key + '=' + qs[key]; + } + } + history.pushState(null, '', search + window.location.hash); } \ No newline at end of file diff --git a/src/style.css b/src/style.css index a4634b0..ca3b8ac 100644 --- a/src/style.css +++ b/src/style.css @@ -48,14 +48,24 @@ main { font-weight: inherit; } -material-card { - min-height: 200px; +material-card, pagination .conatianer { max-width: 75%; margin: auto; margin-top: 20px; margin-bottom: 20px; } +pagination .conatianer { + display: flex; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flexbox; +} + +pagination .conatianer .pagination-centered { + margin: auto; +} + @media screen and (max-width: 950px){ material-card { width: 95%; @@ -212,12 +222,14 @@ material-card table th { } material-card material-button:hover, -material-card table tbody tr:hover { +material-card table tbody tr:hover, +pagination material-button:hover { background-color: #eee; } material-card material-button, -material-card table tbody tr { +material-card table tbody tr, +pagination material-button { transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: background-color; @@ -326,7 +338,8 @@ dropdown-item, #menu-control-dropdown p { background-color: #e0e0e0; } -material-popup material-button { +material-popup material-button, +pagination material-button { background-color: #fff; color: #000; } @@ -445,7 +458,8 @@ tag-history-button button { border: none; } -material-card material-button { +material-card material-button, +pagination material-button { max-height: 30px; max-width: 30px; } @@ -454,7 +468,8 @@ material-button:hover material-waves { background: none; } -material-card material-button { +material-card material-button, +pagination material-button { background-color: inherit; } @@ -506,4 +521,30 @@ material-checkbox .checkbox { material-checkbox .checkbox.checked { background-color: #777; +} + +pagination material-button { + padding: 0.2em 0.75em; +} + +pagination material-button .content { + display: flex; + align-content: center; + line-height: 1.9em; +} + +pagination material-button.current { + border: 1px solid rgba(0, 0, 0, .12); +} + +pagination material-button.current.space-left { + margin-left: 85px; +} + +pagination material-button.current.space-right { + margin-right: 85px; +} + +pagination material-button .content i.material-icons { + color: #000; } \ No newline at end of file diff --git a/src/tags/app.tag b/src/tags/app.tag index 190a784..01c9175 100644 --- a/src/tags/app.tag +++ b/src/tags/app.tag @@ -130,8 +130,8 @@ along with this program. If not, see . return this.fillInfo(); }); this.on('get-date', function() { - if (this.date !== undefined) { - return this.trigger('date', this.date); + if (this.creationDate !== undefined) { + return this.trigger('creation-date', this.creationDate); } return this.fillInfo(); }); @@ -225,6 +225,30 @@ along with this program. If not, see . route('taglist/' + image); }; + registryUI.getPageQueryParam = function() { + var qs = route.query(); + try { + return qs.page !== undefined ? parseInt(qs.page.replace(/#.*/, '')) : 1; + } catch(e) { return 1; } + } + + registryUI.getQueryParams = function(update) { + var qs = route.query(); + update = update || {}; + for (var key in qs) { + if (qs[key] !== undefined) { + qs[key] = qs[key].replace(/#!.*/, ''); + } else { + delete qs[key]; + } + } + for (var key in update) { + if (update[key] !== undefined) { + qs[key] = update[key]; + } + } + return qs; + } route.start(true); \ No newline at end of file diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag index c0b96fe..6cb181f 100644 --- a/src/tags/catalog.tag +++ b/src/tags/catalog.tag @@ -16,17 +16,17 @@ along with this program. If not, see . --> - +

Repositories of { registryUI.name() }
{ registryUI.catalog.length } images

-
- -
+
+ +
\ No newline at end of file diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag new file mode 100644 index 0000000..0607d1a --- /dev/null +++ b/src/tags/pagination.tag @@ -0,0 +1,39 @@ + + + +
+
+ + { p.icon } +
{ p.page }
+
+
+
+ + + \ No newline at end of file diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag index 15f4a9f..5e0212a 100644 --- a/src/tags/remove-image.tag +++ b/src/tags/remove-image.tag @@ -15,63 +15,71 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> - + delete - + diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag index 41f3d9b..fbcf813 100644 --- a/src/tags/tag-history.tag +++ b/src/tags/tag-history.tag @@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> - +
arrow_back diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag index 9b31ccc..f06bedf 100644 --- a/src/tags/taglist.tag +++ b/src/tags/taglist.tag @@ -16,8 +16,8 @@ along with this program. If not, see . --> - -
+ +
arrow_back @@ -26,9 +26,15 @@ along with this program. If not, see .
{ registryUI.taglist.tags.length } tags
-
- -
+
+
+ +
+ + @@ -42,7 +48,7 @@ along with this program. If not, see . onclick="registryUI.taglist.reverse();">Tag - - + -
History 0 } show="{ registryUI.isImageRemoveActivated }"> + 0 } if="{ registryUI.isImageRemoveActivated }"> 0 }> delete @@ -50,7 +56,7 @@ along with this program. If not, see .
{ image.name } @@ -67,15 +73,17 @@ along with this program. If not, see . +
+