lazarus.fresnel/demo/ButtonGenerator/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, DemoSlider,
  DemoCheckBox;

type

  { TFresnelForm1 }

  TFresnelForm1 = class(TFresnelForm)
    procedure FresnelForm1Create(Sender: TObject);
  private
    procedure OnPropChange(Sender: TObject);
    procedure UpdateButton;
  public
    ButtonDiv: TDiv;
    ButtonLabel: TLabel;
    FontSizeSlider: TDemoSlider;
    PaddingVerticalSlider: TDemoSlider;
    BorderWidthSlider: TDemoSlider;
    BorderRadiusDiv: TDiv;
    BorderRadiusLabel: TLabel;
    BorderRadiusTopLeftChkBox: TDemoCheckBox;
    BorderRadiusTopRightChkBox: TDemoCheckBox;
    BorderRadiusBottomLeftChkBox: TDemoCheckBox;
    BorderRadiusBottomRightChkBox: TDemoCheckBox;
    BorderRadiusSlider: TDemoSlider;
    TextShadowChkBox: TDemoCheckBox;
    TextShadowVertPosSlider: TDemoSlider;
    TextShadowHorzPosSlider: TDemoSlider;
    TextShadowBlurRadiusSlider: TDemoSlider;
  end;

var
  FresnelForm1: TFresnelForm1;

implementation

{$R *.lfm}

{ TFresnelForm1 }

procedure TFresnelForm1.FresnelForm1Create(Sender: TObject);
begin
  Stylesheet.Add(TDemoSlider.cStyle);
  Stylesheet.Add(TDemoCheckBox.cStyle);

  Stylesheet.Add('#ButtonDiv {'
    +'background:#44c767;'
    +'border:1px solid #18ab29;'
    +'border-radius:16px;'
    +'padding:16px 31px;'
    +'font-size:15px; font-family:Arial; font-weight:bold;'
    +'color:#fff;'
    +'text-shadow: 1px 1px 0px #2f6627;'
    +'}'
    +'.CheckBox {'+LineEnding
    +'  margin: 6px;'+LineEnding
    +'}'+LineEnding
    +'.Slider {'+LineEnding
    +'  margin: 6px;'+LineEnding
    +'}'+LineEnding
    );

  // font-size slider
  FontSizeSlider:=TDemoSlider.Create(Self);
  with FontSizeSlider do begin
    Name:='FontSizeSlider';
    Caption:='Font Size:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=5;
    MaxPosition:=40;
    Position:=12;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // padding vertical slider
  PaddingVerticalSlider:=TDemoSlider.Create(Self);
  with PaddingVerticalSlider do begin
    Name:='PaddingVerticalSlider';
    Caption:='Vertical Padding:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=0;
    MaxPosition:=50;
    Position:=16;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // border-width slider
  BorderWidthSlider:=TDemoSlider.Create(Self);
  with BorderWidthSlider do begin
    Name:='BorderWidthSlider';
    Caption:='Border Width:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=0;
    MaxPosition:=10;
    Position:=1;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // border-radius corners: four checkboxes
  BorderRadiusDiv:=TDiv.Create(Self);
  with BorderRadiusDiv do begin
    Name:='BorderRadiusDiv';
    Style:='margin: 6px;';
    Parent:=Self;
  end;

  BorderRadiusLabel:=TLabel.Create(Self);
  with BorderRadiusLabel do begin
    Name:='BorderRadiusLabel';
    Caption:='Border Corner Radius:';
    Parent:=BorderRadiusDiv;
  end;

  BorderRadiusTopLeftChkBox:=TDemoCheckBox.Create(Self);
  with BorderRadiusTopLeftChkBox do begin
    Name:='BorderRadiusTopLeftChkBox';
    Caption:='Top Left';
    Checked:=true;
    Parent:=BorderRadiusDiv;
    OnChange:=@OnPropChange;
  end;

  BorderRadiusTopRightChkBox:=TDemoCheckBox.Create(Self);
  with BorderRadiusTopRightChkBox do begin
    Name:='BorderRadiusTopRightChkBox';
    Caption:='Top Right';
    Checked:=true;
    Parent:=BorderRadiusDiv;
    OnChange:=@OnPropChange;
  end;

  BorderRadiusBottomLeftChkBox:=TDemoCheckBox.Create(Self);
  with BorderRadiusBottomLeftChkBox do begin
    Name:='BorderRadiusBottomLeftChkBox';
    Caption:='Bottom Left';
    Checked:=true;
    Parent:=BorderRadiusDiv;
    OnChange:=@OnPropChange;
  end;

  BorderRadiusBottomRightChkBox:=TDemoCheckBox.Create(Self);
  with BorderRadiusBottomRightChkBox do begin
    Name:='BorderRadiusBottomRightChkBox';
    Caption:='Bottom Right';
    Checked:=true;
    Parent:=BorderRadiusDiv;
    OnChange:=@OnPropChange;
  end;

  // slider for border radius
  BorderRadiusSlider:=TDemoSlider.Create(Self);
  with BorderRadiusSlider do begin
    Name:='BorderRadiusSlider';
    Caption:='Border Radius:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=0;
    MaxPosition:=50;
    Position:=16;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // text-shadow checkbox
  TextShadowChkBox:=TDemoCheckBox.Create(Self);
  with TextShadowChkBox do begin
    Name:='TextShadowChkBox';
    Caption:='Text Shadow';
    Checked:=true;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // slider for text-shadow vertical position
  TextShadowVertPosSlider:=TDemoSlider.Create(Self);
  with TextShadowVertPosSlider do begin
    Name:='TextShadowVertPosSlider';
    Caption:='Vertical Position:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=-30;
    MaxPosition:=30;
    Position:=1;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // slider for text-shadow horizontal position
  TextShadowHorzPosSlider:=TDemoSlider.Create(Self);
  with TextShadowHorzPosSlider do begin
    Name:='TextShadowHorzPosSlider';
    Caption:='Horizontal Position:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=-30;
    MaxPosition:=30;
    Position:=1;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // slider for text-shadow horizontal position
  TextShadowBlurRadiusSlider:=TDemoSlider.Create(Self);
  with TextShadowBlurRadiusSlider do begin
    Name:='TextShadowBlurRadiusSlider';
    Caption:='Blur Radius:';
    Style:='width: 150px';
    ValueFormat:='%.0fpx';
    MinPosition:=0;
    MaxPosition:=30;
    Position:=0;
    Parent:=Self;
    OnChange:=@OnPropChange;
  end;

  // the Button
  ButtonDiv:=TDiv.Create(Self);
  with ButtonDiv do begin
    Name:='ButtonDiv';
    Parent:=Self;
  end;
  ButtonLabel:=TLabel.Create(Self);
  with ButtonLabel do begin
    Name:='ButtonLabel';
    Caption:='Button Text';
    Parent:=ButtonDiv;
  end;

  UpdateButton;
