Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[01] Refactoring UI code #2274

Merged
merged 18 commits into from
Jul 8, 2024

Conversation

og-mrk
Copy link
Contributor

@og-mrk og-mrk commented Jul 5, 2024

Some Background

This PR is the first of a series of PRs on updating the UI of WinUtil. This can be considered a response to the Progress Tracking Issue Ticket #2226

Note

This PR is a big one, and I don't know if it'll be accepted or not.. but here goes nothing 🤷.
Also, I've left Allow edits and access to secrets to maintainers checked on, meaning @ChrisTitusTech can change the files in the PR and push them in a new commit onto my own branch (The git branch this PR is based on).

Showcase of the changes

code_refactoring_01_showcase2

Highlights

  • Re-Wrote the Get-TabXaml Private Function so it can be more maintainable, Updated its Docs, and made the Generated XML Code be more readable using Tabs. ( commits acd4d71 , d897b1d , 640d28a , 892f59a , ebfdaaf )
  • Re-order some tweaks & Update their Content Fields to be more descriptive. ( commit 827bb59 )
  • Add a lot more Theming Options so that Contributors have an easier time changing the looks of WinUtil without the need to edit the XML File. ( commits 640d28a , 3254314 , 2342f81 , 18f9ea5 )
  • Make the Toggle Buttons be on the Left-side rather than the right side, and remove the hard to deal with (from a UI maintaining prospective) the On & Off Text next to the Toggle. ( commits 74cf8f0 , 3d3748d )
  • Extend Show-CustomDialog Function to have more options/parameters. ( commit 3254314 )
  • [TEMPORARY FIX] Add optional 'ButtonWidth' Field to Config Json Files that use 'Button' Type. ( commit 4741319 )
    meaning no more un-clear "Type": "SOME-VALUE-HERE" kind of way of handling Button Widths.. but I still don't know if this's the best approach to solving this problem.

Additional Info

The font size for everything, the Margins for checkboxes, the font family, and more.. all of these can be changed through the themes.json file, so if you don't like how WinUtil looks in this PR changes.. then it's relatively easy to change.

  1. edit the theme.json File.
  2. (Re-)Compile WinUtil.
  3. Run winutil.ps1 as Admin & see your changes.

Note

Currently WinUtil doesn't use any Math Solver library, meaning I can't make the values of attributes in other elements be based of a value used elsewhere, plus do some math on it (Addition & Subtraction works.. most of the time, Multiplication & Division is outright, not supported in WPF attributes).
So.. things like MicroWin Checkboxs having Custom Margins, as I've changed the Checkbox Margins in themes.json file. ( commit 2342f81 )
A negative value for the margins is used.. because we want these Checkbox in MicroWin Tab to push it to the left side, makes a bit of sense if you did HTML & CSS before).

og-mrk added 18 commits June 30, 2024 19:02
Rename the name of an element from 'CheckboxFilterClear' to 'SearchBarClearButton' and renamed style from 'ClearButtonStyle' to 'SearchBarClearButtonStyle'
… & Make new Theming Property called 'SearchBarClearButtonFontSize'
Rename the name of an element from 'CheckboxFilter' to 'SearchBar'.. although after some realization.. the naming might make sense at first,
because it filters only the checkboxes.. but CheckBoxFilter is less "Intutive" when saying it compared to "SearchBar".. _This's my own opinion, and it can reverted easily with git if needed._
…kbox

Removed it as it only takes up space in the right side of the Toggle Button/Checkbox, as well as making it difficult to correctly align it when change from/to 'On' & 'Off' Text,
… Private Function

Increase the Side Margins of Toggle Button/Checkbox, as well as Change its side to be on the Left hand-side of the Label, rather then the Right hand-side.
@og-mrk og-mrk requested a review from ChrisTitusTech as a code owner July 5, 2024 01:00
@og-mrk og-mrk changed the title [01] Refactoring code [01] Refactoring UI code Jul 5, 2024
@SHR1SHAK
Copy link
Contributor

SHR1SHAK commented Jul 5, 2024

The toggle on the left looks so nice and clean and also solves the problem of negative space while it was on the right. 👍

Copy link
Contributor

@MyDrift-user MyDrift-user left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work @og-mrk!

I generally like the changed you've made and how you implemented most of them.

Change Request

I suggested another way of implementing the buttonwidth into the json since you're not sure if that is the way to go. I personally find it better in terms of maintainability and more compact, but a bit less easy to understand for new contributers so idk..


I like the Preference Toggles, I once also changed the positioning of the toggle like that but it was overwritten by another PR that redesigned it, Thanks :)


Making the UI elements smaller in general is a good Idea thinking about how much the Toolbox has grown.

@@ -184,90 +184,104 @@
"category": "Features",
"panel": "1",
"Order": "a060_",
"Type": "150"
"Type": "Button",
"ButtonWidth": "300"
Copy link
Contributor

@MyDrift-user MyDrift-user Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • [TEMPORARY FIX] Add optional 'ButtonWidth' Field to Config Json Files that use 'Button' Type. ( commit 4741319 )
    meaning no more un-clear "Type": "SOME-VALUE-HERE" kind of way of handling Button Widths.. but I still don't know if this's the best approach to solving this problem.

Understand the "Issue". I would suggest using arrays, like following:

"WPFFixesUpdate": {
    "Content": "Reset Windows Update",
    "category": "Fixes",
    "panel": "1",
    "Order": "a041_",
    "Type": ["Button", "300"]
  },

The first item is always the type, the ones afterwards are the "attributes" if the type.
If a button should be created but does not have a width value, it could set a default value.

Copy link
Owner

@ChrisTitusTech ChrisTitusTech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Big Changes, but I love a lot of these tweaks as it as a lot of polish to the GUI and maintainability. I'm going to test this some more, but overall I approve.

@ChrisTitusTech ChrisTitusTech merged commit 6b73f71 into ChrisTitusTech:main Jul 8, 2024
@og-mrk og-mrk deleted the refactoring-code-01 branch July 9, 2024 18:03
@Real-MullaC
Copy link
Contributor

@og-mrk Please dm me ASAP

@ChrisTitusTech ChrisTitusTech added the skip-changelog Skip Change Logs label Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip-changelog Skip Change Logs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants