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

Desktop, Mobile: Link resource Icon #2035

Merged
merged 9 commits into from
Nov 5, 2019

Conversation

CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Oct 28, 2019

This pull customizes the resource link icon based on the mimeType of the attached item. A screenshot will demonstrate what it does best
image

The icon will follow the current set theme, additionally the icons can be set using css by overwriting the fork-awesome css.
As you can see this only applies to resources so regular urls won't have an icon.

unfortunately I had a lot of trouble trying to get this working on mobile, which is why for now I have it disabled on mobile. @laurent22 if that doesn't work, could you help me out in getting mobile working? I tried copying the way that katex loads fonts at runtime, but I could never get the icons to render properly, even with that.

Based on the forum post about this maybe we should discuss exactly how we want resource/link icons to look before merging this.

@laurent22
Copy link
Owner

Thanks @CalebJohn, and the code looks good. I think we can indeed get it working on mobile so I'll take a look.

@laurent22
Copy link
Owner

Ok it's a bit complicated to get this working on mobile due to the font files that need to be embedded, so let's focus on desktop only for now.

I think the icons look a bit big, could you make them a bit smaller? In my tests 1.4em looked good. Also if you could add a bit more margin to the right of the icon (0.4em looked fine for me).

Finally, if I attach a .txt file, there's no icon for it, while I expect it's a commonly used file. Since we use Font Awesome lib to get the icon name, maybe it's a different name in Fork Awesome?

@CalebJohn
Copy link
Collaborator Author

I've changed them as you suggested, it's funny, I originally had 1.4em and 0.4em, but as I tweaked things around I settled on slightly different values.

You were absolutely right about the txt issue, turns out that font awesome doesn't have a txt format, I added a special case for it and checked the rest of the icons to make ensure they're present in both.

In regards to the mobile issue, we can actually change the way we render icons back to the old method (inline svg) that tessus had added (which is still the fallback for mobile). I would only have to add ~11 inline svg icons. And we could use the font awesome names to clean up the code a bit!
What do you think? If it's alright with you I might add a commit here that would replace the font stuff.

@laurent22
Copy link
Owner

In regards to the mobile issue, we can actually change the way we render icons back to the old method (inline svg) that tessus had added (which is still the fallback for mobile). I would only have to add ~11 inline svg icons. And we could use the font awesome names to clean up the code a bit!
What do you think? If it's alright with you I might add a commit here that would replace the font stuff.

That sounds like a good solution and if you could figure out how to implement it that would be great. I guess we would only support the 11 most common file formats then, but that's probably more than enough.

@CalebJohn
Copy link
Collaborator Author

Fork awesome only really has that many so it shouldn't be an issue, additionally the library that we use (font-awesome-filetypes) only supports 12 (one of which is csv which isn't in fork awesome).

@CalebJohn
Copy link
Collaborator Author

I finished the updates we talked about. Also tested on mobile!

Here is all supported icons together
image

@laurent22
Copy link
Owner

Thanks @CalebJohn, I've just left one comment and once this is done we can merge.

@tessus
Copy link
Collaborator

tessus commented Nov 5, 2019

If there's zip, there should be the other compressed formats too:

.tar.gz
.tar.xz
.7z

Just my 2 cents. Or are these included in file-archive?

@tessus tessus added desktop All desktop platforms mobile All mobile platforms labels Nov 5, 2019
@tessus tessus changed the title Desktop: Link resource Icon Desktop, Mobile: Link resource Icon Nov 5, 2019
@CalebJohn
Copy link
Collaborator Author

@tessus tar.gz does work, but it looks like the other 2 don't. I was thinking I would probably make a pull adding some filetypes because right now what they have is very limited.

@tessus
Copy link
Collaborator

tessus commented Nov 5, 2019

@CalebJohn it's not necessary for this PR. I just thought that there are way more compressed formats than just zip and it would have been nice to recognize those as well.

@laurent22
Copy link
Owner

It's all good now, many thanks for the PR @CalebJohn! For the file types we can indeed support more afterwards. I would assume they already map things like video and image mime types to the correct icons, but perhaps some are missing.

@laurent22 laurent22 merged commit c05bc89 into laurent22:master Nov 5, 2019
@CalebJohn CalebJohn deleted the link-resource branch November 5, 2019 21:57
scoroi pushed a commit to scoroi/joplin that referenced this pull request Nov 10, 2019
* Add forkawesome icons

* Add resource icon for specific filetypes

* Ignore resource link styling on mobile

* whtiespace

* render txt icons and adjust icon sizes

* Replace fork-awesome font with inline svg so icons work on mobile

* Add comment describing the source of resource icons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
desktop All desktop platforms mobile All mobile platforms
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants