diff --git a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/en-US.md b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/en-US.md index d4cd4156..2be800b0 100644 --- a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/en-US.md +++ b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/en-US.md @@ -70,8 +70,8 @@ field. The caret, selection, undo, IME composition and clipboard shortcuts are t copy under the frame. The error row swaps its whole message at once. 6. **Meter row**: 12 px below the field or its error row. Four equal segments, 4 px tall, with 5 px gaps, on a track in the border color. -7. **Strength word**: a 72 px slot at the end of the meter row, 12 px from the meter, right aligned, in the medium - weight of the small body size. It is empty while the field is empty. +7. **Strength word**: At the end of the meter row, a slot at least 72 px wide that grows for localized labels, + 12 px from the meter, right aligned, in the medium weight of the small body size. It is empty while the field is empty. 8. **Requirement list** (`Rules`): 16 px below the meter, 6 px between rules. Each row has a 16 px circle that gains a faint success tint and a tick when the rule is met, then the rule label. An unmet rule with a `Remaining` function also shows a rolling count such as "4 more" in the muted color. diff --git a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-CN.md b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-CN.md index f256bb5a..2bb906e5 100644 --- a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-CN.md +++ b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-CN.md @@ -1,7 +1,7 @@ --- title: 密码强度 summary: 在输入新密码时显示其强度。 -source-hash: 03a81b19e445 +source-hash: 1b9e076740df --- @@ -48,7 +48,7 @@ source-hash: 03a81b19e445 4. **显示切换按钮**：位于外框末端的 34 px 方形按钮，圆角 13 px，内含 18 px 的眼睛图标。按下时缩放至 94%；显示密码时，它会报告其开启状态。 5. **说明行与错误行**（`Description`、`ErrorMessage`）：与 `Input` 共用的辅助行和错误行，位于外框下方，12 px 文案。错误行会整体替换其消息。 6. **强度计行**：位于字段或其错误行下方 12 px。四段等宽的 4 px 高色段，间隔 5 px，底色为边框颜色。 -7. **强度文字**：强度计行末端的 72 px 区域，与强度计相距 12 px，右对齐，使用小号正文的中等字重。字段为空时它也为空。 +7. **强度文字**：强度计行末端至少 72 px 的区域，随本地化文字增宽，与强度计相距 12 px，右对齐，使用小号正文的中等字重。字段为空时它也为空。 8. **规则列表**（`Rules`）：位于强度计下方 16 px，规则之间间隔 6 px。每行有一个 16 px 的圆圈，规则满足时圆圈带淡淡的成功色并显示对勾，之后是规则文字。未满足且带有 `Remaining` 函数的规则，还会以弱化颜色显示滚动计数，例如“还差 4 个”。 ### 强度等级 diff --git a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-TW.md b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-TW.md index a2ab2aef..73ad8e50 100644 --- a/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-TW.md +++ b/gallery/TKCode.Arc.Gallery/Docs/TextFields/PasswordStrength/zh-TW.md @@ -1,7 +1,7 @@ --- title: 密碼強度 summary: 在輸入新密碼時顯示其強度。 -source-hash: 03a81b19e445 +source-hash: 1b9e076740df --- @@ -48,7 +48,7 @@ source-hash: 03a81b19e445 4. **顯示切換按鈕**：位於外框末端的 34 px 方形按鈕，圓角 13 px，內含 18 px 的眼睛圖示。按下時縮放至 94%；顯示密碼時，它會回報其開啟狀態。 5. **說明列與錯誤列**（`Description`、`ErrorMessage`）：與 `Input` 共用的輔助列和錯誤列，位於外框下方，12 px 文案。錯誤列會整則替換其訊息。 6. **強度計列**：位於欄位或其錯誤列下方 12 px。四段等寬的 4 px 高色段，間隔 5 px，底色為邊框顏色。 -7. **強度文字**：強度計列末端的 72 px 區域，與強度計相距 12 px，靠右對齊，使用小號內文的中等字重。欄位為空時它也會是空的。 +7. **強度文字**：強度計列末端至少 72 px 的區域，隨本地化文字增寬，與強度計相距 12 px，靠右對齊，使用小號內文的中等字重。欄位為空時它也會是空的。 8. **規則清單**（`Rules`）：位於強度計下方 16 px，規則之間間隔 6 px。每列有一個 16 px 的圓圈，規則符合時圓圈帶淡淡的成功色並顯示勾號，之後是規則文字。未符合且帶有 `Remaining` 函式的規則，還會以淡化顏色顯示滾動計數，例如「還差 4 個」。 ### 強度等級 diff --git a/src/TKCode.Arc/TextFields/PasswordStrength/PasswordStrengthToken.cs b/src/TKCode.Arc/TextFields/PasswordStrength/PasswordStrengthToken.cs index af04d8fc..de12f244 100644 --- a/src/TKCode.Arc/TextFields/PasswordStrength/PasswordStrengthToken.cs +++ b/src/TKCode.Arc/TextFields/PasswordStrength/PasswordStrengthToken.cs @@ -20,7 +20,7 @@ internal sealed class PasswordStrengthToken : AbstractControlDesignToken public double SegmentHeight { get; set; } public double SegmentGap { get; set; } - /// The strength word's fixed slot: 4.5rem, 12px from the meter, 1.4em tall. + /// The strength word's minimum slot: 4.5rem, growing for localized labels, 12px from the meter, 1.4em tall. public double WordWidth { get; set; } public Thickness WordMargin { get; set; } public double WordLineHeight { get; set; } diff --git a/src/TKCode.Arc/TextFields/PasswordStrength/Themes/PasswordStrengthTheme.axaml b/src/TKCode.Arc/TextFields/PasswordStrength/Themes/PasswordStrengthTheme.axaml index bd46188d..53acfab7 100644 --- a/src/TKCode.Arc/TextFields/PasswordStrength/Themes/PasswordStrengthTheme.axaml +++ b/src/TKCode.Arc/TextFields/PasswordStrength/Themes/PasswordStrengthTheme.axaml @@ -88,7 +88,7 @@ StrongTone="{arc:ArcDesignTokenResource Success}" /> ().Single(); + var meter = field.GetVisualDescendants().OfType().Single(); + var drawing = new DrawingGroup(); + using (var context = drawing.Open()) + { + word.Render(context); + } + var bounds = drawing.GetBounds(); + var textOrigin = word.TranslatePoint(default, window)!.Value; + var meterOrigin = meter.TranslatePoint(default, window)!.Value; + var fieldOrigin = field.TranslatePoint(default, window)!.Value; + (textOrigin.X + bounds.Left - meterOrigin.X - meter.Bounds.Width) + .ShouldBeGreaterThanOrEqualTo(11.5, label); + (textOrigin.X + bounds.Right).ShouldBeLessThanOrEqualTo(fieldOrigin.X + width + 0.5); + word.Bounds.Width.ShouldBeGreaterThanOrEqualTo(72); + meter.Bounds.Width.ShouldBeGreaterThan(0); + } + } + finally + { + window.Close(); + } + } + [Theory] [InlineData("", 0, false)] [InlineData("Abc1!", 1, true)]