Frontend user list and modal dialog fixes

This commit is contained in:
Jamie Curnow
2018-06-20 16:51:18 +10:00
parent 8942b99372
commit bfc319cff9
20 changed files with 549 additions and 44 deletions

View File

@ -9,6 +9,6 @@
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
v<%- getVersion() %> &copy; 2018 <a href="https://jc21.com?utm_source=docker-registry-ui" target="_blank">jc21.com</a>. Theme by <a href="https://github.com/tabler/tabler?utm_source=docker-registry-ui" target="_blank">Tabler</a>
v<%- getVersion() %> &copy; 2018 <a href="https://jc21.com?utm_source=nginx-proxy-manager" target="_blank">jc21.com</a>. Theme by <a href="https://tabler.github.io/?utm_source=nginx-proxy-manager" target="_blank">Tabler</a>
</div>
</div>

View File

@ -1,7 +1,7 @@
<div class="container">
<div class="d-flex">
<a class="navbar-brand" href="/">
<img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; Docker Registry
<img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; Nginx Proxy Manager
</a>
<div class="d-flex order-lg-2 ml-auto">
@ -9,7 +9,7 @@
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
<span class="avatar" style="background-image: url(<%- getUserField('avatar', '/images/default-avatar.jpg') %>)"></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default"><%- getUserField('name', 'Unknown User') %></span>
<span class="text-default"><%- getUserField('nickname', null) || getUserField('name', 'Unknown User') %></span>
<small class="text-muted d-block mt-1"><%- getRole() %></small>
</span>
</a>

View File

@ -1,5 +1,4 @@
<div class="page-main">
<div class="header" id="header">
<!-- Header View -->
</div>
@ -15,4 +14,6 @@
<footer class="footer">
<!-- Footer View -->
</footer>
</footer>
<div class="modal fade" id="modal-dialog" tabindex="-1" role="dialog" aria-hidden="true"></div>

View File

@ -8,8 +8,16 @@ const FooterView = require('./footer/main');
const Cache = require('../cache');
module.exports = Mn.View.extend({
className: 'page',
template: template,
id: 'app',
className: 'page',
template: template,
modal_setup: false,
modal: null,
ui: {
modal: '#modal-dialog'
},
regions: {
header_region: {
@ -21,13 +29,60 @@ module.exports = Mn.View.extend({
replaceElement: true
},
footer_region: '.footer',
app_content_region: '#app-content'
app_content_region: '#app-content',
modal_region: '#modal-dialog'
},
/**
* @param {Object} view
*/
showAppContent: function (view) {
this.showChildView('app_content_region', view);
},
/**
* @param {Object} view
* @param {Function} [show_callback]
* @param {Function} [shown_callback]
*/
showModalDialog: function (view, show_callback, shown_callback) {
this.showChildView('modal_region', view);
let modal = this.getRegion('modal_region').$el.modal('show');
modal.on('hidden.bs.modal', function (/*e*/) {
if (show_callback) {
modal.off('show.bs.modal', show_callback);
}
if (shown_callback) {
modal.off('shown.bs.modal', shown_callback);
}
modal.off('hidden.bs.modal');
view.destroy();
});
if (show_callback) {
modal.on('show.bs.modal', show_callback);
}
if (shown_callback) {
modal.on('shown.bs.modal', shown_callback);
}
},
/**
*
* @param {Function} [hidden_callback]
*/
closeModal: function (hidden_callback) {
let modal = this.getRegion('modal_region').$el.modal('hide');
if (hidden_callback) {
modal.on('hidden.bs.modal', hidden_callback);
}
},
onRender: function () {
this.showChildView('header_region', new HeaderView({
model: Cache.User
@ -40,5 +95,6 @@ module.exports = Mn.View.extend({
reset: function () {
this.getRegion('header_region').reset();
this.getRegion('footer_region').reset();
this.getRegion('modal_region').reset();
}
});

View File

@ -3,10 +3,15 @@
<div class="col-lg order-lg-first">
<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
<a href="/" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<% if (showUsers()) { %>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
<a href="/users" class="nav-link"><i class="fe fe-users"></i> Users</a>
</li>
<% } %>
<li class="nav-item">
<a href="#" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="../cards.html" class="dropdown-item ">Cards design</a>
<a href="../charts.html" class="dropdown-item ">Charts</a>
@ -14,7 +19,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
<a href="#" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="../maps.html" class="dropdown-item ">Maps</a>
<a href="../icons.html" class="dropdown-item ">Icons</a>
@ -24,7 +29,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
<a href="#" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="../profile.html" class="dropdown-item ">Profile</a>
<a href="../login.html" class="dropdown-item ">Login</a>

View File

@ -1,10 +1,39 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
const $ = require('jquery');
const Mn = require('backbone.marionette');
const Controller = require('../../controller');
const Cache = require('../../cache');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
id: 'menu',
className: 'header collapse d-lg-flex p-0',
template: template
template: template,
ui: {
link: 'a'
},
events: {
'click @ui.link': function (e) {
e.preventDefault();
let href = $(e.currentTarget).attr('href');
switch (href) {
case '/':
Controller.showDashboard();
break;
case '/users':
Controller.showUsers();
break;
}
}
},
templateContext: {
showUsers: function () {
return Cache.User.isAdmin();
}
}
});