Preview post content, fixed quote block style

misago/forms/__init__.py

@@ -148,6 +148,10 @@ class Form(forms.Form):
                 field_error, self.errors[self.error_source] = self.errors[self.error_source][0], []
                 raise forms.ValidationError(field_error)
             raise forms.ValidationError(_("Form contains errors."))
+        
+    def empty_errors(self):
+        for i in self.errors:
+            self.errors[i] = []
 
 
 class YesNoSwitch(forms.CheckboxInput):

misago/threads/views/posting.py

@@ -98,6 +98,25 @@ class PostingView(BaseView):
         message = request.messages.get_message('threads')
         if request.method == 'POST':
             form = self.get_form(True)
+            if 'preview' in request.POST:
+                if form['post'].value():
+                    md, preparsed = post_markdown(request, form['post'].value())
+                else:
+                    md, preparsed = None, None
+                form.empty_errors()
+                return request.theme.render_to_response('threads/posting.html',
+                                                        {
+                                                         'mode': self.mode,
+                                                         'forum': self.forum,
+                                                         'thread': self.thread,
+                                                         'post': self.post,
+                                                         'quote': self.quote,
+                                                         'parents': self.parents,
+                                                         'message': message,
+                                                         'preview': preparsed,
+                                                         'form': FormLayout(form),
+                                                         },
+                                                        context_instance=RequestContext(request));
             if form.is_valid():                
                 # Record original vars if user is editing 
                 if self.mode in ['edit_thread', 'edit_post']:

static/sora/css/sora.css

