Recent

Author Topic: SPKToolbar - redesign (flatdesign)  (Read 815 times)

Mat78LE

  • New member
  • *
  • Posts: 8
SPKToolbar - redesign (flatdesign)
« 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.

wp

  • Hero Member
  • *****
  • Posts: 6471
Re: SPKToolbar - redesign (flatdesign)
« Reply #1 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.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #2 on: November 12, 2019, 12:27:13 pm »
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 ;)

wp

  • Hero Member
  • *****
  • Posts: 6471
Re: SPKToolbar - redesign (flatdesign)
« Reply #3 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.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #4 on: November 12, 2019, 03:29:13 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)

« Last Edit: November 12, 2019, 03:50:56 pm by Mat78LE »

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 3654
  • I like bugs.
Re: SPKToolbar - redesign (flatdesign)
« Reply #5 on: November 12, 2019, 04:11:34 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.
« Last Edit: November 12, 2019, 04:18:24 pm by JuhaManninen »

Alextp

  • Hero Member
  • *****
  • Posts: 901
    • UVviewsoft
Re: SPKToolbar - redesign (flatdesign)
« Reply #6 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

wp

  • Hero Member
  • *****
  • Posts: 6471
Re: SPKToolbar - redesign (flatdesign)
« Reply #7 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.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #8 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?

Alextp

  • Hero Member
  • *****
  • Posts: 901
    • UVviewsoft
Re: SPKToolbar - redesign (flatdesign)
« Reply #9 on: November 12, 2019, 07:25:08 pm »
@wp
Maybe do better: instead of one CornerRadius, add 3 props: CornerRadius, IndentOfFirstTabFromLeft, IndentBetweenTabs.

wp

  • Hero Member
  • *****
  • Posts: 6471
Re: SPKToolbar - redesign (flatdesign)
« Reply #10 on: November 12, 2019, 07:35:06 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!)

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.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #11 on: November 12, 2019, 08:47:51 pm »
I have the new Version installed. How is the new property called?

CornerRadius:=0;


wp

  • Hero Member
  • *****
  • Posts: 6471
Re: SPKToolbar - redesign (flatdesign)
« Reply #12 on: November 12, 2019, 09:49:46 pm »
Code: Pascal  [Select]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. begin
  3.   SpkToolbar1.Appearance.Tab.CornerRadius := 0;
  4. end;
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #13 on: November 12, 2019, 10:39:38 pm »
Code: Pascal  [Select]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. begin
  3.   SpkToolbar1.Appearance.Tab.CornerRadius := 0;
  4. end;

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

Mat78LE

  • New member
  • *
  • Posts: 8
Re: SPKToolbar - redesign (flatdesign)
« Reply #14 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.  :)