Modernize wxButtons and add button styling management #8184

yw4z · 2025-01-25T12:25:40Z

Modernizes buttons on several places
I can apply this change to all buttons on UI if approved. Currently limited commit with wxButtons
@SoftFever @Noisyfox this will turn a big commit since it will effect almost all buttons. Can you review logic before i apply it to all files. But at the end, it will make easier to managing, controlling styling and adding new buttons will be easier

Fixes #3730

TODO

• Standardize Ok/Cancel buttons on all windows
• Use Choice/Window/Parameter for button types instead Compact/Wide
• ok_btn->SetFocus(); for confirm buttons
• border color on focused items
• Main tab bar alignment broken new alignment additions on constructor

PROBLEM

• Current buttons rendered differently on all platforms
• There is no standard for button sizes,
• wxButtons doesnt support dark mode properly

SOLUTION / ADVANTAGES

• Makes buttons looks same on all platforms
• Improves dark mode compatibility
• Improves UI consistency
• This method gives better control on styling with less code since color and size properties came from single document
• All buttons styled with SetStyleDefault can be controlled from one place(buttons.cpp). I did 4 different styles as SetStyleDefault, SetStyleConfirm, SetStyleAlert, SetStyleDisabled on my previous commit and applied too all buttons on UI that made styling much more easier

• Used same width for buttons with parameter input boxes

CODE COMPARISON WITH STYLE MANAGEMENT

before (BedShapeDialog.cpp)

after - Less lines & more organized

CHANGED BUTTONS

Ramming settings
before

after

Printable Area > set button
before

after

Connection dialog buttons
before

after

Bed shape dialog
before

after

Noisyfox · 2025-01-26T00:59:40Z

This looks much better! Good job! That's a very clean and clever way of dealing with code duplication and management. I'd say we could even call the SetStyleDefault in the constructor so it will be the 'true' default style.

yw4z · 2025-01-26T12:09:53Z

Can you check this logic
• Merged all style fuctions into one
• Added default styling to Button::Create
• Prevented Applied font font file if it matches to default. But not sure about that since it will not work if increase font size and and revert back to original size
• Used arrays for colors
• Added a condition to ButtonStyle=="Default" since using wrong names can broke it
• requires adding Button::Create(..... , "None") to disabling styling
• Added SetContentAlignment("L") directly to Button::Create since all buttons with icon left aligned
• I'm not sure about performance hit of using arrays for colors

bool Button::Create(wxWindow* parent, wxString text, wxString icon, long style, int iconSize, wxWindowID btn_id, wxString ButtonStyle /* "Default" */)
{
    StaticBox::Create(parent, btn_id, wxDefaultPosition, wxDefaultSize, style);
    state_handler.attach({&text_color});
    state_handler.update_binds();
    //BBS set default font
    SetFont(Label::Body_14);
    wxWindow::SetLabel(text);
    if (!icon.IsEmpty()) {
        //BBS set button icon default size to 20
        this->active_icon = ScalableBitmap(this, icon.ToStdString(), iconSize > 0 ? iconSize : 20);
        this->SetContentAlignment("L");
    }
    messureSize();
    if(ButtonStyle=="Default"||ButtonStyle=="Confirm"||ButtonStyle=="Alert"||ButtonStyle=="Disabled"){
        this->SetStyle(ButtonStyle):
    }
    return true;
}

