Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added theme and basic ui defaults

Browse Source
This commit is contained in:
Marcel Baumgartner
2023-10-13 20:48:36 +02:00
parent 76866fe14f
commit 69b50275cd
320 changed files with 30617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Moonlight/Shared/Components/Partials/ConnectionIndicator.razor Normal file
View File

@@ -0,0 +1,24 @@
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="default">
<button class="btn btn-light-success" style="pointer-events: none;">
Connected
<i class="bx bx-wifi ms-1"></i>
</button>
</div>
<div class="show">
<button class="btn btn-light-danger" style="pointer-events: none;">
Reconnecting
<i class="bx bx-wifi-off ms-1"></i>
</button>
</div>
<div class="failed">
<a href="javascript:location.reload()" class="btn btn-primary">
Reconnect
</a>
</div>
<div class="rejected">
<a href="javascript:location.reload()" class="btn btn-primary">
Reconnect
</a>
</div>
</div>

219
Moonlight/Shared/Components/Partials/PageHeader.razor Normal file
View File

@@ -0,0 +1,219 @@
@using Moonlight.Shared.Layouts
<div id="kt_app_header" class="app-header ">
<div class="app-container container-fluid d-flex align-items-stretch flex-stack " id="kt_app_header_container">
<div class="d-flex align-items-center d-block d-lg-none ms-n3" title="Show sidebar menu">
<a href="#" @onclick="Layout.ToggleMobileSidebar" @onclick:preventDefault class="btn btn-icon btn-active-color-primary w-35px h-35px me-2">
<i class="bx bx-sm bx-menu"></i>
</a>
<a href="/metronic8/demo38/../demo38/index.html">
<img alt="Logo" src="/metronic8/demo38/assets/media/logos/demo38-small.svg" class="h-30px">
</a>
</div>
<div class="app-navbar flex-lg-grow-1" id="kt_app_header_navbar">
<div class="app-navbar-item d-flex align-items-stretch flex-lg-grow-1">
</div>
<div class="app-navbar-item ms-1 ms-md-3">
<ConnectionIndicator />
</div>
<div class="app-navbar-item ms-5 ms-md-5">
<div class="cursor-pointer symbol symbol-circle symbol-35px symbol-md-45px" id="dropdownMenuLink" data-bs-toggle="dropdown">
<img src="https://endelon-hosting.de/assets/img/logo.svg" alt="user">
</div>
<div class="dropdown-menu dropdown-menu-end menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px" aria-labelledby="dropdownMenuLink">
<div class="menu-item px-3">
<div class="menu-content d-flex align-items-center px-3">
<div class="symbol symbol-50px me-5">
<img alt="Logo" src="/metronic8/demo38/assets/media/avatars/300-2.jpg">
</div>
<div class="d-flex flex-column">
<div class="fw-bold d-flex align-items-center fs-5">
Max Smith <span class="badge badge-light-success fw-bold fs-8 px-2 py-1 ms-2">Pro</span>
</div>
<a href="#" class="fw-semibold text-muted text-hover-primary fs-7">
max@kt.com
</a>
</div>
</div>
</div>
<div class="separator my-2"></div>
<div class="menu-item px-5">
<a href="/metronic8/demo38/../demo38/account/overview.html" class="menu-link px-5">
My Profile
</a>
</div>
<div class="menu-item px-5">
<a href="/metronic8/demo38/../demo38/apps/projects/list.html" class="menu-link px-5">
<span class="menu-text">My Projects</span>
<span class="menu-badge">
<span class="badge badge-light-danger badge-circle fw-bold fs-7">3</span>
</span>
</a>
</div>
<div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
<a href="#" class="menu-link px-5">
<span class="menu-title">My Subscription</span>
<span class="menu-arrow"></span>
</a>
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/referrals.html" class="menu-link px-5">
Referrals
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/billing.html" class="menu-link px-5">
Billing
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/statements.html" class="menu-link px-5">
Payments
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/statements.html" class="menu-link d-flex flex-stack px-5">
Statements
<span class="ms-2 lh-0" data-bs-toggle="tooltip" aria-label="View your statements" data-bs-original-title="View your statements" data-kt-initialized="1">
<i class="ki-outline ki-information-5 fs-5"></i>
</span>
</a>
</div>
<div class="separator my-2"></div>
<div class="menu-item px-3">
<div class="menu-content px-3">
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications">
<span class="form-check-label text-muted fs-7">
Notifications
</span>
</label>
</div>
</div>
</div>
</div>
<div class="menu-item px-5">
<a href="/metronic8/demo38/../demo38/account/statements.html" class="menu-link px-5">
My Statements
</a>
</div>
<div class="separator my-2"></div>
<div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
<a href="#" class="menu-link px-5">
<span class="menu-title position-relative">
Mode
<span class="ms-5 position-absolute translate-middle-y top-50 end-0">
<i class="ki-outline ki-night-day theme-light-show fs-2"></i> <i class="ki-outline ki-moon theme-dark-show fs-2"></i>
</span>
</span>
</a>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px" data-kt-menu="true" data-kt-element="theme-mode-menu">
<div class="menu-item px-3 my-0">
<a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
<span class="menu-icon" data-kt-element="icon">
<i class="ki-outline ki-night-day fs-2"></i>
</span>
<span class="menu-title">
Light
</span>
</a>
</div>
<div class="menu-item px-3 my-0">
<a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode" data-kt-value="dark">
<span class="menu-icon" data-kt-element="icon">
<i class="ki-outline ki-moon fs-2"></i>
</span>
<span class="menu-title">
Dark
</span>
</a>
</div>
<div class="menu-item px-3 my-0">
<a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
<span class="menu-icon" data-kt-element="icon">
<i class="ki-outline ki-screen fs-2"></i>
</span>
<span class="menu-title">
System
</span>
</a>
</div>
</div>
</div>
<div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
<a href="#" class="menu-link px-5">
<span class="menu-title position-relative">
Language
<span class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">
English <img class="w-15px h-15px rounded-1 ms-2" src="/metronic8/demo38/assets/media/flags/united-states.svg" alt="">
</span>
</span>
</a>
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link d-flex px-5 active">
<span class="symbol symbol-20px me-4">
<img class="rounded-1" src="/metronic8/demo38/assets/media/flags/united-states.svg" alt="">
</span>
English
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link d-flex px-5">
<span class="symbol symbol-20px me-4">
<img class="rounded-1" src="/metronic8/demo38/assets/media/flags/spain.svg" alt="">
</span>
Spanish
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link d-flex px-5">
<span class="symbol symbol-20px me-4">
<img class="rounded-1" src="/metronic8/demo38/assets/media/flags/germany.svg" alt="">
</span>
German
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link d-flex px-5">
<span class="symbol symbol-20px me-4">
<img class="rounded-1" src="/metronic8/demo38/assets/media/flags/japan.svg" alt="">
</span>
Japanese
</a>
</div>
<div class="menu-item px-3">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link d-flex px-5">
<span class="symbol symbol-20px me-4">
<img class="rounded-1" src="/metronic8/demo38/assets/media/flags/france.svg" alt="">
</span>
French
</a>
</div>
</div>
</div>
<div class="menu-item px-5 my-1">
<a href="/metronic8/demo38/../demo38/account/settings.html" class="menu-link px-5">
Account Settings
</a>
</div>
<div class="menu-item px-5">
<a href="/metronic8/demo38/../demo38/authentication/layouts/corporate/sign-in.html" class="menu-link px-5">
Sign Out
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@code
{
[CascadingParameter]
public DefaultLayout Layout { get; set; }
}

