Compare commits
2 Commits
f3d7c7abf2
...
dae708c765
Author | SHA1 | Date | |
---|---|---|---|
dae708c765 | |||
162f21089d |
17
src/App.css
17
src/App.css
@ -63,6 +63,10 @@ body {
|
|||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.PlaceholderItem {
|
||||||
|
animation: loading 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.PlaceholderItem > button,
|
.PlaceholderItem > button,
|
||||||
.ParentDirectoryItem > button {
|
.ParentDirectoryItem > button {
|
||||||
background-color: #4D4F5D;
|
background-color: #4D4F5D;
|
||||||
@ -73,6 +77,15 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.PlaceholderItem > button {
|
.PlaceholderItem > button {
|
||||||
height: calc(16px + 10px * 2);
|
height: calc(18px + 10px * 2);
|
||||||
width: 6em;
|
min-width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
0%, 100% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: brightness(100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -68,16 +68,18 @@ function Contents(
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (item.is_dir) {
|
if (item.is_dir) {
|
||||||
itemProps.onClick = () => {
|
itemProps.onClick = item.isPlaceholder
|
||||||
const subCategory = getFileName(itemProps.url);
|
? () => {}
|
||||||
|
: () => {
|
||||||
|
const subCategory = getFileName(itemProps.url);
|
||||||
|
|
||||||
if (category !== '') category = `${category}/${subCategory}`;
|
if (category !== '') category = `${category}/${subCategory}`;
|
||||||
else category = subCategory;
|
else category = subCategory;
|
||||||
if (subCategory === '..')
|
if (subCategory === '..')
|
||||||
category = category.split('/').slice(0, -2).join('/');
|
category = category.split('/').slice(0, -2).join('/');
|
||||||
|
|
||||||
setCategory(category);
|
setCategory(category);
|
||||||
};
|
};
|
||||||
return <DirectoryItem {...itemProps} />;
|
return <DirectoryItem {...itemProps} />;
|
||||||
}
|
}
|
||||||
if (itemProps.url.endsWith('.mp4')) {
|
if (itemProps.url.endsWith('.mp4')) {
|
||||||
@ -137,6 +139,14 @@ function getFileName(string: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getPlaceholderData(): galleryItemInfo[] {
|
function getPlaceholderData(): galleryItemInfo[] {
|
||||||
|
const backDir = (): galleryItemInfo => {
|
||||||
|
return {
|
||||||
|
is_dir: true,
|
||||||
|
url: '..',
|
||||||
|
thumbnail_url: '',
|
||||||
|
isPlaceholder: true,
|
||||||
|
};
|
||||||
|
};
|
||||||
const placeholderDir = (): galleryItemInfo => {
|
const placeholderDir = (): galleryItemInfo => {
|
||||||
return {
|
return {
|
||||||
is_dir: true,
|
is_dir: true,
|
||||||
@ -155,6 +165,7 @@ function getPlaceholderData(): galleryItemInfo[] {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return [
|
return [
|
||||||
|
backDir(),
|
||||||
placeholderDir(),
|
placeholderDir(),
|
||||||
placeholderDir(),
|
placeholderDir(),
|
||||||
placeholderImg(),
|
placeholderImg(),
|
||||||
|
Loading…
Reference in New Issue
Block a user