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

Merge branch '609' into 'develop'

Browse source 
Fix popper issues using another popper library

Closes #612 and #609

See merge request pleroma/pleroma-fe!881
This commit is contained in:
HJ 2019-07-16 20:49:49 +00:00
commit cc2e35f499
10 changed files with 141 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -25,14 +25,13 @@
"localforage": "^1.5.0", "localforage": "^1.5.0",
"object-path": "^0.11.3", "object-path": "^0.11.3",
"phoenix": "^1.3.0", "phoenix": "^1.3.0",
"popper.js": "^1.14.7",
"portal-vue": "^2.1.4", "portal-vue": "^2.1.4",
"sanitize-html": "^1.13.0", "sanitize-html": "^1.13.0",
"v-click-outside": "^2.1.1", "v-click-outside": "^2.1.1",
"v-tooltip": "^2.0.2",
"vue": "^2.5.13", "vue": "^2.5.13",
"vue-chat-scroll": "^1.2.1", "vue-chat-scroll": "^1.2.1",
"vue-i18n": "^7.3.2", "vue-i18n": "^7.3.2",
"vue-popperjs": "^2.0.3",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.3.4", "vue-template-compiler": "^2.3.4",
"vuelidate": "^0.7.4", "vuelidate": "^0.7.4",
@ -81,8 +80,8 @@
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"karma": "^3.0.0", "karma": "^3.0.0",
"karma-coverage": "^1.1.1", "karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-firefox-launcher": "^1.1.0", "karma-firefox-launcher": "^1.1.0",
"karma-mocha": "^1.2.0",
"karma-sinon-chai": "^2.0.2", "karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26", "karma-spec-reporter": "0.0.26",

24
src/components/extra_buttons/extra_buttons.js
View file

