Improve user pages.
authorAlexandre Segura <mex.zktk@gmail.com>
Fri, 17 Mar 2017 12:37:01 +0100
changeset 443 fb9bf3f479f1
parent 442 de38f6ddaff5
child 444 d57f95ee9115
Improve user pages. - Add layout for all user pages - Add left menu - Split content into subpages.
src/iconolab/templates/iconolab/user_annotations.html
src/iconolab/templates/iconolab/user_base.html
src/iconolab/templates/iconolab/user_collections.html
src/iconolab/templates/iconolab/user_home.html
src/iconolab/templates/iconolab/user_notifications.html
src/iconolab/templates/iconolab/user_settings.html
src/iconolab/urls.py
src/iconolab/views/userpages.py
--- a/src/iconolab/templates/iconolab/user_annotations.html	Thu Mar 16 13:14:44 2017 +0100
+++ b/src/iconolab/templates/iconolab/user_annotations.html	Fri Mar 17 12:37:01 2017 +0100
@@ -1,4 +1,4 @@
-{% extends 'iconolab_base.html' %}
+{% extends 'iconolab/user_base.html' %}
 
 {% load staticfiles %}
 
@@ -8,10 +8,8 @@
 
 {% load notifications_tags %}
 
-{% block content %}
+{% block user_content %}
   <div id="user-profile-block" class="row">
