From 5cf1574fdb36e14e342e3cbdd9733e0a1817a7cb Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 16 Jun 2020 17:20:36 +0300 Subject: fix popovers cutting off in notifications, port popover changes from chats mr --- src/components/popover/popover.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 5881d266..f1abe3ad 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -10,6 +10,9 @@ const Popover = { // 'container' for using offsetParent as boundaries for either axis // or 'viewport' boundTo: Object, + // Takes a selector to use as a replacement for the parent container + // for getting boundaries for x an y axis + boundToSelector: String, // Takes a top/bottom/left/right object, how much space to leave // between boundary and popover element margin: Object, @@ -27,6 +30,11 @@ const Popover = { } }, methods: { + containerBoundingClientRect () { + const container = this.boundToSelector ? document.querySelector(this.boundToSelector) : this.$el.offsetParent + console.log('test', container) + return container.getBoundingClientRect() + }, updateStyles () { if (this.hidden) { this.styles = { @@ -45,7 +53,8 @@ const Popover = { // Minor optimization, don't call a slow reflow call if we don't have to const parentBounds = this.boundTo && (this.boundTo.x === 'container' || this.boundTo.y === 'container') && - this.$el.offsetParent.getBoundingClientRect() + this.containerBoundingClientRect() + const margin = this.margin || {} // What are the screen bounds for the popover? Viewport vs container -- cgit v1.2.3-70-g09d2 From 5a8a428c154984b953724214284c01f270af5eb8 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 16 Jun 2020 17:30:56 +0300 Subject: remove log whoops --- src/components/popover/popover.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index f1abe3ad..ded7066f 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -32,7 +32,6 @@ const Popover = { methods: { containerBoundingClientRect () { const container = this.boundToSelector ? document.querySelector(this.boundToSelector) : this.$el.offsetParent - console.log('test', container) return container.getBoundingClientRect() }, updateStyles () { -- cgit v1.2.3-70-g09d2 From 24e47eb604330a8858dac9761545e499f73be8c4 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Tue, 16 Jun 2020 15:12:44 +0000 Subject: Update popover.js --- src/components/popover/popover.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index ded7066f..a40a9195 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -1,4 +1,3 @@ - const Popover = { name: 'Popover', props: { @@ -31,7 +30,7 @@ const Popover = { }, methods: { containerBoundingClientRect () { - const container = this.boundToSelector ? document.querySelector(this.boundToSelector) : this.$el.offsetParent + const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent return container.getBoundingClientRect() }, updateStyles () { -- cgit v1.2.3-70-g09d2 From 21d1f557f64cceda54755e2817d4799f1dbbea4f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 3 Jul 2020 12:56:31 +0300 Subject: change styles for the dropdown, make things work nicely on mobile --- src/App.vue | 2 +- src/components/nav_panel/nav_panel.js | 26 +++-- src/components/nav_panel/nav_panel.vue | 5 +- src/components/popover/popover.js | 6 +- src/components/popover/popover.vue | 5 +- src/components/side_drawer/side_drawer.vue | 41 ++----- src/components/status_popover/status_popover.vue | 2 +- src/components/timeline/timeline.vue | 11 ++ src/components/timeline_menu/timeline_menu.js | 14 +++ src/components/timeline_menu/timeline_menu.vue | 138 ++++++++++++++++++++--- src/i18n/de.json | 2 +- src/i18n/en.json | 2 +- src/i18n/fi.json | 2 +- 13 files changed, 197 insertions(+), 59 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/App.vue b/src/App.vue index 7b9ad3dc..cad25ba1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -112,7 +112,7 @@ {{ $t("login.hint") }} - + diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 8f7edb7f..eda01d35 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -1,18 +1,30 @@ import { mapState } from 'vuex' +const timelineRoutes = [ + 'friends', + 'dms', + 'public-timeline', + 'public-external-timeline' +] + const NavPanel = { created () { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } }, - computed: mapState({ - currentUser: state => state.users.currentUser, - chat: state => state.chat.channel, - followRequestCount: state => state.api.followRequests.length, - privateMode: state => state.instance.private, - federating: state => state.instance.federating - }) + computed: { + onTimelineRoute () { + return timelineRoutes.includes(this.$route.name) + }, + ...mapState({ + currentUser: state => state.users.currentUser, + chat: state => state.chat.channel, + followRequestCount: state => state.api.followRequests.length, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }) + } } export default NavPanel diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index ed70f019..1622eafa 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -3,7 +3,10 @@
  • - + {{ $t("nav.timeline") }}
    • diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index a40a9195..695f73b9 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -18,7 +18,9 @@ const Popover = { // Takes a x/y object and tells how many pixels to offset from // anchor point on either axis offset: Object, - // Additional styles you may want for the popover container + // 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 }, data () { @@ -106,7 +108,7 @@ const Popover = { // single translate or translate3d resulted in blurry text. this.styles = { opacity: 1, - transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)` + transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` } }, showPopover () { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index a271cb1b..5c99c509 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -14,7 +14,7 @@ ref="content" :style="styles" class="popover" - :class="popoverClass" + :class="popoverClass || 'popover-default'" > - - {{ $t("nav.dms") }} + + {{ $t("nav.timeline") }}
  • - - {{ $t("nav.interactions") }} + + {{ $t("nav.public_tl") }}
-
    -
  • - - {{ $t("nav.timeline") }} +
      +
    • + + {{ $t("nav.interactions") }}
    • @@ -80,23 +77,7 @@
    • - - {{ $t("nav.public_tl") }} - -
      • -
    • - - {{ $t("nav.twkn") }} - -
      • -
    • diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue index f5948207..2a8503e8 100644 --- a/src/components/status_popover/status_popover.vue +++ b/src/components/status_popover/status_popover.vue @@ -1,7 +1,7 @@