void Button::SetStyle(wxString ButtonStyle /* "Default" */, const wxFont& font /* Label::Body_14 */)
{
    if(font != Label::Body_14){ //dont apply again if used default
        this->SetFont(font);
    }
    this->SetCornerRadius(this->FromDIP(4));
    wxString S = ButtonStyle=="Default" ? 1 : ButtonStyle=="Confirm" ? 2 : ButtonStyle=="Alert" ? 3 : ButtonStyle=="Disabled" ? 4 : 1 // if wrong value given it picks default
    StateColor clr_bg = StateColor(std::pair<wxColour, int>(wxColour(BtnBgDsb[S]), StateColor::Disabled),
                                   std::pair<wxColour, int>(wxColour(BtnBgPrs[S]), StateColor::Pressed),
                                   std::pair<wxColour, int>(wxColour(BtnBgHvr[S]), StateColor::Hovered),
                                   std::pair<wxColour, int>(wxColour(BtnBgNrm[S]), StateColor::Normal),
                                   std::pair<wxColour, int>(wxColour(BtnBgEnb[S]), StateColor::Enabled));
    this->SetBackgroundColor(clr_bg);
    this->SetBorderColor(clr_bg);
    StateColor clr_fg = StateColor(std::pair<wxColour, int>(wxColour(BtnFgDsb[S]), StateColor::Disabled),
                                   std::pair<wxColour, int>(wxColour(BtnFgNrm[S]), StateColor::Normal));
    this->Button::SetTextColor(clr_fg);
}

