diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/account_actions/account_actions.js | 4 | ||||
| -rw-r--r-- | src/components/account_actions/account_actions.vue | 1 | ||||
| -rw-r--r-- | src/components/lists_edit/lists_edit.js | 10 | ||||
| -rw-r--r-- | src/components/lists_new/lists_new.js | 4 | ||||
| -rw-r--r-- | src/components/popover/popover.js | 25 |
5 files changed, 34 insertions, 10 deletions
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js index 99762562..735dd81c 100644 --- a/src/components/account_actions/account_actions.js +++ b/src/components/account_actions/account_actions.js @@ -1,6 +1,7 @@ import { mapState } from 'vuex' import ProgressButton from '../progress_button/progress_button.vue' import Popover from '../popover/popover.vue' +import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faEllipsisV @@ -19,7 +20,8 @@ const AccountActions = { }, components: { ProgressButton, - Popover + Popover, + UserListMenu }, methods: { showRepeats () { diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 23547f2c..770740e0 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -28,6 +28,7 @@ class="dropdown-divider" /> </template> + <UserListMenu :user="user" /> <button v-if="relationship.blocking" class="btn button-default btn-block dropdown-item" diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js index a68bb589..e4d0c22a 100644 --- a/src/components/lists_edit/lists_edit.js +++ b/src/components/lists_edit/lists_edit.js @@ -27,9 +27,9 @@ const ListsNew = { } }, created () { - this.$store.dispatch('fetchList', { id: this.id }) + this.$store.dispatch('fetchList', { listId: this.id }) .then(() => { this.title = this.findListTitle(this.id) }) - this.$store.dispatch('fetchListAccounts', { id: this.id }) + this.$store.dispatch('fetchListAccounts', { listId: this.id }) .then(() => { this.selectedUserIds = this.findListAccounts(this.id) this.selectedUserIds.forEach(userId => { @@ -76,13 +76,13 @@ const ListsNew = { this.userIds = results }, updateList () { - this.$store.dispatch('setList', { id: this.id, title: this.title }) - this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds }) + this.$store.dispatch('setList', { listId: this.id, title: this.title }) + this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds }) this.$router.push({ name: 'lists-timeline', params: { id: this.id } }) }, deleteList () { - this.$store.dispatch('deleteList', { id: this.id }) + this.$store.dispatch('deleteList', { listId: this.id }) this.$router.push({ name: 'lists' }) } } diff --git a/src/components/lists_new/lists_new.js b/src/components/lists_new/lists_new.js index 63dc28ad..a04b409e 100644 --- a/src/components/lists_new/lists_new.js +++ b/src/components/lists_new/lists_new.js @@ -69,8 +69,8 @@ const ListsNew = { // and "updating the accounts on the list". this.$store.dispatch('createList', { title: this.title }) .then((list) => { - this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds }) - this.$router.push({ name: 'lists-timeline', params: { id: list.id } }) + this.$store.dispatch('setListAccounts', { listId: list.id, accountIds: this.selectedUserIds }) + this.$router.push({ name: 'lists-timeline', params: { listId: list.id } }) }) } } diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index d2af59fe..dd332c35 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -4,7 +4,7 @@ const Popover = { // Action to trigger popover: either 'hover' or 'click' trigger: String, - // Either 'top' or 'bottom' + // 'top', 'bottom', 'left', 'right' placement: String, // Takes object with properties 'x' and 'y', values of these can be @@ -84,6 +84,8 @@ const Popover = { const anchorStyle = getComputedStyle(anchorEl) const topPadding = parseFloat(anchorStyle.paddingTop) const bottomPadding = parseFloat(anchorStyle.paddingBottom) + const rightPadding = parseFloat(anchorStyle.paddingRight) + const leftPadding = parseFloat(anchorStyle.paddingLeft) // Screen position of the origin point for popover = center of the anchor const origin = { @@ -170,7 +172,7 @@ const Popover = { if (overlayCenter) { translateX = origin.x + horizOffset translateY = origin.y + vertOffset - } else { + } else if (this.placement !== 'right' && this.placement !== 'left') { // Default to whatever user wished with placement prop let usingTop = this.placement !== 'bottom' @@ -189,6 +191,25 @@ const Popover = { const xOffset = (this.offset && this.offset.x) || 0 translateX = origin.x + horizOffset + xOffset + } else { + // Default to whatever user wished with placement prop + let usingRight = this.placement !== 'left' + + // 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. + const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0) + const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0) + if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true + if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false + + const xOffset = (this.offset && this.offset.x) || 0 + translateX = usingRight + ? rightBoundary - xOffset - content.offsetWidth + : leftBoundary + xOffset + + const yOffset = (this.offset && this.offset.y) || 0 + translateY = origin.y + vertOffset + yOffset } this.styles = { |