Skip to content

Commit a8cdd57

Browse files
version 3.3.3
- Added Notification Badge into all Styled Buttons - Fixed apply StyleDrawType in component editor
1 parent f76984d commit a8cdd57

11 files changed

+493
-78
lines changed

Demos/StyledButtonsDemo/MainFormUnit.dfm

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ object MainForm: TMainForm
4444
Font.Height = -16
4545
Font.Name = 'Arial'
4646
Font.Style = []
47-
ImageName = 'Basic-Color'
4847
Images = VirtualImageList32
4948
ParentFont = False
5049
PopupMenu = PopupMenu
@@ -58,7 +57,6 @@ object MainForm: TMainForm
5857
Height = 50
5958
ImageAlignment = iaCenter
6059
ImageIndex = 11
61-
ImageName = 'launch-white'
6260
Images = VirtualImageList32
6361
TabOrder = 1
6462
OnClick = StyledButtonSquareClick
@@ -72,7 +70,6 @@ object MainForm: TMainForm
7270
Height = 50
7371
ImageAlignment = iaCenter
7472
ImageIndex = 18
75-
ImageName = 'home-black'
7673
Images = VirtualImageList32
7774
TabOrder = 2
7875
OnClick = StyledButtonCircularClick
@@ -963,7 +960,7 @@ object MainForm: TMainForm
963960
StyleClass = 'Amber'
964961
end
965962
end
966-
object GroupBox1: TGroupBox
963+
object IconButtonsGroupBox: TGroupBox
967964
AlignWithMargins = True
968965
Left = 3
969966
Top = 319
@@ -974,17 +971,18 @@ object MainForm: TMainForm
974971
TabOrder = 6
975972
object btn_IconHome: TStyledButton
976973
AlignWithMargins = True
977-
Left = 110
974+
Left = 107
978975
Top = 18
979-
Width = 48
976+
Width = 45
980977
Height = 45
981978
Margins.Left = 20
982979
Margins.Right = 20
983980
Align = alLeft
984981
ImageAlignment = iaCenter
985982
ImageIndex = 0
986-
ImageName = 'home-deeppurple'
987983
Images = VirtualImageList32
984+
NotificationBadge.Color = clFuchsia
985+
NotificationBadge.NotificationCount = 100
988986
TabOrder = 1
989987
StyleDrawType = btEllipse
990988
StyleFamily = 'Angular-Light'
@@ -995,15 +993,15 @@ object MainForm: TMainForm
995993
AlignWithMargins = True
996994
Left = 22
997995
Top = 18
998-
Width = 48
996+
Width = 45
999997
Height = 45
1000998
Margins.Left = 20
1001999
Margins.Right = 20
10021000
Align = alLeft
10031001
ImageAlignment = iaCenter
10041002
ImageIndex = 10
1005-
ImageName = 'dots-vertical-black'
10061003
Images = VirtualImageList32
1004+
NotificationBadge.CustomText = '!'
10071005
TabOrder = 0
10081006
StyleDrawType = btEllipse
10091007
StyleFamily = 'Angular-Light'
@@ -1012,36 +1010,38 @@ object MainForm: TMainForm
10121010
end
10131011
object btn_IconMenu: TStyledButton
10141012
AlignWithMargins = True
1015-
Left = 198
1013+
Left = 192
10161014
Top = 18
1017-
Width = 48
1015+
Width = 45
10181016
Height = 45
10191017
Margins.Left = 20
10201018
Margins.Right = 20
10211019
Align = alLeft
10221020
ImageAlignment = iaCenter
10231021
ImageIndex = 4
1024-
ImageName = 'menu-amber'
10251022
Images = VirtualImageList32
1023+
NotificationBadge.NotificationCount = 5
1024+
NotificationBadge.Size = nbsSmallDot
10261025
TabOrder = 2
10271026
StyleDrawType = btEllipse
10281027
StyleFamily = 'Angular-Light'
10291028
StyleClass = 'Amber'
10301029
StyleAppearance = 'Basic'
10311030
end
1032-
object btn_IconHeart: TStyledButton
1031+
object btn_trash: TStyledButton
10331032
AlignWithMargins = True
1034-
Left = 286
1033+
Left = 362
10351034
Top = 18
1036-
Width = 48
1035+
Width = 45
10371036
Height = 45
10381037
Margins.Left = 20
10391038
Margins.Right = 20
10401039
Align = alLeft
10411040
ImageAlignment = iaCenter
1042-
ImageIndex = 8
1043-
ImageName = 'heart'
1041+
ImageIndex = 14
10441042
Images = VirtualImageList32
1043+
NotificationBadge.Color = clTeal
1044+
NotificationBadge.NotificationCount = 5
10451045
TabOrder = 3
10461046
StyleDrawType = btEllipse
10471047
StyleFamily = 'Angular-Light'
@@ -1050,23 +1050,42 @@ object MainForm: TMainForm
10501050
end
10511051
object btn_IconLaunchDisabled: TStyledButton
10521052
AlignWithMargins = True
1053-
Left = 374
1053+
Left = 447
10541054
Top = 18
1055-
Width = 48
1055+
Width = 45
10561056
Height = 45
10571057
Margins.Left = 20
10581058
Margins.Right = 20
10591059
Align = alLeft
10601060
Enabled = False
10611061
ImageAlignment = iaCenter
10621062
ImageIndex = 12
1063-
ImageName = 'launch-black'
10641063
Images = VirtualImageList32
10651064
TabOrder = 4
10661065
StyleDrawType = btEllipse
10671066
StyleFamily = 'Angular-Light'
10681067
StyleAppearance = 'Basic'
10691068
end
1069+
object btn_IconHeart: TStyledButton
1070+
AlignWithMargins = True
1071+
Left = 277
1072+
Top = 18
1073+
Width = 45
1074+
Height = 45
1075+
Margins.Left = 20
1076+
Margins.Right = 20
1077+
Align = alLeft
1078+
ImageAlignment = iaCenter
1079+
ImageIndex = 8
1080+
Images = VirtualImageList32
1081+
NotificationBadge.Color = clOlive
1082+
NotificationBadge.NotificationCount = 12
1083+
TabOrder = 5
1084+
StyleDrawType = btEllipse
1085+
StyleFamily = 'Angular-Light'
1086+
StyleClass = 'Warn'
1087+
StyleAppearance = 'Basic'
1088+
end
10701089
end
10711090
object GroupBox2: TGroupBox
10721091
AlignWithMargins = True
@@ -1088,7 +1107,6 @@ object MainForm: TMainForm
10881107
Align = alLeft
10891108
ImageAlignment = iaCenter
10901109
ImageIndex = 13
1091-
ImageName = 'trash-white'
10921110
Images = VirtualImageList32
10931111
TabOrder = 1
10941112
StyleRadius = 8
@@ -1106,7 +1124,6 @@ object MainForm: TMainForm
11061124
Align = alLeft
11071125
ImageAlignment = iaCenter
11081126
ImageIndex = 16
1109-
ImageName = 'bookmark-black'
11101127
Images = VirtualImageList32
11111128
TabOrder = 2
11121129
StyleDrawType = btEllipse
@@ -1124,7 +1141,6 @@ object MainForm: TMainForm
11241141
Align = alLeft
11251142
ImageAlignment = iaCenter
11261143
ImageIndex = 17
1127-
ImageName = 'home-white'
11281144
Images = VirtualImageList32
11291145
TabOrder = 3
11301146
StyleDrawType = btEllipse
@@ -1143,7 +1159,6 @@ object MainForm: TMainForm
11431159
Enabled = False
11441160
ImageAlignment = iaCenter
11451161
ImageIndex = 8
1146-
ImageName = 'heart'
11471162
Images = VirtualImageList32
11481163
TabOrder = 0
11491164
StyleDrawType = btEllipse
@@ -1710,7 +1725,6 @@ object MainForm: TMainForm
17101725
Caption = 'Show Editor'
17111726
Hint = 'Hint of Action'
17121727
ImageIndex = 22
1713-
ImageName = 'Basic-Color'
17141728
OnExecute = TestActionExecute
17151729
end
17161730
end

