search

pebakery / pebakery

PEBakery is a script engine that specializes in customizing the Windows Preinstalled Environment (WinPE/WinRE).
Other
253 stars 34 forks source link

Better UI Design/Colors #102

Closed ied206 closed 3 years ago

ied206 commented 5 years ago

Summary

PEBakery requires better UI design.

Details

Overall UI design of the PEBakery did not change much from the time I started working on PEBakery's WPF code 2 years ago. At that time making the program just run was most important, and subtle UI design was out of my scope. The overall UI design should be revised before v1.0 release.

Colors

Current light-blue/lime-green colors were inherited from the example document I used to figure out how to use WPF DockPanel. I did not have any meanings for choosing these colors, so I think PEBakery should have better colors for each area.

One idea comes across my mind now is grayscale colors, to fit with flat, black icons.

Icons

To be honest I am satisfied with current icons. PEBakery depends on MahApps.Metro.IconPacks, and mostly use Google's Material Icons. Are there any achievable improvements for icons?

Placement of buttons

I am not confident enough that how PEBakery's buttons are placed are intuitive enough. For those have experience with WinBuilder it would be easy, but how about the new user?

homes32 commented 5 years ago

Colors

color schemes are hard. I'm not a huge fan of black and white/grey-scale color schemes. IMHO They just don't feel polished. but it would be better then the random mismatch of colors we have now. I will say that if the UI goes grey-scale or dark, then colored icons for accent would be a plus.

Another option would be a choice between a dark/light scheme, like Visual Studio, and Office.

Icons

the current icons are pretty good. Personally I like more color and dimension, but that's me.

Placement of buttons

Top menu is fine I think. Script menu could use improvement as its pretty limited as far as space/expansion, etc. Though I have yet to figure out what would truly make it better. They could be collapsed into a hamburger or popup menu, but then you loose the speed access to Run, refresh and edit the script during development. A ribbon might work, combining the main options with script options, but would require more vertical space at the top of the window...

I think for me the thing that strikes me as being clunky is the attachments handling. I prefer the Winbuilder's file manager view with toolbar over PEbakery's tree view with its cluttered right button/field/pane/thingie.

