Пользовательское сообщение статуса перед заголовком и другими элементами

NateDhaliwal · 31.Июль.2023 08:01:52

Описание проблемы:

Пользовательское сообщение о статусе не скрывается баннером, даже если пост, который видел пользователь, больше не отображается, что делает интерфейс неэстетичным.
Прикреплено изображение проблемы:

Ожидаемое поведение:

Сообщение о статусе должно скрываться баннером.

Фактическое поведение:

Статус отображается поверх баннера.

Шаги для воспроизведения:

Нажмите на пользовательское сообщение о статусе и прокрутите страницу вверх, пока пост не исчезнет из виду. При этом вы всё ещё сможете видеть сообщение о статусе поверх баннера в верхней части страницы.

Ошибка проявляется по этой ссылке:

(Не уверен, что это проблема только у меня)

Браузер/ОС/Устройство:

Приложение Replit / Android / Samsung Galaxy

Аналогичные случаи:

Я обнаружил, что статус отображается поверх панели с кнопками «Назад» и «Вперёд».
Вот наглядное изображение:

Canapin · 31.Июль.2023 11:32:53

Я могу воспроизвести проблему:

Спасибо за отчёт

andrei · 04.Август.2023 20:01:39

Я посмотрел на это. Два важных момента:

Это происходит только на мобильных устройствах.
Это касается не только всплывающих подсказок статуса пользователя, но и некоторых других подсказок, которые также реализованы с использованием компонента DTooltip.

На настольных компьютерах мы используем событие mouseenter как триггер для всплывающей подсказки. Когда мышь покидает область подсказки, она исчезает, поэтому всё работает плавно.

На мобильных устройствах триггером для всплывающей подсказки является клик, и чтобы она исчезла, пользователю нужно кликнуть вне области подсказки. Из-за этого при прокрутке подсказка не исчезает. Это поведение по умолчанию для всплывающих подсказок, созданных с помощью библиотеки tippy.js, которую мы используем «под капотом».

Я сейчас работаю над исправлением и уже имею рабочий черновик. Решение будет заключаться в скрытии подсказки при прокрутке на мобильных устройствах. Это исправит все всплывающие подсказки, основанные на DTooltip.

andrei · 15.Август.2023 19:35:03

Вот исправление проблемы в темах:

github.com/discourse/discourse

