135 lines
3.2 KiB
Plaintext
135 lines
3.2 KiB
Plaintext
@implements IDisposable
|
|
@inject LocalizationService Loc
|
|
|
|
<div class="lang-selector">
|
|
<button class="lang-current" @onclick="ToggleDropdown" title="@Loc["lang.select"]">
|
|
<img src="@Loc.CurrentLanguageInfo.FlagIcon" alt="@Loc.CurrentLanguageInfo.DisplayName" class="lang-flag" />
|
|
</button>
|
|
|
|
@if (isOpen)
|
|
{
|
|
<div class="lang-dropdown">
|
|
@foreach (var lang in LocalizationService.AvailableLanguages)
|
|
{
|
|
<button class="lang-option @(lang.Code == Loc.CurrentLanguage ? "active" : "")"
|
|
@onclick="() => SelectLanguage(lang.Code)">
|
|
<img src="@lang.FlagIcon" alt="@lang.DisplayName" class="lang-flag" />
|
|
<span>@lang.DisplayName</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (isOpen)
|
|
{
|
|
<div class="lang-overlay" @onclick="CloseDropdown"></div>
|
|
}
|
|
|
|
<style>
|
|
.lang-selector {
|
|
position: fixed;
|
|
top: 15px;
|
|
right: 60px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.lang-current {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lang-current:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.lang-flag {
|
|
width: 20px;
|
|
height: 15px;
|
|
object-fit: cover;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.lang-dropdown {
|
|
position: absolute;
|
|
top: 42px;
|
|
right: 0;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
overflow: hidden;
|
|
min-width: 140px;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.lang-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.lang-option:hover {
|
|
background-color: var(--bg-tertiary);
|
|
}
|
|
|
|
.lang-option.active {
|
|
background-color: var(--table-active-bg);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lang-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
private bool isOpen = false;
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
Loc.OnLanguageChanged += OnLanguageChanged;
|
|
}
|
|
|
|
private void ToggleDropdown() => isOpen = !isOpen;
|
|
private void CloseDropdown() => isOpen = false;
|
|
|
|
private async Task SelectLanguage(string code)
|
|
{
|
|
isOpen = false;
|
|
await Loc.SetLanguageAsync(code);
|
|
}
|
|
|
|
private void OnLanguageChanged() => InvokeAsync(StateHasChanged);
|
|
|
|
public void Dispose()
|
|
{
|
|
Loc.OnLanguageChanged -= OnLanguageChanged;
|
|
}
|
|
}
|