Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2026-04-20 14:04:51 +02:00
Code Issues Projects Releases Wiki Activity

Add non-binary gender icon and colour transgender icons (#6489)

Browse source 
* Add data-gender to gender icon and color transgender gender icons
* Upgrade fontawesome to 7.1
* Add non-binary icon and fix title not showing
This commit is contained in:
WithoutPants 2026-01-14 14:28:44 +11:00 committed by GitHub
parent 211f06963e
commit d7d7530c78
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 75 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/v2.5/package.json
View file

@ -27,11 +27,11 @@
"@formatjs/intl-locale": "^3.0.11",
"@formatjs/intl-numberformat": "^8.3.3",
"@formatjs/intl-pluralrules": "^5.1.8",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@fortawesome/fontawesome-svg-core": "^7.1.0",
"@fortawesome/free-brands-svg-icons": "^7.1.0",
"@fortawesome/free-regular-svg-icons": "^7.1.0",
"@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/react-fontawesome": "^0.2.6",
"@react-hook/resize-observer": "^1.2.6",
"@silvermine/videojs-airplay": "^1.2.0",
"@silvermine/videojs-chromecast": "^1.4.1",

63
ui/v2.5/pnpm-lock.yaml
View file

@ -27,20 +27,20 @@ importers:
specifier: ^5.1.8
version: 5.4.6
'@fortawesome/fontawesome-svg-core':
specifier: ^6.3.0
version: 6.7.2
specifier: ^7.1.0
version: 7.1.0
'@fortawesome/free-brands-svg-icons':
specifier: ^6.3.0
version: 6.7.2
specifier: ^7.1.0
version: 7.1.0
'@fortawesome/free-regular-svg-icons':
specifier: ^6.3.0
version: 6.7.2
specifier: ^7.1.0
version: 7.1.0
'@fortawesome/free-solid-svg-icons':
specifier: ^6.3.0
version: 6.7.2
specifier: ^7.1.0
version: 7.1.0
'@fortawesome/react-fontawesome':
specifier: ^0.2.0
version: 0.2.6(@fortawesome/fontawesome-svg-core@6.7.2)(react@17.0.2)
specifier: ^0.2.6
version: 0.2.6(@fortawesome/fontawesome-svg-core@7.1.0)(react@17.0.2)
'@react-hook/resize-observer':
specifier: ^1.2.6
version: 1.2.6(react@17.0.2)
@ -1262,28 +1262,29 @@ packages:
ts-jest:
optional: true
'@fortawesome/fontawesome-common-types@6.7.2':
resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==}
'@fortawesome/fontawesome-common-types@7.1.0':
resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
engines: {node: '>=6'}
'@fortawesome/fontawesome-svg-core@6.7.2':
resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==}
'@fortawesome/fontawesome-svg-core@7.1.0':
resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
engines: {node: '>=6'}
'@fortawesome/free-brands-svg-icons@6.7.2':
resolution: {integrity: sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==}
'@fortawesome/free-brands-svg-icons@7.1.0':
resolution: {integrity: sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==}
engines: {node: '>=6'}
'@fortawesome/free-regular-svg-icons@6.7.2':
resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==}
'@fortawesome/free-regular-svg-icons@7.1.0':
resolution: {integrity: sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==}
engines: {node: '>=6'}
'@fortawesome/free-solid-svg-icons@6.7.2':
resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==}
'@fortawesome/free-solid-svg-icons@7.1.0':
resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
engines: {node: '>=6'}
'@fortawesome/react-fontawesome@0.2.6':
resolution: {integrity: sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==}
deprecated: v0.2.x is no longer supported. Unless you are still using FontAwesome 5, please update to v3.1.1 or greater.
peerDependencies:
'@fortawesome/fontawesome-svg-core': ~1 || ~6 || ~7
react: ^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0
@ -6485,27 +6486,27 @@ snapshots:
tslib: 2.8.1
typescript: 4.8.4
'@fortawesome/fontawesome-common-types@6.7.2': {}
'@fortawesome/fontawesome-common-types@7.1.0': {}
'@fortawesome/fontawesome-svg-core@6.7.2':
'@fortawesome/fontawesome-svg-core@7.1.0':
dependencies:
'@fortawesome/fontawesome-common-types': 6.7.2
'@fortawesome/fontawesome-common-types': 7.1.0
'@fortawesome/free-brands-svg-icons@6.7.2':
'@fortawesome/free-brands-svg-icons@7.1.0':
dependencies:
'@fortawesome/fontawesome-common-types': 6.7.2
'@fortawesome/fontawesome-common-types': 7.1.0
'@fortawesome/free-regular-svg-icons@6.7.2':
'@fortawesome/free-regular-svg-icons@7.1.0':
dependencies:
'@fortawesome/fontawesome-common-types': 6.7.2
'@fortawesome/fontawesome-common-types': 7.1.0
'@fortawesome/free-solid-svg-icons@6.7.2':
'@fortawesome/free-solid-svg-icons@7.1.0':
dependencies:
'@fortawesome/fontawesome-common-types': 6.7.2
'@fortawesome/fontawesome-common-types': 7.1.0
'@fortawesome/react-fontawesome@0.2.6(@fortawesome/fontawesome-svg-core@6.7.2)(react@17.0.2)':
'@fortawesome/react-fontawesome@0.2.6(@fortawesome/fontawesome-svg-core@7.1.0)(react@17.0.2)':
dependencies:
'@fortawesome/fontawesome-svg-core': 6.7.2
'@fortawesome/fontawesome-svg-core': 7.1.0
prop-types: 15.8.1
react: 17.0.2