31
Moonlight/Shared/Components/Partials/Sidebar.razor Normal file
View File

@@ -0,0 +1,31 @@
@using Moonlight.Shared.Layouts
<div class="app-sidebar flex-column @(Layout.ShowMobileSidebar ? "drawer drawer-start drawer-on" : "")">
<div class="app-sidebar-header d-flex flex-stack d-none d-lg-flex pt-8 pb-2">
<a href="/metronic8/demo38/../demo38/index.html" class="app-sidebar-logo">
<img alt="Logo" src="/metronic8/demo38/assets/media/logos/demo38.svg" class="h-25px d-none d-sm-inline app-sidebar-logo-default theme-light-show">
<img alt="Logo" src="/metronic8/demo38/assets/media/logos/demo38-dark.svg" class="h-20px h-lg-25px theme-dark-show">
</a>
</div>
<div class="app-sidebar-navs flex-column-fluid py-6" id="kt_app_sidebar_navs">
<div id="kt_app_sidebar_navs_wrappers" class="app-sidebar-wrapper hover-scroll-y my-2" style="height: 811px;">
<div class="app-sidebar-menu-secondary menu menu-rounded menu-column mb-6">
<div class="menu-item">
<a class="menu-link " href="/">
<span class="menu-icon">
<i class="bx bx-sm bxs-dashboard"></i>
</span>
<span class="menu-title">
Dashboard
</span>
</a>
</div>
</div>
</div>
</div>
</div>
@code
{
[CascadingParameter]
public DefaultLayout Layout { get; set; }
}

36
Moonlight/Shared/Layouts/DefaultLayout.razor Normal file
View File

@@ -0,0 +1,36 @@
<div class="d-flex flex-column flex-root app-root">
<div class="app-page flex-column flex-column-fluid">
<CascadingValue Value="this">
<PageHeader/>
<div class="app-wrapper flex-column flex-row-fluid">
<Sidebar/>
<div class="d-flex flex-column flex-column-fluid">
<div class="app-content flex-column-fluid">
<div class="app-container container-fluid">
@ChildContent
</div>
</div>
</div>
</div>
</CascadingValue>
</div>
</div>
@if (ShowMobileSidebar)
{
<div style="z-index: 105;" class="drawer-overlay" @onclick="ToggleMobileSidebar"></div>
}
@code
{
[Parameter]
public RenderFragment ChildContent { get; set; }
public bool ShowMobileSidebar { get; set; }
public async Task ToggleMobileSidebar()
{
ShowMobileSidebar = !ShowMobileSidebar;
await InvokeAsync(StateHasChanged);
}
}

5
Moonlight/Shared/Layouts/MainLayout.razor Normal file
View File

@@ -0,0 +1,5 @@
@inherits LayoutComponentBase
<DefaultLayout>
@Body
</DefaultLayout>

3
Moonlight/Shared/Views/Index.razor Normal file
View File

@@ -0,0 +1,3 @@
@page "/"
<h1>Hello, world!</h1>