1
0
mirror of https://github.com/flarum/core.git synced 2025-08-08 17:36:38 +02:00

Fix Tooltip deprecation warnings

This commit is contained in:
David Wheatley
2021-05-17 01:42:42 +01:00
parent b51c7c01ba
commit f3ac771980

View File

@@ -1,7 +1,9 @@
import Dropdown from 'flarum/components/Dropdown'; import Dropdown from 'flarum/components/Dropdown';
import Button from 'flarum/components/Button'; import Button from 'flarum/components/Button';
import Tooltip from 'flarum/common/components/Tooltip';
import icon from 'flarum/helpers/icon'; import icon from 'flarum/helpers/icon';
import extractText from 'flarum/utils/extractText'; import extractText from 'flarum/utils/extractText';
import classList from 'flarum/utils/classList';
import SubscriptionMenuItem from './SubscriptionMenuItem'; import SubscriptionMenuItem from './SubscriptionMenuItem';
@@ -14,20 +16,20 @@ export default class SubscriptionMenu extends Dropdown {
subscription: null, subscription: null,
icon: 'far fa-star', icon: 'far fa-star',
label: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_button'), label: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_button'),
description: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_text') description: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_text'),
}, },
{ {
subscription: 'follow', subscription: 'follow',
icon: 'fas fa-star', icon: 'fas fa-star',
label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'), label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'),
description: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_text') description: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_text'),
}, },
{ {
subscription: 'ignore', subscription: 'ignore',
icon: 'far fa-eye-slash', icon: 'far fa-eye-slash',
label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'), label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'),
description: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_text') description: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_text'),
} },
]; ];
} }
@@ -51,58 +53,61 @@ export default class SubscriptionMenu extends Dropdown {
break; break;
default: default:
// no default // no default
} }
const preferences = app.session.user.preferences(); const preferences = app.session.user.preferences();
const notifyEmail = preferences['notify_newPost_email']; const notifyEmail = preferences['notify_newPost_email'];
const notifyAlert = preferences['notify_newPost_alert']; const notifyAlert = preferences['notify_newPost_alert'];
const title = extractText(app.translator.trans(notifyEmail const tooltipText = extractText(
? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip' app.translator.trans(
: 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip')); notifyEmail ? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip' : 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip'
)
);
const buttonAttrs = { const shouldShowTooltip = (notifyEmail || notifyAlert) && subscription === null;
className: 'Button SubscriptionMenu-button ' + buttonClass,
icon: buttonIcon,
onclick: this.saveSubscription.bind(this, discussion, ['follow', 'ignore'].indexOf(subscription) !== -1 ? null : 'follow'),
title: title
};
if ((notifyEmail || notifyAlert) && subscription === null) { const button = (
buttonAttrs.oncreate = buttonAttrs.onupdate = vnode => { <Button
$(vnode.dom).tooltip({ className={classList('Button', 'SubscriptionMenu-button', buttonClass)}
container: '.SubscriptionMenu', icon={buttonIcon}
placement: 'bottom', onclick={this.saveSubscription.bind(this, discussion, ['follow', 'ignore'].indexOf(subscription) !== -1 ? null : 'follow')}
delay: 250, >
title {buttonLabel}
}); </Button>
} );
} else {
buttonAttrs.onupdate = vnode => $(vnode.dom).tooltip('destroy');
}
return ( return (
<div className="Dropdown ButtonGroup SubscriptionMenu"> <div className="Dropdown ButtonGroup SubscriptionMenu">
{Button.component(buttonAttrs, buttonLabel)} {shouldShowTooltip ? (
<Tooltip text={tooltipText} position="bottom">
{button}
</Tooltip>
) : (
button
)}
<button className={'Dropdown-toggle Button Button--icon ' + buttonClass} data-toggle="dropdown"> <button className={classList('Dropdown-toggle Button Button--icon', buttonClass)} data-toggle="dropdown">
{icon('fas fa-caret-down', {className: 'Button-icon'})} {icon('fas fa-caret-down', { className: 'Button-icon' })}
</button> </button>
<ul className="Dropdown-menu dropdown-menu Dropdown-menu--right"> <ul className="Dropdown-menu dropdown-menu Dropdown-menu--right">
{this.options.map(attrs => <li>{SubscriptionMenuItem.component({ {this.options.map((attrs) => (
...attrs, <li>
onclick: this.saveSubscription.bind(this, discussion, attrs.subscription), {SubscriptionMenuItem.component({
active: subscription === attrs.subscription ...attrs,
})}</li> onclick: this.saveSubscription.bind(this, discussion, attrs.subscription),
)} active: subscription === attrs.subscription,
})}
</li>
))}
</ul> </ul>
</div> </div>
); );
} }
saveSubscription(discussion, subscription) { saveSubscription(discussion, subscription) {
discussion.save({subscription}); discussion.save({ subscription });
this.$('.SubscriptionMenu-button').tooltip('hide'); this.$('.SubscriptionMenu-button').tooltip('hide');
} }