matthias/mayan-edms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update uploader style to better match theme and template used. Use the new uploader for new documents only not for document versions.

Browse Source
This commit is contained in:
Roberto Rosario
2016-03-12 04:25:42 -04:00
parent 642c46ec6f
commit 6b79824daf
4 changed files with 88 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
mayan/apps/sources/forms.py
View File

@@ -68,13 +68,16 @@ class StagingUploadForm(UploadBaseForm):
class WebFormUploadForm(UploadBaseForm):
file = forms.FileField(label=_('File'))
class WebFormUploadFormHTML5(WebFormUploadForm):
file = forms.FileField(
label=_('File'), widget=forms.widgets.FileInput(
attrs={'class': 'hidden', 'hidden': True}
)
)
class WebFormSetupForm(forms.ModelForm):
class Meta:
fields = ('label', 'enabled', 'uncompress')

74
mayan/apps/sources/static/sources/packages/dropzone.css
View File

@@ -174,7 +174,7 @@
box-sizing: border-box; }
.dz-default {
border-style: dashed;
border-style: dotted;
}
.dropzone {
@@ -187,7 +187,7 @@
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
cursor: pointer; }
.dropzone.dz-started .dz-message {
display: none; }
display: none; }
.dropzone.dz-drag-hover {
border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
@@ -199,36 +199,27 @@
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px; }
margin: 5px;
}
.dropzone .dz-preview:hover {
z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd); }
}
.dropzone .dz-preview.dz-file-preview .dz-details {
opacity: 1; }
opacity: 1;
margin-top: 30px;
}
.dropzone .dz-preview.dz-image-preview {
background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none; }
.dropzone .dz-preview .dz-remove:hover {
text-decoration: underline; }
}
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
opacity: 1;
}
.dropzone .dz-preview .dz-details {
z-index: 20;
position: absolute;
@@ -240,7 +231,6 @@
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
@@ -258,20 +248,12 @@
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px; }
}
.dropzone .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px); }
}
.dropzone .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10; }
@@ -331,7 +313,7 @@
position: absolute;
height: 16px;
left: 50%;
top: 50%;
top: 70%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
@@ -371,20 +353,16 @@
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
top: 10px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: white; }
.dropzone .dz-preview .dz-error-message:after {
content: '';
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626; }
}
.btn-dz-remove {
margin-top: 5px;
}
.dz-message {
background: white;
}

51
mayan/apps/sources/templates/sources/upload_multiform_subtemplate.html
View File

@@ -1,22 +1,50 @@
{% load i18n %}
{% load static %}
<link href="{% static 'sources/packages/dropzone.css' %}" media="screen" rel="stylesheet" type="text/css" />
{% include 'appearance/generic_multiform_subtemplate.html' %}
{% block stylesheets %}
<link href="{% static 'sources/packages/dropzone.css' %}" media="screen" rel="stylesheet" type="text/css" />
{% endblock %}
<script type="text/javascript" src="{% static 'sources/packages/dropzone.js' %}"></script>
<script type="text/javascript" src="{% url 'common:javascript_catalog' 'sources' %}"></script>
{% block javascript %}
<script type="text/javascript" src="{% static 'sources/packages/dropzone.js' %}"></script>
<script type="text/x-template" id="previewTemplate">
<div class="dz-preview dz-file-preview">
<i class="fa fa-file-o" style="font-size: 150px;"></i>
<script>
'use strict';
<div class="dz-image"><img data-dz-thumbnail></div>
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size"><span data-dz-size></span></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress>
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 100%">
</div>
</span>
</div>
<div class="dz-error-message alert alert-danger"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">
<i class="text-success fa fa-4x fa-check-circle"></i>
</div>
<div class="dz-error-mark">
<i class="text-danger fa fa-4x fa-exclamation-circle"></i>
</div>
<div class="text-center">
<a class="btn btn-default btn-xs btn-dz-remove" data-dz-remove>{% trans 'Clear' %}</a>
</div>
</div>
</script>
<script>
var previewTemplate = document.querySelector('#previewTemplate').innerHTML;
{% verbatim %}
Dropzone.options.html5upload = {
paramName: 'source-file',
addRemoveLinks: true,
addRemoveLinks: false,
createImageThumbnails: false,
dictDefaultMessage: gettext('Drop files or click here to upload files'),
dictDefaultMessage: '<i class="fa fa-cloud-upload"></i> ' + gettext('Drop files or click here to upload files'),
dictFallbackMessage: gettext('Your browser does not support drag\'n\'drop file uploads.'),
dictFallbackText: gettext('Please use the fallback form below to upload your files like in the olden days.'),
dictFileTooBig: gettext('File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.'),
@@ -27,6 +55,7 @@
dictRemoveFile: gettext('Clear'),
dictMaxFilesExceeded: gettext('You can not upload any more files.'),
maxFilesize: 1024,
previewTemplate: previewTemplate,
};
</script>
{% endblock %}
{% endverbatim %}
</script>

25
mayan/apps/sources/views.py
View File

@@ -29,7 +29,8 @@ from navigation import Link
from permissions import Permission
from .forms import (
NewDocumentForm, NewVersionForm
NewDocumentForm, NewVersionForm, WebFormUploadForm,
WebFormUploadFormHTML5
)
from .literals import (
SOURCE_CHOICE_STAGING, SOURCE_CHOICE_WEB_FORM,
@@ -169,10 +170,6 @@ class UploadBaseView(MultiFormView):
subtemplates_list.append({
'name': 'sources/upload_multiform_subtemplate.html',
'context': {
'form_action': self.request.get_full_path(),
'form_class': 'dropzone',
'form_disable_submit': True,
'form_id': 'html5upload',
'forms': context['forms'],
'is_multipart': True,
'title': _('Document properties'),
@@ -190,7 +187,6 @@ class UploadBaseView(MultiFormView):
class UploadInteractiveView(UploadBaseView):
def dispatch(self, request, *args, **kwargs):
self.subtemplates_list = []
@@ -291,9 +287,15 @@ class UploadInteractiveView(UploadBaseView):
)
def get_form_classes(self):
source_form_class = get_upload_form_class(self.source.source_type)
# Override source form class to enable the HTML5 file uploader
if source_form_class == WebFormUploadForm:
source_form_class = WebFormUploadFormHTML5
return {
'document_form': NewDocumentForm,
'source_form': get_upload_form_class(self.source.source_type)
'source_form': source_form_class
}
def get_context_data(self, **kwargs):
@@ -301,6 +303,15 @@ class UploadInteractiveView(UploadBaseView):
context['title'] = _(
'Upload a local document from source: %s'
) % self.source.label
if not isinstance(self.source, StagingFolderSource):
context['subtemplates_list'][0]['context'].update(
{
'form_action': self.request.get_full_path(),
'form_class': 'dropzone',
'form_disable_submit': True,
'form_id': 'html5upload',
}
)
return context