Merge branch 'vue3-again' into 'develop'

Migration to Vue 3 (again)

See merge request pleroma/pleroma-fe!1385

2 files changed, 29 insertions, 28 deletions

diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index d27fb3b8..4866ac57 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -29,7 +29,7 @@ const MobilePostStatusButton = {
     }
     window.addEventListener('resize', this.handleOSK)
   },
-  destroyed () {
+  unmounted () {
     if (this.autohideFloatingPostButton) {
       this.deactivateFloatingPostButtonAutohide()
     }
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 37becf4c..9fcdf6f8 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -1,13 +1,12 @@
 <template>
-  <div v-if="isLoggedIn">
-    <button
-      class="button-default new-status-button"
-      :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
-      @click="openPostForm"
-    >
-      <FAIcon icon="pen" />
-    </button>
-  </div>
+  <button
+    v-if="isLoggedIn"
+    class="MobilePostButton button-default new-status-button"
+    :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+    @click="openPostForm"
+  >
+    <FAIcon icon="pen" />
+  </button>
 </template>
 
 <script src="./mobile_post_status_button.js"></script>
@@ -15,25 +14,27 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.new-status-button {
-  width: 5em;
-  height: 5em;
-  border-radius: 100%;
-  position: fixed;
-  bottom: 1.5em;
-  right: 1.5em;
-  // TODO: this needs its own color, it has to stand out enough and link color
-  // is not very optimal for this particular use.
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
-  z-index: 10;
+.MobilePostButton {
+  &.button-default {
+    width: 5em;
+    height: 5em;
+    border-radius: 100%;
+    position: fixed;
+    bottom: 1.5em;
+    right: 1.5em;
+    // TODO: this needs its own color, it has to stand out enough and link color
+    // is not very optimal for this particular use.
+    background-color: $fallback--fg;
+    background-color: var(--btn, $fallback--fg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+    z-index: 10;
 
-  transition: 0.35s transform;
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    transition: 0.35s transform;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  }
 
   &.hidden {
     transform: translateY(150%);