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"