وصف المشكلة:
السلوك المتوقع:
السلوك الفعلي:
خطوات التكرار:
تظهر المشكلة في هذا الرابط:
المتصفح/نظام التشغيل/الجهاز:
لقد وجدت أنها أمام الشريط الذي يمكنك من خلاله العودة أو التقدم.
5 إعجابات
andrei
4 أغسطس 2023، 8:01م
7
ألقيت نظرة على هذا. شيئان مهمان:
يحدث هذا فقط على الهاتف المحمول
لا يحدث هذا فقط مع تلميحات حالة المستخدم، ولكن أيضًا مع بعض التلميحات الأخرى التي تم تنفيذها أيضًا باستخدام مكون DTooltip
على سطح المكتب، نستخدم حدث mouseenter كمشغل للتلميح. عندما تغادر الماوس التلميح، يختفي، لذا يعمل كل شيء بسلاسة.
على الهاتف المحمول، يكون مشغل التلميح هو النقر، ولكي يختفي التلميح، يجب على المستخدم النقر خارج التلميح. لهذا السبب، لا يختفي التلميح عند التمرير. هذا هو السلوك الافتراضي للتلميحات المصنوعة باستخدام مكتبة tippy.js التي نستخدمها في الخلفية.
أعمل حاليًا على الإصلاح، ولدي بالفعل مسودة عاملة. سيكون الحل هو إخفاء التلميح عند التمرير على الهاتف المحمول. وسيؤدي ذلك إلى إصلاح جميع التلميحات المستندة إلى DTooltip.
3 إعجابات
andrei
15 أغسطس 2023، 7:35م
11
إليك الحل للمشكلة في المواضيع:
main ← feature/hide-d-tooltip-when-scrolling-on-mobile
opened 12:08PM - 15 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
15 أغسطس 2023، 8:27م
12
يحدث هذا على جهاز iPad الخاص بي في وضع سطح المكتب وكذلك في وضع الهاتف المحمول. في Safari و Chrome و Firefox على نظام iOS 16.6.
إعجابَين (2)
مرحباً @andrei !
إعجابَين (2)
لا يبدو أن الإصلاح قد تم دمجه بعد، لذلك قد تضطر إلى الانتظار لفترة أطول قليلاً للاختبار.
4 إعجابات
andrei
23 أغسطس 2023، 11:46ص
18
لقد قمنا للتو بدمج الإصلاح، وهو موجود الآن في الفرع الرئيسي. تذكر أنه يحل المشكلة في المواضيع فقط، وهناك مشكلة مماثلة في الدردشة، والتي سيتم معالجتها بشكل منفصل لاحقًا.
إعجابَين (2)
مرحباً @andrei !
إعجاب واحد (1)
andrei
23 أغسطس 2023، 6:37م
20
يجعل الإصلاح الأدوات تتلاشى عند التمرير. بعد الإصلاح، على شاشات اللمس تتلاشى الأدوات عندما تبدأ في التمرير.
إعجاب واحد (1)
حسناً. شكراً على الإصلاح!
إعجاب واحد (1)
يا جماعة!\nظهر هذا مرة أخرى في منتدى آخر.\nمنتديات أخرى مثل هذا و Ask تخفي الرأس، لكن هذا المنتدى لا يفعل ذلك.\nهل لي أن أضيف أنه إذا قمت بالتمرير بسرعة للأعلى عندما لا يزال الوضع معروضًا، فسيتداخل، لكن الرأس لن يتفاعل بسرعة كافية لإخفائه.
على غرار خطأ آخر أبلغت عنه حول الحالة المخصصة التي تظهر أمام شيء ما، إليك خطأ آخر:
كما ترى، لا تزال الحالة مرئية، وتتداخل مع الشريط الجانبي على الرغم من أن المستخدم قد مرر بعيدًا عن العرض.
إعجاب واحد (1)
كما ترى، الحالة المخصصة تضرب مرة أخرى!
مشكلة أخرى في الحالة المخصصة:https://meta.discourse.org/t/custom-status-in-front-of-sidebar/277328?u=natedhaliwal
إعجاب واحد (1)
andrei
4 سبتمبر 2023، 11:32ص
27
@NateDhaliwal شكراً لك على الإبلاغ عن هذه المشاكل!
لاحظ أن المشاكل تتعلق بشكل أكثر تحديدًا بالمكونات التي نستخدمها لعرض تلميحات الأدوات الغنية عبر التطبيق. نستخدم تلميحات الأدوات الغنية لعرض الحالة، ولكننا نستخدمها أيضًا لأشياء أخرى. لذا من المحتمل أن يتم تكرار مشاكل مماثلة مع تلميحات الأدوات الأخرى أيضًا. الإصلاح الذي قدمته أعلاه عالج فقط الحالات الأكثر عمومية.
نحن نعمل حاليًا على المزيد من التغييرات على مكونات تلميحات الأدوات الغنية، لذلك ستكون هناك المزيد من التحديثات هنا. سنتعامل مع هذه المشاكل.
5 إعجابات
هناك شيء آخر: في الدردشة:
أعتقد أنه تم ذكر هذا بالفعل:
4 إعجابات
andrei
28 مارس 2024، 6:05م
30
لقد قام @j.jaffeux بإعادة عمل رئيسية للتلميحات (والنوافذ المنبثقة الأخرى) في
main ← jjaffeux:float-kit-3
opened 02:42PM - 25 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 إعجابات
