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

Windows 10: add medium sized program icon #22

Closed
j-ed opened this issue Oct 19, 2017 · 11 comments
Closed

Windows 10: add medium sized program icon #22

j-ed opened this issue Oct 19, 2017 · 11 comments

Comments

@j-ed
Copy link

j-ed commented Oct 19, 2017

Expected behavior

The desktop client should provide a medium sized program icon which is shown in on a startmenu tile.

Current behavior

The desktop client only provides a small sized program icon. As a reference I've added a Firefox and Thunderbird tile:

windows10_nc-logo-zu-klein

Steps to reproduce

  1. Drag and drop the Nextcloud app to the tiles menu.

Log entries

Nothing special has been logged.

Environment

Server Configuration

OS: Linux 3.16.47
Web server: Apache2 2.4.28
Database: MariaDB 10.0.32
PHP version: 5.6.30
Nextcloud version: 12.0.3

Client Configuration

Browser: Mozilla Firefox 56.0
Nextcloud app version: 2.3.2 (build 1) and v2.3.3.1-beta
Operating system: Windows 10 Pro

@camilasan
Copy link
Member

camilasan commented Apr 26, 2018

@jancborchardt do we have the icon? I believe this can be easily added to the theming files.

@jancborchardt
Copy link
Member

@camilasan yep, the icon is at https://github.com/nextcloud/promo/blob/master/Specific%20designs/icon-android.svg – round, and with the dots in the background.

@jpnurmi
Copy link
Member

jpnurmi commented Nov 2, 2018

I'm not a Windows export so I'm not sure what's right and wrong here, but could it be that it's actually Firefox that has a strangely large icon?
startmenu

@jancborchardt
Copy link
Member

Haha, alright – I will close this then.

@j-ed let us know if this is wrong and other apps except Mozilla ones (Firefox and Thunderbird) also show big icons like that. Looking at @jpnurmi’s screenshot, it seems we are fine. :)

@j-ed
Copy link
Author

j-ed commented Nov 29, 2018

@jancborchardt As @jpnurmi wrote, he's not a Windows expert. As described in the original issue ticket Windows apps should by default provide two different sized icons, a small and a medium size one. From my understanding this change has primary been introduced to make Windows desktops better usable on tablet PCs. Firefox and Thunderbird both support both icons sizes.

These are the small sized icons of Firefox, Thunderbird and Nextcloud - everything is fine:
grafik

These are the medium sized icons of Firefox, Thunderbird and Nextcloud:
grafik

As you can see the Nextcloud app is not providing a medium sized icon and therefore a fallback to the small sized icon is done.
From my point of view we should be aware that there might be reasons to use medium sized icons, at leased e.g. by people with eye problems or only to be able to identify apps better. So why not providing one, it should be an easy task for the developer.

@jancborchardt
Copy link
Member

Alright, sure – do you have more info about it, like what dimensions are needed? Thanks :)

@jancborchardt jancborchardt reopened this Nov 29, 2018
@j-ed
Copy link
Author

j-ed commented Nov 30, 2018

I think the following information will answer your question in detail and and also provides recommendations how the different tiles should look like:
https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

@DominiqueFuchs
Copy link
Contributor

DominiqueFuchs commented Sep 1, 2019

I made the necessary changes / files in an IMHO appropriate manner and leave them here as proposal so this can get finished soon. For tldr; look at the files and just read the bottom line.

Background/Summary:

Desktop applications like FF/TB etc. accomplish the tile style control by the placement of a special file in the installation folder (besides the executable). Windows looks out for a file called [programname].VisualElementsManifest.xml and checks if content. There are strict rules what this file may and must contain. Necessary if file is used:

  • Backgroundcolor of tile
  • (Text) Foregroundcolor of tile

That said, I propose these to properties as an example because I like them (Text 'light', background dark blue #293976. They can be changed, but have to be there. For more infos see [1] and [2]. Even though the title of [1] states 'runtime apps' this methods works for all kind of applications.

Old (current) logo:

Nextcloud_OldTile

Nextcloud_OldTile_small

Option 1: Full-Tile logo

Based on the assumption that we want to keep the text ('Nextcloud' on tile) we have to consider readability when this text may collide with the bigger logo. One option is to scale the flat SVG-version across the whole 150px-Tile as the logo has a nice blue background already:

Nextcloud_NewTile_flat_medium

Nextcloud_NewTile_flat_small

Option 2: 'Boxed' (current) logo, but well placed

I rescaled and positioned the current logo for both sizes (150px with a little border and slightly shifted to the top to stay in harmony with the text)
):

Nextcloud_NewTile_boxed_medium

Nextcloud_NewTile_boxed_small

You can find both variants of the corresponding manifest file as well as the generated assets attached. Pathes are based on the fact that I placed the assets in the 'resources' folder in my existing installation for testing. For the flat version, the same asset for 70 & 150px entry is used.

One more thing: If you're trying to test this or want to make your own variants: Windows needs a trigger to update the tile specs, just changing the assets and updating the manifest won't result in anything. The easiest way I found is to rewrite the timestamp of the corresponding link (in the start menu folder), this triggers an update. Powershell variant:

(ls "$env:ProgramData\Microsoft\Windows\Start Menu\Programs\Nextcloud.lnk").lastwritetime = get-date

NC_TileIcon.zip

Edit: The reason I didn't make a commit to address this that the current packaging strategy isn't really well documented and I have no clue what's the actual process (and so: where to add these files and which routines to edit).

[1] How to customize Start screen tiles for desktop apps
[2] App icons and logos

@DominiqueFuchs
Copy link
Contributor

Update: Nevermind, I think I got it now with the 'new' repository regarding the packaging process.

If this gets acknowledged / polished here, I can do a corresponding PR with changes to desktop (resource files) and client-building (packaging/distribution).

@camilasan would be nice if you could take a look at this some time

@DominiqueFuchs
Copy link
Contributor

Here are new assets with the updated logo, as I noticed after first seeing this issue. Thanks to the promo branch they are also based on the svg version (thus pixel perfect). Only change I made to the logo is a slight rescale and shift upwards for the 150px variant.

Nextcloud_NewLogo_Shifted

Nextcloud_NewLogo_Centered_small

tileassets_newlogo.zip

@camilasan
Copy link
Member

Closing this issue thanks to #1401 ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants