Lazarus

Programming => Packages and Libraries => Topic started by: Mat78LE on November 12, 2019, 07:03:30 am

Title: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 07:03:30 am

Hello.

someone here who is involved in the Code of spk toolbar. I'm Looking for a solution of re-design the toolbar.

update the design to the current metro design. I mean it is possible to change the code for...

1) no round tab corner
2) the tab should be near to the next tab
3) the hole toolbar without shades on the frame

like the current MS Office.

Thanks for reply.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 12, 2019, 11:54:00 am

The look of the SpkToolbar is defined by the elements of the "Appearance" property. In the demo folder, there is a project "AppearanceEditor" which you can use to modify every feature of the Appearance. Do all the changes that you need - you can see their effect in the SpkToolbar sample of the appearance editor.

When you are finished go to the page "Import / Export" of the appearance editor, click "Export to Pascal code" and "Copy". Then paste the code into your application so that it is used by the Appearance property of the SpkToolbar. (The "Export to/Import from xml" functionality is incomplete since it does not use files ATM).

If you think this is a particularly nice design which other users might be interested in as well, you should post the code here in the forum along with a screenshot. I check it and if I agree I add'll it to the predefined appearances of the toolbar. Please propose also a name to be used in the "Style" property of the toolbar, but avoid attributes like "Modern" etc which change their meaning year after year.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 12:27:13 pm

Quote from: wp on November 12, 2019, 11:54:00 am

The look of the SpkToolbar is defined by the elements of the "Appearance" property. In the demo folder, there is a project "AppearanceEditor" which you can use to modify every feature of the Appearance. Do all the changes that you need - you can see their effect in the SpkToolbar sample of the appearance editor.

When you are finished go to the page "Import / Export" of the appearance editor, click "Export to Pascal code" and "Copy". Then paste the code into your application so that it is used by the Appearance property of the SpkToolbar. (The "Export to/Import from xml" functionality is incomplete since it does not use files ATM).

If you think this is a particularly nice design which other users might be interested in as well, you should post the code here in the forum along with a screenshot. I check it and if I agree I add'll it to the predefined appearances of the toolbar. Please propose also a name to be used in the "Style" property of the toolbar, but avoid attributes like "Modern" etc which change their meaning year after year.

The "Appearance Editor" I can open also in a new Project. But the Editor has no options to change the style like my request. That's why I ask the professional users in this Forum ;)

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 12, 2019, 01:02:09 pm

You must select the Style which comes closest to your request, and using the Appearance editor, you change the elements that you need. Paste the exported Pascal code here in the forum, and I can add its settings to the SpkToolbar units so that it is available as a new Style.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 03:29:13 pm

Quote from: wp on November 12, 2019, 01:02:09 pm

You must select the Style which comes closest to your request, and using the Appearance editor, you change the elements that you need. Paste the exported Pascal code here in the forum, and I can add its settings to the SpkToolbar units so that it is available as a new Style.

1) no round tab corners = not available in the editor
2) the tab should be near to the next tab =not available in the editor
3) the hole toolbar without shades on the Frame = not available in the Editor

I thought someone knows the code in the background of the toolbar. To optimize the design to a real -> flat design. (like the current UI in MS Office)

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: JuhaManninen on November 12, 2019, 04:11:34 pm

Quote from: Mat78LE on November 12, 2019, 03:29:13 pm

I thought someone knows the code in the background of the toolbar. To optimize the design to a real -> flat design. (like the current UI in MS Office)

The original author has gone away. None of the current Lazarus developers know the code very well, or at least don't have enough time/motivation to make big changes to the component.
However if somebody (maybe you) want to study the code and improve it, patches will be accepted. Commit access for the Lazarus CCR repo can also be given for a person who wants to take over the maintenance of a component.
That is how open source works. Everybody scratches his own itch basically. There is always a lack of people who want to commit themselves to maintain existing code.

I remember fixing some bugs related to 64-bits etc. in this component.
Wp has changed it more. I don't even know the details.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: AlexTP on November 12, 2019, 04:33:32 pm

