github/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2026-07-10 08:29:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[taglist] Change list to table with sort feature

Browse Source
This commit is contained in:
Joxit
2016-05-07 22:54:53 +02:00
parent 7e3ffab9af
commit abe4d56e70
3 changed files with 43 additions and 6 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/material-design-icons/iconfont/material-icons.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>
</head>
<body>

17
style.css
View File

@@ -14,6 +14,11 @@
* 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/>.
*/
html > body {
font-family: 'Roboto','Helvetica','Arial',sans-serif !important;
}
.mdl-mini-footer {
padding-top: 8px;
padding-bottom: 8px;
@@ -26,3 +31,15 @@
.section-centerd {
margin: auto;
}
.mdl-data-table th {
font-size: 20px;
}
.mdl-data-table td {
font-size: 18px;
}
.full-table {
width: 100%;
border: none;
}

31
taglist.tag
View File

@@ -24,11 +24,20 @@
</div>
<div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }"
class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
<ul class="mdl-list">
<li class="mdl-list__item" each="{ item in registryUI.taglist.tags }"><span class="mdl-list__item-primary-content">
{ item }
</span></li>
</ul>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-data-table--selectable full-table" style="border: none;">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Repository</th>
<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 id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
@@ -58,7 +67,7 @@
};
oReq.addEventListener('load', function () {
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) {
registryUI.taglist.createSnackbar('Server not found');
} else {
@@ -77,6 +86,16 @@
oReq.send();
riot.update();
}
registryUI.taglist.reverse = function (th){
console.log(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>
<!-- End of tag -->
</taglist>