Add dynamic file extension icons to the MediaManager

[damsfx]

This PR add dynamic icons for files that have no preview in thumbnails and large thumbnails views.
This icon show the file extension in a colored label.
List mode view is unchanged.

Before :

After :

[LukeTowers]

@damsfx this looks great! Could you make the new file icons the same size as the old ones though? I don't think they need to be made as big as the thumbnail previews; it helps differentiate them.

[damsfx]

@LukeTowers The icons size have been adjust to best match original size.
The dynamic icons are only slightly larger, to make the labels easier to read.

[LukeTowers]

One final request @damsfx, would it make sense to also add this to the preview sidebar when the file is selected?

[damsfx]

One final request @damsfx, would it make sense to also add this to the preview sidebar when the file is selected?

Done @LukeTowers .

[bennothommo]

I love this, @damsfx - really good work!

[WebVPF]

Wouldn't it be better to specify the color via CSS?

Delete:

$colorsByExtension = [
    '#B73FD9' => ['css', 'less', 'scss'],
    '#EA9B47' => ['html', 'xml'],
    '#A9A9A9' => ['js', 'json'],
    '#E30713' => ['pdf'],
    '#248BD0' => ['txt'],
    '#F29200' => ['ai'],
    '#F9B234' => ['eps'],
    '#2DAAE2' => ['psd'],
    '#C4CA10' => ['ttf', 'otf', 'woff', 'woff2'],
    '#0F70B7' => ['doc', 'docx', 'rtf', 'odt'],
    '#3BAA34' => ['csv', 'ods', 'xls', 'xlsx'],
    '#D04526' => ['odp', 'ppt', 'pptx'],
    '#363A56' => ['rar', 'tar', 'zip'],
    '#576D7E' => ['default'], // Default color
];

$labelColor = '#576D7E'; // Default color
foreach ($colorsByExtension as $color => $extensions) {
    if (in_array($extension, $extensions)) {
        $labelColor = $color;
        break;
    }
}

Change Color label by adding class="label-file-ext file-<?= $extension ?>" attribute and removing inline styles:

<!-- Colour label -->
<path class="label-file-ext file-<?= $extension ?>" d="M203.125,203.125c0,4.297 -3.516,7.813 -7.813,7.813l-171.875,-0c-4.296,-0 -7.812,-3.516 -7.812,-7.813l-0,-78.125c-0,-4.297 3.516,-7.813 7.812,-7.813l171.875,0.001c4.297,-0.001 7.813,3.515 7.813,7.812l0,78.125Z" />

Add to CSS:

.label-file-ext {
    fill: #576D7E; /* Default color */
    fill-rule: nonzero;
}
.file-css,
.file-less,
.file-scss {
    fill: #B73FD9;
}
.file-html,
.file-xml {
    fill: #EA9B47;
}
.file-js,
.file-json {
    fill: #A9A9A9;
}
.file-pdf {
    fill: #E30713;
}
.file-txt {
    fill: #248BD0;
}
.file-ai {
    fill: #F29200;
}
.file-eps {
    fill: #F9B234;
}
.file-psd {
    fill: #2DAAE2;
}
.file-ttf,
.file-otf,
.file-woff,
.file-woff2 {
    fill: #C4CA10;
}
.file-doc,
.file-docx,
.file-rtf,
.file-odt {
    fill: #0F70B7;
}
.file-csv,
.file-ods,
.file-xls,
.file-xlsx {
    fill: #3BAA34;
}
.file-odp,
.file-ppt,
.file-pptx {
    fill: #D04526;
}
.file-rar,
.file-tar,
.file-zip {
    fill: #363A56;
}

[LukeTowers]

Oooh, that's even better @WebVPF! @damsfx are you able to make that change? Then I think it should be good to merge. Looking fantastic!

[damsfx]

@LukeTowers @WebVPF All svg styles moved to css.

[damsfx]

@LukeTowers @bennothommo @WebVPF Thanks for your help and feedback on this little addition to WinterCMS.

[LukeTowers]

@damsfx thanks for the contribution! I love seeing all the extra little bits of polish that people add, it brings me joy to see as I interact with Winter on various client sites :)