Improve SAS UX

This commit is contained in:
Skia
2016-11-20 23:53:41 +01:00
parent 7dff98d853
commit 0e0e57458f
9 changed files with 153 additions and 67 deletions

View File

@ -2,6 +2,10 @@ from django.db import models
from django.conf import settings
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext_lazy as _
from django.core.files.base import ContentFile
from PIL import Image
from io import BytesIO
from core.models import SithFile, User
@ -14,6 +18,12 @@ class Picture(SithFile):
sas = SithFile.objects.filter(id=settings.SITH_SAS_ROOT_DIR_ID).first()
return sas in self.get_parent_list()
@property
def is_vertical(self):
im = Image.open(BytesIO(self.file.read()))
(w, h) = im.size
return (w / h) < 1
def can_be_edited_by(self, user):
return user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID)
@ -31,9 +41,6 @@ class Picture(SithFile):
return reverse('sas:download_thumb', kwargs={'picture_id': self.id})
def rotate(self, degree):
from PIL import Image
from io import BytesIO
from django.core.files.base import ContentFile
for attr in ['file', 'compressed', 'thumbnail']:
if self.__getattribute__(attr):
im = Image.open(BytesIO(self.__getattribute__(attr).read()))

View File

@ -15,20 +15,29 @@
{% block content %}
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
<h3>{{ album.get_display_name() }}</h3>
<hr>
<div>
{% for a in album.children.filter(is_folder=True, is_moderated=True).all() %}
<div style="display: inline-block; border: solid 1px black;">
<a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
<a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
<div class="album">
<div>
{% if a.children.filter(is_folder=False, is_moderated=True).exists() %}
<img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
{% else %}
<img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
{% endif %}
</div>
{{ a.name }}
</div>
</a>
{% endfor %}
</div>
<div>
{# for a in album.children.filter(mime_type__in=['image/jpeg', 'image/png']).all() #}
{% for p in album.children.filter(is_folder=False, is_moderated=True).all() %}
{% if p.as_picture.can_be_viewed_by(user) %}
<div style="display: inline-block; border: solid 1px black; width: 9%; margin: 0.1%">
<div class="picture">
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
<img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" style="max-width: 100%"/>
<img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
</a>
</div>
{% endif %}

View File

@ -6,6 +6,30 @@
{% block content %}
<h3>{% trans %}SAS{% endtrans %}</h3>
<hr>
<div>
{% for a in root_file.children.filter(is_folder=True).all() %}
{% if a.is_moderated %}
<a href="{{ url("sas:album", album_id=a.id) }}">
<div class="album">
<div>
{% if a.children.filter(is_folder=False, is_moderated=True).exists() %}
<img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
{% else %}
<img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
{% endif %}
</div>
{{ a.name }}
</div>
</a>
{% elif user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
<div style="display: inline-block; border: solid 1px red; text-align: center">
<p><a href="{{ url('core:file_moderate', file_id=a.id) }}?next={{ url('sas:moderation') }}">Moderate</a> or <a href="">Delete</a></p>
<a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
</div>
{% endif %}
{% endfor %}
</div>
{% if user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
@ -15,18 +39,4 @@
<p><input type="submit" value="{% trans %}Create{% endtrans %}" /></p>
</form>
{% endif %}
<div>
{% for a in root_file.children.filter(is_folder=True).all() %}
{% if a.is_moderated %}
<div style="display: inline-block; border: solid 1px black; text-align: center">
<a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
</div>
{% elif user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
<div style="display: inline-block; border: solid 1px red; text-align: center">
<p><a href="{{ url('core:file_moderate', file_id=a.id) }}?next={{ url('sas:moderation') }}">Moderate</a> or <a href="">Delete</a></p>
<a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}

View File

@ -6,16 +6,18 @@
#prev, #next {
display: inline-block;
width: 42%;
height: 100px;
margin: 0.5%;
border: solid 1px grey;
overflow: auto;
background: #333;
overflow: hidden;
background: #aaa;
text-align: center;
}
#prev img, #next img {
display: block;
margin: auto;
max-height: 80%;
max-width: 100%;
max-height: 100%;
}
</style>
{% endblock %}
@ -34,18 +36,12 @@
{% block content %}
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(picture.parent) }} {{ picture.get_display_name() }}
<h3>{{ picture.get_display_name() }}</h3>
<div style="display: inline-block; width: 89%; background: #333; border: solid #333 2px;" id="pict">
{% if is_vertical %}
<img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 60%; display: block; margin: auto"/>
{% else %}
<img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 100%; display: block; margin: auto"/>
{% endif %}
</div>
<div style="display: inline-block; width: 10%; vertical-align: top;">
<div style="display: inline-block; width: 19%; vertical-align: top; overflow: hidden; float: right">
<div>
<div id="prev">
{% if picture.get_previous() %}
<a href="{{ url("sas:picture", picture_id=picture.get_previous().id) }}#pict">
&larr;
<img src="{{ picture.get_previous().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_previous().get_display_name() }}" />
</a>
{% endif %}
@ -53,12 +49,14 @@
<div id="next">
{% if picture.get_next() %}
<a href="{{ url("sas:picture", picture_id=picture.get_next().id) }}#pict">
&rarr;
<img src="{{ picture.get_next().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_next().get_display_name() }}" />
</a>
{% endif %}
</div>
</div>
<div>
<h5>{% trans %}People{% endtrans %}</h5>
<ul>
{% for r in picture.people.all() %}
<li>
@ -69,22 +67,30 @@
</li>
{% endfor %}
</ul>
</div>
<div>
<form action="" method="post" enctype="multipart/form-data">
<form action="" method="post" enctype="multipart/form-data" style="margin: 0px;">
{% csrf_token %}
{{ form.as_p() }}
<p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
</form>
</div>
<p>
<a href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
</p>
<p style="font-size: smaller;">
<a href="?rotate_left">{% trans %}Rotate left{% endtrans %}</a><br>
<a href="?rotate_right">{% trans %}Rotate right{% endtrans %}</a><br>
<a href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a><br>
</p>
<div>
<h5>{% trans %}Tools{% endtrans %}</h5>
<p>
<a href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
</p>
<p style="font-size: smaller;">
<a href="?rotate_left">{% trans %}Rotate left{% endtrans %}</a><br>
<a href="?rotate_right">{% trans %}Rotate right{% endtrans %}</a><br>
<a href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a><br>
</p>
</div>
</div>
<div style="display: inline-block; width: 80%; background: #333; border: solid #333 2px;" id="pict">
{% if picture.is_vertical %}
<img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 60%; display: block; margin: auto"/>
{% else %}
<img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 100%; display: block; margin: auto"/>
{% endif %}
</div>
{% endblock %}

