[feature] Allow user to set "bot" flag; show bot icon on profile (#3135)
* [feature] Allow user to set "bot" flag; show bot icon on profile * tweak * update customs
This commit is contained in:
tobi
GitHub
parent
db0a47126e
commit
325b4a2b4a
|
|
@ -51,7 +51,9 @@ html, body {
|
|||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
.profile .profile-header .basic-info .namerole .role {
|
||||
/* Role and bot badge borders */
|
||||
.profile .profile-header .basic-info .namerole .role,
|
||||
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@ html, body {
|
|||
color: var(--eggshell);
|
||||
}
|
||||
|
||||
/* Role badge background */
|
||||
.profile .profile-header .basic-info .namerole .role {
|
||||
/* Role and bot badge backgrounds */
|
||||
.profile .profile-header .basic-info .namerole .role,
|
||||
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
|
||||
background: var(--eggshell);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,15 +135,46 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.username {
|
||||
min-width: 0;
|
||||
.bot-username-wrapper {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-area: username;
|
||||
line-height: $username-size;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: $fg-accent;
|
||||
user-select: all;
|
||||
.bot-legend-wrapper {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
|
||||
border-radius: $br;
|
||||
padding: 0.1rem 0.4rem 0.2rem 0.4rem;
|
||||
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
|
||||
cursor: default;
|
||||
|
||||
.bot-icon {
|
||||
/*
|
||||
FA icon is weirdly
|
||||
aligned so tweak it
|
||||
*/
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
min-width: 0;
|
||||
line-height: $username-size;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: $fg-accent;
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
|
||||
.role {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
import React from "react";
|
||||
|
||||
export default function FakeProfile({ avatar, header, display_name, username, role }) {
|
||||
export default function FakeProfile({ avatar, header, display_name, bot, username, role }) {
|
||||
return ( // Keep in sync with web/template/profile.tmpl
|
||||
<div className="profile">
|
||||
<div className="profile-header">
|
||||
|
|
@ -35,8 +35,24 @@ export default function FakeProfile({ avatar, header, display_name, username, ro
|
|||
<dl className="namerole">
|
||||
<dt className="sr-only">Display name</dt>
|
||||
<dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd>
|
||||
<dt className="sr-only">Username</dt>
|
||||
<dd className="username text-cutoff">@{username}</dd>
|
||||
<div className="bot-username-wrapper">
|
||||
{ bot && <>
|
||||
<dt className="sr-only">Bot account</dt>
|
||||
<dd>
|
||||
<span className="sr-only">true</span>
|
||||
<div
|
||||
className="bot-legend-wrapper"
|
||||
aria-hidden="true"
|
||||
title="This is a bot account."
|
||||
>
|
||||
<i className="bot-icon fa fa-microchip"></i>
|
||||
<span className="bot-legend">bot</span>
|
||||
</div>
|
||||
</dd>
|
||||
</>}
|
||||
<dt className="sr-only">Username</dt>
|
||||
<dd className="username text-cutoff">@{username}</dd>
|
||||
</div>
|
||||
<dt className="sr-only">Role</dt>
|
||||
{
|
||||
(role && role.name != "user") ?
|
||||
|
|
|
|||
|
|
@ -445,22 +445,34 @@ section.with-sidebar > form {
|
|||
}
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.theme, .form-field.radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem 1rem 1rem;
|
||||
max-width: fit-content;
|
||||
border: 0.1rem solid var(--gray1);
|
||||
border-radius: 0.1rem;
|
||||
|
||||
>legend {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.migration-details {
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ function UserProfileForm({ data: profile }) {
|
|||
avatar={form.avatar.previewValue ?? profile.avatar}
|
||||
header={form.header.previewValue ?? profile.header}
|
||||
display_name={form.displayName.value ?? profile.username}
|
||||
bot={profile.bot}
|
||||
username={profile.username}
|
||||
role={profile.role}
|
||||
/>
|
||||
|
|
@ -186,6 +187,10 @@ function UserProfileForm({ data: profile }) {
|
|||
Learn more about these settings (opens in a new tab)
|
||||
</a>
|
||||
</div>
|
||||
<Checkbox
|
||||
field={form.bot}
|
||||
label="Mark as bot account; this indicates to other users that this is an automated account"
|
||||
/>
|
||||
<TextInput
|
||||
field={form.displayName}
|
||||
label="Display name"
|
||||
|
|
@ -200,10 +205,12 @@ function UserProfileForm({ data: profile }) {
|
|||
autoCapitalize="sentences"
|
||||
rows={8}
|
||||
/>
|
||||
<b>Profile fields</b>
|
||||
<ProfileFields
|
||||
field={form.fields}
|
||||
/>
|
||||
<fieldset>
|
||||
<legend>Profile fields</legend>
|
||||
<ProfileFields
|
||||
field={form.fields}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div className="form-section-docs">
|
||||
<h3>Visibility and privacy</h3>
|
||||
|
|
|
|||
|
|
@ -155,8 +155,24 @@
|
|||
{{- .account.Username -}}
|
||||
{{- end -}}
|
||||
</dd>
|
||||
<dt class="sr-only">Username</dt>
|
||||
<dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
|
||||
<div class="bot-username-wrapper">
|
||||
{{- if .account.Bot }}
|
||||
<dt class="sr-only">Bot account</dt>
|
||||
<dd>
|
||||
<span class="sr-only">true</span>
|
||||
<div
|
||||
class="bot-legend-wrapper"
|
||||
aria-hidden="true"
|
||||
title="This is a bot account."
|
||||
>
|
||||
<i class="bot-icon fa fa-microchip"></i>
|
||||
<span class="bot-legend">bot</span>
|
||||
</div>
|
||||
</dd>
|
||||
{{- end }}
|
||||
<dt class="sr-only">Username</dt>
|
||||
<dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
|
||||
</div>
|
||||
{{- if and (.account.Role) (ne .account.Role.Name "user") }}
|
||||
<dt class="sr-only">Role</dt>
|
||||
<dd class="role {{ .account.Role.Name -}}">{{- .account.Role.Name -}}</dd>
|
||||
|
|
|
|||
Loading…
Reference in New Issue