commit: 3359d4ddf6ee6449bd230eb2056f08edbb3d355e
parent 10399c193a68fc14c0c72b0cf970bfe2605a247e
Author: Shpuld Shpludson <shp@cock.li>
Date: Wed, 16 Dec 2020 17:57:59 +0000
Merge branch 'fix/timeline-bar-clickables-offset' into 'develop'
Fix #923 block clicks in blank area of timeline menu, fix 'up-to-date' align
Closes #923
See merge request pleroma/pleroma-fe!1300
Diffstat:
4 files changed, 27 insertions(+), 5 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Made reply/fav/repeat etc buttons easier to hit
+- Adjusted timeline menu clickable area to match the visible button
- Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
@@ -102,6 +102,7 @@
.timeline-heading {
max-width: 100%;
flex-wrap: nowrap;
+ align-items: center;
.loadmore-button {
flex-shrink: 0;
}
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
@@ -59,6 +59,14 @@ const TimelineMenu = {
this.isOpen = true
}, 25)
},
+ blockOpen (event) {
+ // For the blank area inside the button element.
+ // Just setting @click.stop="" makes unintuitive behavior when
+ // menu is open and clicking on the blank area doesn't close it.
+ if (!this.isOpen) {
+ event.stopPropagation()
+ }
+ },
timelineName () {
const route = this.$route.name
if (route === 'tag-timeline') {
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
@@ -65,10 +65,16 @@
slot="trigger"
class="title timeline-menu-title"
>
- <span>{{ timelineName() }}</span>
- <FAIcon
- size="sm"
- icon="chevron-down"
+ <span class="timeline-title">{{ timelineName() }}</span>
+ <span>
+ <FAIcon
+ size="sm"
+ icon="chevron-down"
+ />
+ </span>
+ <span
+ class="click-blocker"
+ @click="blockOpen"
/>
</div>
</Popover>
@@ -117,8 +123,9 @@
cursor: pointer;
user-select: none;
width: 100%;
+ display: flex;
- span {
+ .timeline-menu-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -128,6 +135,11 @@
margin-left: 0.6em;
transition: transform 100ms;
}
+
+ .click-blocker {
+ cursor: default;
+ flex-grow: 1;
+ }
}
&.open .timeline-menu-title svg {