-    <h3>{{profile_user.username}}: Annotations créées <a class="btn btn-default" href="{% url 'user_home' profile_user.id %}"><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> Retour au profil</a></h3>
-    <hr>
     {% if not user_annotations %}
        <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
     {% else %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/user_base.html	Fri Mar 17 12:37:01 2017 +0100
@@ -0,0 +1,38 @@
+{% extends 'iconolab_base.html' %}
+
+{% block content %}
+  <div class="page-header">
+    <h1>{% if profile_user == request.user %}Mon espace:{% else %}Profil : {% endif %} {{profile_user.username}}</h1>
+  </div>
+  <div class="row">
+    <div class="col-md-3">
+      <div class="list-group">
+        <a href="{% url 'user_home' profile_user.id %}"
+          class="list-group-item {% if request.resolver_match.url_name == 'user_home' %}active{% endif%}">
+          Activité
+        </a>
+        <a href="{% url 'user_annotations' profile_user.id %}"
+          class="list-group-item {% if request.resolver_match.url_name == 'user_annotations' %}active{% endif%}">
+          Annotations
+        </a>
+        {% if profile_user == request.user %}
+        <a href="{% url 'user_notifications' %}"
+          class="list-group-item {% if request.resolver_match.url_name == 'user_notifications' %}active{% endif%}">
+          Notifications
+        </a>
+        <a href="{% url 'user_settings' %}"
+          class="list-group-item {% if request.resolver_match.url_name == 'user_settings' %}active{% endif%}">
+          Paramètres
+        </a>
+        {% endif %}
+        {% if profile_user.profile.managed_collections.exists %}
+        <a href="{% url 'user_collections' %}"
+          class="list-group-item {% if request.resolver_match.url_name == 'user_collections' %}active{% endif%}">
+          Collections
+        </a>
+        {% endif %}
+      </div>
+    </div>
+    <div class="col-md-9">{% block user_content %}{% endblock %}</div>
+  </div>
+{% endblock %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/user_collections.html	Fri Mar 17 12:37:01 2017 +0100
@@ -0,0 +1,11 @@
+{% extends 'iconolab/user_base.html' %}
+
+{% block user_content %}
+  <h2>Administration de Fonds</h2>
+  {% for collection in profile_user.profile.managed_collections.all %}
+  <h3>{{collection.verbose_name}}</h3>
+  <div>
+    <a href="{% url 'user_admin_panel' profile_user.id collection.name %}" class="btn btn-default text-center">Tableau de bord</a>
+  </div>
+  {% endfor %}
+{% endblock %}
--- a/src/iconolab/templates/iconolab/user_home.html	Thu Mar 16 13:14:44 2017 +0100
+++ b/src/iconolab/templates/iconolab/user_home.html	Fri Mar 17 12:37:01 2017 +0100
@@ -1,4 +1,4 @@
-{% extends 'iconolab_base.html' %}
+{% extends 'iconolab/user_base.html' %}
 
 {% load staticfiles %}
 
@@ -8,151 +8,68 @@
 
 {% load notifications_tags %}
 
-{% block content %}
-  <div class="page-header">
-    <h1>{% if profile_user == request.user %}Mon espace:{% else %}Profil : {% endif %} {{profile_user.username}}</h1>
-  </div>
-  {% if profile_user == request.user %}
-  <div class="row">
-    <div class="col-md-12">
-      <h2>Coordonnées</h2>
-      <form method="post">
-        {% csrf_token %}
-        <fieldset class="form-group {% if user_form.email.errors %}has-error{% endif %}">
-          <label class="control-label" for="id_{{ user_form.email.name }}">Email</label>
-          <input type="text" class="form-control"
-            name="{{ user_form.email.name }}"
-            id="id_{{ user_form.email.name }}" value="{% if user_form.email.value %}{{ user_form.email.value }}{% endif %}">
-          {% if user_form.email.errors %}
-          <span class="help-block">{{ user_form.email.errors | striptags }}</span>
-          {% endif %}
-        </fieldset>
-        <button type="submit" class="btn btn-block btn-primary">Valider</button>
-      </form>
-    </div>
-  </div>
-  {% endif %}
-  <div class="row">
-    <div class="col-md-12 user-profile-block" >
-      <h2>Notifications</h2>
-      <div>
-        {% if profile_user == request.user %}
-        {% notifications_unread as unread_count %}
-        <h4><span class="badge notif-badge {% if unread_count %}badge-warning{% endif %}">{{unread_count}} <i class="fa fa-envelope-o" aria-hidden="true"></i></span> Notifications non lues
-          <a href="{% url 'user_notifications' %}" class="btn btn-default btn-xs">Voir toutes mes notifications</a>
-          {% if unread_count %}<a href="{% url 'user_home' profile_user.id %}?clear_notifications=True" class="btn btn-default btn-xs">Tout marquer comme lu</a>{% endif %}
-        </h4>
-        <div class="row">
-          <div class="col-md-12">
-            {% if unread_count %}
-              <ul class="list-group">
-              {% for notification in notifications.unread %}
-                <a
-                  {% if notification.target and notification.action_object %}
-                    {% with notification.target as annotation %}
-                      class="list-group-item list-group-item-info {% if forloop.counter > 5 %}hide-on-load{% endif %}"
-                      {% if notification.action_object.get_comment_page %}
-                      href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}?page={{notification.action_object.get_comment_page}}#c{{notification.action_object.id}}"
-                      {% else %}
-                      href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid notification.action_object.revision_guid %}"
-                      {% endif %}
-                    {% endwith %}
-                  {% else %}
-                    class="list-group-item disabled {% if forloop.counter > 5 %}hide-on-load{% endif %}"
-                  {% endif %}>
-                  <b>{{notification.actor.username}}</b> {{notification.verb}} <small> - {{notification.timesince}}</small>
-                </a>
-                {% if forloop.counter == 5 %}
-                  <a class="list-group-item show-all-notifications" title="Montrer autres notifications"> ... </a>
-                {% endif %}
-              {% endfor %}
-              </ul>
-            {% endif %}
-            <hr>
-          </div>
-        </div>
-        {% endif %}
-        <div class="row">
-          <div class="col-md-6">
-            <h4>{% if profile_user == request.user %}Mes dernières annotations :{% else %}Dernières annotations de {{profile_user.username}}{% endif %}</h4>
+{% block user_content %}
+  <div>
+    <h4>{% if profile_user == request.user %}Mes dernières annotations{% else %}Dernières annotations de {{profile_user.username}}{% endif %}</h4>
 