Demos/StyledButtonsDemo/MainFormUnit.pas

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,11 +129,12 @@ TMainForm = class(TForm)
129129
btn_FlatWarn: TStyledButton;
130130
btn_FlatDisabled: TStyledButton;
131131
btn_FlatAccent: TStyledButton;
132-
GroupBox1: TGroupBox;
132+
IconButtonsGroupBox: TGroupBox;
133133
btn_IconHome: TStyledButton;
134134
btn_IconDots: TStyledButton;
135135
btn_IconMenu: TStyledButton;
136136
btn_IconHeart: TStyledButton;
137+
btn_trash: TStyledButton;
137138
btn_IconLaunchDisabled: TStyledButton;
138139
GroupBox2: TGroupBox;
139140
btn_FABTrash: TStyledButton;

Demos/StyledButtonsDemo/MainFormUnitOld.dfm

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ object MainForm: TMainForm
4949
PopupMenu = PopupMenu
5050
TabOrder = 0
5151
StyleRadius = 10
52-
StyleDrawType = btRoundRect
5352
end
5453
object StyledButtonSquare: TStyledButton
5554
Left = 203
@@ -119,7 +118,6 @@ object MainForm: TMainForm
119118
Top = 70
120119
Width = 895
121120
Height = 621
122-
ActivePage = tsClassic
123121
Align = alClient
124122
Images = ImageList32
125123
TabOrder = 1
@@ -962,7 +960,7 @@ object MainForm: TMainForm
962960
StyleClass = 'Amber'
963961
end
964962
end
965-
object GroupBox1: TGroupBox
963+
object IconButtonsGroupBox: TGroupBox
966964
AlignWithMargins = True
967965
Left = 3
968966
Top = 319
@@ -973,16 +971,18 @@ object MainForm: TMainForm
973971
TabOrder = 6
974972
object btn_IconHome: TStyledButton
975973
AlignWithMargins = True
976-
Left = 110
974+
Left = 107
977975
Top = 18
978-
Width = 48
976+
Width = 45
979977
Height = 45
980978
Margins.Left = 20
981979
Margins.Right = 20
982980
Align = alLeft
983981
ImageAlignment = iaCenter
984982
ImageIndex = 0
985983
Images = ImageList32
984+
NotificationBadge.Color = clFuchsia
985+
NotificationBadge.NotificationCount = 100
986986
TabOrder = 1
987987
StyleDrawType = btEllipse
988988
StyleFamily = 'Angular-Light'
@@ -993,14 +993,15 @@ object MainForm: TMainForm
993993
AlignWithMargins = True
994994
Left = 22
995995
Top = 18
996-
Width = 48
996+
Width = 45
997997
Height = 45
998998
Margins.Left = 20
999999
Margins.Right = 20
10001000
Align = alLeft
10011001
ImageAlignment = iaCenter
10021002
ImageIndex = 10
10031003
Images = ImageList32
1004+
NotificationBadge.CustomText = '!'
10041005
TabOrder = 0
10051006
StyleDrawType = btEllipse
10061007
StyleFamily = 'Angular-Light'
@@ -1009,34 +1010,38 @@ object MainForm: TMainForm
10091010
end
10101011
object btn_IconMenu: TStyledButton
10111012
AlignWithMargins = True
1012-
Left = 198
1013+
Left = 192
10131014
Top = 18
1014-
Width = 48
1015+
Width = 45
10151016
Height = 45
10161017
Margins.Left = 20
10171018
Margins.Right = 20
10181019
Align = alLeft
10191020
ImageAlignment = iaCenter
10201021
ImageIndex = 4
10211022
Images = ImageList32
1023+
NotificationBadge.NotificationCount = 5
1024+
NotificationBadge.Size = nbsSmallDot
10221025
TabOrder = 2
10231026
StyleDrawType = btEllipse
10241027
StyleFamily = 'Angular-Light'
10251028
StyleClass = 'Amber'
10261029
StyleAppearance = 'Basic'
10271030
end
1028-
object btn_IconHeart: TStyledButton
1031+
object btn_trash: TStyledButton
10291032
AlignWithMargins = True
1030-
Left = 286
1033+
Left = 362
10311034
Top = 18
1032-
Width = 48
1035+
Width = 45
10331036
Height = 45
10341037
Margins.Left = 20
10351038
Margins.Right = 20
10361039
Align = alLeft
10371040
ImageAlignment = iaCenter
1038-
ImageIndex = 8
1041+
ImageIndex = 14
10391042
Images = ImageList32
1043+
NotificationBadge.Color = clTeal
1044+
NotificationBadge.NotificationCount = 5
10401045
TabOrder = 3
10411046
StyleDrawType = btEllipse
10421047
StyleFamily = 'Angular-Light'
@@ -1045,9 +1050,9 @@ object MainForm: TMainForm
10451050
end
10461051
object btn_IconLaunchDisabled: TStyledButton
10471052
AlignWithMargins = True
1048-
Left = 374
1053+
Left = 447
10491054
Top = 18
1050-
Width = 48
1055+
Width = 45
10511056
Height = 45
10521057
Margins.Left = 20
10531058
Margins.Right = 20
@@ -1061,6 +1066,26 @@ object MainForm: TMainForm
10611066
StyleFamily = 'Angular-Light'
10621067
StyleAppearance = 'Basic'
10631068
end
1069+
object btn_IconHeart: TStyledButton
1070+
AlignWithMargins = True
1071+
Left = 277
1072+
Top = 18
1073+
Width = 45
1074+
Height = 45
1075+
Margins.Left = 20
1076+
Margins.Right = 20
1077+
Align = alLeft
1078+
ImageAlignment = iaCenter
1079+
ImageIndex = 8
1080+
Images = ImageList32
1081+
NotificationBadge.Color = clOlive
1082+
NotificationBadge.NotificationCount = 12
1083+
TabOrder = 5
1084+
StyleDrawType = btEllipse
1085+
StyleFamily = 'Angular-Light'
1086+
StyleClass = 'Warn'
1087+
StyleAppearance = 'Basic'
1088+
end
10641089
end
10651090
object GroupBox2: TGroupBox
10661091
AlignWithMargins = True

