Improve file popup

accounting/views.py

@@ -167,7 +167,7 @@ class OperationCreateView(CanCreateMixin, CreateView):
     form_class = modelform_factory(Operation,
             fields=['amount', 'label', 'remark', 'journal', 'target_type', 'target_id', 'target_label', 'date', 'mode',
                 'cheque_number', 'invoice', 'accounting_type', 'done'],
-            widgets={'journal': HiddenInput, 'date': SelectDate})
+            widgets={'journal': HiddenInput, 'date': SelectDate, 'invoice': SelectFile})
     template_name = 'core/create.jinja'
 
     def get_initial(self):

core/static/core/js/script.js

@@ -6,24 +6,37 @@ $( function() {
     popups.dialog({
         autoOpen: false,
         modal: true,
-        width: "80%",
-        minHeight: "300",
-        buttons: {
-            "Choose": function() {
+        width: "90%",
+        create: function (event) {
+            target = $(event.target);
+            target.parent().css({
+                'position': 'fixed',
+                'top': '5%',
+                'bottom': '5%',
+            });
+            target.css("height", "300px");
+            console.log(target);
+        },
+        buttons: [
+        {
+            text: "Choose",
+            click: function() {
                 console.log($("#file_id"));
                 $("input[name="+$(this).attr('name')+"]").attr('value', $("#file_id").attr('value'));
                 $( this ).dialog( "close" );
+            },
+            disabled: true,
         }
-        }
+        ],
+    });
+    $( ".choose_file_button" ).button().on( "click", function() {
+        popup = popups.filter("[name="+$(this).attr('name')+"]");
+        console.log(popup);
+        popup.html('<iframe src="/file/popup" width="100%" height="95%"></iframe><div id="file_id" value="null" />');
+        popup.dialog({title: $(this).text()}).dialog( "open" );
     });
     $('.select_date').datepicker({
         changeMonth: true,
         changeYear: true
     });
-    $( ".choose_file_button" ).button().on( "click", function() {
-        popup = popups.filter("[name="+$(this).attr('name')+"]");
-        console.log(popup);
-        popup.html('<iframe src="/file/popup" width="95%"></iframe><span id="file_id" value="null" />');
-        popup.dialog({title: $(this).attr('name')}).dialog( "open" );
-    });
 } );

core/static/core/style.css

@@ -156,6 +156,11 @@ tbody>tr:hover {
     float: right;
     padding: 10px;
 }
+#user_info {
+    width: 40%;
+    margin: 0px auto;
+    background: lightgrey;
+}
 
 /*-----------------------------USER PROFILE----------------------------*/
 #user_profile {
@@ -213,7 +218,12 @@ footer{
 
 /*--------------------------------MODALE-------------------------------*/
 .choose_file_widget {
-    display: inline;
+    display: none;
+}
+.ui-dialog .ui-dialog-buttonpane {
+    bottom: 0px;
+    position: absolute;
+    width: 97%;
 }
 .form-wrapper {
     display: inline-block;

core/templates/core/base.jinja

@@ -5,9 +5,9 @@
         <title>{% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %}</title>
         <link rel="stylesheet" href="{{ static('core/base.css') }}">
         <link rel="stylesheet" href="{{ static('core/form.css') }}">
-        <link rel="stylesheet" href="{{ static('core/style.css') }}">
         <link rel="stylesheet" href="{{ static('core/multiple-select.css') }}">
         <link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
+        <link rel="stylesheet" href="{{ static('core/style.css') }}">
         {% endblock %}
     </head>
 
@@ -50,11 +50,13 @@
             {% endblock %}
         </div>
 
+        {% if not popup %}
         <footer>
             {% block footer %}
             {% trans %}Site made by good people{% endtrans %}
             {% endblock %}
         </footer>
+        {% endif %}
         <!--
             {% block tests %}
             {{ tests }}

core/templates/core/create.jinja

@@ -1,5 +1,9 @@
 {% extends "core/base.jinja" %}
 
+{% block title %}
+{% trans name=form.instance.__class__._meta.verbose_name %}Create {{ name }}{% endtrans %}
+{% endblock %}
+
 {% block content %}
 <h2>{% trans name=form.instance.__class__._meta.verbose_name %}Create {{ name }}{% endtrans %}</h2>
 <form action="" method="post">

core/templates/core/file.jinja

@@ -50,4 +50,13 @@
 {% endblock %}
 {% endif %}
 
+{% block script %}
+{{ super() }}
+{% if popup %}
+<script>
+parent.$(".choose_file_widget").css("height", "75%");
+</script>
+{% endif %}
+{% endblock %}
+
 {% endblock %}

core/templates/core/file_detail.jinja

@@ -48,11 +48,12 @@
 
 {% block script %}
 {{ super() }}
-{% if popup and file.is_file %}
 <script>
-parent.$("#file_id").replaceWith('<span id="file_id" value="{{ file.id }}">{{ file.name }}</span>');
-</script>
+{% if popup and file.is_file %}
+parent.$("#file_id").replaceWith('<div id="file_id" value="{{ file.id }}">{{ file.name }}</div>');
+parent.$(".ui-dialog-buttonpane button").button("option", "disabled", false);
 {% endif %}
+</script>
 {% endblock %}