View File

@ -62,7 +62,7 @@ class RelationForm(forms.ModelForm):
model = PeoplePictureRelation
fields = ['picture', 'user']
widgets = {'picture': forms.HiddenInput}
user = make_ajax_field(PeoplePictureRelation, 'user', 'users', help_text="")
user = make_ajax_field(PeoplePictureRelation, 'user', 'users', label=_("Add user"))
class SASMainView(FormView):
form_class = SASForm
@ -132,9 +132,6 @@ class PictureView(CanViewMixin, DetailView, FormMixin):
def get_context_data(self, **kwargs):
kwargs = super(PictureView, self).get_context_data(**kwargs)
kwargs['form'] = self.form
im = Image.open(BytesIO(self.object.file.read()))
(w, h) = im.size
kwargs['is_vertical'] = (w / h) < 1
return kwargs
def get_success_url(self):
@ -166,7 +163,8 @@ class AlbumView(CanViewMixin, DetailView, FormMixin):
files = request.FILES.getlist('images')
if request.user.is_authenticated() and request.user.is_in_group('ae-membres'):
if self.form.is_valid():
self.form.process(parent=parent, owner=request.user, files=files)
self.form.process(parent=parent, owner=request.user, files=files,
automodere=request.user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID))
if self.form.is_valid():
return super(AlbumView, self).form_valid(self.form)
else: