Skip to content

Commit

Permalink
New channel list!
Browse files Browse the repository at this point in the history
  • Loading branch information
@SpikeViper
SpikeViper committed Feb 3, 2025
1 parent 7526917 commit 2a10107
Show file tree
Hide file tree
Showing 36 changed files with 1,133 additions and 443 deletions.
3 changes: 3 additions & 0 deletions Valour/Client.Blazor/App.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@using Valour.Client.Components.Theme
@using Valour.Client.Components.DockWindows
@using Valour.Sdk.Services
@using Valour.Client.Components.Tooltips

@inject ValourClient Client
@inject LoggingService Logger
Expand All @@ -33,6 +34,8 @@
<!-- Window Target helper -->
<WindowTargetScanner />

<TooltipRoot />

@if (_triedInitialLogin)
{
<!-- Main routing component -->
Expand Down
2 changes: 0 additions & 2 deletions Valour/Client/Components/DockWindows/WindowDockComponent.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
{
Console.WriteLine("Failed to load saved layout: " + e.Message);
Reset();
throw;
}

loaded = true;
Expand All @@ -80,7 +79,6 @@
{
Console.WriteLine("Failed to load saved floaters: " + e.Message);
_floaters.Clear();
throw;
}
}

Expand Down
2 changes: 1 addition & 1 deletion Valour/Client/Components/DockWindows/WindowTab.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ public async Task NotifyClosed()
{
if (PlanetId is not null)
{
var planetService = Tab.Layout.DockComponent.Client.PlanetService;
var planetService = Tab.Component.Dock.Client.PlanetService;
await planetService.TryClosePlanetConnection(PlanetId.Value, Tab.Id);
}
}
Expand Down
52 changes: 52 additions & 0 deletions Valour/Client/Components/Planets/ConnectedPlanetDirectory.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@inject PlanetService PlanetService

<div class="directory">
<div class="planet-row">
<div class="left">
<img alt="@Planet.Name Icon" src="@Planet.GetIconUrl(IconFormat.Webp64)" />
<span>@Planet.Name</span>
</div>
<div class="right">
@if (_showEdit && _connected)
{
<i tabindex="0" role="button" class="bi bi-gear-fill edit"></i>
}
</div>
</div>
</div>

@code {

private bool _showEdit = false;
private bool _connected = false;

[Parameter]
public Planet Planet { get; set; }

protected override void OnInitialized()
{
_connected = PlanetService.ConnectedPlanetsLookup.ContainsKey(Planet.Id);

if (_connected)
{
DeterminePerms();
}

StateHasChanged();
}

private void DeterminePerms()
{
// _showEdit = Planet.MyMember.HasPermission(PlanetPermissions.Manage);
}

private void OnPlanetConnected(Planet planet)
{
if (planet.Id == Planet.Id)
{
_connected = true;
DeterminePerms();
StateHasChanged();
}
}
}
Empty file added Valour/Client/Components/Planets/ConnectedPlanetDirectory.razor.css
View file
Empty file.
167 changes: 167 additions & 0 deletions Valour/Client/Components/PlanetsList/PlanetsGridComponent.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
@inherits ControlledRenderComponentBase

@using System.Text
@inject PlanetService PlanetService

<section class="outer-section">
<div class="section-header">
<p class="subtitle">My Planets</p>
</div>
<div class="grid-section" style="@Style">
@foreach (var planet in _renderData)
{
<div>
@_planetRenderFragment(planet)
</div>
}
</div>
</section>

