iKenndac / Tofu

An easy-to-use two-factor authentication app for iOS
https://tofuauth.com
ISC License
491 stars 64 forks source link

Change Icon Design Organization #52

Closed FIGBERT closed 3 years ago

FIGBERT commented 3 years ago

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.

calleluks commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Update: realized I can close myself lol