Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

remove v-tooltip completely

Browse source
This commit is contained in:
Shpuld Shpuldson 2020-02-16 09:58:05 +02:00
parent 3c136c241f
commit 7ac1a4a9fe
8 changed files with 65 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -29,7 +29,6 @@
"portal-vue": "^2.1.4",
"sanitize-html": "^1.13.0",
"v-click-outside": "^2.1.1",
"v-tooltip": "^2.0.2",
"vue": "^2.5.13",
"vue-chat-scroll": "^1.2.1",
"vue-i18n": "^7.3.2",

5
src/components/moderation_tools/moderation_tools.js
View file

@ -1,4 +1,5 @@
import DialogModal from '../dialog_modal/dialog_modal.vue'
import Popover from '../popover/popover.vue'
const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
const STRIP_MEDIA = 'mrf_tag:media-strip'
@ -14,7 +15,6 @@ const ModerationTools = {
],
data () {
return {
showDropDown: false,
tags: {
FORCE_NSFW,
STRIP_MEDIA,
@ -28,7 +28,8 @@ const ModerationTools = {
}
},
components: {
DialogModal
DialogModal,
Popover
},
computed: {
tagsSet () {

13
src/components/moderation_tools/moderation_tools.vue
View file

@ -1,13 +1,12 @@
<template>
<div>
<v-popover
<Popover
trigger="click"
class="moderation-tools-popover"
placement="bottom-end"
@show="showDropDown = true"
@hide="showDropDown = false"
placement="bottom"
:offset="{ y: 5 }"
>
<div slot="popover">
<div slot="content">
<div class="dropdown-menu">
<span v-if="user.is_local">
<button
@ -122,12 +121,12 @@
</div>
</div>
<button
slot="trigger"
class="btn btn-default btn-block"
:class="{ pressed: showDropDown }"
>
{{ $t('user_card.admin_menu.moderation') }}
</button>
</v-popover>
</Popover>
<portal to="modal">
<DialogModal
v-if="showDeleteUserDialog"

104
src/components/popover/popover.js
View file

@ -12,7 +12,8 @@ const Popover = {
data () {
return {
hidden: true,
styles: { opacity: 0 }
styles: { opacity: 0 },
oldSize: { width: 0, height: 0 }
}
},
computed: {
@ -21,19 +22,6 @@ const Popover = {
}
},
methods: {
/*
registerPopover (e) {
if (!this.targetId) {
this.$store.dispatch('registerPopover', e.target).then(id => this.targetId = id)
}
},
unregisterPopover () {
if (this.targetId) {
this.$store.dispatch('unregisterPopover', this.targetId)
this.targetId = null
}
},
*/
updateStyles () {
if (this.hidden) return { opacity: 0 }
@ -43,32 +31,40 @@ const Popover = {
// Screen position of the origin point for popover
const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
const content = this.$refs.content
const parentBounds = this.boundTo === 'container' && this.$el.offsetParent.getBoundingClientRect()
// Minor optimization, don't call a slow reflow call if we don't have to
const parentBounds =
(this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
this.$el.offsetParent.getBoundingClientRect()
const padding = this.padding || {}
const bounds = this.boundTo === 'container'
? {
xMin: parentBounds.left + (padding.left || 0),
xMax: parentBounds.right - (padding.right || 0),
yMin: 0 + (padding.top || 50),
yMax: window.innerHeight - (padding.bottom || 5)
} : {
xMin: 0 + (padding.left || 10),
xMax: window.innerWidth - (padding.right || 10),
yMin: 0 + (padding.top || 50),
yMax: window.innerHeight - (padding.bottom || 5)
}
let horizOffset = 0
console.log(bounds, content.offsetWidth)
// If overflowing from left, move it
if ((origin.x - content.offsetWidth * 0.5) < bounds.xMin) {
horizOffset = -(origin.x - content.offsetWidth * 0.5) + bounds.xMin
// What are the screen bounds for the popover? Viewport vs container
// when using viewport, using default padding values to dodge the navbar
const xBounds = this.boundTo.x === 'container' ? {
min: parentBounds.left + (padding.left || 0),
max: parentBounds.right - (padding.right || 0)
} : {
min: 0 + (padding.left || 10),
max: window.innerWidth - (padding.right || 10)
}
// If overflowing from right, move it
if ((origin.x + horizOffset + content.offsetWidth * 0.5) > bounds.xMax) {
horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - bounds.xMax
const yBounds = this.boundTo.y === 'container' ? {
min: parentBounds.top + (padding.top || 0),
max: parentBounds.bottom - (padding.bottom || 0)
} : {
min: 0 + (padding.top || 50),
max: window.innerHeight - (padding.bottom || 5)
}
let horizOffset = 0
// If overflowing from left, move it so that it doesn't
if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
horizOffset = -(origin.x - content.offsetWidth * 0.5) + xBounds.min
}
// If overflowing from right, move it so that it doesn't
if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
}
// Default to whatever user wished with placement prop
@ -77,21 +73,20 @@ const Popover = {
// Handle special cases, first force to displaying on top if there's not space on bottom,
// regardless of what placement value was. Then check if there's not space on top, and
// force to bottom, again regardless of what placement value was.
if (origin.y + content.offsetHeight > bounds.yMax) usingTop = true
if (origin.y - content.offsetHeight < bounds.yMin) usingTop = false
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
const yOffset = (this.offset && this.offset.y) || 0
const vertAlign = usingTop
? {
bottom: `${anchorEl.offsetHeight + yOffset}px`
}
: {
top: `${anchorEl.offsetHeight + yOffset}px`
}
const translateY = usingTop
? -anchorEl.offsetHeight - yOffset - content.offsetHeight
: yOffset + yOffset
const xOffset = (this.offset && this.offset.x) || 0
const translateX = (+anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
this.styles = {
opacity: '100%',
left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
...vertAlign
opacity: 1,
transform: `translate(${Math.floor(translateX)}px, ${Math.floor(translateY)}px)`
}
},
showPopover () {
@ -125,9 +120,16 @@ const Popover = {
this.hidePopover()
}
},
beforeUpdate () {
console.log('beforeupdate')
// if (!this.hidden) this.$nextTick(this.updateStyles)
updated () {
// Monitor changes to content size, update styles only when content sizes have changed,
// that should be the only time we need to move the popover box if we don't care about scroll
// or resize
const content = this.$refs.content
if (!content) return
if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
this.updateStyles()
this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
}
},
created () {
document.addEventListener('click', this.onClickOutside)

4
src/components/status_popover/status_popover.vue
View file

@ -1,8 +1,9 @@
<template>
<Popover
trigger="hover"
bound-to="container"
popover-class="status-popover"
:bound-to="{ x: 'container' }"
:offset="{ x: 0, y: 5 }"
@show="enter"
>
<template slot="trigger">
@ -36,7 +37,6 @@
font-size: 1rem;
min-width: 15em;
max-width: 95%;
margin: 0.5em 0;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);

2
src/components/user_card/user_card.vue
View file

@ -184,7 +184,7 @@
</button>
</div>
<ModerationTools
v-if="loggedIn.role === &quot;admin&quot;"
v-if="loggedIn.role === &quot;admin&quot; || loggedIn"
:user="user"
/>
</div>

8
src/main.js
View file

@ -31,7 +31,6 @@ import VueChatScroll from 'vue-chat-scroll'
import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue'
import VBodyScrollLock from './directives/body_scroll_lock'
import VTooltip from 'v-tooltip'
import afterStoreSetup from './boot/after_store.js'
@ -44,13 +43,6 @@ Vue.use(VueChatScroll)
Vue.use(VueClickOutside)
Vue.use(PortalVue)
Vue.use(VBodyScrollLock)
Vue.use(VTooltip, {
popover: {
defaultTrigger: 'hover click',
defaultContainer: false,
defaultOffset: 5
}
})
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary

19
yarn.lock
View file

@ -5941,11 +5941,6 @@ pngjs@^3.3.0:
version "3.3.3"
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
popper.js@^1.15.0:
version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
portal-vue@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
@ -7823,15 +7818,6 @@ v-click-outside@^2.1.1:
version "2.1.3"
resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7"
v-tooltip@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.2.tgz#8610d9eece2cc44fd66c12ef2f12eec6435cab9b"
integrity sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==
dependencies:
lodash "^4.17.11"
popper.js "^1.15.0"
vue-resize "^0.4.5"
validate-npm-package-license@^3.0.1:
version "3.0.4"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@ -7906,11 +7892,6 @@ vue-loader@^14.0.0:
vue-style-loader "^4.0.1"
vue-template-es2015-compiler "^1.6.0"
vue-resize@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
vue-router@^3.0.1:
version "3.0.2"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"