Repository navigation
Icon inconsistency #5157
Description
Activity
but some design guidelines would be useful.
Summoning our designers @nextcloud/designers for input :)
Hey @pixelipo, awesome! Yes, help on making those standardized would be appreciated of course. :)
- Opacity & color: Yes, the icons should exist in black (and white where needed inversed), and opacity should be done by CSS. The default opacity is .5 but might need adjustment in specific cases.
- Size: 16x16 is the default size for action icons as that can be scaled up to anything. The app icons are 32x32 but mostly work on a grid of 16x16 anyway. The margin on some icons is important to make them all visually equal. A square icon fitting the entire size will look heavier/larger than a round icon, hence the square one is minimized in size a bit. It’s best to look at existing icons for this, as especially the app icons and filetype icons are good examples of how to balance wide icons, high icons, square or round icons.
- Target size: The clickable target size should be a minimum of 44x44px (achieved through padding), according to Apple Human Interface Guidelines. In some cases it’s bigger, for example in the header or in the file actions row so they fill the height of the row. It should never be smaller though and probably we should introduce that min-width and min-height in the CSS somehow – which will need to be well-tested though. :)
Reacted by Paulo Mourathat's what I was hoping to hear, @jancborchardt !
If someone can add me to the team, I can assign myself to this issue and prepare a pull request.
@pixelipo Btw, do you use any optimization besides the SVG line in build/image-optimization.sh? If so, it would be good to document that.
And also, probably the things we talk about here we should maybe move some of it to a more permanent place in the icons part of the design documentation? https://docs.nextcloud.com/server/12/developer_manual/design/icons.html like below the icons, so we can refer to it. cc @skjnldsv
Reacted by Marin Treselj and John MolakvoæCompletely agree! :)
Most likely nothing for 14 -> moving to 15.
Since all necessary TO DO points are done, I am going to close this issue. Please open new issues or PRs with specific pointers to icons that still need to be fixed.
There seems to be a bit of an inconsistency regarding icons on Nextcloud. I can give a hand in cleaning that up, but some design guidelines would be useful.
Opacity
opacity: 0.5;default ? If so, it shouldn't be defined in the SVG (example here, but globally in the (S)CSS.opacity: 1;on hover/focus?Color
fillin svg)? Some icons seem to use different shade of grey. Should that be fixed?Size
#appmenu, 16x16 in thenav(mobile), but have original size of 32x32. Which one should it be?Target
.fileactions) or 50. Any rules to follow?TO DO
actionsicons Optimize SVG icons #7130categoriesicons Re-optimize filetype and category icons #7194filetypesicons Re-optimize filetype and category icons #7194placesicons Re-optimize places and files icons #7188OPTIONALLY:
*-big.svganduser-*.svgicons Remove unused, deprecated icons #7236share.svgandshared.svgRemove svg shadows gallery#331settings.svgandsettings-dark.svgstar.svgandstar-dark.svgtoggle.svgopacity to CSSclose.svgicon Make close icon fill more space #7239