Added the attachment managers to Cosora.

The attachment manager now takes up less vertical space when there aren't any attachments on a post.

Fixed a bug where opening the topic editor would open all of the attachment managers on the page.
Removed the inline style for #upload_files_op.

common/pages.go

@@ -166,6 +166,7 @@ type CustomPagePage struct {
 }
 
 type TopicCEditPost struct {
+	ID     int
 	Source string
 	Ref    string
 }

common/template_init.go

@@ -477,7 +477,7 @@ func compileJSTemplates(wg *sync.WaitGroup, c *tmpl.CTemplateSet, themeName stri
 	pageList := Paginate(20, itemsPerPage, 5)
 	tmpls.AddStd("paginator", "common.Paginator", Paginator{pageList, page, lastPage})
 
-	tmpls.AddStd("topic_c_edit_post", "common.TopicCEditPost", TopicCEditPost{Source: "", Ref: ""})
+	tmpls.AddStd("topic_c_edit_post", "common.TopicCEditPost", TopicCEditPost{ID: 0, Source: "", Ref: ""})
 
 	tmpls.AddStd("topic_c_attach_item", "common.TopicCAttachItem", TopicCAttachItem{ID: 1, ImgSrc: "", Path: "", FullPath: ""})
 

public/global.js

@@ -653,16 +653,21 @@ function mainInit(){
 
 	$(".edit_item").click(function(event){
 		event.preventDefault();
+
 		let blockParent = this.closest('.editable_parent');
 		$(blockParent).find('.hide_on_edit').addClass("edit_opened");
 		$(blockParent).find('.show_on_edit').addClass("edit_opened");
+		$(blockParent).find('.hide_on_block_edit').addClass("edit_opened");
+		$(blockParent).find('.show_on_block_edit').addClass("edit_opened");
 		let srcNode = blockParent.querySelector(".edit_source");
 		let block = blockParent.querySelector('.editable_block');
 		block.classList.add("in_edit");
+
 		let source = "";
 		if(srcNode!=null) source = srcNode.innerText;
 		else source = block.innerHTML;
 		block.innerHTML = Template_topic_c_edit_post({
+			ID: blockParent.getAttribute("id").slice("post-".length),
 			Source: source,
 			Ref: this.closest('a').getAttribute("href")
 		})
@@ -672,6 +677,8 @@ function mainInit(){
 			event.preventDefault();
 			$(blockParent).find('.hide_on_edit').removeClass("edit_opened");
 			$(blockParent).find('.show_on_edit').removeClass("edit_opened");
+			$(blockParent).find('.hide_on_block_edit').removeClass("edit_opened");
+			$(blockParent).find('.show_on_block_edit').removeClass("edit_opened");
 			block.classList.remove("in_edit");
 			let newContent = block.querySelector('textarea').value;
 			block.innerHTML = quickParse(newContent);
@@ -716,8 +723,7 @@ function mainInit(){
 		});
 	});
 
-	$(".edit_fields").click(function(event)
+	$(".edit_fields").click(function(event) {
-	{
 		event.preventDefault();
 		if($(this).find("input").length !== 0) return;
 		//console.log("clicked .edit_fields");

templates/topic_alt.html

@@ -79,9 +79,9 @@
 				{{end}}
 				<div class="attach_item attach_item_buttons">
 					{{if .CurrentUser.Perms.UploadFiles}}
-					<input name="upload_files" id="upload_files_op" multiple type="file" style="display: none;" />
+					<input name="upload_files" id="upload_files_op" multiple type="file" class="auto_hide" />
 					<label for="upload_files_op" class="formbutton add_file_button">{{lang "topic.upload_button_text"}}</label>{{end}}
-					<button class="attach_item_delete">{{lang "topic.delete_button_text"}}</button>
+					<button class="attach_item_delete formbutton">{{lang "topic.delete_button_text"}}</button>
 				</div>
 			</div>
 

templates/topic_alt_posts.html

@@ -10,7 +10,7 @@
 		<div class="edit_source auto_hide">{{.Content}}</div>
 
 		{{if $.CurrentUser.Perms.EditReply}}
-		<div class="show_on_edit show_on_block_edit attach_edit_bay" type="reply" id="{{.ID}}">
+		<div class="show_on_block_edit attach_edit_bay" type="reply" id="{{.ID}}">
 			{{range .Attachments}}
 			<div class="attach_item attach_item_item{{if .Image}} attach_image_holder{{end}}">
 				{{if .Image}}<img src="//{{$.Header.Site.URL}}/attachs/{{.Path}}?sectionID={{.SectionID}}&amp;sectionType=forums" height=24 width=24 />{{end}}
@@ -23,7 +23,7 @@
 				{{if $.CurrentUser.Perms.UploadFiles}}
 				<input name="upload_files" class="upload_files_post auto_hide" id="upload_files_post_{{.ID}}" multiple type="file" />
 				<label for="upload_files_post_{{.ID}}" class="formbutton add_file_button">{{lang "topic.upload_button_text"}}</label>{{end}}
-				<button class="attach_item_delete">{{lang "topic.delete_button_text"}}</button>
+				<button class="attach_item_delete formbutton">{{lang "topic.delete_button_text"}}</button>
 			</div>
 		</div>
 		{{end}}{{end}}

templates/topic_c_edit_post.html

@@ -1,2 +1,5 @@
 <textarea style='width: 99%;' name='edit_item'>{{.Source}}</textarea><br>
-<a href='{{.Ref}}'><button class='submit_edit' type='submit'>{{lang "topic.update_button"}}</button></a>
+<div class="update_buttons">
+	<a href='{{.Ref}}'><button class='submit_edit' type='submit'>{{lang "topic.update_button"}}</button></a>
+	<label for="upload_files_post_{{.ID}}" class="formbutton add_file_button">{{lang "topic.reply_add_file_button"}}</label>
+</div>

themes/cosora/public/main.css

@@ -595,9 +595,9 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
 }
 
 .formbutton {
-	margin-top: 12px;
 	margin-left: auto;
 	margin-right: auto;
+	margin-top: 12px;
 }
 .quick_button_row .formitem {
 	display: flex;
@@ -1087,6 +1087,13 @@ blockquote:first-child {
 red {
 	color: red;
 }
+.update_buttons {
+	margin-top: -8px;
+	margin-bottom: 8px;
+}
+.update_buttons .add_file_button {
+	margin-left: 8px;
+}
 .button_container {
 	margin-top: auto;
 	display: flex;
@@ -1170,8 +1177,55 @@ red {
 }
 
 .attach_edit_bay {
+	margin-top: -4px;
+}
+.top_post .attach_edit_bay {
+	margin-top: 8px;
+}
+.attach_item {
+	display: flex;
+	margin-top: 4px;
+	margin-bottom: 8px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding: 8px;
+	padding-left: 0px;
+	width: 100%;
+}
+.attach_item img {
+	margin-right: 8px;
+	border-radius: 4px;
+}
+.attach_item_item {
+	background-color: #EEEEEE;
+	padding-left: 8px;
+}
+.attach_item_item span {
+	margin-bottom: 4px;
+	margin-right: auto;
+	padding-top: 4px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 350px;
+}
+.attach_image_holder span {
+	width: 300px;
+}
+.attach_item_buttons label, .attach_item_select, .attach_item_delete {
+	margin-left: 0px;
+	margin-right: 8px;
+	margin-top: 0px;
+}
+.post_item:not(.has_attachs) .attach_item_buttons,
+.has_attachs .update_buttons .add_file_button {
 	display: none;
 }
+.update_buttons a button {
+	margin-top: 0px;
+}
+.top_post .attach_item_buttons {
+	margin-top: -4px;
+}
 .zone_view_topic .pageset {
 	margin-bottom: 14px;
 }

themes/nox/public/main.css

@@ -875,13 +875,16 @@ blockquote:first-child {
 red {
 	color: red;
 }
-.user_content.in_edit a {
+.update_buttons {
 	display: flex;
 	background-color: #444444;
 	border-radius: 4px;
 	margin-top: 4px; /*8 without <br>*/
 	padding: 6px;
 }
+.user_content.in_edit a {
+	margin-right: 8px;
+}
 .post_item .button_container {
 	display: flex;
 	margin-top: 8px;
@@ -974,10 +977,6 @@ input[type=checkbox]:checked + label .sel {
 	content: "{{lang "topic.like_count_suffix" . }}";
 }
 
-/*.attach_edit_bay {
-	display: flex;
-	flex-direction: row;
-}*/
 .attach_item {
 	display: flex;
 	background-color: #444444;
@@ -994,9 +993,6 @@ input[type=checkbox]:checked + label .sel {
 	margin-right: 8px;
 	border-radius: 4px;
 }
-.attach_item_item span {
-	margin-bottom: 4px;
-}
 .attach_edit_bay button {
 	margin-top: 8px;
 	margin-left: 8px;
@@ -1004,10 +1000,11 @@ input[type=checkbox]:checked + label .sel {
 
 /* New */
 .attach_item {
-    padding: 8px;
+	padding: 8px;
-    width: 100%;
+	width: 100%;
 }
 .attach_item_item span {
+	margin-bottom: 4px;
 	margin-right: auto;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -1019,7 +1016,8 @@ input[type=checkbox]:checked + label .sel {
 .attach_item button {
 	margin-top: -1px;
 }
-.post_item:not(.has_attachs) .attach_item_delete {
+.post_item:not(.has_attachs) .attach_item_buttons,
+.has_attachs .update_buttons .add_file_button {
 	display: none;
 }
 

themes/shadow/public/main.css

@@ -283,6 +283,9 @@ h1, h2, h3, h4, h5 {
 red {
 	color: red;
 }
+.update_buttons .add_file_button {
+	display: none;
+}
 
 .controls {
 	width: 100%;

themes/tempra_simple/public/main.css

@@ -705,6 +705,9 @@ red {
 .staff_post {
 	background-color: #ffeaff;
 }
+.update_buttons .add_file_button {
+	display: none;
+}
 
 .mod_button {
 	margin-right: 4px;