New media uploader,sort uploads,drag&drop and copy&paste uploads,fix automatic dark mode

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)

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;
+}

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;
+}

footer.php

@@ -10,6 +10,7 @@
 include dirname(__FILE__).('/widgets/overlay_create_status.php');
 include dirname(__FILE__).('/widgets/overlay_single_reply.php');
 include dirname(__FILE__).('/widgets/overlay_report_status.php');
+include dirname(__FILE__).('/widgets/overlay_caption.php');
 include dirname(__FILE__).('/widgets/overlay_copy_link.php');
 include dirname(__FILE__).('/widgets/overlay_confirm.php');
 include dirname(__FILE__).('/widgets/overlay_prompt.php');

header.php

@@ -19,7 +19,7 @@ if($_COOKIE['darktheme'] == "true") echo '<link rel="stylesheet" href="/assets/c
 else if($_COOKIE['darktheme'] == "unset") {
 ?>
 <script>
-if(window.matchMedia("prefers-color-scheme:dark").matches)
+if(window.matchMedia("(prefers-color-scheme: dark)").matches)
 document.write('<link rel="stylesheet" href="/assets/css/dark.css" media="all">');
 </script>
 <?php }} ?>

version.txt

@@ -1 +1 @@
-2.3.2
+2.3.3

widgets/overlay_caption.php

@@ -0,0 +1,25 @@
+<div class="caption_status invisible">
+<header class="caption_status_header">
+<span><?=_('Add a caption to the media file')?></span>
+</header>
+<form id="caption_status_form" name="caption_status_form" class="status_form">
+<div class="status_main">
+<div class="status_textarea">
+<textarea name="status_textarea" placeholder="<?=_('Please describe what you can see in the picture.')?>"></textarea>
+</div>
+</div>
+<div class="status_bottom">
+<div class="submit_status_label_wrap">
+<span class="character_count">
+</span>
+<label for="caption_status_form_submit" class="submit_status_label">
+<div class="toot_button_label disallow_select">
+<i class="fa fa-check" aria-hidden="true"></i>
+<span><?=_('Save')?></span>
+</div>
+</label>
+</div>
+<input id="caption_status_form_submit" class="submit_status" type="button" class="invisible">
+</div>
+</form>
+</div>

widgets/overlay_report_status.php

@@ -4,9 +4,6 @@
 </header>
 <div class="status_preview"></div>
 <form id="report_status_form" name="report_status_form" class="status_form">
-<div class="status_top">
-<input class="status_spoiler invisible" name="status_spoiler" placeholder="<?=_('Content warning')?>" type="text">
-</div>
 <div class="status_main">
 <div class="status_textarea">
 <textarea name="status_textarea" placeholder="<?=_('Please describe what the problem with the Toot is.')?>"></textarea>