This is an update to 82 Zed UI and file_icons to improve icon legibility
and align contributed file_icons to the general icon system styling.
From review it appears they're 2px larger in width and height but gpui
render scaling is at play. The original icons were designed at 14x14 to
be viewed at that size, but the ui_font_size now controls this so
they've been updated to the default of 16x16 for optimum fidelity.
Release Notes:
- Updated various UI and file icons for consistency.
I would like to add these file icons all from the source svgrepo.com and
with a size of 14x14. Also I've modified file_types.json in order to add
the file types and path to the image aswell as added SQL as a storage
type so it's linked to an icon.
Here is how these new changes would look like:
<img width="240" alt="Captura de pantalla 2024-02-26 a las 19 30 33"
src="https://github.com/zed-industries/zed/assets/93369643/73e50e4a-bfe8-4239-b919-280150051e36">
Release Notes:
- Added icons for Coffeescript, F#, Nim, Scala, and TCL files.
- Updated icon for SQL files.
This PR formats the JSON files in the `assets/` directory with Prettier.
This should help avoid some of the changes in formatting when these
files are touched by contributors.
Release Notes:
- N/A
This PR recognizes the following filetypes and provides them with
appropriate icons: `.avi .heic .j2k .jfif .jp2 .jxl .m4a .m4v .mkv .mka
.mov .opus .qoi .wma .wmv .wv`.
It also corrects `.ogg` to display an audio icon, not a video icon.
Though the container supports video, `.ogg` files are most commonly
found containing audio-only bitstreams likely due to the popularity of
the Vorbis audio codec. VSCode recognizes OGG files as audio.
Here is an exhaustive list of the file formats this PR aims to
recognize, with a subjective commonality rating attached to each:
- `.avi`: Audio Video Interleave. Multimedia container format for video
and audio data. **Rating: 7/10**
- `.heic`: High Efficiency Image Format. The same thing as `.heif`,
which is currently recognized. **Rating: 6/10**
- `.j2k`: JPEG 2000. Bitmap image format for lossy or lossless
compression. **Rating: 3/10**
- `.jfif`: JPEG File Interchange Format. Alternative JPEG extension that
sometimes pops up on the Web. **Rating: 5/10**
- `.jp2`: JPEG 2000 again, same rating.
- `.jxl`: JPEG XL. Modern, versatile image format growing in popularity.
**Rating: 5/10**
- `.m4a`: MPEG-4 Audio. Audio file format using AAC (lossy) or ALAC
(lossless) codecs. **Rating: 8/10**
- `.m4v`: MPEG-4 Video. Video container format developed by Apple
similar to MP4. **Rating: 4/10**
- `.mkv`: Matroska Video. Multimedia container format for video, audio,
and subtitle tracks. **Rating: 8/10**
- `.mka`: Matroska Audio. Audio file format supporting several types of
audio compression algorithms. **Rating: 3/10**
- `.mov`: QuickTime Movie. Multimedia container format developed by
Apple. **Rating: 8/10**
- `.opus`: Opus Audio. Audio coding format for efficient real-time audio
streaming. **Rating: 7/10**
- `.qoi`: Quite OK Image. Modern lossless image format for fast encoding
& decoding. **Rating: 1/10**
- `.wma`: Windows Media Audio. Audio file format developed by Microsoft.
**Rating: 6/10**
- `.wmv`: Windows Media Video. Video file format developed by Microsoft.
**Rating: 7/10**
- `.wv`: WavPack. Free, open-source lossless audio compression format
similar to FLAC. **Rating: 2/10**
Again note that the commonality rating is subjective and may vary based
on the specific use cases users have for Zed and their software
environments. I hope some of these will be considered, as having
flexible filetype recognition greatly adds to the feeling of
completeness in an editor at what appears to be very little cost. Thank
you!
Release Notes:
- Adds icon associations for more multimedia types [#7551](https://github.com/zed-industries/zed/issues/7551).
Tried to match the existing file icons in Zed as much as possible. This
is how it looks:
| dark | light |
|---|----|
| <img width="183" alt="Screenshot 2024-02-06 at 15 03 57"
src="https://github.com/zed-industries/zed/assets/43472/bd862753-41bb-4ca6-9a44-16b9b1c9591c">
| <img width="180" alt="Screenshot 2024-02-06 at 15 03 14"
src="https://github.com/zed-industries/zed/assets/43472/9df8c589-64b6-49f2-8e15-b43126579a9f">
|
The main challenge is that the tangram is visually quite heavy and
detailed. The existing icons in Zed are designed in a 14px bounding box,
but are a bit smaller themselves. I guess the extra space is reserved
for hanging elements, it probably doesn't make sense to occupy the whole
area.
Simply scaling down an available SVG of the tangram didn't work well.
The individual shapes were not recognizable because the spacing between
them was too thin. I tried removing the spacing and applying different
opacities for each shape, but that didn't yield enough contrast between
the shapes either.
The second approach was to just use the outlines. It sort of worked, but
looked a bit messy in the places when the outlines are denser than the
tangram shapes:
| dark | light |
|---|----|
| <img width="192" alt="Screenshot 2024-02-05 at 22 55 46"
src="https://github.com/zed-industries/zed/assets/43472/d0029f49-675d-40ac-96d8-788a29706bad">
| <img width="195" alt="Screenshot 2024-02-05 at 22 56 05"
src="https://github.com/zed-industries/zed/assets/43472/d2de922a-70ec-4bd1-9033-db9a5201e9bd">
|
I then tried to remove the main outline and use the maximum space for
the tangram. That let me increase the spacing between the shapes. I also
rounded them a little bit, to make them look similar to other icons from
Zed. The end result looks clean and the shapes are still recognisable.
Approaches I tried next to an existing icon from Zed:
<img width="711" alt="Screenshot 2024-02-06 at 15 15 33"
src="https://github.com/zed-industries/zed/assets/43472/a3e4b0db-4b98-4072-91e8-fe71cff19adf">
Release Notes:
- Added file type icon for Elm
Jsonc is a simplified json format which allows comments and unquoted
values delimited by whitespace. A jsonc formatted file can be
unambiguously transformed to a json file. Comments will be stripped out
and quotes added.
Release Notes:
- Added an icon for .jsonc files
This should be a standard recognized by everyone
```bash
mkdir todo
touch todo/.gitkeep # just placeholder
git add todo
git commit
```
Release Notes:
- Added icon for `.gitkeep` files.
This icon is designed based on [Ruby's official logo], to harmonize with
the other icons.
It is deformed and simplified to be human-recognizable, even at letter
size.
[Ruby's official logo]: https://www.ruby-lang.org/en/about/logo/
Release Notes:
- Added Ruby file icon.
