Server: Adjust Tags Icon

[MariusBluem]

The current tags-icon in the sidebar is a lens 😕 ...more than that this is unfitting, it is also in the wrong gray level in opposite to the other icons (should be darker) 😱

However... I think we should replace it with something fitting better, like: http://fontawesome.io/icon/tags/

cc @nextcloud/designers

[jancborchardt]

Yup, setting as a good starter issue. :)

[MariusBluem]

Can we use the tag-icon i've mentioned above (fontawesome.io) or should we use it from a different place? @jancborchardt

License: http://fontawesome.io/license/ (...seems that no attribution is needed 💪)

[jancborchardt]

Ideally it should be created newly to be just a single tag. Also, the Fontawesome style is too rounded, if you see what I mean. It’s a very simple form so it should be good for a beginner to create similarly to the other icons we have. :)

[MorrisJobke]

Ideally it should be created newly to be just a single tag.

Use one of these: https://thenounproject.com/search/?q=tag (with appropriate license)?

[MariusBluem]

I see :wink: @jancborchardt

Because of you can assign multiple tags and they are called in plural (tagS) we should use 2 tags I think.
Why only one?

[jancborchardt]

@MorrisJobke to be honest I think it’s far easier to quickly create it than to copy it from the noun project, especially as all the icons are made to fit as well. Plus it’s a nice starter issue.

@mar1u5 because it’s a simpler form, and as the text is always next to the icon it’s fine.

[MorrisJobke]

@MorrisJobke to be honest I think it’s far easier to quickly create it than to copy it from the noun project, especially as all the icons are made to fit as well. Plus it’s a nice starter issue.

Sure :)

[MariusBluem]

Since there are some people out here (yes.. i am talking to all of you @nextcloud/designers 😅) which can do graphic design and creating an icon from scratch better then me - i will unassign me from this and look forward for an volunteer 💪

replacing = yes ... designing the entire icon = nah 😁

[Bugsbane]

I understand that from a linguistic point of view we're assigning tags (plural), however even before reading @jancborchardt's thoughts on just having a single tag, I was thinking the same as him (ie a single tag), mainly because it's going to be seen small, and having more details for something that small just lowers the clarity / visual readability imo.

Anyway, how's this? I tried to get it to match, stylistically, with the sharp corners of the folder icons and the orientation of the link icon. I can license it whatever we need (CC-BY-SA iirc?)

[jancborchardt]

@Bugsbane nice! Just 2 things I would change:

• the tag corner should be in the top left instead of top right, makes it look more balanced and you see more tag icons looking like that.
• maybe make the tag a bit wider than long, just a tad.

[Bugsbane]

the tag corner should be in the top left instead of top right, makes it look more balanced and you see more tag icons looking like that.

The only issue with this is that it would be visually inconsistent with the orientation of the link icon (and possibly others).

maybe make the tag a bit wider than long, just a tad.

Sure.

Anyway, here's how it looks with both suggestions applied.

Personally, I feel that having the tag facing away from the word feels off, as in the real world tags hang from the thing they're attached to, and thus point towards them. Does anyone else have any thoughts after seeing both versions? ( I do like the shorter/wider tag size though).

[williambargent]

@Bugsbane I agree, I think it looks out of place facing that way. Might be worth rotating the 'links' icon.

[jancborchardt]

@Bugsbane that looks good!

The only issue with this is that it would be visually inconsistent with the orientation of the link icon (and possibly others).

Since icons are there to differentiate stuff, I think this is more of a positive thing than bad. Otherwise stuff would look too similar.

I’d only round the corners a tad more (like they are on the folder icon) and maybe make the hole circle a bit bigger. Otherwise good to go.

[Bugsbane]

Ok, here's a version with the exact same amount of rounding as in the current source svg for the folder, and with the hole enlarged a bit and moved to keep it balanced.

[MorrisJobke]

Ok, here's a version with the exact same amount of rounding as in the current source svg for the folder, and with the hole enlarged a bit and moved to keep it balanced.

Nice :) Could you create a PR for this?

[MariusBluem]

Big THX to @Bugsbane 💪

[jancborchardt]

@Bugsbane nice! :) I would still make it a bit wider and less long, so it looks more in tune with the other icons. Otherwise really good!

[Bugsbane]

make it a bit wider and less long

Could you create a PR for this?

I'll... try. Let's just say I have a lot more experience and comfort with design, UX and marketing than revision control systems. _sigh_ (although I've pulled it off for a couple of other projects, with some hair loss)

[jancborchardt]

@Bugsbane sure, let us know if you need any help. :)
The Github git tutorial is pretty awesome: https://try.github.io

[Bugsbane]

OK, I got as far as adding the PNG and SVG to staging and doing a commit, but then when I try to push it I get this:

Username for 'https://github.com': bugsbane
Password for 'https://[email protected]': {MY GITHUB PASSWORD}
remote: Permission to nextcloud/server.git denied to Bugsbane.
fatal: unable to access 'https://github.com/nextcloud/server.git/': The requested URL returned error: 403

Is this because I've done something wrong, or because I need to be given permission to push?

[MorrisJobke]

Is this because I've done something wrong, or because I need to be given permission to push?

It seems that you don't have the permissions. Then you need to do a fork and push to your fork of this repo. Then from there you could create the pull request.

[MariusBluem]

The easiest way would be (Noob-Webinterface :stuck_out_tongue_winking_eye:)

1) Fork
2) Create a "tags-Icon" branch in your fork
3) Change the Files via GitHub.com and push them into your "tags-icon" branch
4) If you have done this with all files - and everything works create a PR with your branch into 'master' of nextcloud/server

[Bugsbane]

Ah, OK. Yes, I didn't fork, I just did git clone, and then I guess it tried to commit straight to master, which I didn't have permissions for. Learning slowly, but surely!

[Bugsbane]

Ok, so I was still having trouble with the CLI (differnce between git clone and git add remote? ) but I tried GitHub's interface for it, which was remarkably easier, and now I have my first pull request! ( https://github.com/nextcloud/server/pull/311 ). Here's to many more (although I _will_ figure out the CLI eventually)