@ -1,45 +1,21 @@
import Popper from 'vue-popperjs/src/component/popper.js.vue'
const ExtraButtons = { const ExtraButtons = {
props: [ 'status' ], props: [ 'status' ],
components: {
Popper
},
data () {
return {
showDropDown: false,
showPopper: true
}
},
methods: { methods: {
deleteStatus () { deleteStatus () {
this.refreshPopper()
const confirmed = window.confirm(this.$t('status.delete_confirm')) const confirmed = window.confirm(this.$t('status.delete_confirm'))
if (confirmed) { if (confirmed) {
this.$store.dispatch('deleteStatus', { id: this.status.id }) this.$store.dispatch('deleteStatus', { id: this.status.id })
} }
}, },
toggleMenu () {
this.showDropDown = !this.showDropDown
},
pinStatus () { pinStatus () {
this.refreshPopper()
this.$store.dispatch('pinStatus', this.status.id) this.$store.dispatch('pinStatus', this.status.id)
.then(() => this.$emit('onSuccess')) .then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error)) .catch(err => this.$emit('onError', err.error.error))
}, },
unpinStatus () { unpinStatus () {
this.refreshPopper()
this.$store.dispatch('unpinStatus', this.status.id) this.$store.dispatch('unpinStatus', this.status.id)
.then(() => this.$emit('onSuccess')) .then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error)) .catch(err => this.$emit('onError', err.error.error))
},
refreshPopper () {
this.showPopper = false
this.showDropDown = false
setTimeout(() => {
this.showPopper = true
})
} }
}, },
computed: { computed: {

38
src/components/extra_buttons/extra_buttons.vue
View file

@ -1,21 +1,17 @@
<template> <template>
<Popper <v-popover
v-if="enabled && showPopper" v-if="enabled"
trigger="click" trigger="click"
append-to-body placement="top"
:options="{ class="extra-button-popover"
placement: 'top', :offset="5"
modifiers: { :container="false"
arrow: { enabled: true },
offset: { offset: '0, 5px' },
}
}"
@hide="showDropDown = false"
> >
<div class="popper-wrapper"> <div slot="popover">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
v-close-popover
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="pinStatus" @click.prevent="pinStatus"
> >
@ -23,6 +19,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
v-close-popover
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
> >
@ -30,6 +27,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
v-close-popover
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
> >
@ -37,17 +35,10 @@
</button> </button>
</div> </div>
</div> </div>
<div <div class="button-icon">
slot="reference" <i class="icon-ellipsis" />
class="button-icon"
@click="toggleMenu"
>
<i
class="icon-ellipsis"
:class="{'icon-clicked': showDropDown}"
/>
</div> </div>
</Popper> </v-popover>
</template> </template>
<script src="./extra_buttons.js" ></script> <script src="./extra_buttons.js" ></script>
@ -59,7 +50,8 @@
.icon-ellipsis { .icon-ellipsis {
cursor: pointer; cursor: pointer;
&:hover, &.icon-clicked { &:hover,
.extra-button-popover.open & {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }

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

@ -1,5 +1,4 @@
import DialogModal from '../dialog_modal/dialog_modal.vue' import DialogModal from '../dialog_modal/dialog_modal.vue'
import Popper from 'vue-popperjs/src/component/popper.js.vue'
const FORCE_NSFW = 'mrf_tag:media-force-nsfw' const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
const STRIP_MEDIA = 'mrf_tag:media-strip' const STRIP_MEDIA = 'mrf_tag:media-strip'
@ -29,8 +28,7 @@ const ModerationTools = {
} }
}, },
components: { components: {
DialogModal, DialogModal
Popper
}, },
computed: { computed: {
tagsSet () { tagsSet () {
@ -41,9 +39,6 @@ const ModerationTools = {
} }
}, },
methods: { methods: {
toggleMenu () {
this.showDropDown = !this.showDropDown
},
hasTag (tagName) { hasTag (tagName) {
return this.tagsSet.has(tagName) return this.tagsSet.has(tagName)
}, },

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

@ -1,18 +1,15 @@
<template> <template>
<div> <div>
<Popper <v-popover
trigger="click" trigger="click"
append-to-body class="moderation-tools-popover"
:options="{ :container="false"
placement: 'bottom-end', placement="bottom-end"
modifiers: { :offset="5"
arrow: { enabled: true }, @show="showDropDown = true"
offset: { offset: '0, 5px' },
}
}"
@hide="showDropDown = false" @hide="showDropDown = false"
> >
<div class="popper-wrapper"> <div slot="popover">
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button
@ -127,14 +124,12 @@
</div> </div>
</div> </div>
<button <button
slot="reference"
class="btn btn-default btn-block" class="btn btn-default btn-block"
:class="{ pressed: showDropDown }" :class="{ pressed: showDropDown }"
@click="toggleMenu"
> >
{{ $t('user_card.admin_menu.moderation') }} {{ $t('user_card.admin_menu.moderation') }}
</button> </button>
</Popper> </v-popover>
<portal to="modal"> <portal to="modal">
<DialogModal <DialogModal
v-if="showDeleteUserDialog" v-if="showDeleteUserDialog"
@ -188,4 +183,11 @@
} }
} }
.moderation-tools-popover {
height: 100%;
.trigger {
display: flex !important;
height: 100%;
}
}
</style> </style>

147
src/components/popper/popper.scss
View file

