Frontend user list and modal dialog fixes
This commit is contained in:
@ -9,6 +9,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
|
||||
v<%- getVersion() %> © 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() %> © 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>
|
||||
|
@ -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"> Docker Registry
|
||||
<img src="/images/favicons/favicon-32x32.png" border="0"> 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>
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Reference in New Issue
Block a user