feat(android): follow the desktop's look, and a cross to clear the search

Section captions go uppercase, small and muted, the way the desktop app labels TWO-FACTOR (TOTP) or CUSTOM FIELDS - the eye jumps between captions without confusing them for values. Each field sits in its own bordered box: it is the border that separates values, not the spacing. Buttons take the same thin border instead of a solid grey block.

The 2FA code turns cyan and gains its countdown bar, so a glance says whether there is time to copy it. The seconds leave the text - the bar says it better.

And a cross clears the search, shown only when there is something to clear. A label rather than a button: inside a field, a cross is touched, not commanded.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-08-15 19:19:22 +01:00
parent e128b85658
commit aba873b9cc
2 changed files with 102 additions and 26 deletions
+33 -7
View File
@@ -27,6 +27,7 @@ const
COL_BG = TAlphaColor($FF0F172A); // fond general
COL_SURFACE = TAlphaColor($FF1E293B); // blocs poses dessus
COL_RAISED = TAlphaColor($FF334155); // bouton au repos
COL_LINE = TAlphaColor($FF334155); // filet des cadres
COL_TEXT = TAlphaColor($FFE2E8F0);
COL_MUTED = TAlphaColor($FF94A3B8);
COL_ACCENT = TAlphaColor($FF22D3EE);
@@ -45,9 +46,12 @@ function FlatButton(AParent: TFmxObject; const AText: string;
procedure SetButtonText(AButton: TRectangle; const AText: string);
procedure SetButtonEnabled(AButton: TRectangle; AEnabled: Boolean);
/// Bloc de fond, coins arrondis.
/// Bloc de fond, coins arrondis, filet discret.
function Surface(AParent: TFmxObject): TRectangle;
/// Intitule de section : majuscules, petit, discret.
procedure SectionLabel(ALabel: TLabel);
/// Met un libelle a la palette. AMuted pour les intitules discrets.
procedure Tint(ALabel: TLabel; ASize: Single; AMuted: Boolean = False);
@@ -108,9 +112,23 @@ begin
Result := TRectangle.Create(AParent);
Result.Parent := AParent;
Result.Fill.Color := COL_SURFACE;
Result.Stroke.Kind := TBrushKind.None;
Result.XRadius := 12;
Result.YRadius := 12;
// Filet discret plutot qu'aucune bordure : c'est lui qui detache un bloc du
// fond sans avoir a l'eclaircir, comme sur le poste Windows.
Result.Stroke.Color := COL_LINE;
Result.Stroke.Thickness := 1;
Result.XRadius := 10;
Result.YRadius := 10;
end;
/// Intitule de section : majuscules, petit, discret. C'est ce qui donne au
/// poste Windows sa lisibilite - l'oeil saute d'un intitule a l'autre sans
/// confondre avec les valeurs.
procedure SectionLabel(ALabel: TLabel);
begin
ALabel.StyledSettings := [];
ALabel.TextSettings.Font.Size := 11;
ALabel.TextSettings.FontColor := COL_MUTED;
ALabel.Text := ALabel.Text.ToUpper;
end;
function FlatButton(AParent: TFmxObject; const AText: string;
@@ -121,12 +139,20 @@ var
begin
Result := TRectangle.Create(AParent);
Result.Parent := AParent;
Result.Stroke.Kind := TBrushKind.None;
Result.XRadius := 10;
Result.YRadius := 10;
Result.Cursor := crHandPoint;
if APrimary then Result.Fill.Color := COL_ACCENT
else Result.Fill.Color := COL_RAISED;
if APrimary then
begin
Result.Fill.Color := COL_ACCENT;
Result.Stroke.Kind := TBrushKind.None;
end
else
begin
Result.Fill.Color := COL_SURFACE;
Result.Stroke.Color := COL_LINE;
Result.Stroke.Thickness := 1;
end;
Result.OnClick := AOnClick;
LCaption := TLabel.Create(Result);