Briq
/
django-admin-interface
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added related modal support (related objects popup displayed in modal window)

pull/17/head
Fabio Caccamo 2017-05-04 17:58:19 +02:00
parent cc0474940f
commit 775f1cf42b
9 changed files with 2447 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin_interface/admin.py
View File

@ -43,7 +43,11 @@ class ThemeAdmin(admin.ModelAdmin):
'classes': ('wide', ),
'fields': ('css_delete_button_background_color', 'css_delete_button_background_hover_color', 'css_delete_button_text_color', )
}),
('Extras', {
('Related Modal', {
'classes': ('wide', ),
'fields': ('related_modal_active', 'related_modal_background_color', 'related_modal_background_opacity', 'related_modal_rounded_corners', )
}),
('List Filter', {
'classes': ('wide', ),
'fields': ('list_filter_dropdown', )
}),

2
admin_interface/fixtures/initial_data.json
View File

@ -1 +1 @@
[{"fields": {"css_save_button_text_color": "#FFFFFF", "css_module_link_hover_color": "#C9F0DD", "css_delete_button_text_color": "#FFFFFF", "list_filter_dropdown": false, "css_save_button_background_hover_color": "#0C3C26", "css_module_rounded_corners": true, "logo": "", "css_module_background_color": "#44B78B", "title": "Django administration", "css_header_link_color": "#FFFFFF", "css_delete_button_background_hover_color": "#A41515", "css": "", "css_module_link_color": "#FFFFFF", "css_module_text_color": "#FFFFFF", "css_generic_link_hover_color": "#156641", "css_save_button_background_color": "#0C4B33", "logo_visible": true, "active": false, "css_header_background_color": "#0C4B33", "name": "Django", "css_generic_link_color": "#0C3C26", "css_delete_button_background_color": "#BA2121", "css_header_text_color": "#44B78B", "css_header_link_hover_color": "#C9F0DD", "css_header_title_color": "#F5DD5D", "title_visible": true}, "model": "admin_interface.theme", "pk": 1}]
[{"model": "admin_interface.theme", "pk": 1, "fields": {"name": "Django", "active": true, "title": "Django administration", "title_visible": true, "logo": "", "logo_visible": true, "css_header_background_color": "#0C4B33", "css_header_title_color": "#F5DD5D", "css_header_text_color": "#44B78B", "css_header_link_color": "#FFFFFF", "css_header_link_hover_color": "#C9F0DD", "css_module_background_color": "#44B78B", "css_module_text_color": "#FFFFFF", "css_module_link_color": "#FFFFFF", "css_module_link_hover_color": "#C9F0DD", "css_module_rounded_corners": true, "css_generic_link_color": "#0C3C26", "css_generic_link_hover_color": "#156641", "css_save_button_background_color": "#0C4B33", "css_save_button_background_hover_color": "#0C3C26", "css_save_button_text_color": "#FFFFFF", "css_delete_button_background_color": "#BA2121", "css_delete_button_background_hover_color": "#A41515", "css_delete_button_text_color": "#FFFFFF", "css": "", "related_modal_active": true, "related_modal_background_color": "#000000", "related_modal_background_opacity": 0.2, "related_modal_rounded_corners": true, "list_filter_dropdown": false}}]

40
admin_interface/migrations/0002_add_related_modal.py 100644
View File

@ -0,0 +1,40 @@
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.db import migrations, models
import colorfield.fields
class Migration(migrations.Migration):
dependencies = [
('admin_interface', '0001_initial'),
]
operations = [
migrations.AlterField(
model_name='theme',
name='list_filter_dropdown',
field=models.BooleanField(default=False, verbose_name=b'use dropdown'),
),
migrations.AddField(
model_name='theme',
name='related_modal_active',
field=models.BooleanField(default=True, verbose_name=b'active'),
),
migrations.AddField(
model_name='theme',
name='related_modal_background_color',
field=colorfield.fields.ColorField(blank=True, default=b'#000000', help_text=b'#000000', max_length=10, verbose_name=b'background color'),
),
migrations.AddField(
model_name='theme',
name='related_modal_background_opacity',
field=models.FloatField(choices=[(0.1, b'10%'), (0.2, b'20%'), (0.3, b'30%'), (0.4, b'40%'), (0.5, b'50%'), (0.6, b'60%'), (0.7, b'70%'), (0.8, b'80%'), (0.9, b'90%')], default=0.2, help_text=b'20%', verbose_name=b'background opacity'),
),
migrations.AddField(
model_name='theme',
name='related_modal_rounded_corners',
field=models.BooleanField(default=True, verbose_name=b'rounded corners'),
),
]

18
admin_interface/models.py
View File

@ -81,7 +81,23 @@ class Theme(models.Model):
css = models.TextField( blank = True )
list_filter_dropdown = models.BooleanField( default = False )
related_modal_active = models.BooleanField( default = True, verbose_name = 'active' )
related_modal_background_color = ColorField( blank = True, default = '#000000', help_text = '#000000', verbose_name = 'background color' )
related_modal_background_opacity_choices = (
(0.1, '10%', ),
(0.2, '20%', ),
(0.3, '30%', ),
(0.4, '40%', ),
(0.5, '50%', ),
(0.6, '60%', ),
(0.7, '70%', ),
(0.8, '80%', ),
(0.9, '90%', ),
)
related_modal_background_opacity = models.FloatField( choices = related_modal_background_opacity_choices, default = 0.2, help_text = '20%', verbose_name = 'background opacity' )
related_modal_rounded_corners = models.BooleanField( default = True, verbose_name = 'rounded corners' )
list_filter_dropdown = models.BooleanField( default = False, verbose_name = 'use dropdown' )
def set_active(self):

35
admin_interface/static/admin/js/popup_response.js 100644
View File

@ -0,0 +1,35 @@
/*global opener */
(function() {
'use strict';
var windowRef = window;
var windowName = windowRef.name;
var widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
//var windowNames = windowName.split('____');
//var widgetName = windowNames[(windowNames.length - 1)];
//widgetName = widgetName.replace(/^(change|add|delete|lookup)_/, '');
//console.log('dismiss modal and update widget with id: "' + widgetName + '"');
var modalRef = {};
var openerRef = windowRef.opener;
if(!openerRef){
openerRef = windowRef.parent;
modalRef = {
name: openerRef.id_to_windowname(widgetName),
close: function(){
openerRef.dismissRelatedObjectModal();
}
};
}
var initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
switch(initData.action){
case 'change':
openerRef.dismissChangeRelatedObjectPopup(modalRef, initData.value, initData.obj, initData.new_value);
break;
case 'delete':
openerRef.dismissDeleteRelatedObjectPopup(modalRef, initData.value);
break;
default:
openerRef.dismissAddRelatedObjectPopup(modalRef, initData.value, initData.obj);
break;
}
})();

1864
admin_interface/static/admin_interface/magnific-popup/jquery.magnific-popup.js 100755
View File

File diff suppressed because it is too large Load Diff

351
admin_interface/static/admin_interface/magnific-popup/magnific-popup.css 100755
View File

@ -0,0 +1,351 @@
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }

69
admin_interface/static/admin_interface/related-modal/related-modal.js 100644
View File

@ -0,0 +1,69 @@
if(typeof django !== 'undefined' && typeof django.jQuery !== 'undefined' )
{
(function($) {
$(document).ready(function(){
// create the function that will close the modal
function dismissRelatedObjectModal()
{
// close the popup
$.magnificPopup.close();
}
// assign the function to a global variable
window.dismissRelatedObjectModal = dismissRelatedObjectModal;
// listen click events on related links
// (:link prevents to listen click event if href is not defined)
$('a.related-widget-wrapper-link:link').click(function(e){
e.preventDefault();
// remove focus from clicked link
$(this).blur();
// use the clicked link id as iframe name
// it will be available as window.name in the loaded iframe
var iframeName = $(this).attr('id');
//var iframeName = String(window.name + '____' + $(this).attr('id'));
//console.log('open modal with name: "' + iframeName + '"');
// browsers stop loading nested iframes having the same src url
// create a random parameter and append it to the src url to prevent it
var iframeSrcRandom = String(Math.round(Math.random() * 999999));
var iframeSrc = $(this).attr('href') + '&_modal=' + iframeSrcRandom;
// build the iframe html
//var iframeHTML = '<iframe id="related-modal" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
var iframeHTML = '<iframe id="related-modal-iframe" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
// create the iframe jquery element
var iframeEl = $(iframeHTML);
// the modal css class
var iframeInternalModalClass = 'related-modal';
// if the current window is inside an iframe, it means that it is already in a modal,
// append an additional css class to the modal to offer more customization
if( window.top != window.self )
{
iframeInternalModalClass += ' related-modal__nested';
}
// open the popup using magnific popup
$.magnificPopup.open({
mainClass: iframeInternalModalClass,
items: {
src: iframeEl,
type: 'inline'
}
});
return false;
});
});
})(django.jQuery);
}

65
admin_interface/templates/admin/base_site.html
View File

@ -539,6 +539,57 @@
border-color: transparent #999 transparent transparent !important;
}
/*
related modal + magnific popup customization
https://github.com/dimsemenov/Magnific-Popup
*/
.related-modal.mfp-bg {
background-color:{{ theme.related_modal_background_color }} !important;
opacity: {{ theme.related_modal_background_opacity }} !important;
}
.related-modal .mfp-content {
height: 100% !important;
overflow: hidden;
{% if theme.related_modal_rounded_corners %}
border-radius: 4px;
{% endif %}
-webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
}
.related-modal .mfp-container {
padding: 90px 90px 90px 90px !important;
}
.related-modal__nested .mfp-container {
padding: 30px 60px 30px 60px !important;
}
@media (max-width:640px){
.related-modal .mfp-container {
padding: 60px 15px 60px 15px !important;
}
.related-modal__nested .mfp-container {
padding: 30px 30px 30px 30px !important;
}
}
.related-modal #related-modal-iframe {
width: 100%;
height: 100%;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 30px;
background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='30px' height='30px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-ring-alt'><rect x='0' y='0' width='100' height='100' fill='none' class='bk'></rect><circle cx='50' cy='50' r='40' stroke='#eeeeee' fill='none' stroke-width='6' stroke-linecap='round'></circle><circle cx='50' cy='50' r='40' stroke='#aaaaaa' fill='none' stroke-width='6' stroke-linecap='round'><animate attributeName='stroke-dashoffset' dur='2s' repeatCount='indefinite' from='0' to='500'></animate><animate attributeName='stroke-dasharray' dur='2s' repeatCount='indefinite' values='150 100;1 250;150 100'></animate></circle></svg>");
border: none;
margin: 0 auto;
padding: 0;
display: block;
}
{% if theme.css %}
{{ theme.css|safe }}
{% endif %}
@ -549,6 +600,10 @@
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}" />
{% get_admin_interface_theme as theme %}
{% if theme.related_modal_active %}
<link rel="stylesheet" type="text/css" href="{% static "admin_interface/magnific-popup/magnific-popup.css" %}" />
{% endif %}
{% endblock %}
{% block branding %}
@ -572,3 +627,13 @@
{% block sidebar %}
{% endblock %}
{% block footer %}
{{ block.super }}
{% get_admin_interface_theme as theme %}
{% if theme.related_modal_active %}
<script type="text/javascript" src="{% static "admin_interface/magnific-popup/jquery.magnific-popup.js" %}"></script>
<script type="text/javascript" src="{% static "admin_interface/related-modal/related-modal.js" %}"></script>
{% endif %}
{% endblock %}