for the interface editor, the Scale slider could be turned into a combobox to save space, and moved to a toolbar along with the save and reload buttons. And a properties pane for the controls would be nice, thought I don't think that control has been ported to WFP yet, so would need a 3rd party addon. And of course proper drag n' drop (issue #83)

ied206 commented 5 years ago

Another option would be a choice between a dark/light scheme, like Visual Studio, and Office.

How about implementing customizable color theme?

EDIT Should script interface area be fixed to white? Many script interfaces are designed to fit in white background, and there is no way (and hard to add a way) to designate TextLabel's color.

ied206 commented 5 years ago

New black and gray theme was applied.

New black and gray theme

I plan to add fully customizable color theme feature. Before that, a few more single-color themes will be added as a preset.

ied206 commented 5 years ago

Theme support was implemented.

Preset

Total 4 presets are provided.

Red, Green and Blue theme needs some polishing. Colors are always difficult...

Custom Theme

SettingWindow now features Theme tab to allow customization of theme and selection of presets. EDIT Also trying using Separator instead of GroupBox in SettingWindow for better visuals.

ied206 commented 5 years ago

for the interface editor, the Scale slider could be turned into a combobox to save space, and moved to a toolbar along with the save and reload buttons.

For preparing this, I changed scale factor control to NumberBox from Slider.

Top menu is fine I think. Script menu could use improvement as its pretty limited as far as space/expansion, etc. Though I have yet to figure out what would truly make it better. They could be collapsed into a hamburger or popup menu, but then you loose the speed access to Run, refresh and edit the script during development. A ribbon might work, combining the main options with script options, but would require more vertical space at the top of the window...

I was also not able to come up with an exact answer, so it would be untouched for now.

I think for me the thing that strikes me as being clunky is the attachments handling. I prefer the Winbuilder's file manager view with toolbar over PEbakery's tree view with its cluttered right button/field/pane/thingie.

Agreed about current attachment interface's clunkiness. I will try revamping itm.

And a properties pane for the controls would be nice, thought I don't think that control has been ported to WFP yet, so would need a 3rd party addon.

Please provide me an example screenshot of properties pane you want.

homes32 commented 5 years ago

Please provide me an example screenshot of properties pane you want.

Not essential, the current solution works fine. The thought was that the grid may be more organized, sizeable, and flexible.

vsgrid pbgrid

ied206 commented 5 years ago

@homes32, from the #105:

On a side note, in the future it might be nice to add an "advanced view" to the attachments viewer that includes the Author-Encoded and Interface-Encoded sections...

ied206 commented 5 years ago

Proposal for using monospaced font in ComboBox control

Script developer often tries to put two columns in ComboBox control. But ComboxBox is rendered using proportional font (Segoe UI), causing misalign of second column. Thus I propose to use monospaced font in ComboBox control.

image

homes32 commented 5 years ago

should work.

the 2 column thing is a coding shortcut based on a Winbuilder bug that would not expand the contents of a combobox past its set width so the '2nd column' was never intended to be viewed by end users. basically you put the user friendly name on the left then space over past the width and put whatever you want the script to process on the right, then you could do a StrRight operation and grab what the script needs (usually this was part of a lang file name or reg/ini entry. It saved you some code overhead because you didn't need to do a lookup table or huge if/else tree.

ied206 commented 5 years ago

the 2 column thing is a coding shortcut based on a Winbuilder bug that would not expand the contents of a combobox past its set width so the '2nd column' was never intended to be viewed by end users.

I didn't catch this until your explanation. Now I see how it works in 7-Zip language selection. image

ied206 commented 5 years ago

ComboBox control will be rendered using monospaced font starting from commit 4f12df5b20f0f4b809c85e173110040c2a1f8151.

monospaced combobox control

homes32 commented 5 years ago

TreePanelHighlight color does not seem to be working. It's always Red.

ied206 commented 5 years ago

TreePanelHighlight color does not seem to be working. It's always Red.

Fixed in commit b6034dc8b87805f1ca16eb329480fc062ba40cbb.

homes32 commented 5 years ago

@APT001 @ied206 More theme tweaking/concepts in dev_themes branch 86c263f

ied206 commented 5 years ago

Leaved comment for dev_themes in here.

ied206 commented 5 years ago

I think for me the thing that strikes me as being clunky is the attachments handling. I prefer the Winbuilder's file manager view with toolbar over PEbakery's tree view with its cluttered right button/field/pane/thingie.

ScriptEditWindow's attachment manger was reworked. image

ied206 commented 5 years ago

On a side note, in the future it might be nice to add an "advanced view" to the attachments viewer that includes the Author-Encoded and Interface-Encoded sections...

Advanced view to handle [AuthorEncoded] and [InterfaceEncoded] section directly was added in attachment manager. Users will be prompted with a warning because this mode can easily corrupt a script.

homes32 commented 5 years ago

ScriptEditWindow's attachment manger was reworked.

Thank you for refreshing the attachments GUI. Looks nice. a couple little comments,

ied206 commented 5 years ago

We are missing multi-select extract, delete, and attach. (Winbuilder supports all 3) Inspect does not support multi-select either.

Would be nice to have the currently selected folder stay selected after an operation. currently if you delete a file it refreshes the whole view and goes back to the topmost folder. This gets very awkward in combination with missing the multi-select add/delete/extract/inspect as you have to keep bouncing back to the folder to add/delete the next file.

Do you think since we know the attached file size that it makes sense to use that to decide if inspection should be performed automatically on a per attachment basis and leave the larger ones to manual inspection? what is the threshold where the slowdown occurs?

EncodedFile.GetEncodeMode() inspect encoded file's first footer to figure out compression algorithm, which involves these operations:

Actual calculation is done quick, but the repeated file operations are the bottleneck. I will try to implement automatic file inspection in background.

ied206 commented 5 years ago
homes32 commented 5 years ago

Small issue with attachments.

When you attach a file, any further actions (extract, delete,etc) for other files will always include the attached file.

  1. Attach file 1
  2. Attach file 2
  3. Extract file 1 (file 2 will also be extracted)
  4. close attachments/script editor
  5. open attachments
  6. extract file 1 (works as expected)

EDIT:

Also, a purely cosmetic issue: at least on my 2 test machines the column resizing doesn't appear to be working effectively (no thanks to lack of support for native column resizing listview in wpf). The headers resize and fill the screen when there are no attachments (items in the listview), however when items are in the list view then the columns only resize to the text, instead of the full listview. If i remove the AutoSizedGridView then it looks fine.

ied206 commented 5 years ago

Small issue with attachments.

This commit also comes with a fix of multi-selection. The main reason was that WPF does not support multi-selection data binding directly, so I had to use a workaround.

ied206 commented 5 years ago

Also, a purely cosmetic issue: at least on my 2 test machines the column resizing doesn't appear to be working effectively (no thanks to lack of support for native column resizing listview in wpf).

The only reason I can think of why AutoSizedGridView is not working is a windows 7's classic theme. What is test machine's environment? There are two options:

ied206 commented 5 years ago

Also, a purely cosmetic issue: at least on my 2 test machines the column resizing doesn't appear to be working effectively (no thanks to lack of support for native column resizing listview in wpf). The headers resize and fill the screen when there are no attachments (items in the listview), however when items are in the list view then the columns only resize to the text, instead of the full listview. If i remove the AutoSizedGridView then it looks fine.

I misunderstood what you wanted to say, so Windows 7's classic theme is not a culprit. I improved raw size and encoded size column to remove AutoSizedGridView.

homes32 commented 5 years ago

Otherwise the new attachments interface looks fantastic! :)

homes32 commented 5 years ago

@ied206 just wanted to make sure you saw this one outstanding missing feature. Its easy to get lost in these long threads... :)

