Skip to content

Commit

Permalink
fix: The file type icon in the file list is sensitive to the case of …
Browse files Browse the repository at this point in the history 
…the suffix name (#3187)
  • Loading branch information
@gdy666
gdy666 committed May 3, 2024
1 parent 782375b commit a9c327c
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 116 deletions.
11 changes: 11 additions & 0 deletions frontend/src/components/files/ListingItem.vue
View file
Expand Up @@ -12,6 +12,7 @@
:data-type="type"
:aria-label="name"
:aria-selected="isSelected"
:data-ext="getExtension(name).toLowerCase()"
>
<div>
<img
Expand Down Expand Up @@ -270,4 +271,14 @@ const click = (event: Event | KeyboardEvent) => {
const open = () => {
router.push({ path: props.url });
};
const getExtension = (fileName: string): string => {
const lastDotIndex = fileName.lastIndexOf('.');

Check warning on line 276 in frontend/src/components/files/ListingItem.vue

View workflow job for this annotation

GitHub Actions / lint-frontend 

Replace `'.'` with `"."`
if (lastDotIndex === -1) {
return fileName;
}
return fileName.substring(lastDotIndex );

Check warning on line 280 in frontend/src/components/files/ListingItem.vue

View workflow job for this annotation

GitHub Actions / lint-frontend 

Delete `·`
};

Check warning on line 281 in frontend/src/components/files/ListingItem.vue

View workflow job for this annotation

GitHub Actions / lint-frontend 

Delete `⏎⏎`
</script>
234 changes: 118 additions & 116 deletions frontend/src/css/listing-icons.css
View file
Expand Up @@ -33,210 +33,212 @@

/* #f90 - Image */

.file-icons [aria-label$=".ai"] i::before,
.file-icons [aria-label$=".odg"] i::before,
.file-icons [aria-label$=".xcf"] i::before {
.file-icons [data-ext=".ai"] i::before,
.file-icons [data-ext=".odg"] i::before,
.file-icons [data-ext=".xcf"] i::before {
content: "image";
}

/* #f90 - Presentation */

.file-icons [aria-label$=".odp"] i::before,
.file-icons [aria-label$=".ppt"] i::before,
.file-icons [aria-label$=".pptx"] i::before {
.file-icons [data-ext=".odp"] i::before,
.file-icons [data-ext=".ppt"] i::before,
.file-icons [data-ext=".pptx"] i::before {
content: "slideshow";
}


/* #0f0 - Spreadsheet/Database */

.file-icons [aria-label$=".csv"] i::before,
.file-icons [aria-label$=".db"] i::before,
.file-icons [aria-label$=".odb"] i::before,
.file-icons [aria-label$=".ods"] i::before,
.file-icons [aria-label$=".xls"] i::before,
.file-icons [aria-label$=".xlsx"] i::before {
.file-icons [data-ext=".csv"] i::before,
.file-icons [data-ext=".db"] i::before,
.file-icons [data-ext=".odb"] i::before,
.file-icons [data-ext=".ods"] i::before,
.file-icons [data-ext=".xls"] i::before,
.file-icons [data-ext=".xlsx"] i::before {
content: "border_all";
}

/* #00f - Document */

.file-icons [aria-label$=".doc"] i::before,
.file-icons [aria-label$=".docx"] i::before,
.file-icons [aria-label$=".log"] i::before,
.file-icons [aria-label$=".odt"] i::before,
.file-icons [aria-label$=".rtf"] i::before {
.file-icons [data-ext=".doc"] i::before,
.file-icons [data-ext=".docx"] i::before,
.file-icons [data-ext=".log"] i::before,
.file-icons [data-ext=".odt"] i::before,
.file-icons [data-ext=".rtf"] i::before {
content: "description";
}

/* #999 - Code */

.file-icons [aria-label$=".c"] i::before,
.file-icons [aria-label$=".cpp"] i::before,
.file-icons [aria-label$=".cs"] i::before,
.file-icons [aria-label$=".css"] i::before,
.file-icons [aria-label$=".go"] i::before,
.file-icons [aria-label$=".h"] i::before,
.file-icons [aria-label$=".html"] i::before,
.file-icons [aria-label$=".java"] i::before,
.file-icons [aria-label$=".js"] i::before,
.file-icons [aria-label$=".json"] i::before,
.file-icons [aria-label$=".kt"] i::before,
.file-icons [aria-label$=".php"] i::before,
.file-icons [aria-label$=".py"] i::before,
.file-icons [aria-label$=".rb"] i::before,
.file-icons [aria-label$=".rs"] i::before,
.file-icons [aria-label$=".vue"] i::before,
.file-icons [aria-label$=".xml"] i::before,
.file-icons [aria-label$=".yml"] i::before {
.file-icons [data-ext=".c"] i::before,
.file-icons [data-ext=".cpp"] i::before,
.file-icons [data-ext=".cs"] i::before,
.file-icons [data-ext=".css"] i::before,
.file-icons [data-ext=".go"] i::before,
.file-icons [data-ext=".h"] i::before,
.file-icons [data-ext=".html"] i::before,
.file-icons [data-ext=".java"] i::before,
.file-icons [data-ext=".js"] i::before,
.file-icons [data-ext=".json"] i::before,
.file-icons [data-ext=".kt"] i::before,
.file-icons [data-ext=".php"] i::before,
.file-icons [data-ext=".py"] i::before,
.file-icons [data-ext=".rb"] i::before,
.file-icons [data-ext=".rs"] i::before,
.file-icons [data-ext=".vue"] i::before,
.file-icons [data-ext=".xml"] i::before,
.file-icons [data-ext=".yml"] i::before {
content: "code";
}

/* #999 - Executable */

.file-icons [aria-label$=".apk"] i::before,
.file-icons [aria-label$=".bat"] i::before,
.file-icons [aria-label$=".exe"] i::before,
.file-icons [aria-label$=".jar"] i::before,
.file-icons [aria-label$=".ps1"] i::before,
.file-icons [aria-label$=".sh"] i::before {
.file-icons [data-ext=".apk"] i::before,
.file-icons [data-ext=".bat"] i::before,
.file-icons [data-ext=".exe"] i::before,
.file-icons [data-ext=".jar"] i::before,
.file-icons [data-ext=".ps1"] i::before,
.file-icons [data-ext=".sh"] i::before {
content: "web_asset";
}

/* #999 - Installer */

.file-icons [aria-label$=".deb"] i::before,
.file-icons [aria-label$=".msi"] i::before,
.file-icons [aria-label$=".pkg"] i::before,
.file-icons [aria-label$=".rpm"] i::before {
.file-icons [data-ext=".deb"] i::before,
.file-icons [data-ext=".msi"] i::before,
.file-icons [data-ext=".pkg"] i::before,
.file-icons [data-ext=".rpm"] i::before {
content: "archive";
}

/* #999 - Compressed */

.file-icons [aria-label$=".7z"] i::before,
.file-icons [aria-label$=".bz2"] i::before,
.file-icons [aria-label$=".cab"] i::before,
.file-icons [aria-label$=".gz"] i::before,
.file-icons [aria-label$=".rar"] i::before,
.file-icons [aria-label$=".tar"] i::before,
.file-icons [aria-label$=".xz"] i::before,
.file-icons [aria-label$=".zip"] i::before,
.file-icons [aria-label$=".zst"] i::before {
.file-icons [data-ext=".7z"] i::before,
.file-icons [data-ext=".bz2"] i::before,
.file-icons [data-ext=".cab"] i::before,
.file-icons [data-ext=".gz"] i::before,
.file-icons [data-ext=".rar"] i::before,
.file-icons [data-ext=".tar"] i::before,
.file-icons [data-ext=".xz"] i::before,
.file-icons [data-ext=".zip"] i::before,
.file-icons [data-ext=".zst"] i::before {
content: "folder_zip";
}

/* #999 - Disk */

.file-icons [aria-label$=".ccd"] i::before,
.file-icons [aria-label$=".dmg"] i::before,
.file-icons [aria-label$=".iso"] i::before,
.file-icons [aria-label$=".mdf"] i::before,
.file-icons [aria-label$=".vdi"] i::before,
.file-icons [aria-label$=".vhd"] i::before,
.file-icons [aria-label$=".vmdk"] i::before,
.file-icons [aria-label$=".wim"] i::before {
.file-icons [data-ext=".ccd"] i::before,
.file-icons [data-ext=".dmg"] i::before,
.file-icons [data-ext=".iso"] i::before,
.file-icons [data-ext=".mdf"] i::before,
.file-icons [data-ext=".vdi"] i::before,
.file-icons [data-ext=".vhd"] i::before,
.file-icons [data-ext=".vmdk"] i::before,
.file-icons [data-ext=".wim"] i::before {
content: "album";
}

/* #999 - Font */

.file-icons [aria-label$=".otf"] i::before,
.file-icons [aria-label$=".ttf"] i::before,
.file-icons [aria-label$=".woff"] i::before,
.file-icons [aria-label$=".woff2"] i::before {
.file-icons [data-ext=".otf"] i::before,
.file-icons [data-ext=".ttf"] i::before,
.file-icons [data-ext=".woff"] i::before,
.file-icons [data-ext=".woff2"] i::before {
content: "font_download";
}

/* Colors */

/* General */

.file-icons [data-type="audio"] i {
.file-icons [data-ext="audio"] i {
color: var(--icon-yellow);
}
.file-icons [data-type="image"] i {
.file-icons [data-ext="image"] i {
color: var(--icon-orange);
}
.file-icons [data-type="video"] i {
.file-icons [data-ext="video"] i {
color: var(--icon-violet);
}
.file-icons [data-type="invalid_link"] i {
.file-icons [data-ext="invalid_link"] i {
color: var(--icon-red);
}

/* #f00 - Adobe/Oracle */

.file-icons [aria-label$=".ai"] i,
.file-icons [aria-label$=".java"] i,
.file-icons [aria-label$=".jar"] i,
.file-icons [aria-label$=".psd"] i,
.file-icons [aria-label$=".rb"] i,
.file-icons [data-type="pdf"] i {
.file-icons [data-ext=".ai"] i,
.file-icons [data-ext=".java"] i,
.file-icons [data-ext=".jar"] i,
.file-icons [data-ext=".psd"] i,
.file-icons [data-ext=".rb"] i,
.file-icons [data-ext="pdf"] i {
color: var(--icon-red);
}

/* #f90 - Image/Presentation */

.file-icons [aria-label$=".html"] i,
.file-icons [aria-label$=".odg"] i,
.file-icons [aria-label$=".odp"] i,
.file-icons [aria-label$=".ppt"] i,
.file-icons [aria-label$=".pptx"] i,
.file-icons [aria-label$=".vue"] i,
.file-icons [aria-label$=".xcf"] i {
.file-icons [data-ext=".html"] i,
.file-icons [data-ext=".odg"] i,
.file-icons [data-ext=".odp"] i,
.file-icons [data-ext=".ppt"] i,
.file-icons [data-ext=".pptx"] i,
.file-icons [data-ext=".vue"] i,
.file-icons [data-ext=".xcf"] i {
color: var(--icon-orange);
}

/* #ff0 - Various */

.file-icons [aria-label$=".css"] i,
.file-icons [aria-label$=".js"] i,
.file-icons [aria-label$=".json"] i,
.file-icons [aria-label$=".zip"] i {
.file-icons [data-ext=".css"] i,
.file-icons [data-ext=".js"] i,
.file-icons [data-ext=".json"] i,
.file-icons [data-ext=".zip"] i {
color: var(--icon-yellow);
}

/* #0f0 - Spreadsheet/Google */

.file-icons [aria-label$=".apk"] i,
.file-icons [aria-label$=".dex"] i,
.file-icons [aria-label$=".go"] i,
.file-icons [aria-label$=".ods"] i,
.file-icons [aria-label$=".xls"] i,
.file-icons [aria-label$=".xlsx"] i {
.file-icons [data-ext=".apk"] i,
.file-icons [data-ext=".dex"] i,
.file-icons [data-ext=".go"] i,
.file-icons [data-ext=".ods"] i,
.file-icons [data-ext=".xls"] i,
.file-icons [data-ext=".xlsx"] i ,
.file-icons [data-ext="xlsx"] i::before{
color: var(--icon-green);
}

/* #00f - Document/Microsoft/Apple/Closed */

.file-icons [aria-label$=".aac"] i,
.file-icons [aria-label$=".bat"] i,
.file-icons [aria-label$=".cab"] i,
.file-icons [aria-label$=".cs"] i,
.file-icons [aria-label$=".dmg"] i,
.file-icons [aria-label$=".doc"] i,
.file-icons [aria-label$=".docx"] i,
.file-icons [aria-label$=".emf"] i,
.file-icons [aria-label$=".exe"] i,
.file-icons [aria-label$=".ico"] i,
.file-icons [aria-label$=".mp2"] i,
.file-icons [aria-label$=".mp3"] i,
.file-icons [aria-label$=".mp4"] i,
.file-icons [aria-label$=".mpg"] i,
.file-icons [aria-label$=".msi"] i,
.file-icons [aria-label$=".odt"] i,
.file-icons [aria-label$=".ps1"] i,
.file-icons [aria-label$=".rtf"] i,
.file-icons [aria-label$=".vob"] i,
.file-icons [aria-label$=".wim"] i {
.file-icons [data-ext=".aac"] i,
.file-icons [data-ext=".bat"] i,
.file-icons [data-ext=".cab"] i,
.file-icons [data-ext=".cs"] i,
.file-icons [data-ext=".dmg"] i,
.file-icons [data-ext=".doc"] i,
.file-icons [data-ext=".docx"] i,
.file-icons [data-ext=".emf"] i,
.file-icons [data-ext=".exe"] i,
.file-icons [data-ext=".ico"] i,
.file-icons [data-ext=".mp2"] i,
.file-icons [data-ext=".mp3"] i,
.file-icons [data-ext=".mp4"] i,
.file-icons [data-ext=".mpg"] i,
.file-icons [data-ext=".msi"] i,
.file-icons [data-ext=".odt"] i,
.file-icons [data-ext=".ps1"] i,
.file-icons [data-ext=".rtf"] i,
.file-icons [data-ext=".vob"] i,
.file-icons [data-ext=".wim"] i {
color: var(--icon-blue);
}

/* #60f - Various */

.file-icons [aria-label$=".iso"] i,
.file-icons [aria-label$=".php"] i,
.file-icons [aria-label$=".rar"] i {
.file-icons [data-ext=".iso"] i,
.file-icons [data-ext=".php"] i,
.file-icons [data-ext=".rar"] i {
color: var(--icon-violet);
}

Expand Down

0 comments on commit a9c327c

Please sign in to comment.