After long long time(years) I have few days to build my "dream" of bring modern UI to LCL. I'm not finished yet. But progress is promising.
Inspiration:
https://appstack.bootlab.io/dashboard-default.htmlI have two units (cssbase - parsing css, and layouting nodes(elements)) and CSSCtrls (now with only one control TCSSShape).
With only few basic css styles we can create complicated "controls". No more OnPaint for me
.
Working hard (in free time) to finish this my little baby.
Source code to generate "charts" on right side:
procedure TForm1.Button1Click(Sender: TObject);
var
sh: TCSSShape;
procedure AddChart(AIcon, AIconColor, AValue, AText: String);
var
container, icon, body, node: THtmlNode;
btn: TButton;
begin
container := THtmlNode.Create('display:inline-block; background-color:white;margin:20px;padding:20px;border:1px solid #F1F5F9;');
container.Id := 'container';
icon := THtmlNode.Create('display:inline-block;');
icon.Id := 'icon';
icon.AddNode( HTMLFa('font:40px;padding:10px;color:'+AIconColor+';', AIcon, 'faicon'));
body := THtmlNode.Create('display:inline-block;');
body.AddNode( HTMLSpan('display:block;font:20px;color:black;', AValue));
body.AddNode( HTMLSpan('font:10px;color:rgb(73, 80, 87);', AText));
btn := TButton.Create(Self);
btn.Caption := 'I''m LCL!';
btn.AutoSize := True;
btn.Align := alCustom;
btn.Parent := HomeScrollBox;
node := THtmlNode.Create('display:inline-block;margin-left:20px;');
node.AlignControl := btn;
body.AddNode(node);
container.AddNode(icon);
container.AddNode(body);
sh.Body.AddNode( container);
end;
begin
sh := TCSSShape.Create(Self);
sh.AutoSize := True;
sh.Top := 0;
sh.Align := alTop;
sh.Body.InlineStyle := 'margin:10px;';
AddChart('f07a', '#47BAC1', '2.562', 'Sales Today');
AddChart('f201', '#FCC100', '17.212', 'Visitors Today');
AddChart('f153', '#5FC27E', '$ 24.300', 'Total Earnings');
sh.Parent := HomeScrollBox;
end;
In this case there is only one LCL control and 3 main boxes (containers). As you can see, we can have standard LCL control "inside" non TWinControl (TCSSSHape is TGraphicControl) and CSS control layout even this control correctly!
But Left "menu" is placed on another LCL TScrollBox and each "menu item" is LCL control (TCSSShape). Code to generate this left panel is here:
procedure AddItem(AName: String; AIcon: String);
var
Item: TCSSShape;
begin
Item := TCSSShape.Create(Self);
Item.Align := alTop;
Item.AutoSize := True;
Item.Body.InlineStyle := 'color:rgb(173, 181, 189);';
Item.Body.HoverStyle := 'background-color:#2D3646; color:#e9ecef;';
Item.Body.OnClick := @Button1Click; // click on whole "button"
if AIcon = '' then AIcon := 'f2b9';
Item.Body.AddNode( HTMLFa('font:18px;margin-left:20px;', AIcon)); // left category icon
Item.Body.AddNode( HTMLSpan('font:10px; padding:15px 10px; padding-right:0px;', AName)); // category caption
Item.Body.AddNode( HTMLFa('font:15px;', 'f107')); // drop down icon
// some random badges
if MenuScrollBox.ControlCount mod 4 = 0 then Item.Body.AddNode( HTMLSpan('font:7px;margin-left:10px; padding:2px 5px; color:white; background-color:#47BAC1', 'New'))
else
if MenuScrollBox.ControlCount mod 3 = 0 then Item.Body.AddNode( HTMLSpan('font:7px;margin-left:10px; padding:2px 5px; color:white; background-color:#A180DA', 'Special'));
Item.Parent := MenuScrollBox;
Item.Top := 1000 + MenuScrollBox.ControlCount;
end;
var
sh: TCSSShape;
begin
AddLogo;
AddItem('Dashboard', 'f080');
AddItem('Pages','f0f6');
AddItem('Auth', 'f084');
AddItem('Layouts', 'f26c');
AddItem('Forms', 'f2d2');
AddItem('Icons', 'f08a');
AddItem('Tables', 'f0ce');
AddItem('Buttons', 'f0ca');
AddItem('Calendar', 'f073');
AddItem('Maps', 'f278');
AddItem('Settings', 'f013');
Next step is implementing CSS class for better styling control.