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
This commit is contained in:
Shpuld Shpludson 2020-12-16 17:57:59 +00:00
commit 3359d4ddf6
4 changed files with 27 additions and 5 deletions

View file

@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed ### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - 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 - 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 - Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize - Disabled horizontal textarea resize

View file

@ -102,6 +102,7 @@
.timeline-heading { .timeline-heading {
max-width: 100%; max-width: 100%;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center;
.loadmore-button { .loadmore-button {
flex-shrink: 0; flex-shrink: 0;
} }

View file

@ -59,6 +59,14 @@ const TimelineMenu = {
this.isOpen = true this.isOpen = true
}, 25) }, 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 () { timelineName () {
const route = this.$route.name const route = this.$route.name
if (route === 'tag-timeline') { if (route === 'tag-timeline') {

View file

@ -65,11 +65,17 @@
slot="trigger" slot="trigger"
class="title timeline-menu-title" class="title timeline-menu-title"
> >
<span>{{ timelineName() }}</span> <span class="timeline-title">{{ timelineName() }}</span>
<span>
<FAIcon <FAIcon
size="sm" size="sm"
icon="chevron-down" icon="chevron-down"
/> />
</span>
<span
class="click-blocker"
@click="blockOpen"
/>
</div> </div>
</Popover> </Popover>
</template> </template>
@ -117,8 +123,9 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
width: 100%; width: 100%;
display: flex;
span { .timeline-menu-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -128,6 +135,11 @@
margin-left: 0.6em; margin-left: 0.6em;
transition: transform 100ms; transition: transform 100ms;
} }
.click-blocker {
cursor: default;
flex-grow: 1;
}
} }
&.open .timeline-menu-title svg { &.open .timeline-menu-title svg {