@@ -1029,11 +1029,12 @@ td.lead-cell{color:#555555;font-weight:bold;}
 .editor .editor-error .help-block:last-child{margin-bottom:0px;}
 .editor .editor-input{padding:8px;}.editor .editor-input div{margin-right:14px;}
 .editor .editor-input textarea{margin:0px;width:100%;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;}
-.editor .editor-actions{border-top:2px solid #c9c9c9;overflow:auto;padding:8px;}.editor .editor-actions .editor-tools{display:none;overflow:auto;margin:-6px;padding:6px;}.editor .editor-actions .editor-tools li{float:left;list-style:none;margin-right:6px;}.editor .editor-actions .editor-tools li.divider{margin-left:6px;}
+.editor .editor-actions{border-top:2px solid #c9c9c9;overflow:auto;padding:8px;}.editor .editor-actions>.btn{margin-left:8px;}
+.editor .editor-actions .editor-tools{display:none;overflow:auto;margin:-6px;padding:6px;}.editor .editor-actions .editor-tools li{float:left;list-style:none;margin-right:6px;}.editor .editor-actions .editor-tools li.divider{margin-left:6px;}
 .editor .editor-actions .editor-tools li a{background-color:#eeeeee;border-color:#ffffff;-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;padding:4px 7px;}.editor .editor-actions .editor-tools li a:hover{background-color:#ffffff;}
 .markdown{margin-bottom:-12px;}.markdown h1{font-size:160%;}
 .markdown h2{font-size:120%;}
-.markdown blockquote{background-color:#fcfcfc;border:1px solid #cccccc;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;padding:14px 16px;width:90%;margin-left:auto;margin-right:auto;}.markdown blockquote h3{margin:0px;margin-top:-10px;padding:0px;color:#555555;font-size:100%;}
+.markdown blockquote{background-color:#fcfcfc;border:1px solid #cccccc;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:14px 16px;margin-left:16px;margin-right:16px;}.markdown blockquote h3{margin:0px;margin-top:-10px;padding:0px;color:#555555;font-size:100%;}
 .markdown blockquote blockquote,.markdown blockquote pre{display:block;}
 .markdown pre{display:inline-block;width:90%;margin-left:auto;margin-right:auto;}.markdown pre pre{display:block;}
 .markdown .md-img{text-align:center;margin:24px auto;padding:0px;float:none;}.markdown .md-img img{-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;}

static/sora/css/sora/editor.less

@@ -37,6 +37,10 @@
     overflow: auto;
     padding: 8px;
     
+    &>.btn {
+      margin-left: 8px;
+    }
+    
     .editor-tools {
       display: none;
       overflow: auto;

static/sora/css/sora/markdown.less

@@ -11,11 +11,9 @@
     border: 1px solid lighten(@grayLight, 20%);
     border-bottom-width: 2px;
     .border-radius(3px);
-    display: inline-block;
     padding: 14px 16px;
-    width: 90%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: 16px;
+    margin-right: 16px;
     
     h3 {
       margin: 0px;

templates/sora/editor.html

@@ -1,4 +1,4 @@
-{% macro editor(field, submit_button, placeholder=None, rows=4, hide_links=False, hide_images=False, hide_hr=False) %}
+{% macro editor(field, submit_button, placeholder=None, rows=4, hide_links=False, hide_images=False, hide_hr=False, extra=None) %}
 <div class="editor">
   {% if field.errors %}
   <div class="editor-error">
@@ -21,6 +21,7 @@
       {% if not hide_hr %}<li class="divider"><a href="#" class="tooltip-top btn editor-hr" title="{% trans %}Insert Horizontal Line{% endtrans %}"><i class="icon-minus"></i></a></li>{% endif %}
     </ul>
     <button name="save" type="submit" class="btn btn-primary pull-right">{{ submit_button }}</button>
+    {% if extra %}{{ extra }}{% endif %}
   </div>
 </div>
 {% endmacro %}

templates/sora/threads/posting.html

@@ -32,15 +32,26 @@
   {%- endif %}
 </div>
 {% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
+{% if preview %}
+<div class="well" style="margin: 0px; margin-bottom: 32px; padding: 12px;">
+  <div class="markdown">
+    {{ preview|safe }}
+  </div>
+</div>
+<hr>
+{% endif %}
 <form action="{{ get_action() }}" method="post">
   <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
   {% if 'thread_name' in form.fields %}{{ form_theme.row_widget(form.fields.thread_name) }}{% endif %}
   {% if 'edit_reason' in form.fields %}{{ form_theme.row_widget(form.fields.edit_reason) }}{% endif %}
-  {{ editor.editor(form.fields.post, get_button(), rows=8) }}
+  {{ editor.editor(form.fields.post, get_button(), rows=8, extra=get_extra()) }}
 </form>
-<div class="well well-small" id="md-border" style="display: none;">
-  <div class="markdown" id="md-preview"></div>
-</div>
+{% endblock %}
+
+
+{% block javascripts %}
+{{ super() }}
+  {{ editor.js() }}
 {% endblock %}
 
 
@@ -60,6 +71,7 @@
 {%- endif %}
 {%- endmacro %}
 
+
 {% macro get_title() -%}
 {% if mode == 'new_thread' -%}
 {% trans %}Post New Thread{% endtrans %}
@@ -72,6 +84,7 @@
 {%- endif %}
 {%- endmacro %}
 
+
 {% macro get_info() -%}
 {% if mode == 'edit_post' -%}
     {% if post.moderated %}<li><i class="icon-eye-close"></i> {% trans %}Not Reviewed{% endtrans %}</li>{% endif %}
@@ -94,6 +107,7 @@
 {%- endif %}
 {%- endmacro %}
 
+
 {% macro get_button() -%}
 {% if mode == 'new_thread' -%}
 {% trans %}Post Thread{% endtrans %}
@@ -106,7 +120,7 @@
 {%- endif %}
 {%- endmacro %}
 
-{% block javascripts %}
-{{ super() }}
-  {{ editor.js() }}
-{% endblock %}
+
+{% macro get_extra() %}
+  <button id="editor-preview" name="preview" type="submit" class="btn btn-success pull-right">{% trans %}Preview{% endtrans %}</button>
+{% endmacro %}

templates/sora/threads/thread.html

@@ -255,46 +255,12 @@
     <input type="hidden" name="quick_reply" value="1">
     <img src="{{ user.get_avatar() }}" alt="{% trans %}Your Avatar{% endtrans %}" class="avatar-big">
     <div class="arrow"></div>
-    {{ editor.editor(quick_reply.post, _('Post Reply')) }}
+    {{ editor.editor(quick_reply.post, _('Post Reply'), extra=editor_extra()) }}
   </form>
 </div>
 {% endif %}
 {% endblock %}
 
-{% macro pager(extra=true) %}
-  <ul class="pager pull-left">
-    {%- if pagination['prev'] > 1 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first page{% endtrans %}"><i class="icon-chevron-left"></i> {% trans %}First{% endtrans %}</a></li>{% endif -%}
-    {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['prev'] %}{% else %}{% url 'thread' slug=thread.slug, thread=thread.id %}{% endif %}" class="tooltip-top" title="{% trans %}Older Posts{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
-    {%- if pagination['next'] > 0 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Newest Posts{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
-    {%- if pagination['next'] > 0 and pagination['next'] < pagination['total'] %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['total'] %}" class="tooltip-top" title="{% trans %}Go to last page{% endtrans %}">{% trans %}Last{% endtrans %} <i class="icon-chevron-right"></i></a></li>{% endif -%}
-    <li class="count">
-    {%- trans current_page=pagination['page'], pages=pagination['total'] -%}
-    Page {{ current_page }} of {{ pages }}
-    {%- endtrans -%}
-    </li>
-    {% if extra and user.is_authenticated() %}
-    {% if not is_read %}<li class="unread"><a href="{% url 'thread_new' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first unread{% endtrans %}"><i class="icon-star"></i> {% trans %}First Unread{% endtrans %}</a></li>{% endif %}
-    {% if thread.replies_moderated > 0 and acl.threads.can_approve(forum) %}<li class="moderated"><a href="{% url 'thread_moderated' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first post awaiting review{% endtrans %}"><i class="icon-eye-close"></i> {% trans %}First Unreviewed{% endtrans %}</a></li>{% endif %}
-    {% if thread.replies_reported > 0 and acl.threads.can_mod_posts(thread) %}<li class="reported"><a href="{% url 'thread_reported' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first reported post{% endtrans %}"><i class="icon-fire"></i> {% trans %}First Reported{% endtrans %}</a></li>{% endif %}
-    {% endif %}
-  </ul>
-{% endmacro %}
-
-{% macro checkpoint_user(checkpoint) -%}
-{%- if checkpoint.user_id -%}
-{{ ('<a href="' ~ 'user'|url(user=checkpoint.user_id, username=checkpoint.user_slug) ~ '">')|safe ~ (checkpoint.user_name) ~ ("</a>")|safe }}
-{%- else -%}
-<strong>{{ checkpoint.user_name }}</strong>
-{%- endif -%}
-{%- endmacro %}
-
-{% macro edit_user(post) -%}
-{%- if post.edit_user_id -%}
-{{ ('<a href="' ~ 'user'|url(user=post.edit_user_id, username=post.edit_user_slug) ~ '">')|safe ~ (post.edit_user_name) ~ ("</a>")|safe }}
-{%- else -%}
-<strong>{{ post.edit_user_name }}</strong>
-{%- endif -%}
-{%- endmacro %}
 
 {% block javascripts -%}
 {{ super() }}
@@ -340,4 +306,47 @@
   {% if user.is_authenticated() and acl.threads.can_reply(forum, thread) %}
   {{ editor.js() }}
   {% endif %}
-{%- endblock %}
+{%- endblock %}
+
+
+{% macro pager(extra=true) %}
+  <ul class="pager pull-left">
+    {%- if pagination['prev'] > 1 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first page{% endtrans %}"><i class="icon-chevron-left"></i> {% trans %}First{% endtrans %}</a></li>{% endif -%}
+    {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['prev'] %}{% else %}{% url 'thread' slug=thread.slug, thread=thread.id %}{% endif %}" class="tooltip-top" title="{% trans %}Older Posts{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
+    {%- if pagination['next'] > 0 %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Newest Posts{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
+    {%- if pagination['next'] > 0 and pagination['next'] < pagination['total'] %}<li><a href="{% url 'thread' slug=thread.slug, thread=thread.id, page=pagination['total'] %}" class="tooltip-top" title="{% trans %}Go to last page{% endtrans %}">{% trans %}Last{% endtrans %} <i class="icon-chevron-right"></i></a></li>{% endif -%}
+    <li class="count">
+    {%- trans current_page=pagination['page'], pages=pagination['total'] -%}
+    Page {{ current_page }} of {{ pages }}
+    {%- endtrans -%}
+    </li>
+    {% if extra and user.is_authenticated() %}
+    {% if not is_read %}<li class="unread"><a href="{% url 'thread_new' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first unread{% endtrans %}"><i class="icon-star"></i> {% trans %}First Unread{% endtrans %}</a></li>{% endif %}
+    {% if thread.replies_moderated > 0 and acl.threads.can_approve(forum) %}<li class="moderated"><a href="{% url 'thread_moderated' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first post awaiting review{% endtrans %}"><i class="icon-eye-close"></i> {% trans %}First Unreviewed{% endtrans %}</a></li>{% endif %}
+    {% if thread.replies_reported > 0 and acl.threads.can_mod_posts(thread) %}<li class="reported"><a href="{% url 'thread_reported' slug=thread.slug, thread=thread.id %}" class="tooltip-top" title="{% trans %}Go to first reported post{% endtrans %}"><i class="icon-fire"></i> {% trans %}First Reported{% endtrans %}</a></li>{% endif %}
+    {% endif %}
+  </ul>
+{% endmacro %}
+
+
+{% macro checkpoint_user(checkpoint) -%}
+{%- if checkpoint.user_id -%}
+{{ ('<a href="' ~ 'user'|url(user=checkpoint.user_id, username=checkpoint.user_slug) ~ '">')|safe ~ (checkpoint.user_name) ~ ("</a>")|safe }}
+{%- else -%}
+<strong>{{ checkpoint.user_name }}</strong>
+{%- endif -%}
+{%- endmacro %}
+
+
+{% macro edit_user(post) -%}
+{%- if post.edit_user_id -%}
+{{ ('<a href="' ~ 'user'|url(user=post.edit_user_id, username=post.edit_user_slug) ~ '">')|safe ~ (post.edit_user_name) ~ ("</a>")|safe }}
+{%- else -%}
+<strong>{{ post.edit_user_name }}</strong>
+{%- endif -%}
+{%- endmacro %}
+
+
+{% macro editor_extra() %}
+  <button id="editor-preview" name="preview" type="submit" class="btn btn-success pull-right">{% trans %}Go full{% endtrans %}</button>
+{% endmacro %}