문제 설명:
사용자가 본 게시물이 사라졌을 때에도 사용자 정의 상태 메시지가 배너에 의해 숨겨지지 않아 시각적으로 좋지 않습니다.
기대하는 동작:
상태 메시지가 배너에 의해 숨겨져야 합니다.
실제 동작:
상태 메시지가 배너 앞에 표시됩니다.
재현 방법:
사용자의 사용자 정의 상태에 클릭한 후, 게시물이 시야에서 사라질 때까지 위로 스크롤합니다. 그러면 페이지 상단의 배너 앞에 여전히 상태 메시지가 표시되는 것을 볼 수 있습니다.
버그가 나타나는 링크:
(이것이 제 문제인지 확실하지 않습니다)
브라우저/OS/기기:
Replit 앱/Android /Samsung Galaxy
뒤로 가거나 앞으로 갈 수 있는 바(네비게이션 바) 앞에 위치해 있는 것을 발견했습니다.
5개의 좋아요
andrei
8월 4, 2023, 8:01오후
7
이 문제를 확인해 보았습니다. 중요한 사항이 두 가지 있습니다:
이는 모바일에서만 발생합니다.
사용자 상태 툴팁뿐만 아니라 DTooltip 컴포넌트로 구현된 다른 몇몇 툴팁에서도 발생합니다.
데스크톱에서는 mouseenter 이벤트를 툴팁 트리거로 사용합니다. 마우스가 툴팁에서 벗어나면 툴팁이 사라지므로 모든 것이 원활하게 작동합니다.
모바일에서는 클릭이 툴팁 트리거가 되며, 툴팁을 닫으려면 사용자가 툴팁 밖을 클릭해야 합니다. 이로 인해 스크롤링할 때 툴팁이 사라지지 않습니다. 이는 내부적으로 사용하는 tippy.js 라이브러리로 만든 툴팁의 기본 동작입니다.
현재 수정 작업을 진행 중이며 이미 작동하는 초안을 가지고 있습니다. 해결책은 모바일에서 스크롤링할 때 툴팁을 숨기는 것입니다. 이를 통해 DTooltip 기반의 모든 툴팁 문제가 해결될 것입니다.
3개의 좋아요
andrei
8월 15, 2023, 7:35오후
11
토픽 관련 문제의 수정 사항입니다:
main ← feature/hide-d-tooltip-when-scrolling-on-mobile
merged 11:39AM - 23 Aug 23 UTC
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.
어떤 이유에서인지 채팅에서는 작동하지 않습니다. 조사해서 후속 업데이트에서 수정하겠습니다.
3개의 좋아요
Lilly
8월 15, 2023, 8:27오후
12
Andrei Prigorshnev:
이 문제는 모바일에서만 발생합니다
iPad에서도 데스크톱 보기와 모바일 모드 모두에서 발생하고 있습니다. iOS 16.6의 Safari, Chrome, Firefox에서 모두 확인됩니다.
2개의 좋아요
안녕하세요 @andrei !
2개의 좋아요
수정이 아직 병합되지 않은 것 같으니, 테스트하려면 조금 더 기다려야 할 수 있습니다.
4개의 좋아요
andrei
8월 23, 2023, 11:46오전
18
방금 수정 사항을 병합했고, 이제 main 브랜치에 있습니다. 이 수정은 토픽에서의 문제만 해결하며, 채팅에서도 유사한 문제가 존재합니다. 이 문제는 나중에 별도로 처리할 예정입니다.
2개의 좋아요
안녕하세요 @andrei !
1개의 좋아요
andrei
8월 23, 2023, 6:37오후
20
해당 수정 사항은 스크롤할 때 툴팁이 페이드아웃되도록 하는 것입니다. 수정 후, 터치스크린에서는 스크롤을 시작할 때 툴팁이 페이드아웃됩니다.
1개의 좋아요
여러분, 안녕하세요!
커스텀 상태가 다른 요소 앞에 표시되는 문제에 대해 제가 이전에 보고한 버그와 유사하게, 또 다른 버그를 발견했습니다:
보시는 것처럼, 사용자가 화면에서 스크롤되어 보이지 않는 상태여도 상태 표시가 여전히 보이며 사이드바와 겹쳐 있습니다.
1개의 좋아요
보시는 것처럼, 커스텀 상태가 또 문제를 일으켰습니다!
또 다른 커스텀 상태 문제:https://meta.discourse.org/t/custom-status-in-front-of-sidebar/277328?u=natedhaliwal
1개의 좋아요
andrei
9월 4, 2023, 11:32오전
27
@NateDhaliwal 이러한 문제를 보고해 주셔서 감사합니다!
정확히 말하면, 이 문제는 앱 전체에서 리치 툴팁(rich tooltips)을 표시하는 데 사용되는 컴포넌트와 관련이 있습니다. 우리는 상태를 표시할 때 리치 툴팁을 사용하지만, 다른 용도로도 활용하고 있습니다. 따라서 유사한 문제가 다른 툴팁에서도 재현될 수 있습니다. 위에서 제공한 수정안은 가장 일반적인 경우만 해결했습니다.
현재 우리는 리치 툴팁 컴포넌트에 대한 추가 변경 사항을 작업하고 있으므로, 여기에 더 많은 업데이트가 있을 것입니다. 이 문제들을 처리하겠습니다.
5개의 좋아요
andrei
3월 28, 2024, 6:05오후
30
@j.jaffeux 님이 툴팁(그리고 기타 팝업)을 대폭 개편했습니다.
main ← jjaffeux:float-kit-3
merged 11:39AM - 26 Sep 23 UTC
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>
해당 작업의 일환으로 이 주제에서 설명된 문제들도 함께 수정되었습니다. 방금 테스트해 보니
채팅에서 상태 툴팁이 겹치지 않습니다.
사이드바를 열면 툴팁이 사라집니다.
모바일에서 하단 내비게이션 툴바 위에 툴팁이 표시되지 않습니다.
3개의 좋아요