@code {

private RenderFragment<PlanetRenderData> _planetRenderFragment = (data) =>
@<TooltipTrigger>
<ChildContent>
<div class="planet">
@if (!string.IsNullOrWhiteSpace(data.IconText))
{
<img alt="planet icon" src="@data.Planet.GetIconUrl(IconFormat.Webp128)" class="icon"/>

<div class="icon-text-holder">
<h1 class="icon-text" style="@data.IconTextStyle">@data.IconText</h1>
</div>
}
else
{
@if (data.Planet.HasAnimatedIcon)
{
<style>
.planet-icon-@data.Planet.Id:hover {
background-image: url(@data.AnimatedIconUrl), url(@data.IconUrl), url(@data.FallbackIconUrl) !important;
}
</style>
}

<div class="icon [email protected]" style="background-image: url(@data.IconUrl), url(@data.FallbackIconUrl)"></div>
}
</div>
</ChildContent>
<TooltipContent>
<span>@data.Planet.Name</span>
</TooltipContent>
</TooltipTrigger>;

private class PlanetRenderData
{
public readonly Planet Planet;
private readonly PlanetsGridComponent _grid;

private const string DefaultImage = "_content/Valour.Client/media/logo-circle-icon.svg";

public string IconText;
public string IconTextStyle = "";
public int IconImageColor;

public string IconUrl = DefaultImage;
public string AnimatedIconUrl = "";
public string FallbackIconUrl = DefaultImage;

public PlanetRenderData(Planet planet, PlanetsGridComponent grid)
{
_grid = grid;
Planet = planet;

if (Planet.HasCustomIcon)
{
IconUrl = Planet.GetIconUrl(IconFormat.Webp128);

if (Planet.HasAnimatedIcon)
AnimatedIconUrl = Planet.GetIconUrl(IconFormat.WebpAnimated128);
}
else
{
GenerateAutoGraphic();
}
}

public string GetCommunityShortCode(string communityName)
{
if (communityName.Length < 5)
{
return communityName.ToUpper();
}

var sb = new StringBuilder();

for (int i = 0; i < communityName.Length; i++)
{
if (i == 0)
{
sb.Append(char.ToUpper(communityName[0]));
continue;
}

bool spaceFound = false;
char currentChar = communityName[i];

if (i > 0 && (communityName[i - 1] == ' ' ||
(char.IsUpper(currentChar) && char.IsLower(communityName[i - 1]))))
{
spaceFound = true;
}

if (spaceFound)
{
sb.Append(char.ToUpper(currentChar));
}

if (sb.Length >= 4)
{
break;
}
}

return sb.ToString();
}

private void GenerateAutoGraphic()
{
IconUrl = DefaultImage;
IconText = GetCommunityShortCode(Planet.Name);
IconImageColor = Planet.Id.GetHashCode();
IconTextStyle = $"font-size: {60f / (IconText.Length + 1)}px;";
}
}

private List<PlanetRenderData> _renderData = new();

private int _columns = 3;

// Generate grid style by columns
private string Style =>
$"grid-template-columns: repeat({_columns}, 1fr); gap: 5%;";


protected override async Task OnInitializedAsync()
{
var planetResult = await PlanetService.FetchJoinedPlanetsAsync();

if (!planetResult.Success)
{
ToastContainer.Instance.AddToast(new ToastData()
{
Title = "Error loading planets",
Message = "An unexpected error occured.",
Type = ToastProgressState.Failure
});
}

// Build render data
foreach (var planet in PlanetService.JoinedPlanets)
{
_renderData.Add(new PlanetRenderData(planet, this));
}

ReRender();
}
}
61 changes: 61 additions & 0 deletions Valour/Client/Components/PlanetsList/PlanetsGridComponent.razor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.outer-section {
flex-direction: column;
width: 100%;
border-radius: 0.5em;
background-color: var(--main-3);
}

.grid-section {
display: grid;
padding: 1em;
}

.section-header {
width: 100%;
background-color: var(--main-1);
border-radius: 0.5em 0.5em 0 0;
padding: 1em;
}

.section-header p {
margin: 0.25em 0 0 0;
}

.planet {
width: 100%;
height: 100%;
position: relative;
}

.icon {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
border-radius: 9999px;
position: relative;
}

.icon-text-holder {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

top: 0;
left: 0;
}

.icon-text {
font-weight: 700;
font-family: 'Ubuntu';
text-align: center;
margin: 0;
text-shadow: 0 0 5px black, 0 0 10px black;
color: var(--font-color);
}
2 changes: 1 addition & 1 deletion Valour/Client/Components/Sidebar/ChannelList/ChannelListComponent.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
style="padding-bottom:80px">
@foreach (var planet in PlanetService.ConnectedPlanets)
{
<PlanetListComponent Planet="planet" @key='planet.Id'></PlanetListComponent>
<OldPlanetListComponent Planet="planet" @key='planet.Id'></OldPlanetListComponent>
}
<div class="channel-fade-left"></div>
<div class="channel-fade-right"></div>
Expand Down
2 changes: 1 addition & 1 deletion Valour/Client/Components/Sidebar/ChannelList/ChannelListItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@

@code {
[Parameter]
public PlanetListComponent PlanetComponent { get; set; }
public OldPlanetListComponent PlanetComponent { get; set; }

[Parameter]
public ChannelListItem ParentComponent { get; set; }
Expand Down
2 changes: 1 addition & 1 deletion Valour/Client/Components/Sidebar/ChannelList/ChannelListManager.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public ChannelListManager()

// Only of of these should be non-null at a time
private ChannelListItem _currentDragParentCategory;
public PlanetListComponent currentDragParentPlanet;
public OldPlanetListComponent currentDragParentPlanet;

/// <summary>
/// Run when an item is clicked within a category
Expand Down
Loading

0 comments on commit 2a10107

Please sign in to comment.