Match button styles on whole UI and fixes for button class #1743

New Issue

MrUnknownDE · 2026-04-05T19:32:48+02:00

MrUnknownDE commented

2026-04-05 19:32:48 +02:00

Originally created by @yw4z on 11/1/2025

SUMMARY

• Uses SetStyle on all buttons and removes all unnecessary color & size definitions
• Replaces old dialog buttons with DialogButtons on some dialogs

TODO

• Margins on color picker
• Add comparisons
• Check changes on VisibleButtons enum

IMPORTANT NOTE

• some dialogs uses ConfirmBeforeSendDialog::ButtonStyle::ONLY_CONFIRM replaced all with VisibleButtons to prevent conflicts with ButtonStyle. naming has more sense because it doesnt about styling

FIXES

Buttons
• Disabled state background color not applies

• Focus border now visible while hover on confirm buttons

Dialog buttons
• SingleChoice dialog has no margin on left

• Fixed additional tab key requires to remove / set focus from dialog buttons. previous implementation requires extra tab key to escape

Setup wizard
• Dialog buttons not stays on same position vertically while switching between pages

IMPROVEMENTS

Dialog buttons
• Added a function for setting left aligned button count. this simplified creating sizer and makes it easier to understand on code

• Added a function for getting first and last button. makes it easier picking custom named buttons

Global CSS for styling on web based dialogs
• will move all common styling to here and delete all dark.css and light.css over time. this will fix all consistency issues and simplify folder structure
• Homepage and project page uses different sources. this change will allow styling all controls from one source
• used variables so this will make color management easier. will use same variables for other elements. firefox uses a similar logic for UI

COMPARISON - WEB BASED DIALOGS

Homepage Buttons

Setup wizard

Printer Selection

Filament Selection dialog

Project welcome page

Flushing Volumes

COMPARISON - OTHER DIALOGS

AMSControl.cpp

AMS settings - AMSMaterialsSetting.cpp

BBLStatusBarSend.cpp

BindDialog.cpp

CaliHistoryDialog.cpp

CalibrationDialog.cpp

ConnectPrinter.cpp

DeviceManager.cpp

ExtrusionCalibration.cpp

FilamentPickerDialog.cpp

MultiMachineManagerPage.cpp

OAuthDialog.cpp

ObjColorDialog.cpp - OBJ import dialog
Test file OBJ_TEST.zip
Drag it to canvas

ParamsPanel.cpp > TipsDialog

PrivacyUpdateDialog.cpp

RecenterDialog.cpp

ReleaseNote.cpp

SelectMachine.cpp

SendMultiMachinePage.cpp

SendToPrinter.cpp

StatusPanel.cpp

UnsavedChangesDialog.cpp

UpdateDialogs.cpp

