Mirrors/gotosocial
2
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2024-11-22 20:33:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

[feature] Allow user to set "bot" flag; show bot icon on profile (#3135)

Browse source 
* [feature] Allow user to set "bot" flag; show bot icon on profile

* tweak

* update customs
This commit is contained in:
tobi 2024-07-24 10:40:56 +02:00 committed by GitHub
parent db0a47126e
commit 325b4a2b4a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 117 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/assets/themes/soft.css
View file

@ -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);
}

5
web/assets/themes/sunset-light.css
View file

@ -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);
}

45
web/source/css/profile.css
View file

@ -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 {

22
web/source/settings/components/profile.tsx
View file

@ -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") ?

34
web/source/settings/style.css
View file

@ -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 {

15
web/source/settings/views/user/profile.tsx
View file

@ -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>

20
web/template/profile.tmpl
View file

@ -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>