* Open links in a new tab setting in UI
* fixes according to review
* also open external links when setting is enabled
* oopsie
* oopsie 2
* pull translations
* Fixing PR comments.
* Fix prettier.
---------
Co-authored-by: Dogeek <simon.bordeyne@gmail.com>
Co-authored-by: Simon Bordeyne <Dogeek@users.noreply.github.com>
Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
show_new_post_notifs?: boolean;
discussion_languages?: number[];
generate_totp_2fa?: boolean;
show_new_post_notifs?: boolean;
discussion_languages?: number[];
generate_totp_2fa?: boolean;
+ open_links_in_new_tab?: boolean;
};
changePasswordForm: {
new_password?: string;
};
changePasswordForm: {
new_password?: string;
+ <div className="input-group mb-3">
+ <div className="form-check">
+ <input
+ className="form-check-input"
+ id="user-open-links-in-new-tab"
+ type="checkbox"
+ checked={this.state.saveUserSettingsForm.open_links_in_new_tab}
+ onChange={linkEvent(this, this.handleOpenInNewTab)}
+ />
+ <label
+ className="form-check-label"
+ htmlFor="user-open-links-in-new-tab"
+ >
+ {I18NextService.i18n.t("open_links_in_new_tab")}
+ </label>
+ </div>
+ </div>
{this.totpSection()}
<div className="input-group mb-3">
<button type="submit" className="btn d-block btn-secondary me-4">
{this.totpSection()}
<div className="input-group mb-3">
<button type="submit" className="btn d-block btn-secondary me-4">
+ handleOpenInNewTab(i: Settings, event: any) {
+ i.setState(
+ s => (
+ (s.saveUserSettingsForm.open_links_in_new_tab = event.target.checked), s
+ ),
+ );
+ }
+
handleShowScoresChange(i: Settings, event: any) {
const mui = UserService.Instance.myUserInfo;
if (mui) {
handleShowScoresChange(i: Settings, event: any) {
const mui = UserService.Instance.myUserInfo;
if (mui) {
href={url}
rel={relTags}
title={url}
href={url}
rel={relTags}
title={url}
+ target={this.linkTarget}
>
{this.imgThumb(this.imageSrc)}
<Icon
>
{this.imgThumb(this.imageSrc)}
<Icon
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
+ target={this.linkTarget}
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="play" classes="d-flex align-items-center" />
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="play" classes="d-flex align-items-center" />
- <a className="text-body" href={url} title={url} rel={relTags}>
+ <a
+ className="text-body"
+ href={url}
+ title={url}
+ rel={relTags}
+ target={this.linkTarget}
+ >
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="external-link" classes="d-flex align-items-center" />
</div>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="external-link" classes="d-flex align-items-center" />
</div>
className="text-body"
to={`/post/${post.id}`}
title={I18NextService.i18n.t("comments")}
className="text-body"
to={`/post/${post.id}`}
title={I18NextService.i18n.t("comments")}
+ target={this.linkTarget}
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="message-square" classes="d-flex align-items-center" />
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="message-square" classes="d-flex align-items-center" />
+ public get linkTarget(): string {
+ return UserService.Instance.myUserInfo?.local_user_view.local_user
+ .open_links_in_new_tab
+ ? "_blank"
+ : // _self is the default target on links when the field is not specified
+ "_self";
+ }
+
get commentsButton() {
const post_view = this.postView;
const title = I18NextService.i18n.t("number_of_comments", {
get commentsButton() {
const post_view = this.postView;
const title = I18NextService.i18n.t("number_of_comments", {
title={title}
to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title}
title={title}
to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title}
+ target={this.linkTarget}
>
<Icon icon="message-square" classes="me-1" inline />
{post_view.counts.comments}
>
<Icon icon="message-square" classes="me-1" inline />
{post_view.counts.comments}