[UI] Early SwiftUI drafts #1

New issue

Open

opened 2024-02-01 05:37:15 -06:00 by shinra-electric · 0 comments

shinra-electric commented

2024-02-01 05:37:15 -06:00

(Migrated from github.com)

I'm excited to see a version of PS-Tools for Mac, but the current iteration of the UI where different windows open up for each console could be improved.

I was messing around with creating a macOS app using SwiftUI and would like to get a bit of feedback.

Generally for SwiftUI apps on macOS you'd use NavigationSplitView to make either a two-or-three column app, with the first column being a hide-able sidebar. There is also a toolbar at the top that can be customised for each view (also hide-able, but could be useful).

Here is an example of the two-column view, which I'm thinking might be a good option:
Screenshot 2024-02-01 at 11 52 29
Screenshot 2024-02-01 at 12 21 31
Screenshot 2024-02-01 at 12 25 32

The sidebar can be hidden, so I've added keyboard commands to navigate to the appropriate console:
Screenshot 2024-02-01 at 12 12 42
Clicking on the PlayStation logo in the toolbar will bring the user back to the main screen. Regarding use of the logo, this is an SF Symbol and can be used as long as it only refers to Sony's PlayStation:
Screenshot 2024-02-01 at 12 34 41

The issue with two-column style is that the tab views, especially for PS5, could get quite crowded, so I tried out a three-column view:
Screenshot 2024-02-01 at 12 28 45
The advantage of this is that you could have as many tools as needed in the second column. However, personally speaking I'm not a fan of the three-column view here... (I'm also having trouble hiding the second column on the main screen but that's probably my own fault).

Anyway, I should check here if you're interested in the code for this, and if you'd like me to continue and finish off all the views.

I'm excited to see a version of PS-Tools for Mac, but the current iteration of the UI where different windows open up for each console could be improved. I was messing around with creating a macOS app using SwiftUI and would like to get a bit of feedback. Generally for SwiftUI apps on macOS you'd use `NavigationSplitView` to make either a two-or-three column app, with the first column being a hide-able sidebar. There is also a toolbar at the top that can be customised for each view (also hide-able, but could be useful). Here is an example of the two-column view, which I'm thinking might be a good option: <img width="1223" alt="Screenshot 2024-02-01 at 11 52 29" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/9fc638bd-774d-415d-a7c3-b2f11b8007a2"> <img width="1402" alt="Screenshot 2024-02-01 at 12 21 31" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/0093ed92-5aa5-47ca-a204-3c5e15409757"> <img width="1313" alt="Screenshot 2024-02-01 at 12 25 32" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/9ccadb7e-ddb1-4fed-a113-72e4b6fbcd37"> The sidebar can be hidden, so I've added keyboard commands to navigate to the appropriate console: <img width="242" alt="Screenshot 2024-02-01 at 12 12 42" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/4915fae8-e766-4daa-9fd5-389c43536284"> Clicking on the PlayStation logo in the toolbar will bring the user back to the main screen. Regarding use of the logo, this is an SF Symbol and can be used as long as it only refers to Sony's PlayStation: <img width="367" alt="Screenshot 2024-02-01 at 12 34 41" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/8b80435d-f0d9-49bd-96d7-6a5522f0797b"> The issue with two-column style is that the tab views, especially for PS5, could get quite crowded, so I tried out a three-column view: <img width="1350" alt="Screenshot 2024-02-01 at 12 28 45" src="https://github.com/SvenGDK/PS-Mac-Tools/assets/50119606/12cb267b-8c78-48f1-8ddc-20209a9deb98"> The advantage of this is that you could have as many tools as needed in the second column. However, personally speaking I'm not a fan of the three-column view here... (I'm also having trouble hiding the second column on the main screen but that's probably my own fault). Anyway, I should check here if you're interested in the code for this, and if you'd like me to continue and finish off all the views.

This discussion has been locked. Commenting is limited to contributors.