From cd9d732afa6d33f5db70161992a20e56ffd1d8cc Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 11:01:38 +0300
Subject: add better visual indication for dropping files, make dropzone bigger

---
 .../post_status_form/post_status_form.js           | 19 +++++++++++--
 .../post_status_form/post_status_form.vue          | 32 ++++++++++++++++++++--
 2 files changed, 46 insertions(+), 5 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6164caa0..3de6f70a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -82,7 +82,9 @@ const PostStatusForm = {
         contentType
       },
       caret: 0,
-      pollFormVisible: false
+      pollFormVisible: false,
+      showDropIcon: false,
+      dropStopTimeout: null
     }
   },
   computed: {
@@ -248,13 +250,26 @@ const PostStatusForm = {
       }
     },
     fileDrop (e) {
-      if (e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = false
       }
     },
+    fileDragStop (e) {
+      // The false-setting is done with delay because just using leave-events
+      // directly caused unwanted flickering, this is not perfect either but
+      // much less noticable.
+      clearTimeout(this.dropStopTimeout)
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+    },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = true
+      }
     },
     onEmojiInputInput (e) {
       this.$nextTick(() => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5629ceac..8e71d7b4 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,7 +6,14 @@
     <form
       autocomplete="off"
       @submit.prevent="postStatus(newStatus)"
+      @dragover.prevent.capture="fileDrag"
     >
+      <div
+        v-show="showDropIcon"
+        class="drop-indicator icon-upload"
+        @dragleave.capture="fileDragStop"
+        @drop.stop="fileDrop"
+      />
       <div class="form-group">
         <i18n
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@@ -97,8 +104,6 @@
             class="form-post-body"
             @keydown.meta.enter="postStatus(newStatus)"
             @keyup.ctrl.enter="postStatus(newStatus)"
-            @drop="fileDrop"
-            @dragover.prevent="fileDrag"
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
@@ -447,7 +452,8 @@
   form {
     display: flex;
     flex-direction: column;
-    padding: 0.6em;
+    margin: 0.6em;
+    position: relative;
   }
 
   .form-group {
@@ -505,5 +511,25 @@
     cursor: pointer;
     z-index: 4;
   }
+
+  .drop-indicator {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    opacity: 0.6;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border: 2px dashed $fallback--text;
+    border: 2px dashed var(--text, $fallback--text);
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 3cfdfec72dfd0fd390152c2bf2e80ee11f8ae525 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Jun 2020 11:18:07 +0300
Subject: attempt to fix that one bug with submitting on copy-pasting

---
 src/components/post_status_form/post_status_form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5629ceac..6477594c 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -96,7 +96,7 @@
             :disabled="posting"
             class="form-post-body"
             @keydown.meta.enter="postStatus(newStatus)"
-            @keyup.ctrl.enter="postStatus(newStatus)"
+            @keydown.ctrl.enter="postStatus(newStatus)"
             @drop="fileDrop"
             @dragover.prevent="fileDrag"
             @input="resize"
-- 
cgit v1.2.3-70-g09d2


From d3187720c5cb2599b2dc2d83898e3f6d544cb6ae Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 11:49:04 +0300
Subject: remove useless captures

---
 src/components/post_status_form/post_status_form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 8e71d7b4..873328f5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,12 +6,12 @@
     <form
       autocomplete="off"
       @submit.prevent="postStatus(newStatus)"
-      @dragover.prevent.capture="fileDrag"
+      @dragover.prevent="fileDrag"
     >
       <div
         v-show="showDropIcon"
         class="drop-indicator icon-upload"
-        @dragleave.capture="fileDragStop"
+        @dragleave="fileDragStop"
         @drop.stop="fileDrop"
       />
       <div class="form-group">
-- 
cgit v1.2.3-70-g09d2


From ea2b2a35bb5c419970b796ec010085302d8c9bd1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 12:41:02 +0300
Subject: add fade-in fade-out

---
 src/components/post_status_form/post_status_form.js  |  9 +++++----
 src/components/post_status_form/post_status_form.vue | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 3de6f70a..9027566f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -83,7 +83,7 @@ const PostStatusForm = {
       },
       caret: 0,
       pollFormVisible: false,
-      showDropIcon: false,
+      showDropIcon: 'hide',
       dropStopTimeout: null
     }
   },
@@ -254,7 +254,7 @@ const PostStatusForm = {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = false
+        this.showDropIcon = 'hide'
       }
     },
     fileDragStop (e) {
@@ -262,13 +262,14 @@ const PostStatusForm = {
       // directly caused unwanted flickering, this is not perfect either but
       // much less noticable.
       clearTimeout(this.dropStopTimeout)
-      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+      this.showDropIcon = 'fade'
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
     },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
       if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = true
+        this.showDropIcon = 'show'
       }
     },
     onEmojiInputInput (e) {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e23e9e48..c4d7f7e2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -9,7 +9,8 @@
       @dragover.prevent="fileDrag"
     >
       <div
-        v-show="showDropIcon"
+        v-show="showDropIcon !== 'hide'"
+        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
         class="drop-indicator icon-upload"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
@@ -512,6 +513,16 @@
     z-index: 4;
   }
 
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to   { opacity: 0.6; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 0.6; }
+    to   { opacity: 0; }
+  }
+
   .drop-indicator {
     position: absolute;
     z-index: 1;
@@ -521,9 +532,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: 0.6;
     color: $fallback--text;
     color: var(--text, $fallback--text);
-    opacity: 0.6;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-radius: $fallback--tooltipRadius;
-- 
cgit v1.2.3-70-g09d2


From fc6ca20a42ff699ac08e22af4d5f5659d2726115 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 16 Jun 2020 17:34:22 +0300
Subject: disable subject field when posting

---
 CHANGELOG.md                                         | 1 +
 src/components/post_status_form/post_status_form.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'src/components/post_status_form')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 623c642f..7e3eaf17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Newlines in the muted words settings work again
 - Clicking on non-latin hashtags won't open a new window
 - Uploading and drag-dropping multiple files works correctly now.
+- Subject field now appears disabled when posting
 
 ## [2.0.3] - 2020-05-02
 ### Fixed
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index c4d7f7e2..e3d8d087 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -81,6 +81,7 @@
             v-model="newStatus.spoilerText"
             type="text"
             :placeholder="$t('post_status.content_warning')"
+            :disabled="posting"
             class="form-post-subject"
           >
         </EmojiInput>
-- 
cgit v1.2.3-70-g09d2