Demos/StyledButtonsDemo/MainFormUnitOld.pas

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,11 +125,12 @@ TMainForm = class(TForm)
125125
btn_FlatWarn: TStyledButton;
126126
btn_FlatDisabled: TStyledButton;
127127
btn_FlatAccent: TStyledButton;
128-
GroupBox1: TGroupBox;
128+
IconButtonsGroupBox: TGroupBox;
129129
btn_IconHome: TStyledButton;
130130
btn_IconDots: TStyledButton;
131131
btn_IconMenu: TStyledButton;
132132
btn_IconHeart: TStyledButton;
133+
btn_trash: TStyledButton;
133134
btn_IconLaunchDisabled: TStyledButton;
134135
GroupBox2: TGroupBox;
135136
btn_FABTrash: TStyledButton;
@@ -288,6 +289,10 @@ procedure TMainForm.FormCreate(Sender: TObject);
288289
procedure TMainForm.TestActionExecute(Sender: TObject);
289290
begin
290291
EditStyledButton(ShowEditButton);
292+
ShowEditButton.Hint := Format('%s/%s/%s',
293+
[ShowEditButton.StyleFamily,
294+
ShowEditButton.StyleClass,
295+
ShowEditButton.StyleAppearance]);
291296
end;
292297

293298
procedure TMainForm.LinkLabelLinkClick(Sender: TObject;

0 commit comments

Comments
 (0)