From 3bc0de3f3a80ffa219723eabce859cdc48883cfb Mon Sep 17 00:00:00 2001 From: WithoutPants <53250216+WithoutPants@users.noreply.github.com> Date: Wed, 9 Nov 2022 11:10:57 +1100 Subject: [PATCH] Show imperial units for height and weight (#3097) * Show imperial units for height and weight * Fix migration note index --- .../PerformerDetailsPanel.tsx | 79 ++++++++++++++++--- .../PerformerDetails/PerformerEditPanel.tsx | 4 +- .../Performers/PerformerListTable.tsx | 35 +++++++- ui/v2.5/src/components/Performers/styles.scss | 24 ++++++ ui/v2.5/src/docs/en/Changelog/v0180.md | 1 + ui/v2.5/src/docs/en/MigrationNotes/38.md | 1 - ui/v2.5/src/docs/en/MigrationNotes/39.md | 1 + ui/v2.5/src/docs/en/MigrationNotes/index.ts | 4 +- ui/v2.5/src/utils/units.ts | 11 +++ 9 files changed, 141 insertions(+), 19 deletions(-) delete mode 100644 ui/v2.5/src/docs/en/MigrationNotes/38.md create mode 100644 ui/v2.5/src/docs/en/MigrationNotes/39.md create mode 100644 ui/v2.5/src/utils/units.ts diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx index 52211ea0e..e8c4ffc3f 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -4,6 +4,7 @@ import { TagLink } from "src/components/Shared"; import * as GQL from "src/core/generated-graphql"; import { TextUtils, getStashboxBase, getCountryByISO } from "src/utils"; import { TextField, URLField } from "src/utils/field"; +import { cmToImperial, kgToLbs } from "src/utils/units"; interface IPerformerDetails { performer: GQL.PerformerDataFragment; @@ -75,22 +76,59 @@ export const PerformerDetailsPanel: React.FC = ({ if (!height) { return ""; } - return intl.formatNumber(height, { - style: "unit", - unit: "centimeter", - unitDisplay: "narrow", - }); + + const [feet, inches] = cmToImperial(height); + + return ( + + + {intl.formatNumber(height, { + style: "unit", + unit: "centimeter", + unitDisplay: "short", + })} + + + {intl.formatNumber(feet, { + style: "unit", + unit: "foot", + unitDisplay: "narrow", + })} + {intl.formatNumber(inches, { + style: "unit", + unit: "inch", + unitDisplay: "narrow", + })} + + + ); }; const formatWeight = (weight?: number | null) => { if (!weight) { return ""; } - return intl.formatNumber(weight, { - style: "unit", - unit: "kilogram", - unitDisplay: "narrow", - }); + + const lbs = kgToLbs(weight); + + return ( + + + {intl.formatNumber(weight, { + style: "unit", + unit: "kilogram", + unitDisplay: "short", + })} + + + {intl.formatNumber(lbs, { + style: "unit", + unit: "pound", + unitDisplay: "short", + })} + + + ); }; return ( @@ -120,8 +158,25 @@ export const PerformerDetailsPanel: React.FC = ({ getCountryByISO(performer.country, intl.locale) ?? performer.country } /> - - + + {!!performer.height_cm && ( + <> +
+ +
+
{formatHeight(performer.height_cm)}
+ + )} + + {!!performer.weight && ( + <> +
+ +
+
{formatWeight(performer.weight)}
+ + )} + diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx index 752cb4e48..6f7df9cf8 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx @@ -909,12 +909,10 @@ export const PerformerEditPanel: React.FC = ({ {renderField("eye_color")} {renderField("height_cm", { type: "number", - messageID: "height", - placeholder: intl.formatMessage({ id: "height_cm" }), })} {renderField("weight", { type: "number", - placeholder: intl.formatMessage({ id: "weight_kg" }), + messageID: "weight_kg", })} {renderField("measurements")} {renderField("fake_tits")} diff --git a/ui/v2.5/src/components/Performers/PerformerListTable.tsx b/ui/v2.5/src/components/Performers/PerformerListTable.tsx index 1a21af4b3..74a5fabc1 100644 --- a/ui/v2.5/src/components/Performers/PerformerListTable.tsx +++ b/ui/v2.5/src/components/Performers/PerformerListTable.tsx @@ -8,6 +8,7 @@ import * as GQL from "src/core/generated-graphql"; import { Icon } from "src/components/Shared"; import { NavUtils } from "src/utils"; import { faHeart } from "@fortawesome/free-solid-svg-icons"; +import { cmToImperial } from "src/utils/units"; interface IPerformerListTableProps { performers: GQL.PerformerDataFragment[]; @@ -18,6 +19,38 @@ export const PerformerListTable: React.FC = ( ) => { const intl = useIntl(); + const formatHeight = (height?: number | null) => { + if (!height) { + return ""; + } + + const [feet, inches] = cmToImperial(height); + + return ( + + + {intl.formatNumber(height, { + style: "unit", + unit: "centimeter", + unitDisplay: "short", + })} + + + {intl.formatNumber(feet, { + style: "unit", + unit: "foot", + unitDisplay: "narrow", + })} + {intl.formatNumber(inches, { + style: "unit", + unit: "inch", + unitDisplay: "narrow", + })} + + + ); + }; + const renderPerformerRow = (performer: GQL.PerformerDataFragment) => ( @@ -58,7 +91,7 @@ export const PerformerListTable: React.FC = ( {performer.birthdate} - {performer.height_cm} + {!!performer.height_cm && formatHeight(performer.height_cm)} ); diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss index a36e9263a..57ebdc046 100644 --- a/ui/v2.5/src/components/Performers/styles.scss +++ b/ui/v2.5/src/components/Performers/styles.scss @@ -146,3 +146,27 @@ .fa-transgender-alt { color: #c8a2c8; } + +.performer-height { + .height-imperial { + &::before { + content: " ("; + } + + &::after { + content: ")"; + } + } +} + +.performer-weight { + .weight-imperial { + &::before { + content: " ("; + } + + &::after { + content: ")"; + } + } +} diff --git a/ui/v2.5/src/docs/en/Changelog/v0180.md b/ui/v2.5/src/docs/en/Changelog/v0180.md index 70f9befbe..2f6fbc21a 100644 --- a/ui/v2.5/src/docs/en/Changelog/v0180.md +++ b/ui/v2.5/src/docs/en/Changelog/v0180.md @@ -4,6 +4,7 @@ * Added tag description filter criterion. ([#3011](https://github.com/stashapp/stash/pull/3011)) ### 🎨 Improvements +* Also show imperial units for performer height and weight. ([#3097](https://github.com/stashapp/stash/pull/3097)) * Limit number of items in selector drop-downs to 200. ([#3062](https://github.com/stashapp/stash/pull/3062)) * Changed Performer height to be numeric, and changed filtering accordingly. ([#3060](https://github.com/stashapp/stash/pull/3060)) diff --git a/ui/v2.5/src/docs/en/MigrationNotes/38.md b/ui/v2.5/src/docs/en/MigrationNotes/38.md deleted file mode 100644 index 8e12a3153..000000000 --- a/ui/v2.5/src/docs/en/MigrationNotes/38.md +++ /dev/null @@ -1 +0,0 @@ -This migration changes performer height values from strings to numbers. Non-numeric performer height values **will be erased during this migration**. \ No newline at end of file diff --git a/ui/v2.5/src/docs/en/MigrationNotes/39.md b/ui/v2.5/src/docs/en/MigrationNotes/39.md new file mode 100644 index 000000000..f3f9d74e6 --- /dev/null +++ b/ui/v2.5/src/docs/en/MigrationNotes/39.md @@ -0,0 +1 @@ +This migration changes performer height values from strings to numbers. The migration converts the _first number in the string_ to an integer value. Height values that cannot be converted this way **will be erased during this migration**. \ No newline at end of file diff --git a/ui/v2.5/src/docs/en/MigrationNotes/index.ts b/ui/v2.5/src/docs/en/MigrationNotes/index.ts index ead5b9ff7..407c49eeb 100644 --- a/ui/v2.5/src/docs/en/MigrationNotes/index.ts +++ b/ui/v2.5/src/docs/en/MigrationNotes/index.ts @@ -1,9 +1,9 @@ import migration32 from "./32.md"; -import migration38 from "./38.md"; +import migration39 from "./39.md"; type Module = typeof migration32; export const migrationNotes: Record = { 32: migration32, - 38: migration38, + 39: migration39, }; diff --git a/ui/v2.5/src/utils/units.ts b/ui/v2.5/src/utils/units.ts new file mode 100644 index 000000000..63a2199d4 --- /dev/null +++ b/ui/v2.5/src/utils/units.ts @@ -0,0 +1,11 @@ +export function cmToImperial(cm: number) { + const cmInInches = 0.393700787; + const inchesInFeet = 12; + const inches = Math.floor(cm * cmInInches); + const feet = Math.floor(inches / inchesInFeet); + return [feet, inches % inchesInFeet]; +} + +export function kgToLbs(kg: number) { + return Math.floor(kg * 2.20462262185); +}