diff --git a/Iceshrimp.Backend/Components/Admin/AdminHead.razor b/Iceshrimp.Backend/Components/Admin/AdminHead.razor index dc1e25b3..4ea369c9 100644 --- a/Iceshrimp.Backend/Components/Admin/AdminHead.razor +++ b/Iceshrimp.Backend/Components/Admin/AdminHead.razor @@ -2,5 +2,6 @@ @using Iceshrimp.Backend.Components.Helpers + \ No newline at end of file diff --git a/Iceshrimp.Backend/Components/Admin/AdminNav.razor b/Iceshrimp.Backend/Components/Admin/AdminNav.razor new file mode 100644 index 00000000..8872eeaa --- /dev/null +++ b/Iceshrimp.Backend/Components/Admin/AdminNav.razor @@ -0,0 +1,20 @@ +@using Iceshrimp.Assets.PhosphorIcons +@using Iceshrimp.Backend.Components.Generic + + +@code +{ + private NavBar.NavLink _brand = new("/admin", "Admin Dashboard"); + + private List _links = + [ + new("/admin", "Overview", Icons.ChartLine), // spacer for alignment + new("/admin/metadata", "Instance metadata", Icons.Info), + new("/admin/users", "User management", Icons.Users), + new("/admin/federation", "Federation control", Icons.Graph), + new("/admin/relays", "Relays", Icons.FastForward), + new("/admin/plugins", "Plugins", Icons.Plug) + ]; + + private List _right = [new("/queue", "Queue dashboard", IconRight: Icons.ArrowSquareOut, NewTab: true)]; +} \ No newline at end of file diff --git a/Iceshrimp.Backend/Components/Admin/AdminPageHeader.razor b/Iceshrimp.Backend/Components/Admin/AdminPageHeader.razor index 24614b83..7838df18 100644 --- a/Iceshrimp.Backend/Components/Admin/AdminPageHeader.razor +++ b/Iceshrimp.Backend/Components/Admin/AdminPageHeader.razor @@ -1,7 +1,7 @@ @using Microsoft.AspNetCore.Components.Web @Title - Admin - @(InstanceName ?? "Iceshrimp.NET") -

Admin Dashboard

- + +

@Title

@code { diff --git a/Iceshrimp.Backend/Components/Generic/NavBar.razor b/Iceshrimp.Backend/Components/Generic/NavBar.razor new file mode 100644 index 00000000..201dd16a --- /dev/null +++ b/Iceshrimp.Backend/Components/Generic/NavBar.razor @@ -0,0 +1,147 @@ +@using Iceshrimp.Assets.PhosphorIcons +@using Iceshrimp.Backend.Components.Helpers + + + + + + +@code { + public record struct NavLink(string Href, string Name, IconName? Icon = null, IconName? IconRight = null, bool NewTab = false); + + [Parameter, EditorRequired] public required int MaxItemsLg { get; set; } + [Parameter, EditorRequired] public required int MaxItemsMd { get; set; } + [Parameter, EditorRequired] public required NavLink Brand { get; set; } + [Parameter, EditorRequired] public required List Links { get; set; } + [Parameter] public List? Right { get; set; } + + private bool OverflowsLg => Links.Count + (Right?.Count ?? 0) > MaxItemsLg; + private bool OverflowsMd => Links.Count + (Right?.Count ?? 0) > MaxItemsMd; +} \ No newline at end of file diff --git a/Iceshrimp.Backend/Components/Generic/NavBar.razor.css b/Iceshrimp.Backend/Components/Generic/NavBar.razor.css new file mode 100644 index 00000000..6e22d944 --- /dev/null +++ b/Iceshrimp.Backend/Components/Generic/NavBar.razor.css @@ -0,0 +1,146 @@ +.navbar { + position: absolute; + left: 0; + top: 0; + right: 0; + height: 50px; + padding: 0; + background-color: var(--button-base); + display: flex; + align-items: center; + white-space: nowrap; + vertical-align: middle; +} + +a { + text-decoration: none; +} + +.navbar ::deep a { + color: var(--text-main); +} + +.navbar ul { + margin: 0; + padding: 0; + height: 100%; + list-style-type: none; + display: flex; + align-items: center; +} + +.navbar .brand { + color: var(--text-bright); + padding: 0 15px; + font-weight: bold; +} + +.navbar ul.nav-right:last-of-type li:last-of-type ::deep a { + padding: 0 15px; +} + +.navbar ul li { + height: 100%; +} + +.navbar ul li ::deep a { + color: var(--text-main); + padding: 0 12px; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 4pt; +} + +.navbar ::deep a.active, +.navbar ul ::deep a:hover, +.navbar ul ::deep a:focus, +.navbar .brand:hover, +.navbar .brand:focus { + background-color: var(--button-hover); + text-decoration: none; +} + +.navbar ul.nav-right { + margin-left: auto; +} + +.dropdown-button { + cursor: pointer; +} + +.dropdown:hover > .dropdown-menu, +.dropdown:focus-within > .dropdown-menu, +.dropdown-menu:hover, +.dropdown-menu:focus { + visibility: visible; + opacity: 1; + display: block !important; +} + +.dropdown { + position: relative; +} + +.dropdown-menu { + opacity: 0; + min-width: 5rem; + position: absolute; + margin-top: 1rem; + left: 0; + z-index: +1; + display: none !important; +} + +ul.dropdown-menu li { + background-color: var(--button-base); +} + +li.dropdown-spacer, +li.hamburger-spacer { + height: 1px !important; + border-top: 1px solid var(--border); + filter: brightness(65%); +} + +.hamburger-button { + cursor: pointer; +} + +.hamburger-menu.hidden { + display: none !important; +} + +.hamburger-menu { + position: absolute; + right: 0; + display: inline-block !important; + z-index: +1; +} + +ul.hamburger-menu li { + display: block !important; + background-color: var(--button-base); +} + +.navbar-lg { + display: none; + @media screen and (min-width: 1200px) { + display: flex; + } +} + +.navbar-md { + display: none; + @media screen and (min-width: 800px) and (max-width: 1199px) { + display: flex; + } +} + +.navbar-sm { + display: none; + @media screen and (max-width: 799px) { + display: flex; + } +} \ No newline at end of file diff --git a/Iceshrimp.Backend/Components/Generic/NavBar.razor.js b/Iceshrimp.Backend/Components/Generic/NavBar.razor.js new file mode 100644 index 00000000..91d1c5db --- /dev/null +++ b/Iceshrimp.Backend/Components/Generic/NavBar.razor.js @@ -0,0 +1,11 @@ +function toggleHamburger(e) { + e.preventDefault() + + for (let el of document.getElementsByClassName("hamburger-menu")) { + if (el.classList.contains("hidden")) { + el.classList.remove('hidden'); + } else { + el.classList.add('hidden'); + } + } +} \ No newline at end of file diff --git a/Iceshrimp.Backend/Components/Generic/NavBarLink.razor b/Iceshrimp.Backend/Components/Generic/NavBarLink.razor new file mode 100644 index 00000000..efbfaab1 --- /dev/null +++ b/Iceshrimp.Backend/Components/Generic/NavBarLink.razor @@ -0,0 +1,18 @@ +@using Microsoft.AspNetCore.Components.Routing +@using Iceshrimp.Assets.PhosphorIcons + + @if (Link.Icon != null) + { + + } + @Link.Name + @if (Link.IconRight != null) + { + + } + + +@code { + [Parameter, EditorRequired] public required NavBar.NavLink Link { get; set; } + private string Target => Link.NewTab ? "_blank" : "_self"; +} \ No newline at end of file diff --git a/Iceshrimp.Backend/Pages/Admin/Federation.razor b/Iceshrimp.Backend/Pages/Admin/Federation.razor index 11d5974d..bdd11995 100644 --- a/Iceshrimp.Backend/Pages/Admin/Federation.razor +++ b/Iceshrimp.Backend/Pages/Admin/Federation.razor @@ -9,7 +9,6 @@ @using static Iceshrimp.Backend.Core.Configuration.Enums; @using Microsoft.AspNetCore.Components.Forms @inherits AdminComponentBase - diff --git a/Iceshrimp.Backend/Pages/Admin/Metadata.razor b/Iceshrimp.Backend/Pages/Admin/Metadata.razor index b0d2570f..5ce4957e 100644 --- a/Iceshrimp.Backend/Pages/Admin/Metadata.razor +++ b/Iceshrimp.Backend/Pages/Admin/Metadata.razor @@ -5,7 +5,6 @@ @using Microsoft.AspNetCore.Components.Forms @inherits AdminComponentBase -

Here you can adjust basic instance metadata. It gets displayed to all users, including guests.

diff --git a/Iceshrimp.Backend/Pages/Admin/Overview.razor b/Iceshrimp.Backend/Pages/Admin/Overview.razor index a44d3714..c35db4fa 100644 --- a/Iceshrimp.Backend/Pages/Admin/Overview.razor +++ b/Iceshrimp.Backend/Pages/Admin/Overview.razor @@ -4,20 +4,10 @@ @using Microsoft.EntityFrameworkCore @inherits AdminComponentBase -Overview - Admin - @(InstanceName ?? "Iceshrimp.NET") - -

Admin Dashboard

-

This interface is used to adjust parameters of this Iceshrimp.NET instance. Please pick a category below.

- - - - - - - + +

This interface is used to adjust parameters of this Iceshrimp.NET instance.

@* -- TODO: Improve styles, possibly add a navbar - TODO: Remote user management - TODO: More federation stats (e.g. # of activities sent/fetched, some basic queue stats) - TODO: Move queue dashboard to blazor ssr diff --git a/Iceshrimp.Backend/Pages/Admin/Plugins.razor b/Iceshrimp.Backend/Pages/Admin/Plugins.razor index a2846650..398a9cbc 100644 --- a/Iceshrimp.Backend/Pages/Admin/Plugins.razor +++ b/Iceshrimp.Backend/Pages/Admin/Plugins.razor @@ -2,7 +2,6 @@ @using Iceshrimp.Backend.Components.Admin @using Iceshrimp.Backend.Core.Helpers @inherits AdminComponentBase -
diff --git a/Iceshrimp.Backend/Pages/Admin/Relays.razor b/Iceshrimp.Backend/Pages/Admin/Relays.razor index 6e5b8a97..f98ce422 100644 --- a/Iceshrimp.Backend/Pages/Admin/Relays.razor +++ b/Iceshrimp.Backend/Pages/Admin/Relays.razor @@ -9,7 +9,6 @@ @using Microsoft.Extensions.Options @using Microsoft.AspNetCore.Components.Forms @inherits AdminComponentBase - @if (!Options.Value.AcceptLdSignatures) diff --git a/Iceshrimp.Backend/Pages/Admin/Users.razor b/Iceshrimp.Backend/Pages/Admin/Users.razor index b11e0a01..15b0d6b1 100644 --- a/Iceshrimp.Backend/Pages/Admin/Users.razor +++ b/Iceshrimp.Backend/Pages/Admin/Users.razor @@ -5,7 +5,6 @@ @using Microsoft.EntityFrameworkCore @using Microsoft.Extensions.Options @inherits AdminComponentBase -
diff --git a/Iceshrimp.Backend/Pages/Shared/RootComponent.razor b/Iceshrimp.Backend/Pages/Shared/RootComponent.razor index 26d31796..3cf543ba 100644 --- a/Iceshrimp.Backend/Pages/Shared/RootComponent.razor +++ b/Iceshrimp.Backend/Pages/Shared/RootComponent.razor @@ -14,6 +14,7 @@ +