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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user