We are still missing Multi-select attach files, which is supported by winbuilder. For the attach file dialog, if multiple files are selected we should be able to hide/disable the file name field and default to the actual filename, and use the compression option for all selected files.

ied206 commented 5 years ago

@ied206 just wanted to make sure you saw this one outstanding missing feature. Its easy to get lost in these long threads... :)

Sorry, I have forgotten about this suggestion. I will begin working with this.

ied206 commented 5 years ago

@homes32 It turns out I have already implemented multi-select of the attached files, but that progress was not tracked by myself. UPDATE: I misread your paragraph. Attaching multiple files at once is not implemented yet.

ied206 commented 5 years ago

Attaching multiple files at once is now possible in commit d5d49fd7583fb334063a52bc38b9810ebf56ed0b.

homes32 commented 4 years ago

@ied206 small bug with attachments editor:

InterfaceEncoded and AuthorEncoded folders will only show in the folder list if some other encoded folder exists.

Steps to reproduce:

  1. open a script with no encoded folders but has a logo or interface image
  2. enabled advanced view
  3. enable interface encoded and/or authorEncoded
  4. the InterfaceEncoded and AuthorEncoded folders will not be visible
  5. create a folder
  6. the InterfaceEncoded and AuthorEncoded folders are now visible.
  7. delete the empty folder
  8. the InterfaceEncoded and AuthorEncoded folders will not be visible

PS: Advanced view could be simplified to act as a toggle for both InterfaceEncoded and AuthorEncoded, omitting the extra checkboxes.

ied206 commented 4 years ago

The problem comes from EncodedFile.GetAllFilesInfo(Script sc, GetFileInfoOptions opts). It returns early if no encoded folders were found.

ied206 commented 4 years ago

Commit 12c84adad8c4604faaac4a33567adfc1feca9f25 fixed the issue.

homes32 commented 3 years ago

Closed. Continued in https://github.com/pebakery/pebakery/issues/147