Fix attachments list in edit comment (#13036) (#13097)

Backport #13036

#11141 broke the appearance of dropzone attachments when editting
comments causing poorly updating lists.

This PR fixes this.

Fix #12583

Signed-off-by: Andrew Thornton art27@cantab.net

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

templates/repo/issue/view_content.tmpl

@@ -56,10 +56,12 @@
 						<div id="comment-{{.Issue.ID}}" class="raw-content hide">{{.Issue.Content}}</div>
 						<div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
 					{{if .Issue.Attachments}}
+						<div class="dropzone-attachments">
 							<div class="ui clearing divider"></div>
 							<div class="ui middle aligned padded grid">
 								{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
 							</div>
+						</div>
 					{{end}}
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}

templates/repo/issue/view_content/attachments.tmpl

@@ -2,7 +2,7 @@
 <div class="twelve wide column" style="padding: 6px;">
 	<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
 	{{if FilenameIsImage .Name}}
-		<span class="ui image">{{svg "octicon-file-media" 16}}</span>
+		<span class="ui image">{{svg "octicon-file" 16}}</span>
 	{{else}}
 		<span class="ui image">{{svg "octicon-desktop-download" 16}}</span>
 	{{end}}

templates/repo/issue/view_content/comments.tmpl

@@ -53,10 +53,12 @@
 					<div id="comment-{{.ID}}" class="raw-content hide">{{.Content}}</div>
 					<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
 				{{if .Attachments}}
+					<div class="dropzone-attachments">
 						<div class="ui clearing divider"></div>
 						<div class="ui middle aligned padded grid">
 							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
 						</div>
+					</div>
 				{{end}}
 				</div>
 				{{$reactions := .Reactions.GroupByType}}

web_src/js/index.js

@@ -980,7 +980,9 @@ async function initRepository() {
         $editContentZone.find('.cancel.button').on('click', () => {
           $renderContent.show();
           $editContentZone.hide();
+          if (dz) {
             dz.emit('reload');
+          }
         });
         $editContentZone.find('.save.button').on('click', () => {
           $renderContent.show();
@@ -994,7 +996,7 @@ async function initRepository() {
             context: $editContentZone.data('context'),
             files: $attachments
           }, (data) => {
-            if (data.length === 0) {
+            if (data.length === 0 || data.content.length === 0) {
               $renderContent.html($('#no-content').html());
             } else {
               $renderContent.html(data.content);
@@ -1002,21 +1004,27 @@ async function initRepository() {
                 highlight(this);
               });
             }
-            const $content = $segment.parent();
-            if (!$content.find('.ui.small.images').length) {
+            const $content = $segment;
+            if (!$content.find('.dropzone-attachments').length) {
               if (data.attachments !== '') {
-                $content.append(
-                  '<div class="ui bottom attached segment"><div class="ui small images"></div></div>'
-                );
-                $content.find('.ui.small.images').html(data.attachments);
+                $content.append(`
+                  <div class="dropzone-attachments">
+                    <div class="ui clearing divider"></div>
+                    <div class="ui middle aligned padded grid">
+                    </div>
+                  </div>
+                `);
+                $content.find('.dropzone-attachments .grid').html(data.attachments);
               }
             } else if (data.attachments === '') {
-              $content.find('.ui.small.images').parent().remove();
+              $content.find('.dropzone-attachments').remove();
             } else {
-              $content.find('.ui.small.images').html(data.attachments);
+              $content.find('.dropzone-attachments .grid').html(data.attachments);
             }
+            if (dz) {
               dz.emit('submit');
               dz.emit('reload');
+            }
           });
         });
       } else {