FIX: hide tooltips when scrolling on mobile (#23098)

main ← feature/hide-d-tooltip-when-scrolling-on-mobile

merged 11:39AM - 23 Aug 23 UTC

AndrewPrigorshnev

+162 -103

This fixes the problem reported in https://meta.discourse.org/t/custom-status-me…ssage-in-front-of-by-header-on-scroll/273320. This problem can be reproduced with any tooltip created using the [DTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/d-tooltip.gjs) component or the [createDTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/d-tooltip.js) function. The problem happens because the trigger for tooltip on mobile is click, and for tooltip to disappear the user has to click outside the tooltip. This is the default behavior of tippy.js – the library we use under the hood. Note that this PR fixes the problem in topics, but not in chat. I'm going to investigate and address it in chat in a following PR. To fix it for tooltips created with the [createDTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/d-tooltip.js) function, I had to make a refactoring. We had a somewhat not ideal solution there, we were leaking an implementation detail by passing tippy instances to calling sides, so they could then destroy them. With this fix, I would have to make it more complex, because now we need to also remove `onScrool` handlers, and I would need to leak this implementation detail too. So, I firstly refactored the current solution in 5a4af05 and then added `onScroll` handlers in fb4aabe (cc @jancernik). When refactoring this, I was running locally some temporarily skipped flaky tests. Turned out they got a bit outdated, so I fixed them. Note that I'm not unskipping them in this commit, we'll address them separately later.

По какой-то причине это не работает в чате, я разберусь и исправлю это в следующем обновлении.

Lilly · 15.Август.2023 20:27:13

У меня это происходит на iPad в режиме рабочего стола, а также в мобильном режиме. В Safari, Chrome и Firefox на iOS 16.6.

NateDhaliwal · 16.Август.2023 09:01:26

Привет, @andrei!
К сожалению, эта ошибка всё ещё проявляется на форуме Discourse (на этот раз на другом).
Она также появляется в этой теме…

JammyDodger · 16.Август.2023 09:10:03

Похоже, исправление ещё не объединено, поэтому вам, возможно, придётся подождать немного дольше, чтобы протестировать его.

andrei · 23.Август.2023 11:46:55

Мы только что объединили исправление, теперь оно в главной ветке. Помните, что оно решает проблему только в темах; аналогичная проблема в чате будет решена отдельно позже.

NateDhaliwal · 23.Август.2023 14:07:23

Привет, @andrei!
Я вижу, что заголовок меняется, а статус исчезает, когда он достигает верха. Это исправление?

andrei · 23.Август.2023 18:37:00

Исправление обеспечивает исчезновение всплывающих подсказок при прокрутке. После исправления на сенсорных экранах подсказки исчезают при начале прокрутки.

NateDhaliwal · 24.Август.2023 07:05:24

Отлично. Спасибо за исправление!

NateDhaliwal · 30.Август.2023 07:37:49

Всем привет!
Это снова появилось на другом форуме.
Другие подобные форумы и Ask затемняют заголовок, но на этом форуме этого не происходит.
Могу добавить, что если быстро прокрутить страницу вверх, пока ещё отображается статус, он наложится поверх, а заголовок не успеет отреагировать и скрыть его.

Firepup650 · 30.Август.2023 11:09:06

Сама шапка их не скрывает
Не основывайте отчеты об ошибках на форумах SB, они практически всегда устарели.

NateDhaliwal · 31.Август.2023 10:35:29

Аналогично другому багу, о котором я сообщал ранее (когда пользовательский статус перекрывал какой-либо элемент), вот ещё один:

Как видно, статус всё ещё виден и перекрывает боковую панель, даже когда пользователь прокрутил страницу за пределы видимости.

NateDhaliwal · 04.Сентябрь.2023 05:42:57

Как вы видите, пользовательский статус снова проявил себя!
Я обнаружил, что он находится перед панелью, где можно вернуться назад или перейти вперед.
Вот наглядное изображение:

Другая проблема с пользовательским статусом:
https://meta.discourse.org/t/custom-status-in-front-of-sidebar/277328?u=natedhaliwal
Кажется, что у пользовательского статуса есть проблемы.

andrei · 04.Сентябрь.2023 11:32:20

@NateDhaliwal спасибо за сообщение об этих проблемах!

Обратите внимание, что более точно эти проблемы связаны с компонентами, которые мы используем для отображения расширенных всплывающих подсказок во всем приложении. Мы используем расширенные всплывающие подсказки для отображения статуса, но также применяем их и для других целей. Таким образом, аналогичные проблемы потенциально могут быть воспроизведены и с другими всплывающими подсказками. Исправление, которое я предоставил выше, решает только наиболее общие случаи.

В настоящее время мы работаем над дополнительными изменениями в компонентах для расширенных всплывающих подсказок, поэтому здесь появятся новые обновления. Мы займемся решением этих проблем.

NateDhaliwal · 22.Сентябрь.2023 06:08:42

Ещё один: в чате:

JammyDodger · 22.Сентябрь.2023 06:39:40

По-моему, это уже упоминалось:

andrei · 28.Март.2024 18:05:53

@j.jaffeux провёл значительную доработку всплывающих подсказок (и других всплывающих окон) в

github.com/discourse/discourse

DEV: FloatKit (#23650)

main ← jjaffeux:float-kit-3

merged 11:39AM - 26 Sep 23 UTC

jjaffeux

+5172 -2525

This PR introduces three new concepts to Discourse codebase through an addon cal…led "FloatKit": - menu - tooltip - toast ## Tooltips ### Component Simple cases can be express with an API similar to DButton: ```hbs <DTooltip @Label={{i18n "foo.bar"}} @ICON="check" @content="Something" /> ``` More complex cases can use blocks: ```hbs <DTooltip> <:trigger> {{d-icon "check"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> Something </:content> </DTooltip> ``` ### Service You can manually show a tooltip using the `tooltip` service: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it tooltipInstance.close(); tooltipInstance.destroy(); // you can also just close any open tooltip through the service this.tooltip.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const tooltipInstance = this.tooltip.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners tooltipInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Menus Menus are very similar to tooltips and provide the same kind of APIs: ### Component ```hbs <DMenu @ICON="plus" @Label={{i18n "foo.bar"}}> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </DMenu> ``` They also support blocks: ```hbs <DMenu> <:trigger> {{d-icon "plus"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </:content> </DMenu> ``` ### Service You can manually show a menu using the `menu` service: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it menuInstance.close(); menuInstance.destroy(); // you can also just close any open tooltip through the service this.menu.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const menuInstance = this.menu.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners menuInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Toasts Interacting with toasts is made only through the `toasts` service. A default component is provided (DDefaultToast) and can be used through dedicated service methods: - this.toasts.success({ ... }); - this.toasts.warning({ ... }); - this.toasts.info({ ... }); - this.toasts.error({ ... }); - this.toasts.default({ ... }); ```javascript this.toasts.success({ data: { title: "Foo", message: "Bar", actions: [ { label: "Ok", class: "btn-primary", action: (componentArgs) => { // eslint-disable-next-line no-alert alert("Closing toast:" + componentArgs.data.title); componentArgs.close(); }, } ] }, }); ``` You can also provide your own component: ```javascript this.toasts.show(MyComponent, { autoClose: false, class: "foo", data: { baz: 1 }, }) ``` Co-authored-by: Martin Brennan <mjrbrennan@gmail.com> Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Co-authored-by: David Taylor <david@taylorhq.com> Co-authored-by: Jarek Radosz <jradosz@gmail.com>

В рамках этой работы были также исправлены проблемы, описанные в этой теме. Я только что протестировал и

в чате больше нет наложения всплывающих подсказок со статусами
всплывающие подсказки исчезают при открытии боковой панели
всплывающие подсказки не появляются над нижней панелью навигации на мобильных устройствах

Тема		Ответов	Просм.
Hover able elements (user status, reactions) UX completed , user-status , mobile , chat	3	470	20.04.2023
Avatar shows over banner on mobile Bug	3	1335	24.03.2015
How to finely scroll out custom header? UX	8	2397	31.08.2019
Disable header changes on mobile Support	4	123	08.09.2025
I dislike the new mobile topic header behavior in 2.2.0.beta5 UX	100	7211	08.01.2019

Пользовательское сообщение статуса перед заголовком и другими элементами

Аналогичные случаи:

Связанные темы