FYI. There is also ATFlatControls with toolbar and tabs controls.
https://wiki.freepascal.org/ATTabs
https://wiki.freepascal.org/ATFlatToolbar

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 12, 2019, 04:45:47 pm

I updated the svn repository with these changes:

introduce a new property for the tab appearance: CornerRadius. Besides the rounded corner this also defines the spacing between the tabs. So, setting this to zero will cover your requirements 1 and 2. Note that drawing glitches will appear when the CornerRadius is increased too much.
initialize the internal variable TOOLBAR_CORNER_RADIUS with 0 instead of 3 which moves the left-most tab to the left edge of the toolbar.

As for the color shades (I suppose you mean "gradients") you can set the gradient begin and end colors to the same value, just like the Metro designs do.

Redesigning a nicely-looking, consistent SpkToolbar style is quite a lot of work, I know. I will not do this. If you really need the new Office UI you should spend that time and share the result with the community to acknowledge the work others do for you.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 07:09:09 pm

Thanks to all for your answers 8)

I understand the situation and I have a lot of respect for all supporter.

@wp

I'm glad to hear that. Thanks again. "I updated the svn repository…" where I can find the new repository?

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: AlexTP on November 12, 2019, 07:25:08 pm

@wp
Maybe do better: instead of one CornerRadius, add 3 props: CornerRadius, IndentOfFirstTabFromLeft, IndentBetweenTabs.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 12, 2019, 07:35:06 pm

Quote from: Mat78LE on November 12, 2019, 07:09:09 pm

where I can find the new repository?

https://sourceforge.net/p/lazarus-ccr/svn/HEAD/tree/components/spktoolbar/

You need SVN to download a selection of the entire library. Or dowload the "snapshot" (at the top of the page), unzip and delete everything except for the folder components/spktoolbar. Or download only the changed files (spkt_const.pas, spktoolbar.pas, spkt_appearance.pas, spkte_appearanceEditor.pas and spkte_appearanceeditor.lfm), and replace your current ones by them (make backup copies first!)

Quote from: Alextp on November 12, 2019, 07:25:08 pm

Maybe do better: instead of one CornerRadius, add 3 props: CornerRadius, IndentOfFirstTabFromLeft, IndentBetweenTabs.

Sure. But these properties are used at a variety of places and are interdependent, and I don't want to spend this evening on this... Happy to accept your patch, though.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 08:47:51 pm

I have the new Version installed. How is the new property called?

CornerRadius:=0;

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 12, 2019, 09:49:46 pm

Code: Pascal [Select][+]

procedure TForm1.Button1Click(Sender: TObject);
begin
  SpkToolbar1.Appearance.Tab.CornerRadius := 0;
end;

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 12, 2019, 10:39:38 pm

Quote from: wp on November 12, 2019, 09:49:46 pm

Code: Pascal [Select][+][-]
procedure TForm1.Button1Click(Sender: TObject);
begin
SpkToolbar1.Appearance.Tab.CornerRadius := 0;
end;

Great :) the design is working. Many thanks for the work and support.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 22, 2019, 03:50:22 pm

Hi there.

one question more for the community. Is there any chance to change the "Tab" height. Not the font height.

Thanks again. :)

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: wp on November 22, 2019, 07:55:16 pm

I added a new property CaptionHeight to the TabAppearance. It is automatically determined by the height of the TabHeaderFont when CaptionHeight is at its default value, -1. Otherwise the tab height is set to this pixel value (no high-dpi scaling of this value done yet). The height of the total toolbar adapts automatically.

Title: Re: SPKToolbar - redesign (flatdesign)
Post by: Mat78LE on November 23, 2019, 10:46:43 am

Quote from: wp on November 22, 2019, 07:55:16 pm

I added a new property CaptionHeight to the TabAppearance. It is automatically determined by the height of the TabHeaderFont when CaptionHeight is at its default value, -1. Otherwise the tab height is set to this pixel value (no high-dpi scaling of this value done yet). The height of the total toolbar adapts automatically.

Thx a lot. You are the SPKToolbar Man :D :D :D :D