mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-05-02 01:49:55 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #4 from Joxit/taglist-table-sort

Browse source 
[taglist] Change list to table with sort feature
This commit is contained in:
Jones Magloire 2016-05-11 21:50:21 +02:00
commit 064daad9ac
3 changed files with 50 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -23,6 +23,7 @@
<LINK href="node_modules/leaflet/dist/leaflet.css" rel="stylesheet" type="text/css"> <LINK href="node_modules/leaflet/dist/leaflet.css" rel="stylesheet" type="text/css">
<LINK href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet" type="text/css"> <LINK href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet" type="text/css">
<LINK href="style.css" rel="stylesheet" type="text/css"> <LINK href="style.css" rel="stylesheet" type="text/css">
<LINK href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
<title>Docker Registry UI</title> <title>Docker Registry UI</title>
</head> </head>
<body> <body>

17
style.css
View file

@ -14,6 +14,11 @@
* You should have received a copy of the GNU Affero General Public License * You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
html > body {
font-family: 'Roboto','Helvetica','Arial',sans-serif !important;
}
.mdl-mini-footer { .mdl-mini-footer {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
@ -26,3 +31,15 @@
.section-centerd { .section-centerd {
margin: auto; margin: auto;
} }
.mdl-data-table th {
font-size: 18px;
}
.mdl-data-table td {
font-size: 16px;
}
.full-table {
width: 100%;
border: none;
}

35
taglist.tag
View file

@ -16,7 +16,7 @@
--> -->
<taglist> <taglist>
<!-- Begin of tag --> <!-- Begin of tag -->
<div class="taglist" if="{ registryUI.content == 'taglist' }"> <div id="taglist-tag" class="taglist" if="{ registryUI.content == 'taglist' }">
<div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col"> <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
<div class="mdl-card__title"> <div class="mdl-card__title">
<a href="#" onclick="catalog.display();"><i class="material-icons mdl-list__item-icon">arrow_back</i></a> <a href="#" onclick="catalog.display();"><i class="material-icons mdl-list__item-icon">arrow_back</i></a>
@ -24,11 +24,20 @@
</div> </div>
<div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }"
class="mdl-spinner mdl-js-spinner is-active section-centerd"></div> class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
<ul class="mdl-list"> <table class="mdl-data-table mdl-js-data-table full-table" style="border: none;">
<li class="mdl-list__item" each="{ item in registryUI.taglist.tags }"><span class="mdl-list__item-primary-content"> <thead>
{ item } <tr>
</span></li> <th class="mdl-data-table__cell--non-numeric">Repository</th>
</ul> <th class="mdl-data-table__header--sorted-ascending" onclick="registryUI.taglist.reverse(this);">Tag</th>
</tr>
</thead>
<tbody>
<tr each="{ item in registryUI.taglist.tags }">
<td class="mdl-data-table__cell--non-numeric">{ registryUI.taglist.name }</td>
<td>{ item }</td>
</tr>
</tbody>
</table>
</div> </div>
<div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar"> <div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div> <div class="mdl-snackbar__text"></div>
@ -39,6 +48,9 @@
<script> <script>
registryUI.taglist.instance = this; registryUI.taglist.instance = this;
registryUI.taglist.instance.update(); registryUI.taglist.instance.update();
this.on('updated', function() {
componentHandler.upgradeElements(this['taglist-tag']);
})
registryUI.taglist.display = function (name){ registryUI.taglist.display = function (name){
registryUI.content = 'taglist'; registryUI.content = 'taglist';
var oReq = new XMLHttpRequest(); var oReq = new XMLHttpRequest();
@ -58,7 +70,7 @@
}; };
oReq.addEventListener('load', function () { oReq.addEventListener('load', function () {
if (this.status == 200) { if (this.status == 200) {
registryUI.taglist.tags = JSON.parse(this.responseText).tags; registryUI.taglist.tags = JSON.parse(this.responseText).tags.sort();
} else if (this.status == 404) { } else if (this.status == 404) {
registryUI.taglist.createSnackbar('Server not found'); registryUI.taglist.createSnackbar('Server not found');
} else { } else {
@ -77,6 +89,15 @@
oReq.send(); oReq.send();
riot.update(); riot.update();
} }
registryUI.taglist.reverse = function (th){
if (th.className == 'mdl-data-table__header--sorted-ascending') {
th.className = 'mdl-data-table__header--sorted-descending';
} else {
th.className = 'mdl-data-table__header--sorted-ascending';
}
registryUI.taglist.tags.reverse();
registryUI.taglist.instance.update();
};
</script> </script>
<!-- End of tag --> <!-- End of tag -->
</taglist> </taglist>