fix wrong button style, add new option for popover to better deal with different layouts

This commit is contained in:
Shpuld Shpuldson 2020-11-25 18:33:08 +02:00
parent e771fd8f13
commit 2137d6395a
5 changed files with 28 additions and 16 deletions

View File

@ -4,6 +4,7 @@
trigger="click"
placement="bottom"
:bound-to="{ x: 'container' }"
remove-padding
>
<div
slot="content"

View File

@ -2,8 +2,9 @@
<Popover
trigger="click"
placement="top"
:offset="{ y: -5 }"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
>
<div
slot="content"

View File

@ -12,13 +12,13 @@
<div class="dropdown-menu">
<span v-if="user.is_local">
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleRight(&quot;admin&quot;)"
>
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleRight(&quot;moderator&quot;)"
>
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -29,13 +29,13 @@
/>
</span>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleActivationStatus()"
>
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="deleteUserDialog(true)"
>
{{ $t('user_card.admin_menu.delete_account') }}
@ -47,7 +47,7 @@
/>
<span v-if="hasTagPolicy">
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_NSFW)"
>
{{ $t('user_card.admin_menu.force_nsfw') }}
@ -57,7 +57,7 @@
/>
</button>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.STRIP_MEDIA)"
>
{{ $t('user_card.admin_menu.strip_media') }}
@ -67,7 +67,7 @@
/>
</button>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_UNLISTED)"
>
{{ $t('user_card.admin_menu.force_unlisted') }}
@ -77,7 +77,7 @@
/>
</button>
<button
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.SANDBOX)"
>
{{ $t('user_card.admin_menu.sandbox') }}
@ -88,7 +88,7 @@
</button>
<button
v-if="user.is_local"
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
>
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
@ -99,7 +99,7 @@
</button>
<button
v-if="user.is_local"
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
>
{{ $t('user_card.admin_menu.disable_any_subscription') }}
@ -110,7 +110,7 @@
</button>
<button
v-if="user.is_local"
class="dropdown-item"
class="button-default dropdown-item"
@click="toggleTag(tags.QUARANTINE)"
>
{{ $t('user_card.admin_menu.quarantine') }}

View File

@ -21,7 +21,10 @@ const Popover = {
// Replaces the classes you may want for the popover container.
// Use 'popover-default' in addition to get the default popover
// styles with your custom class.
popoverClass: String
popoverClass: String,
// If true, subtract padding when calculating position for the popover,
// use it when popover offset looks to be different on top vs bottom.
removePadding: Boolean
},
data () {
return {
@ -96,10 +99,16 @@ const Popover = {
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
let vPadding = 0
if (this.removePadding && usingTop) {
const anchorStyle = getComputedStyle(anchorEl)
vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
}
const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
: -yOffset
? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
: yOffset
const xOffset = (this.offset && this.offset.x) || 0
const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset

View File

@ -2,8 +2,9 @@
<Popover
trigger="click"
placement="top"
:offset="{ y: -5 }"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
>
<div
slot="content"