notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend] Move drive entries into DriveEntry component

Browse source
This commit is contained in:
pancakes 2024-12-16 00:39:49 +10:00 • committed by Laura Hausmann
parent 0947fd4ac8
commit 793efd9ab6
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
4 changed files with 101 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
Iceshrimp.Frontend/Components/DriveEntry.razor Normal file
View file

@ -0,0 +1,54 @@
@using Iceshrimp.Frontend.Localization
@using Iceshrimp.Shared.Schemas.Web
@using Microsoft.Extensions.Localization
@using Iceshrimp.Assets.PhosphorIcons
@inject IStringLocalizer<Localization> Loc;
@if (File != null && Folder == null)
{
<div class="drive-entry">
<div class="labels">
@if (File.Description != null)
{
<Icon Name="Icons.ClosedCaptioning" title="@Loc["Has alt text"]"/>
}
else
{
<Icon Name="Icons.Warning" title="@Loc["No alt text"]"/>
}
@if (File.Sensitive)
{
<Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
}
</div>
@if (File.ContentType.StartsWith("image"))
{
<img class="thumbnail" src="@File.ThumbnailUrl" alt="@File.Description"/>
}
else if (File.ContentType.StartsWith("audio"))
{
<Icon Name="Icons.FileAudio" Size="5em"/>
}
else if (File.ContentType.StartsWith("video"))
{
<Icon Name="Icons.FileVideo" Size="5em"/>
}
else
{
<Icon Name="Icons.File" Size="5em"/>
}
<span>@File.Filename</span>
</div>
}
@if (Folder != null && File == null)
{
<div class="drive-entry">
<Icon Name="Icons.FolderOpen" Size="5em" Pack="IconStyle.Fill"/>
<span>@Folder.Name</span>
</div>
}
@code {
[Parameter] public DriveFileResponse? File { get; set; } = null;
[Parameter] public DriveFolderResponse? Folder { get; set; } = null;
}

42
Iceshrimp.Frontend/Components/DriveEntry.razor.css Normal file
View file

@ -0,0 +1,42 @@
.drive-entry {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
width: 10em;
text-align: center;
text-wrap: wrap;
word-break: break-word;
border-radius: 0.5rem;
}
::deep {
.ph {
display: block;
vertical-align: middle;
line-height: 1;
color: var(--notice-color);
}
}
.labels {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
::deep {
.labels .ph {
display: inline-block;
vertical-align: text-top;
}
}
img.thumbnail {
display: block;
height: 5em;
width: auto;
aspect-ratio: 3/2;
object-fit: contain;
}

40
Iceshrimp.Frontend/Pages/DrivePage.razor
View file

@ -9,6 +9,7 @@
@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas.Web
@using Microsoft.AspNetCore.Authorization
@using Iceshrimp.Frontend.Components
@inject ApiService Api;
@inject IStringLocalizer<Localization> Loc;
@inject ILogger<DrivePage> Logger;
@ -23,45 +24,14 @@
<ol class="drive-files">
@foreach (var el in Folder.Folders)
{
<li class="drive-entry">
<Icon Name="Icons.FolderOpen" Size="5em" Pack="IconStyle.Fill"/>
<span>@el.Name</span>
<li>
<DriveEntry Folder="el" />
</li>
}
@foreach (var el in Folder.Files)
{
<li class="drive-entry">
<div class="labels">
@if (el.Description != null)
{
<Icon Name="Icons.ClosedCaptioning" title="@Loc["Has alt text"]"/>
}
else
{
<Icon Name="Icons.Warning" title="@Loc["No alt text"]"/>
}
@if (el.Sensitive)
{
<Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
}
</div>
@if (el.ContentType.StartsWith("image"))
{
<img class="thumbnail" src="@el.ThumbnailUrl" alt="@el.Description"/>
}
else if (el.ContentType.StartsWith("audio"))
{
<Icon Name="Icons.FileAudio" Size="5em"/>
}
else if (el.ContentType.StartsWith("video"))
{
<Icon Name="Icons.FileVideo" Size="5em"/>
}
else
{
<Icon Name="Icons.File" Size="5em"/>
}
<span>@el.Filename</span>
<li>
<DriveEntry File="el"/>
</li>
}
</ol>

43
Iceshrimp.Frontend/Pages/DrivePage.razor.css
View file

@ -4,47 +4,4 @@
justify-content: center;
gap: 1rem;
padding: 1rem;
}
.drive-entry {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
width: 10em;
text-align: center;
text-wrap: wrap;
word-break: break-word;
border-radius: 0.5rem;
}
.labels {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
::deep {
.drive-entry .ph {
display: block;
vertical-align: middle;
line-height: 1;
color: var(--notice-color);
}
}
::deep {
.labels .ph {
display: inline-block;
vertical-align: text-top;
}
}
img.thumbnail {
display: block;
height: 5em;
width: auto;
aspect-ratio: 3/2;
object-fit: contain;
}