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

Change Icon Design Organization #52

Closed
FIGBERT opened this issue Nov 1, 2020 · 3 comments
Closed

Change Icon Design Organization #52

FIGBERT opened this issue Nov 1, 2020 · 3 comments

Comments

@FIGBERT
Copy link
Contributor

FIGBERT commented Nov 1, 2020

At the moment, custom issuer icons are stored in IssuerIcons.sketch. This is a bit of a problem, as different pull requests that modify the file will overwrite it each other (git doesn't track changes in binary files like .sketch). This may have already happened, though I'm not sure, as several of the icons in Assets.xcassets are missing from IssuerIcons.sketch.

I would propose a new structure, that replaces the IssuerIcons.sketch file with a directory of icons in .sketch format. These files would be editable in Sketch, like before, but would be safe from accidentally deletion or modification. Additionally, these files could be stored with git-lfs to prevent the repo from accruing bloat.

The current directory structure is something along the lines of:

Tofu/
├─ IssuerIcons.sketch
├─ ...

Under the proposed changes, it would be structured as such:

Tofu/
├─ IssuerIcons/
│  ├─ Google.sketch
│  ├─ Github.sketch
│  ├─ Proton.sketch
│  ├─ ...

I would be more than happy to contribute this myself, but figured I'd check in, provide some reasoning, and allow for some feedback before jumping straight in.

@FIGBERT FIGBERT mentioned this issue Dec 3, 2020
@calleluks
Copy link
Collaborator

Hey @FIGBERT, thanks for thinking about this! I like the idea but I'm also considering removing IssuerIcons.sketch from the project altogether. Here's my idea:

Instead of baking rounded corners and borders into the icon images, I'm thinking of having the app do these at runtime when displaying the icons. Furthermore, since the 1x and 2x sizes of the icons are typically downsized versions of the 3x icons, I'm also considering having these generated by a script included in the project. This script could also generate the .imageset folders.

This would allow the following structure:

Tofu/
├─ IssuerIcons/
│  ├─ Google.png
│  ├─ Github.png
│  ├─ Proton.png
│  ├─ ...
├─ GenerateIssuerIconAssets.sh

GenerateIssuerIconAssets.sh could then generate the Tofu/Tofu/Assets.xcassets/*.imageset files.

My hope is that this would make the process of adding icons to the app smoother.

What are your thoughts on this?

@FIGBERT
Copy link
Contributor Author

FIGBERT commented Jan 16, 2021

I think that generating the icons with a script is really good idea, and having thought about it for a moment shouldn't be too difficult to implement.

Each icon would be given in the 3x size and placed in the IssuerIcons folder, and GenerateIssuerIconAssets.sh could use sips – installed by default on macOS – and jq to copy and resize the base images into their respective .imageset folders. I would be very interested in helping out with this. Do you have an opinion as to what language it should be written in (i.e. Bash, Python, even Swift)?

Moving the rounded corners and borders into code rather than the images also seems sensible to me, though I'm more familiar with SwiftUI than UIKit and may need some guidance and some additional Googling.

Regardless, I think it's a really good proposal and would love to help see it through.

@FIGBERT
Copy link
Contributor Author

FIGBERT commented Jan 27, 2021

I believe this can be closed with the completion of #60.

Update: realized I can close myself lol

@FIGBERT FIGBERT closed this as completed Jan 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants