Playnite Forums
Fluent UI - Printable Version

+- Playnite Forums (https://playnite.link/forum)
+-- Forum: Extension Database (https://playnite.link/forum/forum-3.html)
+--- Forum: Themes - Desktop (https://playnite.link/forum/forum-8.html)
+--- Thread: Fluent UI (/thread-745.html)



Fluent UI - FueneChaos - 07-10-2021


FLUENT UI

A Theme Inspired from a Concept.


||DETAILS VIEW||


[Image: Yq4j2sa.png]

[Image: JImvTvo.png]


||GRID VIEW||

[Image: q37EAWj.png]

[Image: nus3qZY.png]


[Image: t2cvC05.png]


Installation:

Download the Theme File (.pthm) and Open it or Drag and Drop it into Playnite's Main Window.

Instructions and Recommended Settings:

[Image: mYzF2ve.png]

Make sure to enable "Use game background image as window background" and Set "Blur Background" to Max for getting
the blur effect on the SidePanel.

[Image: A6DZSZt.png]

Make Sure to enable Explorer Panel for Grid View SidePanel's Explorer Panel to Work.

[Image: OHnEOnq.png]

(these settings are located in Details View under Appearance)


Vertical spacing to game details must be enabled
Changing Game list icon height changes the distance between Game Title in the Details view Game list, also icon size.
Also enable everything in "Game fields to be displayed on details panel".


[Image: GJCi3UG.png]


(these settings are located in Layout under Appearance)
The Positions shown in this attachment are highly recommended.
Grid View SidePanel's Width can be adjusted by changing "Grid view details position" Width.
Detail View SidePanel's Width can be adjusted by changing "Details view game list position" Width.
Disable "Draw separator between Panels".


[Image: fYkyBB8.png]



(these settings require the Thememodifier extension and is located in Plugins)
Grid View Background is the background color for Grid View and is set to Transparent in default, set the Opacity to 1 for getting a Solid Background for Grid View.
The Accent Color changes the color of the theme.


[Image: oGZte40.png]

To Increase the size of the area highlighted in Yellow, the Value of Vertical spacing to game details(in Details View under Appearance in settings) must be increased.

To Increase the size of area highlighted in Red, the Value of Game Overview Side Settings(under Edit constant in ThemeModifier) must be increased.

To Increase the size of area highlighted in Green, the Value of Game Overview Bottom Settings(under Edit constant in ThemeModifier) must be increased.

Additional Info:


This Theme has a static SidePanel which can be docked to left or right and also resized. The SidePanel cannot be hidden or removed.

Details View SidePanel shows the game library and the Grid View SidePanel Shows the Explorer Panel.

The "Achievements, HowLongToBeat and Screenshots" will only work if the Extensions "SuccessStory, HowLongToBeat and ScreenshotsVisualizer" are installed, Custom theme integration must be enabled.

Everything in the SidePanel works and the Explorer Panel(Grid View) and Library(Details View) can be expanded and collapsed.
 

GitHub Repository: fuenechaos/fluent-ui-playnite: A Theme for Playnite Launcher (github.com)


Change Log:

Version 1.2
- Various Issue Fixes
- Added more ThemeModifier Options
- Performance Optimizations
- Completely Do over of the Overview Panel(new functions)
- Added Extra Metadata Support

Version 1.1
- Fixed Non-Blurred Background not appearing issue.
- Unified Accent color, now the theme color can be changed by just changing the accent color.
- Fixed Various issues in High Resolution Displays.
- Added ThemeModifier options for changing spacing of Game Overview.
- Fixed Text Alignment Issues.
- Fixed Community Score progress bar missing.
- Plugin Buttons (Achievements,HowLongToBeat) will be hidden if they are not installed or enabled.
- Fixed Windows buttons overlap in List View.
- Enabled ScrollBar For Grid View.
-Added text to details, now its not just icons.
- Fixed Windows buttons overlap Explorer Panel and Filter Panel.
-Moved Game Name Inside the Grid in Grid View.


Download(DOES NOT SUPPORT PLAYNITE 9):

[attachment=1769]



RE: FLUENT UI - ragestaker21 - 07-14-2021

This was the playnite desktop theme nobody dared to make, i was developing my own version of xbox library but screw it, this theme is too good.

thank you for the theme Smile

feedback:
  • instead of game title text show game logo via the extra metadata tools extension, its really easy to implement.
  • in gridviewgamedetails swap metacritic score position with community score
  • make gridviewgamedetails "play" button a little more interesting




ps. i assigned game icons to platforms so i can get something like this which i think is cool:
[attachment=1762]


RE: FLUENT UI - FueneChaos - 07-14-2021

(07-14-2021, 01:02 PM)ragestaker21 Wrote: This was the playnite desktop theme nobody dared to make, i was developing my own version of xbox library but screw it, this theme is too good.

thank you for the theme Smile

feedback:
  • instead of game title text show game logo via the extra metadata tools extension, its really easy to implement.
  • in gridviewgamedetails swap metacritic score position with community score
  • make gridviewgamedetails "play" button a little more interesting




ps. i assigned game icons to platforms so i can get something like this which i think is cool:

-The first suggestion is something I am working on rn.
-I'll try to make a theme modifier option for swapping metacritic and community score.
-And yes i'll see if i can make "play" button a little more interesting.


RE: Fluent UI - adrian5683 - 07-18-2021

Hi, any idea why I'm getting no menu icons in the theme on my Windows 7 1440p machine? It's working fine on my Windows 10 1080p laptop... Pic below.


RE: Fluent UI - FueneChaos - 07-18-2021

(07-18-2021, 05:14 PM)adrian5683 Wrote: Hi, any idea why I'm getting no menu icons in the theme on my Windows 7 1440p machine? It's working fine on my Windows 10 1080p laptop... Pic below.
The icon font used is Segoe MDL2 Assets which is for windows 10
Try Downloading and installing the icon font manually : [attachment=1767]


RE: Fluent UI - adrian5683 - 07-18-2021

Thank you! That did most of the trick, the only thing missing is the game menu button in the details panel and some icons in the settings menu. Any other Windows 10 assets I'm missing? Come to think of it I think some of these were missing throughout the other themes, just never noticed it...


RE: Fluent UI - FueneChaos - 07-18-2021

(07-18-2021, 05:39 PM)adrian5683 Wrote: Thank you! That did most of the trick, the only thing missing is the game menu button in the details panel and some icons in the settings menu. Any other Windows 10 assets I'm missing? Come to think of it I think some of these were missing throughout the other themes, just never noticed it...
Since its windows 7 maybe install Segoe UI Symbol which I think its for windows 8 and above
I can't upload it since the file size is larger than the forum limit


RE: Fluent UI - adrian5683 - 07-18-2021

No worries, will do.

EDIT: Had to update to the latest Windows 10 version of Segoe UI Symbol and everything appears as it should.

I might have to use this theme on my Windows 10 pc only since the Explorer Panel isn't working on Windows 7, didn't realize there were compatibility issues between them.

EDIT 2: Never mind, got that to work as well Smile


RE: Fluent UI - JAXi - 07-26-2021

Any idea why I can't find any games on grid view? Like nothing shows up. Just the same blank "details" view. No actual grid.


RE: Fluent UI - FueneChaos - 07-26-2021

(07-26-2021, 12:51 PM)JAXi Wrote: Any idea why I can't find any games on grid view? Like nothing shows up. Just the same blank "details" view. No actual grid.
Did you try clicking the "X" button on grid view , i have attached an image in which its circled in black
[attachment=1777]


RE: Fluent UI - CptVeg - 08-03-2021

How do I get rid of the library above the game title/logo?
[attachment=1785]


RE: Fluent UI - FueneChaos - 08-05-2021

(08-03-2021, 07:10 AM)CptVeg Wrote: How do I get rid of the library above the game title/logo?
Go to Playnite's Settings , then Under Appearance you will find Details view
In that Uncheck Source


RE: Fluent UI - bettafo - 08-19-2021

This is a good looking theme, with an original and well thought through design. Congrats and thank you for making it available.
I would like to share a few observations:

-Transitioning from one game to another in the library is a bit slow (about 3 sec in desktop view, about 2 sec even in list view). which makes navigating through games not so pleasing. Now, this in not the only skin like that and in my experience from other skins what slows things down seems to be quierying the info for/displaying HowLongToBeat and SuccessStory. So I am wondering if there is a way to make sure that those componenets are not sollicited unless the user has clicked on the Achievements or HowLongToBeat tabs. That way browsing through games would be faster at least while the Overview or Details tabs are displayed.

-In the HowLongToBeat tab, those circles could be made a bit smaller or the elements re-arranged so to fit the window. At the moment their bottom is partly hidden making scrollbar being displayed for almost nothing.

- The greyed out icons (filter/?/Steam friends/? the second and fourth have no tooltip btw) are are almost not discernable against the background and should contrast against it a bit more so that even if greyed out we know what they are and where they are.

- The same problem of contrast with the background happens when a line item (individual achievement) is selected in the Achievements tab. The orange background while scrolling through the achievements is fine, but it is replaced unecessarùily (because no further action is possible for the selected item) with a white background when an item is clicked on. It should judt remain orange.

- Logos in the place of titles are not always readable (I guess their displayed size varies according to their shape, plus their readability varies widely with other factors like their design and the amount of peripheal transparent space...). That is a common problem to skins displaying logos and not one that is easy to solve but I would like to propose a few possible solutions:
* Display the game title in all the description tabs (instead of only in Overview) so that even when the title from the logo is not very readable it does not matter much. After all we don't need "Details", "Achievements" or "How Long to Beat" to take the place of the game title. We know already what tab is on display because its name is coloured in orange in the left panel. Ideally the title zone would then remain fixed/always on display and only the further details under it would be scrollable.
* A skin setting to let the user decide on the display size of logos (within a range or among a few options)
* A skin setting to place a semi opaque background under the logo so to contrast it better against the background image. That does not solve the whole problem but make things a bit better in a number of cases.

- A few skin options would be nice for the where the logo, play button and "..." get displayed. At the moment, if the background features a game character then chances are that they are going to be displayed right on its face. I think better alternative places for the logo would be just above the description window either still at the center or aligned to the right or to the left. A good alternative place for Play and "..." would be in the left panel, under HowLongToBeat.

- I see there was a discussion already about which score is displayed in the Overview. I would like to suggest something that no other skin does: displaying the average of the user/community/critics score in the overview and the details of the three scores in the details tab. It makes sense I think in an overview to display synthetic info rather than something more or less arbitrarily chosen. Now I hear that it is not really foreseen to make any calculation in XAML. A huge shame. If thre is no way around that at least there should be some code to display another score in the Otherview panel whenever the community score has no value.

- When there is no selection, then maybe the left panel, details panel, play button and "..." could be hidden? No biggie but it just looks a bit weird at the moment.

- Most of the time scrolling through the achievements panel is going to get interrupted when reaching the sub window with individual achievements lines because that sub window takes the focus. The user has the to scroll through all the possible achievements to reach the info that is under. Again no biggie but maybe change this behaviour so the sub window only gets the focus if the user clicks on it, or just put that sub window at the bottom of the Achievements panel.

- When switching from a game with Achievements to a game whithout, the Achievements panel would ideally be scrolled all the way up so that what little permanent info there is is displayed, instead of an empty grey border where list of achivements should be. Again no biggie but it would look cleaner.

Sorry for the long post. I hope that you find some of the ideas useful.
Cheers


RE: Fluent UI - FueneChaos - 08-21-2021

(08-19-2021, 03:53 PM)bettafo Wrote: This is a good looking theme, with an original and well thought through design. Congrats and thank you for making it available.
I would like to share  a few observations:

-Transitioning from one game to another in the library is a bit slow (about 3 sec in desktop view, about 2 sec even in list view). which makes navigating through games not so pleasing. Now, this in not the only skin like that and in my experience from other skins what slows things down seems to be quierying the info for/displaying HowLongToBeat and SuccessStory. So I am wondering if there is a way to make sure that those componenets are not sollicited unless the user has clicked on the Achievements or HowLongToBeat tabs. That way browsing through games would be faster at least while the Overview or Details tabs are displayed.

-In the HowLongToBeat tab, those circles could be made a bit smaller or the elements re-arranged so to fit the window. At the moment their bottom is partly hidden making scrollbar being displayed for almost nothing.

- The greyed out  icons (filter/?/Steam friends/?  the second and fourth have no tooltip btw) are are almost not discernable against the background and should contrast against it a bit more so that even if greyed out we know what they are and where they are.

- The same problem of contrast with the background happens when a line item (individual achievement) is selected in the Achievements tab. The orange background while scrolling through the achievements is fine, but it is replaced unecessarùily (because no further action is possible for the selected item) with a white background when an item is clicked on. It should judt remain orange.

- Logos in the place of titles are not always readable (I guess their displayed size varies according to their shape, plus their readability varies widely with other factors like their design and the amount of peripheal transparent space...). That is a common problem to skins displaying logos and not one that is easy to solve but I would like to propose a few possible solutions:
    * Display the game title in all the description tabs (instead of only in Overview) so that even when the title from the logo is not very readable it does not matter much. After all we don't need  "Details", "Achievements" or "How Long to Beat" to take the place of the game title. We know already what tab is on display because its name is coloured in orange in the left panel. Ideally the title zone would then remain fixed/always on display and only the further details under it would be scrollable.
    * A skin setting to let the user decide on the display size of logos (within a range or among a few options)
    * A skin setting to place a semi opaque background under the logo so to contrast it better against the background image. That does not solve the whole problem but make things a bit better in a number of cases.

- A few skin options would be nice for the where the logo, play button and "..." get displayed. At the moment, if the background features a game character then chances are that they are going to be displayed right on its face. I think better alternative places for the logo would be just above the description window either still at the center or aligned to the right or to the left. A good alternative place for Play and "..." would be in the left panel, under HowLongToBeat.

- I see there was a discussion already about which score is displayed in the Overview. I would like to suggest something that no other skin does: displaying the average of the user/community/critics score in the overview and the details of the three scores in the details tab. It makes sense I think in an overview to display synthetic info rather than something more or less arbitrarily chosen. Now I hear that it is not really foreseen to make any calculation in XAML. A huge shame. If thre is no way around that at least there should be some code to display another score in the Otherview panel whenever the community score has no value.

- When there is no selection, then maybe the left panel, details panel, play button and "..." could be hidden? No biggie but it just looks a bit weird at the moment.

- Most of the time scrolling through the achievements panel is going to get interrupted when reaching the sub window with individual achievements lines because that sub window takes the focus. The user has the to scroll through all the possible achievements to reach the info that is under. Again no biggie but maybe change this behaviour so the sub window only gets the focus if the user clicks on it, or just put that sub window at the bottom of the Achievements panel.

- When switching from a game with Achievements to a game whithout, the Achievements panel would ideally be scrolled all the way up so that what little permanent info there is is displayed, instead of an empty grey border where list of achivements should be. Again no biggie but it would look cleaner.

Sorry for the long post. I hope that you find some of the ideas useful.
Cheers

The long post is absolutely fine and ideas are always appreciated,
-The delay when changing a game has been fixed, now with all extensions enabled the delay is very low
-Also the option to change logo size will be available by the next update
-The contrast issue of lists (the achievements one you mentioned) should be gone because it has been redone
For the other issues there are a few i might check out and then there are a few which might not be possible to achieve at the moment

The next version might be out after Playnite 9 is released and the fixes i mentioned above will be there along with it
And the UI's Visual is also being redesigned so issues from the Appearance side would also be improved


RE: Fluent UI - bettafo - 08-21-2021

Sounds great! I can't wait.
Thank you.
Cheers


RE: Fluent UI - Skyline404 - 08-21-2021

Great skin, thx


RE: Fluent UI - Skyline404 - 09-09-2021

Is it normal, or i do smth wrong, but when disabling titles in constrains they dont hide ?


[Image: B92htIE.png]


[Image: 4zKJp7v.jpeg]


RE: Fluent UI - FueneChaos - 09-14-2021

(09-09-2021, 06:57 PM)Skyline404 Wrote: Is it normal, or i do smth wrong, but when disabling titles in constrains they dont hide ?


[Image: B92htIE.png]


[Image: 4zKJp7v.jpeg]
Yes, that option is for hiding the title under the Logo, so if you make it visible then that will appear and the one highlighted in this screenshot gets hidden


RE: Fluent UI - bettafo - 09-29-2021

Good day,
I was having a look again at your skin and have yet another suggestion Smile
-In "Overview" the score that is displayed does not use a colour code (green for high score etc.) though it does in 'details'.
I understand that it may be an aesthetic choice to keep the score in the same overall skin dominant colours but I would like to suggest a skin option to use colour coding instead as it makes a lot of sense to be able to spot a first glance how well a game is rated when browsing your library.
-Also while in 'Overview' the icons, fields names and their values are aligned (tabbed) into 3 columns, the value for the score field breaks the alignment.
Cheers