-            {% if not user_annotations %}
-              <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
-            {% else %}
-              <ul class="list-inline">
-                {% for annotation in user_annotations.all %}
-                   {% include "partials/user_pages/annotations_created_panel.html" with annotation=annotation user=profile_user %}
-                {% endfor %}
-                <li>
-                  <a class="btn btn-default btn-sm" href="{% url 'user_annotations' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les annotations</a>
-                </li>
-              </ul>
-            {% endif %}
-          </div>
-          <div class="col-md-6">
-            <h4>{% if profile_user == request.user %}Mes contributions :{% else %}Contributions de {{profile_user.username}}{% endif %}</h4>
-            <dl>
-            <dt class="dt-annotation">
-              {% if profile_user == request.user %}
-                Dernières annotations sur lesquelles j'ai proposé des révisions :
-              {% else %}
-                Dernières annotations sur lesquelles {{profile_user.username}} a proposé des révisions :
-              {% endif %}
-              </dt>
-              <dd>
-              {% if not user_contributed_annotations %}
-                 <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
-              {% else %}
-                <ul class="list-inline">
-                  {% for annotation_data in user_contributed_annotations %}
-                     {% include "partials/user_pages/annotations_contributed_panel.html" with annotation_data=annotation_data user=profile_user %}
-                  {% endfor %}
-                  <li>
-                    <a class="btn btn-default btn-sm" href="{% url 'user_contributed' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les contributions</a>
-                  </li>
-                </ul>
-              {% endif %}
-              </dd>
-              <dt class="dt-annotation">
-              {% if profile_user == request.user %}
-                Dernières annotation sur lesquelles j'ai commenté (sans proposer de révision) :
-              {% else %}
-                Dernières annotations sur lesquelles {{profile_user.username}} a commenté (sans proposer de révision) :
-              {% endif %}
-              </dt>
-              <dd>
-              {% if not user_commented_annotations %}
-                 <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
-              {% else %}
-                <ul class="list-unstyled">
-                  {% for annotation_data in user_commented_annotations %}
-                    {% include "partials/user_pages/annotations_commented_panel.html" with annotation_data=annotation_data user=profile_user %}
-                  {% endfor %}
-                  <li>
-                    <a class="btn btn-default btn-sm" href="{% url 'user_commented' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les annotations commentées</a>
-                  </li>
-                </ul>
-              {% endif %}
-              </dd>
-            </dl>
-          </div>
-        </div>
-      </div>
-    </div>
-    {% if profile_user.profile.managed_collections %}
-    <div class="col-md-12">
-      <div class="panel panel-default text-center" style="padding: 10px;">
-        <h2><small>Administration de Fonds:</small></h2>
-        {% for collection in profile_user.profile.managed_collections.all %}
-        <h3>{{collection.verbose_name}}</h3>
-        <div>
-          <a href="{% url 'user_admin_panel' profile_user.id collection.name %}" class="btn btn-default text-center">Tableau de bord</a>
-        </div>
+    {% if not user_annotations %}
+      <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
+    {% else %}
+      <ul class="list-unstyled">
+        {% for annotation in user_annotations.all %}
+           {% include "partials/user_pages/annotations_created_panel.html" with annotation=annotation user=profile_user %}
         {% endfor %}
-      </div>
-    </div>
+      </ul>
+      <a class="btn btn-default btn-sm" href="{% url 'user_annotations' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les annotations</a>
     {% endif %}
   </div>
+  <div>
+    <h4>{% if profile_user == request.user %}Mes contributions{% else %}Contributions de {{profile_user.username}}{% endif %}</h4>
+    <dl>
+    <dt class="dt-annotation">
+      {% if profile_user == request.user %}
+        Dernières annotations sur lesquelles j'ai proposé des révisions :
+      {% else %}
+        Dernières annotations sur lesquelles {{profile_user.username}} a proposé des révisions :
+      {% endif %}
+      </dt>
+      <dd>
+      {% if not user_contributed_annotations %}
+         <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
+      {% else %}
+        <ul class="list-inline">
+          {% for annotation_data in user_contributed_annotations %}
+             {% include "partials/user_pages/annotations_contributed_panel.html" with annotation_data=annotation_data user=profile_user %}
+          {% endfor %}
+          <li>
+            <a class="btn btn-default btn-sm" href="{% url 'user_contributed' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les contributions</a>
+          </li>
+        </ul>
+      {% endif %}
+      </dd>
+      <dt class="dt-annotation">
+      {% if profile_user == request.user %}
+        Dernières annotation sur lesquelles j'ai commenté (sans proposer de révision) :
+      {% else %}
+        Dernières annotations sur lesquelles {{profile_user.username}} a commenté (sans proposer de révision) :
+      {% endif %}
+      </dt>
+      <dd>
+      {% if not user_commented_annotations %}
+         <h4 class="no-user-annotation"><small>Aucune annotation à afficher</small></h4>
+      {% else %}
+        <ul class="list-unstyled">
+          {% for annotation_data in user_commented_annotations %}
+            {% include "partials/user_pages/annotations_commented_panel.html" with annotation_data=annotation_data user=profile_user %}
+          {% endfor %}
+          <li>
+            <a class="btn btn-default btn-sm" href="{% url 'user_commented' profile_user.id %}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Voir toutes les annotations commentées</a>
+          </li>
+        </ul>
+      {% endif %}
+      </dd>
+    </dl>
+  </div>
 
 {% endblock %}
 
--- a/src/iconolab/templates/iconolab/user_notifications.html	Thu Mar 16 13:14:44 2017 +0100
+++ b/src/iconolab/templates/iconolab/user_notifications.html	Fri Mar 17 12:37:01 2017 +0100
@@ -1,4 +1,4 @@
-{% extends 'iconolab_base.html' %}
+{% extends 'iconolab/user_base.html' %}
 
 {% load staticfiles %}
 
