mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-03-21 17:50:29 -05:00
Directory listing: Support colored icons
We're using Font Awesome 5 Pro on the live site for duotone icons, but I'm still retaining support for Font Awesome 4 for licensing reasons. Both are colored now, which makes for a better look, too.
This commit is contained in:
Guangcong Luo
parent
19a9ea5b26
commit
2db2b9bcc2
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -6,8 +6,13 @@ npm-debug.log
|
|||
/vendor/
|
||||
/caches/
|
||||
|
||||
/play.pokemonshowdown.com/dirindex/webfonts/
|
||||
/play.pokemonshowdown.com/dirindex/fontawesome5*
|
||||
|
||||
/play.pokemonshowdown.com/sprites/
|
||||
/play.pokemonshowdown.com/audio/
|
||||
|
||||
# built from other sources
|
||||
/play.pokemonshowdown.com/index.php
|
||||
/play.pokemonshowdown.com/index.html
|
||||
/play.pokemonshowdown.com/index-test.html
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<?php
|
||||
|
||||
$fa5pro = file_exists(__DIR__ . '/fontawesome5-solid-duotone.min.css');
|
||||
|
||||
$sprites_whitelist = [
|
||||
'/sprites/afd-back-shiny/' => '*.png',
|
||||
'/sprites/afd-shiny/' => '*.png',
|
||||
|
|
@ -36,38 +38,104 @@ $at_root = ($rel_dir === '/');
|
|||
$up = null;
|
||||
|
||||
function get_icon(string $file, bool $is_dir) {
|
||||
global $fa5pro;
|
||||
if ($fa5pro) return get_icon_fa5pro($file, $is_dir);
|
||||
|
||||
if ($is_dir) {
|
||||
return 'folder-open';
|
||||
return 'fa fa-folder-open';
|
||||
} else {
|
||||
$info = pathinfo($file);
|
||||
$ext = strtolower($info['extension'] ?? '.');
|
||||
if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'gif' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
|
||||
return 'picture-o';
|
||||
if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
|
||||
return 'fa fa-picture-o';
|
||||
} else if ($ext === 'gif') {
|
||||
return 'fa fa-film';
|
||||
} else if ($ext === 'mp4' || $ext === 'webm' || $ext === 'mkv' || $ext === 'avi' || $ext === 'mov') {
|
||||
return 'video-camera';
|
||||
return 'fa fa-video-camera';
|
||||
} else if ($ext === 'mp3' || $ext === 'ogg' || $ext === 'wav' || $ext === 'flac' || $ext === 'aac') {
|
||||
return 'volume-up';
|
||||
return 'fa fa-volume-up';
|
||||
} else if ($ext === 'zip' || $ext === 'tar' || $ext === 'gz') {
|
||||
return 'file-archive-o';
|
||||
return 'fa fa-file-archive-o';
|
||||
} else if ($ext === 'txt' || $ext === 'md') {
|
||||
return 'file-text-o';
|
||||
return 'fa fa-file-text-o icon-' . $ext;
|
||||
} else if ($ext === 'html' || $ext === 'php') {
|
||||
return 'file-code-o';
|
||||
} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json' || $ext === 'xml' || $ext === 'css' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map') {
|
||||
return 'code';
|
||||
return 'fa fa-file-code-o icon-' . $ext;
|
||||
} else if ($ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json') {
|
||||
return 'fa fa-code icon-' . substr($ext, 0, 2);
|
||||
} else if ($ext === 'mts' || $ext === 'cts' || $ext === 'mjs' || $ext === 'cjs') {
|
||||
return 'fa fa-code icon-' . substr($ext, 1, 2);
|
||||
} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'xml' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map' || $ext === 'csv') {
|
||||
return 'fa fa-code';
|
||||
} else if ($ext === 'css') {
|
||||
return 'fa fa-code icon-' . $ext;
|
||||
} else if ($ext === 'woff' || $ext === 'woff2' || $ext === 'ttf' || $ext === 'otf' || $ext === 'eot') {
|
||||
return 'font';
|
||||
return 'fa fa-font';
|
||||
} else if ($ext === 'pdf') {
|
||||
return 'file-pdf-o';
|
||||
return 'fa fa-file-pdf-o';
|
||||
} else if ($ext === 'doc' || $ext === 'docx' || $ext === 'odt') {
|
||||
return 'file-word-o';
|
||||
return 'fa fa-file-word-o';
|
||||
} else if ($ext === 'xls' || $ext === 'xlsx' || $ext === 'ods') {
|
||||
return 'file-excel-o';
|
||||
return 'fa fa-file-excel-o';
|
||||
} else if ($ext === 'ppt' || $ext === 'pptx' || $ext === 'odp') {
|
||||
return 'file-powerpoint-o';
|
||||
return 'fa fa-file-powerpoint-o';
|
||||
} else if ($ext === 'epub' || $ext === 'mobi') {
|
||||
return 'fa fa-book';
|
||||
} else if ($ext === 'exe' || $ext === 'dmg') {
|
||||
return 'fa fa-window-maximize';
|
||||
}
|
||||
}
|
||||
return 'file-o';
|
||||
return 'fa fa-file-o';
|
||||
}
|
||||
|
||||
function get_icon_fa5pro(string $file, bool $is_dir) {
|
||||
if ($is_dir) {
|
||||
return 'fad fa-folder-open';
|
||||
} else {
|
||||
$info = pathinfo($file);
|
||||
$ext = strtolower($info['extension'] ?? '.');
|
||||
if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
|
||||
return 'fad fa-image';
|
||||
} else if ($ext === 'gif') {
|
||||
return 'fad fa-film';
|
||||
} else if ($ext === 'mp4' || $ext === 'webm' || $ext === 'mkv' || $ext === 'avi' || $ext === 'mov') {
|
||||
return 'fas fa-video';
|
||||
} else if ($ext === 'mp3' || $ext === 'ogg' || $ext === 'wav' || $ext === 'flac' || $ext === 'aac') {
|
||||
return 'fas fa-volume';
|
||||
} else if ($ext === 'zip' || $ext === 'tar' || $ext === 'gz') {
|
||||
return 'fad fa-file-archive';
|
||||
} else if ($ext === 'txt' || $ext === 'md') {
|
||||
return 'fad fa-file-alt icon-' . $ext;
|
||||
} else if ($ext === 'html' || $ext === 'php') {
|
||||
return 'fad fa-file-code icon-' . $ext;
|
||||
} else if ($ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json') {
|
||||
return 'fad fa-code icon-' . substr($ext, 0, 2);
|
||||
} else if ($ext === 'mts' || $ext === 'cts' || $ext === 'mjs' || $ext === 'cjs') {
|
||||
return 'fad fa-code icon-' . substr($ext, 1, 2);
|
||||
} else if ($ext === 'css') {
|
||||
return 'fad fa-code icon-' . $ext;
|
||||
} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'xml' || $ext === 'css' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map') {
|
||||
return 'fa fa-code';
|
||||
} else if ($ext === 'woff' || $ext === 'woff2' || $ext === 'ttf' || $ext === 'otf' || $ext === 'eot') {
|
||||
return 'fad fa-font-case';
|
||||
} else if ($ext === 'pdf') {
|
||||
return 'fad fa-file-pdf';
|
||||
} else if ($ext === 'csv') {
|
||||
return 'fad fa-file-csv';
|
||||
} else if ($ext === 'doc' || $ext === 'docx' || $ext === 'odt') {
|
||||
return 'fad fa-file-word';
|
||||
} else if ($ext === 'xls' || $ext === 'xlsx' || $ext === 'ods') {
|
||||
return 'fad fa-file-excel';
|
||||
} else if ($ext === 'ppt' || $ext === 'pptx' || $ext === 'odp') {
|
||||
return 'fad fa-file-powerpoint';
|
||||
} else if ($ext === 'epub' || $ext === 'mobi') {
|
||||
return 'fad fa-book';
|
||||
} else if ($ext === 'exe') {
|
||||
return 'fad fa-window-alt';
|
||||
} else if ($ext === 'dmg') {
|
||||
return 'fad fa-window';
|
||||
}
|
||||
}
|
||||
return 'fad fa-file';
|
||||
}
|
||||
|
||||
foreach ($files as $file) {
|
||||
|
|
@ -78,7 +146,7 @@ foreach ($files as $file) {
|
|||
|
||||
$is_dir = is_dir($path);
|
||||
$ext = '';
|
||||
$type = get_icon($file, $is_dir);
|
||||
$icon = get_icon($file, $is_dir);
|
||||
if (!$is_dir) {
|
||||
$info = pathinfo($file);
|
||||
$ext = strtolower($info['extension'] ?? '.');
|
||||
|
|
@ -101,7 +169,7 @@ foreach ($files as $file) {
|
|||
$next = [
|
||||
'name' => htmlentities($file),
|
||||
'mtime' => date('Y-m-d H:i:s', filemtime($path)),
|
||||
'type' => $type,
|
||||
'icon' => $icon,
|
||||
'size' => $size,
|
||||
'ext' => $ext,
|
||||
'size_text' => $size_text,
|
||||
|
|
@ -155,6 +223,9 @@ if ($sort_by === 'name' || $sort_by === 'N') {
|
|||
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="stylesheet" href="/dirindex/font-awesome.min.css" />
|
||||
<?php if ($fa5pro) { ?>
|
||||
<link rel="stylesheet" href="/dirindex/fontawesome5-solid-duotone.min.css?" />
|
||||
<?php } ?>
|
||||
|
||||
<style>
|
||||
/*********************************************************
|
||||
|
|
@ -397,6 +468,7 @@ if ($sort_by === 'name' || $sort_by === 'N') {
|
|||
html {
|
||||
background: #000;
|
||||
color: #ddd;
|
||||
color-scheme: dark;
|
||||
}
|
||||
a {
|
||||
color:rgb(99, 174, 209);
|
||||
|
|
@ -465,16 +537,40 @@ if ($sort_by === 'name' || $sort_by === 'N') {
|
|||
margin-left: -32px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
color: #777;
|
||||
}
|
||||
.icon.fa-arrow-circle-o-up, .icon.fa-folder-open {
|
||||
color: #3798c5;
|
||||
--fa-secondary-opacity: 0.55;
|
||||
}
|
||||
.icon.fa-image, .icon.fa-picture-o, .icon.fa-film, .icon.fa-video, .icon.fa-video-camera, .icon.fa-volume, .icon.fa-volume-up {
|
||||
color: rgb(139, 115, 82);
|
||||
--fa-secondary-opacity: 0.4;
|
||||
}
|
||||
.icon.icon-js {
|
||||
color: rgb(160, 153, 89);
|
||||
}
|
||||
.icon.icon-ts, .icon.icon-md {
|
||||
color: rgb(83, 112, 149);
|
||||
}
|
||||
.icon.icon-html {
|
||||
color: rgb(166, 125, 67);
|
||||
}
|
||||
.icon.icon-php, .icon.icon-css {
|
||||
color: rgb(125, 83, 149);
|
||||
}
|
||||
.icon.fa-file-pdf, .icon.fa-file-pdf-o, .icon.fa-font-case {
|
||||
color: rgb(149, 83, 83);
|
||||
}
|
||||
.icon.fa-file-archive, .icon.fa-file-archive-o {
|
||||
color:rgb(116, 149, 163);
|
||||
}
|
||||
.filename {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
min-width: 260px;
|
||||
font-family: monospace;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.parentlink .filename {
|
||||
font-family: inherit;
|
||||
|
|
@ -589,7 +685,7 @@ echo '<wbr />/' . htmlentities($lastpart) . '/';
|
|||
<p class="parentlink">
|
||||
<a class="row" href="../">
|
||||
<i class="icon fa fa-arrow-circle-o-up">
|
||||
</i><em class="filename">(Parent directory)
|
||||
</i><em>(Parent directory)
|
||||
</em>
|
||||
</a>
|
||||
</p>
|
||||
|
|
@ -640,7 +736,7 @@ if ($special_sprites || array_key_exists($rel_dir, $sprites_whitelist)) {
|
|||
<?php foreach ($fileinfo as $file) : ?>
|
||||
<li>
|
||||
<a class="row" href="./<?= urlencode($file['name']) ?>">
|
||||
<i class="icon fa fa-<?= $file['type'] ?>">
|
||||
<i class="icon <?= $file['icon'] ?>">
|
||||
</i><code class="filename"><?= $file['name'] === '..' ? '(Parent directory)' : htmlentities($file['name']) ?>
|
||||
|
||||
</code><em class="filesize"><?= $file['size_text'] ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user