end;

procedure TFresnelForm1.OnPropChange(Sender: TObject);
begin
  UpdateButton;
end;

procedure TFresnelForm1.UpdateButton;
var
  s, NewStyle, Radius: String;
begin
  if ButtonDiv=nil then exit;
  NewStyle:=
     'font-size:'+FloatToStr(FontSizeSlider.Position)+'px;'
    +'padding: '+FloatToStr(PaddingVerticalSlider.Position)+'px 31px;'
    +'border-width:'+FloatToStr(BorderWidthSlider.Position)+'px;';

  Radius:=FloatToStr(BorderRadiusSlider.Position)+'px';
  s:='';
  if BorderRadiusTopLeftChkBox.Checked then
    s:=Radius
  else
    s:='0';
  if BorderRadiusTopRightChkBox.Checked then
    s+=' '+Radius
  else
    s+=' 0';
  if BorderRadiusBottomLeftChkBox.Checked then
    s+=' '+Radius
  else
    s+=' 0';
  if BorderRadiusBottomRightChkBox.Checked then
    s+=' '+Radius
  else
    s+=' 0';
  NewStyle+='border-radius:'+s+';';

  s:='';
  if TextShadowChkBox.Checked then
  begin
    s:=FloatToStr(TextShadowHorzPosSlider.Position)
      +' '+FloatToStr(TextShadowVertPosSlider.Position)
      +' '+FloatToStr(TextShadowBlurRadiusSlider.Position)
      +' #2f6627';
  end;
  NewStyle+='text-shadow:'+s+';';

  ButtonDiv.Style:=NewStyle;
end;

end.