Redesign "conversation view" and "new conversation"

flaskbb/static/js/flaskbb.js

@@ -115,7 +115,7 @@ $(document).ready(function () {
         var message_id = $(this).attr('data-message-id');
 
         $.get('/message/message/' + message_id + '/raw', function(text) {
-            var $contents = $('.message-content .md-editor textarea');
+            var $contents = $('#quickreply-editor');
             $contents.val(($contents.val() + '\n' + text).trim() + '\n');
             $contents.selectionStart = $contents.selectionEnd = $contents.val().length;
             $contents[0].scrollTop = $contents[0].scrollHeight;
@@ -129,7 +129,6 @@ $(document).ready(function () {
 
         $.get('/post/' + post_id + '/raw', function(text) {
             var $contents = $('#quickreply-editor');
-            console.log($contents);
             $contents.val(($contents.val() + '\n' + text).trim() + '\n');
             $contents.selectionStart = $contents.selectionEnd = $contents.val().length;
             $contents[0].scrollTop = $contents[0].scrollHeight;

flaskbb/themes/aurora/src/flaskbb.scss

@@ -476,8 +476,78 @@ body {
             }
         }
     }
+    .conversation-message {
+        min-height: 16em;
+        padding: 0.5em;
+        border: 1px solid $border-color;
+        border-radius: 5px;
+
+        .message-content {
+            padding-top: 0.5em;
+        }
+
+        .message-footer {
+            width: 100%;
+            bottom: 0;
+            position: absolute;
+            .right {
+                margin-right: 46px;
+                float: right;
+            }
+            .left {
+                float: left;
+            }
+        }
+
+    }
+    @media (min-width: 992px) {
+        .arrow:after, .arrow:before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-color: transparent;
+        }
+        .arrow.left:after, .arrow.left:before {
+            border-left: 0;
+        }
+
+        // Left Arrow
+        .arrow.left:before {
+            left: 0px;
+            top: 40px;
+            border-right-color: inherit;
+            border-width: 16px;
+        }
+
+        .arrow.left:after {
+            left: 1px;
+            top: 41px;
+            border-right-color: #FFFFFF;
+            border-width: 15px;
+        }
+
+        // Right Arrow
+        .arrow.right:before {
+            right: -16px;
+            top: 40px;
+            border-left-color: inherit;
+            border-width: 16px;
+        }
+        .arrow.right:after {
+            right: -14px;
+            top: 41px;
+            border-left-color: #FFFFFF;
+            border-width: 15px;
+        }
+    }
+
 }
 
+.conversation-reply {
+    padding-top: 2em;
+}
 
 p.flaskbb-stats {
     margin: 0;

flaskbb/themes/aurora/static/css/flaskbb.css

@@ -255,6 +255,55 @@ body {
     background-color: #fff; }
     .conversation-panel .conversation-body .row > .conversation-row:not(:last-child) {
       border-bottom: 1px solid #cad7e1; }
+  .conversation-panel .conversation-message {
+    min-height: 16em;
+    padding: 0.5em;
+    border: 1px solid #cad7e1;
+    border-radius: 5px; }
+    .conversation-panel .conversation-message .message-content {
+      padding-top: 0.5em; }
+    .conversation-panel .conversation-message .message-footer {
+      width: 100%;
+      bottom: 0;
+      position: absolute; }
+      .conversation-panel .conversation-message .message-footer .right {
+        margin-right: 46px;
+        float: right; }
+      .conversation-panel .conversation-message .message-footer .left {
+        float: left; }
+  @media (min-width: 992px) {
+    .conversation-panel .arrow:after, .conversation-panel .arrow:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-color: transparent; }
+    .conversation-panel .arrow.left:after, .conversation-panel .arrow.left:before {
+      border-left: 0; }
+    .conversation-panel .arrow.left:before {
+      left: 0px;
+      top: 40px;
+      border-right-color: inherit;
+      border-width: 16px; }
+    .conversation-panel .arrow.left:after {
+      left: 1px;
+      top: 41px;
+      border-right-color: #FFFFFF;
+      border-width: 15px; }
+    .conversation-panel .arrow.right:before {
+      right: -16px;
+      top: 40px;
+      border-left-color: inherit;
+      border-width: 16px; }
+    .conversation-panel .arrow.right:after {
+      right: -14px;
+      top: 41px;
+      border-left-color: #FFFFFF;
+      border-width: 15px; } }
+
+.conversation-reply {
+  padding-top: 2em; }
 
 p.flaskbb-stats {
   margin: 0;

flaskbb/themes/aurora/templates/message/conversation.html

@@ -6,76 +6,137 @@
 {% endblock %}
 
 {% block message_content %}
+{# quick check if the conversation is a draft #}
+{% if conversation.draft %}
+    {% set messages = [conversation.first_message] %}
+{% else %}
+    {% set messages = conversation.messages %}
+{% endif %}
+
 <div class="panel conversation-panel">
-    <div class="panel-heading conversation-head">Subject: <strong>{{ conversation.subject }}</strong></div>
+    <div class="panel-heading conversation-head">
+        Subject: <strong>{{ conversation.subject }}</strong>
+    </div>
+
     <div class="panel-body conversation-body">
-        <section class="conversation-list">
-            {% if conversation.draft %}
-                {% set messages = [conversation.first_message] %}
-            {% else %}
-                {% set messages = conversation.messages %}
-            {% endif %}
+        <div class="conversation-box">
             {% for message in messages %}
             <!-- First Comment -->
-            <article class="row" id="mid{{message.id}}">
+            <div class="row conversation-row" id="mid{{message.id}}">
                 {% if current_user.id == message.user_id %}
-                <div class="col-md-2 col-sm-2 hidden-xs">
-                        <figure class="thumbnail">
-                        {% if message.user.avatar %}
-                            <img class="img-responsive" src="{{ message.user.avatar }}" />
+                <div class="col-md-2 col-sm-3 col-xs-12">
+                    <div class="conversation-author author">
+                        <!-- Registered User -->
+                        <div class="author-name"><h4><a href="{{ message.user.url }}">{{ message.user.username }}</a></h4></div>
+
+                        <!-- check if user is online or not -->
+                        {% if message.user|is_online %}
+                        <div class="author-online" data-toggle="tooltip" data-placement="top" title="online"></div>
                         {% else %}
-                            <!-- "no" avatar proudly made with Google Drawing.. because lol -->
-                            <img src="{{ url_for('static', filename='img/avatar100x100.png') }}" class="img-responsive" alt="avatar" />
+                        <div class="author-offline" data-toggle="tooltip" data-placement="top" title="offline"></div>
+                        {% endif %}
+                        <div class="author-title"><h5>{{ message.user.primary_group.name }}</h5></div>
+
+                        {% if message.user.avatar %}
+                            <div class="author-avatar"><img src="{{ message.user.avatar }}" alt="avatar"></div>
+                        {% endif %}
+
+                        <div class="author-registered">{% trans %}Joined{% endtrans %}: {{ message.user.date_joined|format_date('%b %d %Y') }}</div>
+                        <div class="author-posts">{% trans %}Posts{% endtrans %}: {{ message.user.post_count }}</div>
+
+                        {% if message.user.website %}
+                        <div class="author-website"><a href="{{ message.user.website }}" rel="nofollow">{% trans %}Website{% endtrans %}</a></div>
                         {% endif %}
-                        <figcaption class="text-center"><strong><a href="{{ message.user.url }}" class="conversation-username">{{ message.user.username }}</a></strong></figcaption>
-                    </figure>
+                    </div>
                 </div>
                 {% endif %}
-                <div class="col-md-10 col-sm-10">
-                    <div class="panel panel-default arrow {% if current_user.id == message.user_id %}left{% else %}right{% endif %}">
-                        <div class="panel-body">
-                            <header class="text-left">
+                <div class="col-md-10 col-sm-9 col-xs-12">
+                    <div class="conversation-message arrow {% if current_user.id == message.user_id %}left{% else %}right{% endif %}">
+                        <div class="message-box">
+
+                            <div class="text-left message-header">
                                 <time class="conversation-date" datetime="{{ message.date_created }}"><i class="fa fa-clock-o"></i> {{ message.date_created|format_date("%d %B %Y - %H:%M") }}</time>
-                            </header>
-                            <div class="conversation-message">
+                            </div>
+
+                            <div class="message-content">
                                 {{ message.message|markup|safe }}
                             </div>
+
+                            <div class="message-footer">
                             {% if conversation.draft %}
                                 <p class="text-right"><a href="{{ url_for('message.edit_conversation', conversation_id=conversation.id) }}" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> edit</a></p>
                             {% else %}
-                                <p class="text-right"><a href="#" class="btn btn-default btn-sm reply-btn" data-message-id="{{ message.id }}"><i class="fa fa-reply"></i> reply</a></p>
+                                <p class="{% if current_user.id == message.user_id %}left{% else %}right{% endif %}"><a href="#" class="btn btn-default btn-sm reply-btn" data-message-id="{{ message.id }}"><i class="fa fa-reply"></i> reply</a></p>
                             {% endif %}
+                            </div>
+
                         </div>
                     </div>
                 </div>
                 {% if current_user.id != message.user_id %}
-                <div class="col-md-2 col-sm-2 hidden-xs">
-                        <figure class="thumbnail">
-                            {% if message.user.avatar %}
-                                <img class="img-responsive" src="{{ message.user.avatar }}" />
-                            {% else %}
-                                <img src="{{ url_for('static', filename='img/avatar100x100.png') }}" class="img-responsive" alt="avatar" />
-                            {% endif %}
-                        <figcaption class="text-center"><strong><a href="{{ message.user.url }}" class="conversation-username">{{ message.user.username }}</a></strong></figcaption>
-                    </figure>
+                <div class="col-md-2 col-sm-3 col-xs-12">
+                    <div class="conversation-author author">
+                        {% if message.user_id and message.user %}
+                        <!-- Registered User -->
+                        <div class="author-name"><h4><a href="{{ message.user.url }}">{{ message.user.username }}</a></h4></div>
+
+                        <!-- check if user is online or not -->
+                        {% if message.user|is_online %}
+                        <div class="author-online" data-toggle="tooltip" data-placement="top" title="online"></div>
+                        {% else %}
+                        <div class="author-offline" data-toggle="tooltip" data-placement="top" title="offline"></div>
+                        {% endif %}
+                        <div class="author-title"><h5>{{ message.user.primary_group.name }}</h5></div>
+
+                        {% if message.user.avatar %}
+                            <div class="author-avatar"><img src="{{ message.user.avatar }}" alt="avatar"></div>
+                        {% endif %}
+
+                        <div class="author-registered">{% trans %}Joined{% endtrans %}: {{ message.user.date_joined|format_date('%b %d %Y') }}</div>
+                        <div class="author-posts">{% trans %}Posts{% endtrans %}: {{ message.user.post_count }}</div>
+                        <div class="author-pm">
+                        <a href="{{ url_for('message.new_conversation') }}?to_user={{ message.user.username }}">{% trans %}Message{% endtrans %}</a>
+                        </div>
+
+                        {% if message.user.website %}
+                        <div class="author-website"><a href="{{ message.user.website }}" rel="nofollow">{% trans %}Website{% endtrans %}</a></div>
+                        {% endif %}
+
+                        {% else %}
+                        <div class="author-name"><h4>{% trans %}Deleted{% endtrans %}</h4></div>
+                        <div class="author-title"><h5>{% trans %}Guest{% endtrans %}</h5></div>
+                        {% endif %}
+                    </div>
                 </div>
                 {% endif %}
-            </article>
+            </div>
         {% endfor %}
-        </section>
+        </div>
     </div>
 </div>
-{% if not conversation.draft %}
-    {% from "macros.html" import render_field, render_submit_field %}
-    <form class="form" action="#" method="post">
-        {{ form.hidden_tag() }}
-
-        {{ render_field(form.message, div_class="col-sm-12 message-content", rows="10", placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'true', 'id': 'quickreply-editor'}) }}
 
-        <div class="col-sm-12" style="padding-top: 5px">
-        {{ render_submit_field(form.submit) }}
+{% if not conversation.draft %}
+{% from "macros.html" import render_quickreply, render_submit_field %}
+<form class="form" action="#" method="post">
+    {{ form.hidden_tag() }}
+    <div class="row conversation-reply">
+        <div class="col-md-12 col-sm-12 col-xs-12">
+            <div class="editor-box">
+                <div class="editor">
+                    {{ render_quickreply(form.message, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'id': 'quickreply-editor'}) }}
+                </div>
+                <div class="editor-submit">
+                    <div class="editor-options pull-left">
+                        <span class="label label-info">Markdown</span>
+                        <a class="label label-success" href="#">help</a> <!-- TODO: add markdown cheat sheet -->
+                        <a class="label label-success" href="#">emojis</a> <!-- TODO: add emoji cheat sheet -->
+                    </div>
+                    {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
+                </div>
+            </div>
         </div>
-    </form>
+    </div>
+</form>
 {% endif %}
 
 {% endblock %}

flaskbb/themes/aurora/templates/message/message_form.html

@@ -2,20 +2,53 @@
 
 {% extends theme("message/message_layout.html") %}
 
+{% block css %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-markdown.min.css') }}">
+{% endblock %}
+
 {% block message_content %}
-{% from theme("macros.html") import horizontal_field, render_submit_field %}
-<form class="form-horizontal" role="form" method="post" name="new">
-    <legend>{{ title }}</legend>
+{% from theme("macros.html") import render_submit_field, render_quickreply, render_field %}
+<form class="form-horizontal" role="form" method="post">
     {{ form.hidden_tag() }}
-    {{ horizontal_field(form.to_user)}}
-    {{ horizontal_field(form.subject)}}
-    {{ horizontal_field(form.message, rows=7)}}
+    <div class="panel page-panel">
+        <div class="panel-heading page-head">
+            {{ title }}
+        </div>
+
+        <div class="panel-body page-body">
+            {{ form.hidden_tag() }}
+            <div class="col-md-12 col-sm-12 col-xs-12">
 
-    <div class="form-group row">
-        <div class="col-sm-offset-3 col-lg-9">
-            {{ render_submit_field(form.send_message, input_class="btn btn-success") }}
-            {{ render_submit_field(form.save_message, input_class="btn btn-info") }}
+                {{ render_field(form.to_user, div_class="col-md-6 col-sm-6 col-xs-6") }}
+                {{ render_field(form.subject, div_class="col-md-6 col-sm-6 col-xs-6") }}
+
+                <div class="form-group">
+                    <div class="col-md-12 col-sm-12 col-xs-12">
+                        <div class="editor-box">
+                            <div class="editor">
+                                {{ render_quickreply(form.message, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'id': 'quickreply-editor'}) }}
+                            </div>
+                            <div class="editor-submit">
+                                <div class="editor-options pull-left">
+                                    <span class="label label-info">Markdown</span>
+                                    <a class="label label-success" href="#">help</a> <!-- TODO: add markdown cheat sheet -->
+                                    <a class="label label-success" href="#">emojis</a> <!-- TODO: add emoji cheat sheet -->
+                                </div>
+                                <div class="pull-right">
+                                    {{ render_submit_field(form.send_message, input_class="btn btn-success") }}
+                                    {{ render_submit_field(form.save_message, input_class="btn btn-info") }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </form>
 {% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="{{ url_for('static', filename='js/marked.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-markdown.js') }}"></script>
+{% endblock %}

flaskbb/themes/aurora/templates/message/message_layout.html

@@ -9,7 +9,7 @@
 </ol>
 
 <div class="row">
-    <div class="col-sm-3">
+    <div class="col-sm-2">
         <div class="sidebar">
             <ul class="nav sidenav">
                 <div class="sidenav-btn">
@@ -22,7 +22,7 @@
             </ul>
         </div><!--/.sidebar -->
     </div><!--/.col-sm-3 -->
-    <div class="col-sm-9">
+    <div class="col-sm-10">
         {% block message_content %}{% endblock %}
     </div><!--/.col-sm-9 -->
 </div><!--/.row -->