Message thread page

yadawia/__init__.py

@@ -66,7 +66,7 @@ def sender(thread_id):
     """TEMPLATE FILTER: Get sender in a 2-person message from threadID and logged in session."""
     userId = session['userId']
     return yadawia.classes.MessageThread.query.filter_by(
-        id=thread_id).first().otherUser(userId)
+        id=thread_id).first().otherUser(userId).id
 
 
 @app.template_filter('name_or_username')
@@ -95,5 +95,11 @@ def order_total(order):
         strings.append(str(val) + ' ' + key)
     return ' + '.join(strings)
 
+@app.template_filter('excerpt')
+def excerpt(text):
+    """TEMPLATE FILTER: Cut text and append dots if its lenght is more than 100 chars."""
+    return text[:100] + '...' if len(text) > 100 else text
+
+
 app.jinja_env.globals['csrf_token'] = yadawia.helpers.generate_csrf_token
 """Whenever `{{ csrf_token() }}` is used in a Jinja2 template, it returns the result of the function `generate_csrf_token()` """

yadawia/classes.py

@@ -14,6 +14,7 @@
 from sqlalchemy_searchable import SearchQueryMixin
 from sqlalchemy_utils.types import TSVectorType
 from sqlalchemy.ext.hybrid import hybrid_method
+from sqlalchemy import and_
 import re
 import datetime
 
@@ -543,9 +544,16 @@ def isParticipant(self, user):
     def otherUser(self, user):
         """Given a user in a thread, find the other one."""
         if self.isParticipant(user):
-            return self.user2 if self.user1 == user else self.user1
+            user_id = self.user2 if self.user1 == user else self.user1
+            return User.query.filter_by(id=user_id).first()
         return None
 
+    def unseen(self, user):
+        """Get number of unseen messages relative to a user."""
+        other_id = self.otherUser(user).id
+        return self.messages.filter(and_(Message.sender_id == other_id,
+                                    Message.seen is None)).count()
+
 
 class Message(db.Model):
     """Database model for messages in a thread. Contains:

yadawia/static/css/layout.css

@@ -7,6 +7,48 @@
 	- Text Grey: rgb(51,51,51);
 */
 
+.unseen-circle {
+	font-size: 0.5em;
+}
+
+.thread-card.not-seen {
+	background-color: rgba(237,216,52,0.5);
+}
+
+.thread-card:hover {
+	box-shadow:  1px 3px 4px 1px rgba(51,51,3,0.2);
+}
+
+.thread-card p {
+	transition-duration: 0.3s;
+}
+
+.thread-card:hover p {
+	opacity: 1;
+}
+
+.thread-card {
+	background-color: #eee;
+    padding: 1em;
+    box-shadow: 1px 3px 4px 1px rgba(51,51,3,0.3);
+    margin-bottom: 2em;
+    transition-duration: 0.3s;
+}
+
+.thread-card h4 small {
+	font-weight: bold;
+}
+
+.thread-card p {
+	opacity: 0.7;
+}
+
+.thread-card .date-to-now {
+	text-transform: uppercase;
+    font-size: 0.7em;
+    font-weight: bold;
+}
+
 .item-confirm-button {
 	font-weight: bold;
 	margin-bottom: 1em;

yadawia/templates/messages.html

@@ -5,9 +5,33 @@
 {% endblock %}
 
 {% block middle %}
-	<h3>Messages</h3>
+	<div class="col-xs-12 col-md-8">
+	<h3><i class="fa fa-envelope"></i> Messages</h3>
+	{% if threads %}
+	<ul class="list-unstyled">
 	{% for thread in threads %}
-		{% if thread.title %}{{ thread.title }}{% else %}Untitled Thread{% endif %} by {{ thread.id | sender | name_or_username }}
-		{{ thread.messages.first().text }}
+			<li class="thread-card {% if thread.unseen(session.userId) > 0 %}not-seen{% endif %}">
+				<h4>
+					<a href="{{ url_for('message_thread', threadID=thread.id) }}">
+						{% if thread.unseen(session.userId) > 0 %}
+							<span title="New messages"><i class="unseen-circle fa fa-circle"></i></span>&nbsp;
+						{% endif %}
+						{% if thread.title %}{{ thread.title }}{% else %}Untitled Thread{% endif %}&nbsp;
+						{% if thread.unseen(session.userId) > 0 %}
+							({{ thread.unseen(session.userId) }})
+						{% endif %}
+					</a>&nbsp;
+					<a href="{{ url_for('profile', username=thread.otherUser(session.userId).username) }}">
+						<small>@{{ thread.otherUser(session.userId).name_or_username() }}</small>
+					</a>
+				</h4>
+				<p>{{ thread.messages.first().text | excerpt }}</p>
+				<span class="date-to-now">{{ thread.messages.first().date }}</span>
+			</li>
 	{% endfor %}
+	</ul>
+	{% else %}
+		<h3><small>You don't have any messages yet.</small></h3>
+	{% endif %}
+	</div>
 {% endblock %}

yadawia/views.py

@@ -345,7 +345,7 @@ def see_message(threadID):
     if is_allowed_in_thread(threadID):
         error = None
         user_id = session['userId']
-        messages = Message.query.filter(Message.sender_id != user_id).all()
+        messages = Message.query.filter(and_(Message.sender_id != user_id, Message.seen is None)).all()
         try:
             for message in messages:
                 message.see(user_id)