@@ -8,57 +8,51 @@
 
 {% load notifications_tags %}
 
-{% block content %}
-  <div id="user-profile-block" class="row">
-    <div class="col-md-12">
-      <div class="panel panel-default" style="padding-bottom: 10px; padding-left:10px; padding-right: 10px;">
-          <h3>Mes notifications : </h3>
-          {% if notifications %}
-            <ul class="list-group">
-            {% for notification in notifications %}
-              <a
-                {% if notification.target and notification.action_object %}
-                  {% with notification.target as annotation %}
-                    class="list-group-item {% if notification.id in notifications_unread_ids %}list-group-item-info{% endif %}"
-                    {% if notification.action_object.get_comment_page %}
-                    href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}?page={{notification.action_object.get_comment_page}}#c{{notification.action_object.id}}"
-                    {% else %}
-                    href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid notification.action_object.revision_guid %}"
-                    {% endif %}
-                  {% endwith %}
-                {% else %}
-                  class="list-group-item disabled {% if forloop.counter > 5 %}hide-on-load{% endif %}"
-                {% endif %}>
-                <b>{{notification.actor.username}}</b> {{notification.verb}} <small> - {{notification.timesince}}</small>
-              </a>
-            {% endfor %}
-            </ul>
+{% block user_content %}
+  <h2>Mes notifications</h2>
+  {% if notifications %}
+    <ul class="list-group">
+    {% for notification in notifications %}
+      <a
+        {% if notification.target and notification.action_object %}
+          {% with notification.target as annotation %}
+            class="list-group-item {% if notification.id in notifications_unread_ids %}list-group-item-info{% endif %}"
+            {% if notification.action_object.get_comment_page %}
+            href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}?page={{notification.action_object.get_comment_page}}#c{{notification.action_object.id}}"
+            {% else %}
+            href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid notification.action_object.revision_guid %}"
+            {% endif %}
+          {% endwith %}
+        {% else %}
+          class="list-group-item disabled {% if forloop.counter > 5 %}hide-on-load{% endif %}"
+        {% endif %}>
+        <b>{{notification.actor.username}}</b> {{notification.verb}} <small> - {{notification.timesince}}</small>
+      </a>
+    {% endfor %}
+    </ul>
 
