Remove direct style manipulations in favor of classes

This commit is contained in:
eugenijm 2020-07-07 21:43:46 +03:00
parent ed7310c04b
commit fc865d3a12
5 changed files with 16 additions and 17 deletions

View file

@ -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 {}

View file

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

View file

@ -39,7 +39,7 @@
>
<div
class="chat-message-menu"
:style="ellipsisButtonWrapperStyle"
:class="{ 'visible': hovered || menuOpened }"
>
<Popover
trigger="click"

View file

@ -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: {

View file

@ -3,7 +3,7 @@
<nav
id="nav"
class="nav-bar container"
:style="navBarStyle"
:class="{ 'mobile-hidden': isChat }"
>
<div
class="mobile-inner-nav"