36
ui/v2.5/src/components/Performers/GenderIcon.tsx
View file

@ -3,6 +3,7 @@ import {
faVenus,
faTransgenderAlt,
faMars,
faNonBinary,
} from "@fortawesome/free-solid-svg-icons";
import * as GQL from "src/core/generated-graphql";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -13,21 +14,34 @@ interface IIconProps {
className?: string;
}
function genderIcon(gender: GQL.GenderEnum) {
switch (gender) {
case GQL.GenderEnum.Male:
return faMars;
case GQL.GenderEnum.Female:
return faVenus;
case GQL.GenderEnum.NonBinary:
return faNonBinary;
default:
return faTransgenderAlt;
}
}
const GenderIcon: React.FC<IIconProps> = ({ gender, className }) => {
const intl = useIntl();
if (gender) {
const icon =
gender === GQL.GenderEnum.Male
? faMars
: gender === GQL.GenderEnum.Female
? faVenus
: faTransgenderAlt;
const icon = genderIcon(gender);
// new version of fontawesome doesn't seem to support titles on icons, so adding it
// to a span instead
return (
<FontAwesomeIcon
title={intl.formatMessage({ id: "gender_types." + gender })}
className={className}
icon={icon}
/>
<span title={intl.formatMessage({ id: "gender_types." + gender })}>
<FontAwesomeIcon
data-gender={gender}
className={className}
icon={icon}
/>
</span>
);
}
return null;

22
ui/v2.5/src/components/Performers/styles.scss
View file

@ -193,17 +193,21 @@
display: flex;
}
.fa-mars {
color: #89cff0;
}
.gender-icon {
&[data-gender="FEMALE"],
&[data-gender="TRANSGENDER_FEMALE"] {
color: #f38cac;
}
.fa-venus {
color: #f38cac;
}
&[data-gender="MALE"],
&[data-gender="TRANSGENDER_MALE"] {
color: #89cff0;
}
.fa-transgender,
.fa-transgender-alt {
color: #c8a2c8;
&[data-gender="NON_BINARY"],
&[data-gender="INTERSEX"] {
color: #c8a2c8;
}
}
.performer-height .height-imperial,