-            {% if notifications.has_previous or notifications.has_next %}
-            <ul class="pagination pull-right">
-              {% if notifications.has_previous %}
-              <li>
-                <a href="{% url 'user_notifications' %}?page={{notifications.previous_page_number}}" aria-label="Previous">
-                  <span aria-hidden="true">&laquo;</span>
-                </a>
-              </li>
-              {% endif %}
-              {% for page in notifications.paginator.page_range %}
-                <li id="page-link-{{page}}" class="pagination-link {% if page == notifications.number %}active{% endif %}">
-                  <a {% if page != notifications.number %}href="{% url 'user_notifications' %}?page={{page}}"{% endif %}>{{page}}</a>
-                </li>
-              {% endfor %}
-              {% if notifications.has_next %}
-              <li>
-                <a href="{% url 'user_notifications' %}?page={{notifications.next_page_number}}" aria-label="Next">
-                  <span aria-hidden="true">&raquo;</span>
-                </a>
-              </li>
-              {% endif %}
-            </ul>
-            {% endif %}
-          {% endif %}
-      </div>
-    </div>
-  </div>
+    {% if notifications.has_previous or notifications.has_next %}
+    <ul class="pagination pull-right">
+      {% if notifications.has_previous %}
+      <li>
+        <a href="{% url 'user_notifications' %}?page={{notifications.previous_page_number}}" aria-label="Previous">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+      {% endif %}
+      {% for page in notifications.paginator.page_range %}
+        <li id="page-link-{{page}}" class="pagination-link {% if page == notifications.number %}active{% endif %}">
+          <a {% if page != notifications.number %}href="{% url 'user_notifications' %}?page={{page}}"{% endif %}>{{page}}</a>
+        </li>
+      {% endfor %}
+      {% if notifications.has_next %}
+      <li>
+        <a href="{% url 'user_notifications' %}?page={{notifications.next_page_number}}" aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
+      </li>
+      {% endif %}
+    </ul>
+    {% endif %}
+  {% endif %}
 {% endblock %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/user_settings.html	Fri Mar 17 12:37:01 2017 +0100
@@ -0,0 +1,25 @@
+{% extends 'iconolab/user_base.html' %}
+
+{% block user_content %}
+  <form method="post" class="form-horizontal">
+    {% csrf_token %}
+    <fieldset class="form-group {% if user_form.email.errors %}has-error{% endif %}">
+      <label class="control-label col-sm-2" for="id_{{ user_form.email.name }}">Email</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control"
+          name="{{ user_form.email.name }}"
+          id="id_{{ user_form.email.name }}" value="{% if user_form.email.value %}{{ user_form.email.value }}{% endif %}">
+        {% if user_form.email.errors %}
+        <span class="help-block">{{ user_form.email.errors | striptags }}</span>
+        {% else %}
+        <span class="help-block">Spécifiez votre email pour recevoir des notifications</span>
+        {% endif %}
+      </div>
+    </fieldset>
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <button type="submit" class="btn btn-block btn-primary">Valider</button>
+      </div>
+    </div>
+  </form>
+{% endblock %}
--- a/src/iconolab/urls.py	Thu Mar 16 13:14:44 2017 +0100
+++ b/src/iconolab/urls.py	Fri Mar 17 12:37:01 2017 +0100
@@ -50,6 +50,8 @@
     url(r'^user/(?P<slug>[a-z0-9\-]+)/annotations/?$', views.userpages.UserAnnotationsView.as_view(), name="user_annotations"),
     url(r'^user/(?P<slug>[a-z0-9\-]+)/adminpanel/(?P<collection_name>[a-z0-9\-]+)/$', views.userpages.UserCollectionAdminView.as_view(), name="user_admin_panel"),
     url(r'^user/notifications/all/?$', login_required(views.userpages.UserNotificationsView.as_view()), name="user_notifications"),
+    url(r'^user/settings/?$', login_required(views.userpages.UserSettingsView.as_view()), name="user_settings"),
+    url(r'^user/collections/?$', login_required(views.userpages.UserCollectionsView.as_view()), name="user_collections"),
     url(r'^user/notifications/', include(notifications.urls, namespace='notifications')),
 
     url(r'^errors/404', views.misc.NotFoundErrorView.as_view(), name="404error"),
--- a/src/iconolab/views/userpages.py	Thu Mar 16 13:14:44 2017 +0100
+++ b/src/iconolab/views/userpages.py	Fri Mar 17 12:37:01 2017 +0100
@@ -44,7 +44,6 @@
     def get(self, request, *args, **kwargs):
         self.object = self.get_object()
         context = self.get_context_data()
-        context['user_form'] = UserForm(instance=request.user)
 
         if request.user.is_authenticated() and self.object == request.user:
             if request.GET.get('clear_notifications', False):
@@ -54,21 +53,6 @@
 
         return render(request, 'iconolab/user_home.html', context)
 
-    def post(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        context = self.get_context_data()
-
-        user_form = UserForm(data=request.POST, instance=request.user)
-        context['user_form'] = user_form
-
-        if request.user.is_authenticated() and self.object == request.user:
-            if user_form.is_valid():
-                user = user_form.save(commit=False)
-                user.save()
-                return redirect(reverse('user_home', kwargs={'slug': user.id}))
-
-        return render(request, 'iconolab/user_home.html', context)
-
 class UserNotificationsView(View):
     """
         View that displays the notifications the user received
@@ -77,6 +61,7 @@
         context = {}
         notifications = Notification.objects.filter(recipient=request.user)
         context['notifications_unread_ids'] = notifications.unread().values_list('id', flat=True)
+        context['profile_user'] = request.user
         page = request.GET.get('page', 1)
         paginator = Paginator(notifications, 50)
         try:
@@ -273,3 +258,34 @@
         logger.debug(ordering)
         logger.debug(annotation_queryset)
         return render(request, 'iconolab/user_collection_admin.html', context)
+
+class UserSettingsView(View):
+
+    def get(self, request, *args, **kwargs):
+        context = {}
+        context['profile_user'] = request.user
+        context['user_form'] = UserForm(instance=request.user)
+
+        return render(request, 'iconolab/user_settings.html', context)
+
+    def post(self, request, *args, **kwargs):
+        context = {}
+        context['profile_user'] = request.user
+
+        user_form = UserForm(data=request.POST, instance=request.user)
+        if user_form.is_valid():
+            user = user_form.save(commit=False)
+            user.save()
+            return redirect(reverse('user_settings', kwargs={'slug': user.id}))
+
+        context['user_form'] = user_form
+
+        return render(request, 'iconolab/user_settings.html', context)
+
+class UserCollectionsView(View):
+
+    def get(self, request, *args, **kwargs):
+        context = {}
+        context['profile_user'] = request.user
+
+        return render(request, 'iconolab/user_collections.html', context)