pagure

Clone

#3085 Add preview feature while editing comment.
Merged 6 years ago by pingou. Opened 6 years ago by pingou.
preview_edit  into  master

file modified
+47 -3 
@@ -9,16 +9,23 @@ 
 

      onsubmit="return try_async_comment(this, null)" >
 

  

  

-     <div class="tabs ui-widget ui-widget-content ui-corner-all"
 

-         id="comment_block">
 

+     <fieldset class="form-group">
 

+       <label for="comment"><strong>Edit comment</strong></label>
 

+       <small class="text-muted pull-xs-right">
 

+         <span class="btn btn-sm btn-secondary inactive"
 

+           aria-pressed="false" id="edit_previewinmarkdown">Preview
 

+         </span>
 

+       </small>
 

  

        <div id="edit">
 

          <textarea class="form-control" id="update_comment" name="update_comment" style="width:100%;">
 

            {{- comment.comment -}}
 

          </textarea>
 

        </div>
 

+       <div id="preview">
 

+       </div>
 

+     </fieldset>
 

  

-     <div>
 

  

    {{ form.csrf_token }}
 

      <div>
 
@@ -32,6 +39,43 @@ 
 

  

  </section>
 

  <script>
 

+   $("#preview").hide();
 

+     $("#edit_previewinmarkdown").click(
 

+       function(event, ui) {
 

+         if ($("#edit_previewinmarkdown").hasClass("inactive")){
 

+           var _text = $("#update_comment").val();
 

+           var _url = "{{ url_for('ui_ns.markdown_preview',
 

+                         repo=repo.name,
 

+                         user=repo.user.user if repo.is_fork,
 

+                         namespace=repo.namespace) | safe}}";
 

+           $.ajax({
 

+             url: _url ,
 

+             type: 'POST',
 

+             data: {
 

+               content: _text,
 

+               csrf_token: "{{ form.csrf_token.current_token }}",
 

+             },
 

+             dataType: 'html',
 

+             success: function(res) {
 

+                 var preview = emojione.toImage(res);
 

+                 $("#preview").html(preview);
 

+                 $("#edit_previewinmarkdown").toggleClass("inactive active");
 

+                 $("#update_comment").hide();
 

+                 $("#preview" ).show();
 

+             },
 

+             error: function() {
 

+                 alert('Unable to generate preview!');
 

+             }
 

+           });
 

+           return false;
 

+         } else if ($("#edit_previewinmarkdown").hasClass("active")){
 

+             $("#edit_previewinmarkdown").toggleClass("active inactive");
 

+             $("#update_comment").show();
 

+             $("#preview").hide();
 

+         }
 

+     }
 

+   );
 

