NC 25 - Theme-Colored Folder-Icons

How to use GitHub

Please use the 👍 reaction to show that you are interested into the same feature.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
In the new NC25-Theme the thumbnail foldericons have a static greyish color. With this change the themes primary color could be used.

Describe the solution you'd like
Switch from the background-image css property to a combination of mask-image and background-color

Describe alternatives you've considered
Having multiple icon-sets which could be chosen

Drawbacks
If this is used globally for all icons the mime-type specific css would need additional background-color properties either fixed or via theme settings

Additional context

mask-image: url(/apps/theming/img/core/filetypes/folder.svg?v=16);
background: var(--color-primary);
mask-size: contain;

Right now:

With mask-image:

CSS-Change in Browser:

Probably the same problem as the one I detailed in this issue : #34578

I can confirm this issue:

cc @nextcloud/server-frontend

Probably the same problem as the one I detailed in this issue : #34578

I just tried an reset the theme color to the default and now the folder color changed to another color that suits the bg-image. The #396475 color from before was after upgrading from 24 and having a custom color set in the global design settings. After setting the design color to a custom value again the folder color keeps the last color that was applied by the bg-image.

So it should either always be set with the bg-image and/or give the admin the possibility to set it to a static theme-color (or even a custom color field alongside the theme color?)

@nextcloud/frontenders do you have some pointers on how to fix this?

@nextcloud/frontenders do you have some pointers on how to fix this?

Yes, because the user can also change the colour now, the cache buster needs to be using the user cache buster alongside the admin
See

server/apps/theming/lib/Service/ThemeInjectionService.php

Lines 90 to 96 in b9bbb25

    
           $cacheBuster = $this->config->getAppValue('theming', 'cachebuster', '0'); 
        
           if ($this->userId !== null) { 
        
           	// need to bust the cache for the CSS file when the user background changed as its 
        
           	// URL is served in those files 
        
           	$userCacheBuster = $this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0'); 
        
           	$cacheBuster .= $this->userId . '_' . $userCacheBuster; 
        
           }

Maybe having some methods to get cachebuster would be nice to have.

@skjnldsv

Thanks @skjnldsv ! :)
Do you also have a pointer where the folder icons get generated or overwritten? I guess this is where the method then could get used as well to fix this issue.

Also cc @Pytal on this :)

Do you also have a pointer where the folder icons get generated or overwritten

no clue, would need to be traced back from the front

The icon is generated in

server/apps/theming/lib/Controller/IconController.php

Line 88 in 7dddbd0

public function getThemedIcon(string $app, string $image): Response {

The URL generation and adding the cache buster is done here:

server/apps/theming/lib/ThemingDefaults.php

Lines 418 to 423 in 4a2bbc7

    
           if (strpos($image, 'filetypes/') === 0 && file_exists(\OC::$SERVERROOT . '/core/img/' . $image)) { 
        
           	$route = $this->urlGenerator->linkToRoute('theming.Icon.getThemedIcon', ['app' => $app, 'image' => $image]); 
        
           } 
        
           if ($route) { 
        
           	return $route . '?v=' . $cacheBusterValue;

@juliushaertl

@juliushaertl since you are familiar with this part of the code, could you maybe take a crack at this? Otherwise I will try :)

I won't have time to dive further into this but a few more hints.

It seems the cache buster for mimetype icons is rather added here in the frontend:
https://github.com/nextcloud/server/pull/840/files#diff-d449dd50c36a47c4712a44ea7d00bdc21e58449f69f5d3c28c7fbc61c73146c7R109

Make sure that the cache buster is extended with the user cache buster (like

server/apps/theming/lib/Service/ThemeInjectionService.php

Lines 94 to 95 in 19f35f4

    
           $userCacheBuster = $this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0'); 
        
           $cacheBuster .= $this->userId . '_' . $userCacheBuster;

)

Properly pick the user color when generating the themed icon in

server/apps/theming/lib/IconBuilder.php

Line 237 in 7dddbd0

$color = $this->util->elementColor($this->themingDefaults->getColorPrimary());

(this should already be the case with the getColorPrimary call

@skjnldsv

I made it work now with #35182. However I am really unsatisfied how I implemented the details and would need some guidance or maybe @skjnldsv or @come-nc how to improve my code. @juliushaertl could you please give me some guidance on that? Thank you :)

Navigation Menu

Repository navigation

NC 25 - Theme-Colored Folder-Icons #34654

How to use GitHub

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	$cacheBuster = $this->config->getAppValue('theming', 'cachebuster', '0');
	if ($this->userId !== null) {
	// need to bust the cache for the CSS file when the user background changed as its
	// URL is served in those files
	$userCacheBuster = $this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0');
	$cacheBuster .= $this->userId . '_' . $userCacheBuster;
	}

	if (strpos($image, 'filetypes/') === 0 && file_exists(\OC::$SERVERROOT . '/core/img/' . $image)) {
	$route = $this->urlGenerator->linkToRoute('theming.Icon.getThemedIcon', ['app' => $app, 'image' => $image]);
	}

	if ($route) {
	return $route . '?v=' . $cacheBusterValue;

NC 25 - Theme-Colored Folder-Icons #34654

Description

How to use GitHub

Activity

Jerome-Herbinet commented on Oct 18, 2022

szaimen commented on Oct 18, 2022

szaimen commented on Oct 18, 2022

SephGER commented on Oct 19, 2022

szaimen commented on Nov 8, 2022

skjnldsv commented on Nov 8, 2022

skjnldsv commented on Nov 8, 2022

szaimen commented on Nov 8, 2022

skjnldsv commented on Nov 10, 2022

juliusknorr commented on Nov 10, 2022

szaimen commented on Nov 15, 2022

juliusknorr commented on Nov 15, 2022

szaimen commented on Nov 15, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions