From fc865d3a129a7d5eabf1490a82eefbdea07e3b47 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Tue, 7 Jul 2020 21:43:46 +0300
Subject: [PATCH] Remove direct style manipulations in favor of classes

---
 src/components/chat_message/chat_message.js   | 13 -------------
 src/components/chat_message/chat_message.scss | 12 ++++++++++++
 src/components/chat_message/chat_message.vue  |  2 +-
 src/components/mobile_nav/mobile_nav.js       |  4 ++--
 src/components/mobile_nav/mobile_nav.vue      |  2 +-
 5 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 4d737e42..be4a7c89 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -60,19 +60,6 @@ const ChatMessage = {
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),
-    ellipsisButtonWrapperStyle () {
-      let res = {
-        'opacity': this.hovered || this.menuOpened ? '1' : '0'
-      }
-
-      if (this.isCurrentUser) {
-        res.right = '0.4rem'
-      } else {
-        res.left = '0.4rem'
-      }
-
-      return res
-    },
     popoverMarginStyle () {
       if (this.isCurrentUser) {
         return {}
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 9d7b7936..240beea4 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -117,6 +117,10 @@
         color: var(--chatMessageIncomingText, $fallback--text);
       }
     }
+
+    .chat-message-menu {
+      left: 0.4rem;
+    }
   }
 
   .outgoing {
@@ -139,6 +143,14 @@
     .chat-message-inner {
       align-items: flex-end;
     }
+
+    .chat-message-menu {
+      right: 0.4rem;
+    }
+  }
+
+  .visible {
+    opacity: 1;
   }
 }
 
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 872ddf70..e923d694 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -39,7 +39,7 @@
           >
             <div
               class="chat-message-menu"
-              :style="ellipsisButtonWrapperStyle"
+              :class="{ 'visible': hovered || menuOpened }"
             >
               <Popover
                 trigger="click"
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index b27ca6f4..cc4d7e38 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -31,8 +31,8 @@ const MobileNav = {
     },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },
-    navBarStyle () {
-      return { 'visibility': this.$route.name === 'chat' ? 'hidden' : 'visible' }
+    isChat () {
+      return this.$route.name === 'chat'
     }
   },
   methods: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 05568b90..e0620fce 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -3,7 +3,7 @@
     <nav
       id="nav"
       class="nav-bar container"
-      :style="navBarStyle"
+      :class="{ 'mobile-hidden': isChat }"
     >
       <div
         class="mobile-inner-nav"