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

[frontend/components] Add icon and theme color to note ticker

Browse source
This commit is contained in:
pancakes 2025-03-28 00:45:52 +10:00
parent 66afc34bbd
commit 91c7a330b0
No known key found for this signature in database
4 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Iceshrimp.Frontend/Components/Note/Note.razor
View file

@ -9,7 +9,7 @@
<UserDisplayName User="@NoteResponse.User"/>
</span>
<span class="metadata">
<NoteMetadata Visibility="NoteResponse.Visibility" InstanceName="@null" CreatedAt="DateTime.Parse(NoteResponse.CreatedAt)"/>
<NoteMetadata Visibility="NoteResponse.Visibility" CreatedAt="DateTime.Parse(NoteResponse.CreatedAt)"/>
</span>
</div>
<NoteComponent Note="NoteResponse.Renote" Quote="NoteResponse.Quote" Indented="Indented" OpenNote="@OpenNote"/>

2
Iceshrimp.Frontend/Components/Note/NoteComponent.razor
View file

@ -14,6 +14,8 @@
<NoteMetadata
Visibility="@Note.Visibility"
InstanceName="@Note.User.InstanceName"
InstanceIcon="@Note.User.InstanceIconUrl"
InstanceColor="@Note.User.InstanceColor"
CreatedAt="DateTime.Parse(Note.CreatedAt)"
OpenNoteId="@(OpenNote ? Note.Id : null)"
/>

24
Iceshrimp.Frontend/Components/Note/NoteMetadata.razor
View file

@ -34,15 +34,23 @@
}
</span>
</span>
@if (InstanceName != null)
{
<span class="instance">@InstanceName</span>
}
<span class="ticker" title="@InstanceName">
@if (InstanceIcon != null)
{
<img class="icon" src="@InstanceIcon" alt="icon"/>
}
@if (InstanceName != null)
{
<span class="instance" style="@(InstanceColor != null ? "--color: " + InstanceColor + ";" : "")">@InstanceName</span>
}
</span>
</div>
@code {
[Parameter] [EditorRequired] public required DateTime CreatedAt { get; set; }
[Parameter] [EditorRequired] public required NoteVisibility Visibility { get; set; }
[Parameter] [EditorRequired] public required string? InstanceName { get; set; }
[Parameter] public string? OpenNoteId { get; set; }
[Parameter] [EditorRequired] public required DateTime CreatedAt { get; set; }
[Parameter] [EditorRequired] public required NoteVisibility Visibility { get; set; }
[Parameter] public string? InstanceName { get; set; }
[Parameter] public string? InstanceIcon { get; set; }
[Parameter] public string? InstanceColor { get; set; }
[Parameter] public string? OpenNoteId { get; set; }
}

29
Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
View file

@ -28,14 +28,29 @@
font-size: 1rem;
}
}
}
.ticker {
display: inline-flex;
gap: 0.5em;
align-items: center;
/*Left align so the right side is truncated*/
align-self: start;
/*Margin on the left so non truncated names are aligned to the right*/
margin-left: auto;
font-size: 0.9em;
text-overflow: ellipsis;
overflow: clip;
.icon {
width: 1rem;
height: 1rem;
color: transparent;
border-radius: 4px;
line-height: 1;
}
.instance {
/*Left align so the right side is truncated*/
align-self: start;
/*Margin on the left so non truncated names are aligned to the right*/
margin-left: auto;
font-size: 0.9em;
text-overflow: ellipsis;
overflow: clip;
--color: var(--font-color);
color: var(--color);
}
}