diff --git a/README.md b/README.md
index 5d3690f..693038f 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ We moved our instances list to our webpage: https://www.halcyon.social/instances
or read our new documentation pages to install it manually: https://www.halcyon.social/documentation.php?page=install
## Blog
+- Release of Version 2.3.3 - New media uploader,sort uploads,drag&drop and copy&paste uploads,fix automatic dark mode
- Release of Version 2.3.2 - Add block and mute management,add management for follow requests,add Catalan translation
- Release of Version 2.3.1 - Fix duplicated thread,allow adding more toots as reply chain,add Dutch translation,more bugfixes,improved translations.
- [Zanata outage and our reactions](https://blog.nikisoft.one/note/656562f160a728ea)
diff --git a/assets/css/dark.css b/assets/css/dark.css
index 6aad959..c4a59d4 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -541,11 +541,11 @@ background-color:#2571D0;
.status_form .status_bottom .submit_status_label:active,#header .header_nav_wrap .header_right_box .toot_button:active {
background-color:#255ED0;
}
-.overlay_status_header,.single_reply_status_header,.report_status_header {
+.overlay_status_header,.single_reply_status_header,.report_status_header,.caption_status_header {
background-color:#1B2836;
color:#eee;
}
-#overlay_status_form.status_form,#single_reply_status_form.status_form,#report_status_form.status_form {
+#overlay_status_form.status_form,#single_reply_status_form.status_form,#report_status_form.status_form,#caption_status_form.status_form {
background-color:#243447;
}
.follow_button:hover,.follow_button:hover i,.halcyon_button:hover,.halcyon_button:hover i,.following_button,.following_button i {
@@ -663,3 +663,22 @@ background-color:#189EFC;
.poll_footer {
color:#66757f;
}
+.media_attachments_preview_area .media_attachments_preview.over {
+border:2px dashed #000;
+}
+.media_attachments_delete_button {
+background-color:#1B2836;
+color:#FF0000;
+}
+.media_attachments_delete_button:hover {
+background-color:#FF0000;
+color:#1B2836;
+}
+.media_attachments_caption_button {
+background-color:#1B2836;
+color:#189EFC;
+}
+.media_attachments_caption_button:hover {
+background-color:#189EFC;
+color:#1B2836;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 024ef2f..f803842 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -29,6 +29,14 @@ font-size: 100%;
.clear {
clear: both;
}
+[draggable] {
+-moz-user-select: none;
+-khtml-user-select: none;
+-webkit-user-select: none;
+user-select: none;
+-khtml-user-drag: element;
+-webkit-user-drag: element;
+}
.red {
color: red!important;
}
@@ -258,7 +266,7 @@ transition: 0.13s;
background-color: rgba(0, 0, 0, 0);
transition: 0.13s;
}
-.status_form .status_textarea .media_attachments_preview img {
+.status_form .status_textarea .media_attachments_preview .media_element {
width: 100%;
height: 100%;
object-fit: cover;
@@ -545,12 +553,12 @@ padding-right: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
-.single_reply_status,.report_status {
+.single_reply_status,.report_status,.caption_status {
width: 600px;
margin: auto;
margin-top: 20%;
}
-.single_reply_status_header,.report_status_header {
+.single_reply_status_header,.report_status_header,.caption_status_header {
width: 600px;
padding: 16px;
box-sizing: border-box;
@@ -573,7 +581,7 @@ display: none!important;
width: 100%;
margin-left: 0;
}
-#single_reply_status_form.status_form,#report_status_form.status_form {
+#single_reply_status_form.status_form,#report_status_form.status_form,#caption_status_form.status_form {
width: 600px;
padding: 16px;
box-sizing: border-box;
@@ -582,7 +590,9 @@ border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin: auto;
}
-#single_reply_status_form.status_form .status_bottom .submit_status_label .toot_button_label i,#report_status_form.status_form .status_bottom .submit_status_label .toot_button_label i {
+#single_reply_status_form.status_form .status_bottom .submit_status_label .toot_button_label i,
+#report_status_form.status_form .status_bottom .submit_status_label .toot_button_label i,
+#caption_status_form.status_form .status_bottom .submit_status_label .toot_button_label i {
font-size: 18px;
margin-right: 8px;
}
@@ -2939,3 +2949,51 @@ padding:5px;
.poll_footer {
color:#66757F;
}
+.media_attachments_preview_area .media_attachments_preview {
+-webkit-transition:-webkit-transform 0.2s ease-out;
+-moz-transition:-moz-transform 0.2s ease-out;
+-o-transition:-o-transform 0.2s ease-out;
+-ms-transition:-ms-transform 0.2s ease-out;
+}
+.media_attachments_preview_area .media_attachments_preview.over {
+border:2px dashed #000;
+height:111px;
+max-width:111px;
+}
+.media_attachments_preview_area .media_attachments_preview.moving {
+opacity:0.25;
+-webkit-transform:scale(0.8);
+-moz-transform:scale(0.8);
+-ms-transform:scale(0.8);
+-o-transform:scale(0.8);
+}
+.media_attachments_delete_button {
+position:absolute;
+top:0;
+right:0;
+border-bottom-left-radius:5px;
+background-color:#FFFFFF;
+color:#FF0000;
+cursor:pointer;
+}
+.media_attachments_delete_button:hover {
+background-color:#FF0000;
+color:#FFFFFF;
+}
+.media_attachments_caption_button {
+position:absolute;
+top:0;
+left:0;
+border-bottom-right-radius:5px;
+background-color:#FFFFFF;
+color:#189EFC;
+cursor:pointer;
+}
+.media_attachments_caption_button:hover {
+background-color:#189EFC;
+color:#FFFFFF;
+}
+.media_attachments_caption_button i,
+.media_attachments_delete_button i{
+margin:5px;
+}
diff --git a/assets/js/halcyon/halcyonUI.js b/assets/js/halcyon/halcyonUI.js
index 495335a..ab250ab 100644
--- a/assets/js/halcyon/halcyonUI.js
+++ b/assets/js/halcyon/halcyonUI.js
@@ -1254,7 +1254,329 @@ $(document).on('click','img[mediaaccess="true"]', function(e) {
e.stopPropagation();
setOverlayMediaWithoutStatus($(this).attr('src'));
});
-})
+});
+function handleMediaUpload(place,f) {
+if($('#'+place+'_status_form .media_attachments_preview_area').children().length == 4) {
+putMessage(__("You can only add four pictures to one post!"));
+}
+else if($('#'+place+'_status_form .status_media_attachment').hasClass("disabled")) {
+putMessage(__("You can not add media files to posts with polls!"));
+}
+else {
+if($('#'+place+'_status_form .media_attachments_preview_area').children().length == 0) {
+$('#'+place+'_status_form .status_textarea .media_attachments_preview_area').removeClass('invisible');
+$('#'+place+'_status_form .status_poll').addClass('disabled');
+}
+let reader= new FileReader();
+reader.readAsDataURL(f);
+reader.onloadend = (function() {
+return function (e) {
+var imgrandom = Math.round(Math.random()*100000);
+image_uploads[place][imgrandom] = new Object();
+image_uploads[place][imgrandom].upload = f;
+if(f.type.indexOf("image") != -1) var mediaelement = ``;
+if(f.type.indexOf("video") != -1) var mediaelement = `