+ 

    $.get("{{ url_for('api_ns.api_users') }}", {
 

      pattern: '*'
 

    }).done(function(resp) {

file modified
+77 -4 
@@ -8,7 +8,9 @@ 
 

  {% block header %}
 

  <link href="{{ url_for('static', filename='vendor/emojione/emojione.sprites.css') }}"
 

    rel="stylesheet" />
 

-   <link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
 

+ <link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
 

+   rel="stylesheet" />
 

+ <link href="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.css') }}"

I recommend naming these vendored libs with their versions. That way if you ever need to update them, the user's browser cache won't keep them on the old (potentially broken) version.

I actually don't follow this suggestion on Bodhi, but it's been on my TODO list.

The non-versioned files are symlinks to the versioned ones so that updating the version is as easy as changing that symlink and doesn't need to go through all the templates to fix the urls.

jquery.atwho-1.5.1.css
jquery.atwho-1.5.1.js
jquery.atwho-1.5.1.min.css
jquery.atwho-1.5.1.min.js
jquery.atwho.css -> jquery.atwho-1.5.1.css
jquery.atwho.js -> jquery.atwho-1.5.1.js
jquery.atwho.min.css -> jquery.atwho-1.5.1.min.css
jquery.atwho.min.js -> jquery.atwho-1.5.1.min.js


    rel="stylesheet" />
 

  {% endblock %}
 

  
@@ -31,9 +33,24 @@ 
 

              {{ render_bootstrap_field(
 

                  form.title,
 

                  field_description="the new title of your pull-request") }}
 

-             {{ render_bootstrap_field(
 

-                 form.initial_comment,
 

-                 field_description="description of your pull-request") }}
 

+ 

+             <fieldset class="form-group">
 

+               <label for="comment"><strong>Initial comment</strong></label>
 

+               <small class="text-muted pull-xs-right">
 

+                 <span class="btn btn-sm btn-secondary inactive"
 

+                   aria-pressed="false" id="edit_previewinmarkdown">Preview
 

+                 </span>
 

+               </small>
 

+ 

+               <div id="edit">
 

+                 <textarea class="form-control" id="initial_comment" name="initial_comment" style="width:100%;">
 

+                   {{- form.initial_comment.data -}}
 

+                 </textarea>
 

+               </div>
 

+               <div id="preview">
 

+               </div>
 

+             </fieldset>
 

+ 

            </table>
 

            <p class="buttons indent">
 

              <input type="submit" class="btn btn-primary" value="Edit">
 
@@ -54,3 +71,59 @@ 
 

  </div>
 

  

  {% endblock %}
 

+ 

+ {% block jscripts %}
 

+ {{ super() }}
 

+ <script type="text/javascript"
 

+   src="{{ url_for('static', filename='vendor/emojione/emojione.min.js') }}">
 

+ </script>
 

+ <script type="text/javascript"
 

+   src="{{ url_for('static', filename='emoji/emojicomplete.js') }}">
 

+ </script>
 

+ <script type="text/javascript"
 

+   src="{{ url_for('static', filename='vendor/jquery.caret/jquery.caret.min.js') }}">
 

+ </script>
 

+ <script type="text/javascript"
 

+   src="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.min.js') }}">
 

+ </script>
 

+ 

+ <script>

it would be nice if we could avoid duplicating this code. But I guess that true for a lot of the JS we have.

I'm going to merge as is as I'd like to have this in the upcoming beta release, but let's see if we can refactor this for the final release :)

For tracking purposes: https://pagure.io/pagure/issue/3131

 
+   $("#preview").hide();
 

+   $("#edit_previewinmarkdown").click(
 

+     function(event, ui) {
 

+       if ($("#edit_previewinmarkdown").hasClass("inactive")){
 

+         var _text = $("#initial_comment").val();
 

+         var _url = "{{ url_for('ui_ns.markdown_preview',
 

+                       repo=repo.name,
 

+                       user=repo.user.user if repo.is_fork,
 

+                       namespace=repo.namespace) | safe}}";
 

+         $.ajax({
 

+           url: _url ,
 

+           type: 'POST',
 

+           data: {
 

+             content: _text,
 

+             csrf_token: "{{ form.csrf_token.current_token }}",
 

+           },
 

+           dataType: 'html',
 

+           success: function(res) {
 

+               var preview = emojione.toImage(res);
 

+               $("#preview").html(preview);
 

+               $("#edit_previewinmarkdown").toggleClass("inactive active");
 

+               $("#initial_comment").hide();
 

+               $("#preview" ).show();
 

+           },
 

+           error: function() {
 

+               alert('Unable to generate preview!');
 

+           }
 

+         });
 

+         return false;
 

+       } else if ($("#edit_previewinmarkdown").hasClass("active")){
 

+           $("#edit_previewinmarkdown").toggleClass("active inactive");
 

+           $("#initial_comment").show();
 

+           $("#preview").hide();
 

+       }
 

+     }
 

+   );
 

+ </script>
 

+ 

+ {% endblock %}

rebased onto 32819362714b759fa8da1692e50bc0ee08f1d3e6
6 years ago

This is basically a rebase of https://pagure.io/pagure/pull-request/1734 with a tiny polishing (use of toggleClass)

1 new commit added

  • Add a preview button when editing the initial comment of a PR
6 years ago

rebased onto f04c30522cc6068fc913ef97c9d4593d9e12c91a
6 years ago

I recommend naming these vendored libs with their versions. That way if you ever need to update them, the user's browser cache won't keep them on the old (potentially broken) version.

I actually don't follow this suggestion on Bodhi, but it's been on my TODO list.

The non-versioned files are symlinks to the versioned ones so that updating the version is as easy as changing that symlink and doesn't need to go through all the templates to fix the urls.

 
jquery.atwho-1.5.1.css
jquery.atwho-1.5.1.js
jquery.atwho-1.5.1.min.css
jquery.atwho-1.5.1.min.js
jquery.atwho.css -> jquery.atwho-1.5.1.css
jquery.atwho.js -> jquery.atwho-1.5.1.js
jquery.atwho.min.css -> jquery.atwho-1.5.1.min.css
jquery.atwho.min.js -> jquery.atwho-1.5.1.min.js

rebased onto 63de36149f8451c1ceb86e51360d0a066f593084
6 years ago

it would be nice if we could avoid duplicating this code. But I guess that true for a lot of the JS we have.

One comment but not blocking, :thumbsup:

I'm going to merge as is as I'd like to have this in the upcoming beta release, but let's see if we can refactor this for the final release :)

rebased onto c2137d2
6 years ago

For tracking purposes: https://pagure.io/pagure/issue/3131

Pull-Request has been merged by pingou
6 years ago
Metadata
None
No Tags
Changes Summary 2
+47 -3
file changed
pagure/templates/comment_update.html
+77 -4
file changed
pagure/templates/pull_request_title.html
Powered by Pagure 5.14.1
Documentation • File an Issue • About • SSH Hostkey/Fingerprint
© Red Hat, Inc. and others.