// assign in hpp or beginning of cpp
// Button Colors        Default   Confirm   Alert     Disabled
wxString BtnBgDsb[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnBgPrs[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnBgHvr[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnBgNrm[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnBgEnb[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnFgDsb[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};
wxString BtnFgNrm[4] = {"#DFDFDF","#DFDFDF","#DFDFDF","#DFDFDF"};

As an alternative way adding msw_rescale() duplicate of Rescale() can reduce code changes. But im not sure how many of them exist. Also maybe this can lead confusion on button type

void Button::msw_rescale() // duplicate of Rescale()
{
    this->Rescale()
}

yw4z · 2025-02-05T05:11:58Z

@Noisyfox you may want to check changes

• added SetStyle("Default") to button::create. That caused less issues than expected only i saw step box has issues with it.

• Still might be better chose to not using SetStyle() on main constructer because some areas also uses button widget like tabbar. Also using SetStyle("Default") show code a bit more organized on some areas

• Merged all styles in single function as SetStyle("Default") / SetStyle("Alert") / SetStyle("Confirm") / SetStyle("Disabled")

• Code also has too many repeats for size definitions like below. I will try to include it on SetStyle with optional parameter

    btn->SetSize(wxSize(FromDIP(58), FromDIP(24)));
    btn->SetMinSize(wxSize(FromDIP(58), FromDIP(24)));

• Applied code to much more places to get an idea about how that will show

Noisyfox · 2025-02-05T06:14:41Z

• Still might be better chose to not using SetStyle() on main constructer because some areas also uses button widget like tabbar. Also using SetStyle("Default") show code a bit more organized on some areas

I see, that make sense. Let's not call setstyle in constructors then.

Noisyfox · 2025-02-05T06:17:27Z

Then how about instead of using the name "Default", "Confirm", we name those styles as "primary", "secondary" etc., like what bootstrap does?
https://getbootstrap.com/docs/4.0/components/buttons/#examples

Because "default" implies... default, really. I'd expect it to be the style without calling anything.

yw4z · 2025-02-05T06:39:30Z

am i getting right?
Confirm > Primary
Default > Secondary
Alert > Warning
Disabled > Disabled

as an alternative we can use like this
Confirm > Confirm
Default > Regular

i assume 4 styles will be enough, btw do we need any more styles?

also i will create predefined sizes since many buttons uses them
"Wide"

btn->SetMinSize(wxSize(FromDIP(120), FromDIP(24)));

"Compact"

  btn->SetSize(wxSize(FromDIP(58), FromDIP(24)));
  btn->SetMinSize(wxSize(FromDIP(58), FromDIP(24)));

"Paramater"

  btn->SetSize(wxSize(FromDIP(120), FromDIP(26)));

i will add an optional 3rd parameter for it
btn->SetStyle("Confirm", Label::Body_12, "Compact");

maybe only Wide will enough for Paramater related buttons

Noisyfox · 2025-02-05T07:02:44Z

Default > Regular

Yeah I think this alone should be sufficient.

i assume 4 styles will be enough, btw do we need any more styles?

I think this should cover most of the common cases. For those edge cases (if any), it won't be worth making a style for.

also i will create predefined sizes since many buttons uses them "Wide"

btn->SetMinSize(wxSize(FromDIP(120), FromDIP(24)));

"Compact"

  btn->SetSize(wxSize(FromDIP(58), FromDIP(24)));
  btn->SetMinSize(wxSize(FromDIP(58), FromDIP(24)));

"Paramater"

  btn->SetSize(wxSize(FromDIP(120), FromDIP(26)));

Could you post some screenshots as examples on where these get used and how they look like?

yw4z · 2025-02-05T07:14:35Z

before

after

you can find many for "Compact"
https://github.com/search?q=repo%3ASoftFever%2FOrcaSlicer%20SetSize(wxSize(FromDIP(58)&type=code

few for "Wide" but i use them for buttons that related with parameter boxes (like ramming params set, printable area set ...)
https://github.com/search?q=repo%3ASoftFever%2FOrcaSlicer+SetSize%28wxSize%28FromDIP%28120%29&type=code

yw4z · 2025-02-05T09:31:53Z

btw updated commit with latest changes. looks like there is no standard/format for window OK/CANCEL buttons. almost all uses different width and font size. probably will fix that too

yw4z added 2 commits January 25, 2025 15:03

Add button styling

67c4967

Fix dark mode compability

6831322

yw4z changed the title ~~Add button styling~~ Modernize wxButtons and add button styling management Jan 25, 2025

yw4z added 7 commits January 25, 2025 15:42

printable area button

210a377

Connection dialog icons

2a5c305

Add aligment control

c931fc3

Fix alignment

39ff6cc

add new styles

bc2a6cd

Update BedShapeDialog.cpp

d8c81aa

Use darker text color on dark mode

7a0c72f

yw4z mentioned this pull request Feb 4, 2025

use orca color for "can't find device" link #8298

Merged

update code

a9e69fd

Merge branch 'main' into modernize-ui-buttons

59a6515

Update

c45f1e8

yw4z added 6 commits February 7, 2025 05:43

update

c5a3d9a

Update

4b1a726

Update WipeTowerDialog.cpp

09935f3

update

2e5716c

Update Button.cpp

83b58cf

Merge branch 'main' into modernize-ui-buttons

1565665

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernize wxButtons and add button styling management #8184

Modernize wxButtons and add button styling management #8184

yw4z commented Jan 25, 2025 •

edited

Loading

Noisyfox commented Jan 26, 2025 •

edited

Loading

yw4z commented Jan 26, 2025 •

edited

Loading

yw4z commented Feb 5, 2025

Noisyfox commented Feb 5, 2025

Noisyfox commented Feb 5, 2025 •

edited

Loading

yw4z commented Feb 5, 2025

Noisyfox commented Feb 5, 2025 •

edited

Loading

yw4z commented Feb 5, 2025

yw4z commented Feb 5, 2025

Modernize wxButtons and add button styling management #8184

Are you sure you want to change the base?

Modernize wxButtons and add button styling management #8184

Conversation

yw4z commented Jan 25, 2025 • edited Loading

TODO

PROBLEM

SOLUTION / ADVANTAGES

CODE COMPARISON WITH STYLE MANAGEMENT

CHANGED BUTTONS

Noisyfox commented Jan 26, 2025 • edited Loading

yw4z commented Jan 26, 2025 • edited Loading

yw4z commented Feb 5, 2025

Noisyfox commented Feb 5, 2025

Noisyfox commented Feb 5, 2025 • edited Loading

yw4z commented Feb 5, 2025

Noisyfox commented Feb 5, 2025 • edited Loading

yw4z commented Feb 5, 2025

yw4z commented Feb 5, 2025

yw4z commented Jan 25, 2025 •

edited

Loading

Noisyfox commented Jan 26, 2025 •

edited

Loading

yw4z commented Jan 26, 2025 •

edited

Loading

Noisyfox commented Feb 5, 2025 •

edited

Loading

Noisyfox commented Feb 5, 2025 •

edited

Loading