@ -1,71 +1,99 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.popper-wrapper { .tooltip.popover {
z-index: 8; z-index: 8;
}
.popper-wrapper .popper__arrow { .popover-inner {
width: 0; box-shadow: 1px 1px 4px rgba(0,0,0,.6);
height: 0; box-shadow: var(--panelShadow);
border-style: solid; border-radius: $fallback--btnRadius;
position: absolute; border-radius: var(--btnRadius, $fallback--btnRadius);
margin: 5px; background-color: $fallback--bg;
} background-color: var(--bg, $fallback--bg);
}
.popper-wrapper[x-placement^="top"] { .popover-arrow {
margin-bottom: 5px; width: 0;
} height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: $fallback--bg;
border-color: var(--bg, $fallback--bg);
z-index: 1;
}
.popper-wrapper[x-placement^="top"] .popper__arrow { &[x-placement^="top"] {
border-width: 5px 5px 0 5px; margin-bottom: 5px;
border-color: $fallback--bg transparent transparent transparent;
border-color: var(--bg, $fallback--bg) transparent transparent transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper-wrapper[x-placement^="bottom"] { .popover-arrow {
margin-top: 5px; border-width: 5px 5px 0 5px;
} border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
.popper-wrapper[x-placement^="bottom"] .popper__arrow { &[x-placement^="bottom"] {
border-width: 0 5px 5px 5px; margin-top: 5px;
border-color: transparent transparent $fallback--bg transparent;
border-color: transparent transparent var(--bg, $fallback--bg) transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper-wrapper[x-placement^="right"] { .popover-arrow {
margin-left: 5px; border-width: 0 5px 5px 5px;
} border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
.popper-wrapper[x-placement^="right"] .popper__arrow { &[x-placement^="right"] {
border-width: 5px 5px 5px 0; margin-left: 5px;
border-color: transparent $fallback--bg transparent transparent;
border-color: transparent var(--bg, $fallback--bg) transparent transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popper-wrapper[x-placement^="left"] { .popover-arrow {
margin-right: 5px; border-width: 5px 5px 5px 0;
} border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
.popper-wrapper[x-placement^="left"] .popper__arrow { &[x-placement^="left"] {
border-width: 5px 0 5px 5px; margin-right: 5px;
border-color: transparent transparent transparent $fallback--bg;
border-color: transparent transparent transparent var(--bg, $fallback--bg); .popover-arrow {
right: -5px; border-width: 5px 0 5px 5px;
top: calc(50% - 5px); border-top-color: transparent !important;
margin-left: 0; border-right-color: transparent !important;
margin-right: 0; border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
} }
.dropdown-menu { .dropdown-menu {
@ -76,13 +104,6 @@
list-style: none; list-style: none;
max-width: 100vw; max-width: 100vw;
z-index: 10; z-index: 10;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow);
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.dropdown-divider { .dropdown-divider {
height: 0; height: 0;

3
src/components/status/status.vue
View file

@ -820,11 +820,12 @@ $status-margin: 0.75em;
} }
.status-actions { .status-actions {
position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: $status-margin; margin-top: $status-margin;
div, favorite-button { > * {
max-width: 4em; max-width: 4em;
flex: 1; flex: 1;
} }

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

@ -283,7 +283,6 @@
.user-card { .user-card {
background-size: cover; background-size: cover;
overflow: hidden;
.panel-heading { .panel-heading {
padding: .5em 0; padding: .5em 0;
@ -298,6 +297,8 @@
word-wrap: break-word; word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
} }
p { p {
@ -503,6 +504,7 @@
} }
} }
.user-interactions { .user-interactions {
position: relative;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;

2
src/main.js
View file

@ -26,6 +26,7 @@ import messages from './i18n/messages.js'
import VueChatScroll from 'vue-chat-scroll' import VueChatScroll from 'vue-chat-scroll'
import VueClickOutside from 'v-click-outside' import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue' import PortalVue from 'portal-vue'
import VTooltip from 'v-tooltip'
import afterStoreSetup from './boot/after_store.js' import afterStoreSetup from './boot/after_store.js'
@ -37,6 +38,7 @@ Vue.use(VueI18n)
Vue.use(VueChatScroll) Vue.use(VueChatScroll)
Vue.use(VueClickOutside) Vue.use(VueClickOutside)
Vue.use(PortalVue) Vue.use(PortalVue)
Vue.use(VTooltip)
const i18n = new VueI18n({ const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary // By default, use the browser locale, we will update it if neccessary

25
yarn.lock
View file

@ -5459,9 +5459,10 @@ pngjs@^3.3.0:
version "3.3.3" version "3.3.3"
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
popper.js@^1.14.7: popper.js@^1.15.0:
version "1.14.7" version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e" 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: portal-vue@^2.1.4:
version "2.1.4" version "2.1.4"
@ -7198,6 +7199,15 @@ v-click-outside@^2.1.1:
version "2.1.3" version "2.1.3"
resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7" 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: validate-npm-package-license@^3.0.1:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@ -7272,11 +7282,10 @@ vue-loader@^14.0.0:
vue-style-loader "^4.0.1" vue-style-loader "^4.0.1"
vue-template-es2015-compiler "^1.6.0" vue-template-es2015-compiler "^1.6.0"
vue-popperjs@^2.0.3: vue-resize@^0.4.5:
version "2.0.3" version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-popperjs/-/vue-popperjs-2.0.3.tgz#7c446d0ba7c63170ccb33a02669d0df4efc3d8cd" resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
dependencies: integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
popper.js "^1.14.7"
vue-router@^3.0.1: vue-router@^3.0.1:
version "3.0.2" version "3.0.2"