*Originally created by @yw4z on 11/1/2025* ### SUMMARY • Uses SetStyle on all buttons and removes all unnecessary color & size definitions • Replaces old dialog buttons with DialogButtons on some dialogs ### TODO • Margins on color picker • Add comparisons • Check changes on VisibleButtons enum ### IMPORTANT NOTE • some dialogs uses `ConfirmBeforeSendDialog::ButtonStyle::ONLY_CONFIRM` replaced all with `VisibleButtons` to prevent conflicts with `ButtonStyle`. naming has more sense because it doesnt about styling ### FIXES **Buttons** • Disabled state background color not applies <img width="354" height="108" alt="Screenshot-20251102013531" src="https://github.com/user-attachments/assets/0115e327-a6a9-4f23-b1d4-95e9a466ebf1" /> • Focus border now visible while hover on confirm buttons <img width="333" height="76" alt="Screenshot-20251102145448" src="https://github.com/user-attachments/assets/ca602d66-ee5c-4572-aede-162dfc076f25" /> **Dialog buttons** • SingleChoice dialog has no margin on left <img width="473" height="173" alt="Screenshot-20251102013247" src="https://github.com/user-attachments/assets/1d6cd269-dc97-493e-ba85-6622c5677919" /> • Fixed additional tab key requires to remove / set focus from dialog buttons. previous implementation requires extra tab key to escape **Setup wizard** • Dialog buttons not stays on same position vertically while switching between pages ![orca-slicer_8qG64rsDLv](https://github.com/user-attachments/assets/9762feb2-947a-43d6-adea-76fbc765c217) ![orca-slicer_9pUq0Td5Cy](https://github.com/user-attachments/assets/e77a83f6-3b93-4963-87fb-aef84e23a506) ### IMPROVEMENTS **Dialog buttons** • Added a function for setting left aligned button count. this simplified creating sizer and makes it easier to understand on code <img width="649" height="83" alt="Screenshot-20251102013655" src="https://github.com/user-attachments/assets/c7e79c4d-66d8-4fc0-86e0-f22c37bea1b0" /> <img width="1381" height="87" alt="Screenshot-20251102013717" src="https://github.com/user-attachments/assets/61a5295e-29dc-4e5e-a1cc-427fba8cb7f6" /> • Added a function for getting first and last button. makes it easier picking custom named buttons **Global CSS for styling on web based dialogs** • will move all common styling to here and delete all dark.css and light.css over time. this will fix all consistency issues and simplify folder structure • Homepage and project page uses different sources. this change will allow styling all controls from one source • used variables so this will make color management easier. will use same variables for other elements. firefox uses a similar logic for UI ### COMPARISON - WEB BASED DIALOGS **Homepage Buttons** <img width="1092" height="255" alt="Screenshot-20251101225210" src="https://github.com/user-attachments/assets/9b88f4ce-3980-419b-a643-cadafdfd0877" /> **Setup wizard** <img width="811" height="655" alt="Screenshot-20251102150356" src="https://github.com/user-attachments/assets/241fc6b6-071c-4e5b-8f66-57c188f6aa13" /> <img width="805" height="649" alt="Screenshot-20251102150411" src="https://github.com/user-attachments/assets/b7dfad31-27fb-46e4-8ae1-1f2178c79e43" /> **Printer Selection** <img width="791" height="618" alt="Screenshot-20251101225317" src="https://github.com/user-attachments/assets/a4f3fb32-dc6a-4904-b3b2-12f730d0ef28" /> **Filament Selection dialog** <img width="1623" height="670" alt="Screenshot-20251101225427" src="https://github.com/user-attachments/assets/e200501c-a21d-45ec-acbb-74c0369bd399" /> <img width="1608" height="655" alt="Screenshot-20251101225434" src="https://github.com/user-attachments/assets/cde57ba0-5948-4746-91ab-2922019a5147" /> **Project welcome page** <img width="488" height="291" alt="Screenshot-20251101230043" src="https://github.com/user-attachments/assets/8f5e35a1-a69d-4af1-92a9-2aabaf0b9a41" /> **Flushing Volumes** <img width="813" height="461" alt="Screenshot-20251102022423" src="https://github.com/user-attachments/assets/ab1d52bb-ba29-4aa8-a440-cb4c1c1be861" /> ### COMPARISON - OTHER DIALOGS **AMSControl.cpp** **AMS settings - AMSMaterialsSetting.cpp** **BBLStatusBarSend.cpp** **BindDialog.cpp** <img width="938" height="278" alt="Screenshot-20251102023815" src="https://github.com/user-attachments/assets/4056bc36-3dd7-48fb-8e15-64ad22124315" /> **CaliHistoryDialog.cpp** **CalibrationDialog.cpp** **ConnectPrinter.cpp** <img width="847" height="538" alt="Screenshot-20251102023923" src="https://github.com/user-attachments/assets/722cfeaf-3e61-4740-b805-9becd8528357" /> **DeviceManager.cpp** <img width="633" height="483" alt="Screenshot-20251102151516" src="https://github.com/user-attachments/assets/97f0fd46-6de7-4141-9570-d95dfc9a1ac3" /> **ExtrusionCalibration.cpp** **FilamentPickerDialog.cpp** <img width="689" height="432" alt="Screenshot-20251102024210" src="https://github.com/user-attachments/assets/11dc79f0-225f-4542-8f45-2974b438e24c" /> **MultiMachineManagerPage.cpp** <img width="1312" height="674" alt="Screenshot-20251102145746" src="https://github.com/user-attachments/assets/caa02daf-bafc-47dc-bb85-51a28e764351" /> **OAuthDialog.cpp** **ObjColorDialog.cpp - OBJ import dialog** Test file [OBJ_TEST.zip](https://github.com/user-attachments/files/23286689/OBJ_TEST.zip) Drag it to canvas <img width="464" height="660" alt="Screenshot-20251101232949" src="https://github.com/user-attachments/assets/219f0d5b-7088-408f-876b-57ffd047af65" /> **ParamsPanel.cpp > TipsDialog** **PrivacyUpdateDialog.cpp** **RecenterDialog.cpp** **ReleaseNote.cpp** **SelectMachine.cpp** <img width="1413" height="693" alt="Screenshot-20251102024323" src="https://github.com/user-attachments/assets/adc238f0-a937-4e25-b663-c6fdb734c1ec" /> **SendMultiMachinePage.cpp** <img width="1060" height="973" alt="Screenshot-20251102151113" src="https://github.com/user-attachments/assets/9abc98c9-8f1a-462e-899a-e3d7baa26d23" /> <img width="1069" height="957" alt="Screenshot-20251102151056" src="https://github.com/user-attachments/assets/c6553c79-c591-4add-8a34-a9f86753927c" /> **SendToPrinter.cpp** <img width="927" height="555" alt="Screenshot-20251102151227" src="https://github.com/user-attachments/assets/33ecb974-ee16-4c27-97b5-8e74b1dc9c65" /> **StatusPanel.cpp** **UnsavedChangesDialog.cpp** **UpdateDialogs.cpp**

MrUnknownDE closed this issue

2026-04-05 19:32:48 +02:00

Sign in to join this conversation.

No Label Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted Community testers wanted

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/OrcaSlicer#1743