Skip to content

Commit 213762c

Browse files
mateofmateof
committed
feat: improve version modal
1 parent daae717 commit 213762c

3 files changed

Lines changed: 360 additions & 181 deletions

File tree

‎TelegramDownloader/Shared/MainLayout.razor‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
<Spinner Type="SpinnerType.Border" />
118118
</Button>
119119
}
120-
<VersionBadge />
120+
<VersionBadge @ref="versionBadge" @bind-ShowModal="showVersionModal" />
121121
<button class="btn" type="button" @onclick="openOffCanvasMenu"><i class="bi bi-three-dots"></i></button>
122122
</div>
123123
<TelegramDownloader.Pages.Modals.ToastNotify></TelegramDownloader.Pages.Modals.ToastNotify>
@@ -155,15 +155,113 @@
155155
</main>
156156
</div>
157157

158+
@* Version Modal - rendered outside .page to avoid stacking context issues *@
159+
@if (showVersionModal)
160+
{
161+
<div class="version-portal">
162+
<div class="version-backdrop" @onclick="CloseVersionModal"></div>
163+
<div class="version-dialog">
164+
<div class="version-dialog-header">
165+
<h5>Version Information</h5>
166+
<button type="button" class="btn-close" @onclick="CloseVersionModal"></button>
167+
</div>
168+
<div class="version-dialog-body">
169+
@if (versionBadge?.VersionInfo != null)
170+
{
171+
var info = versionBadge.VersionInfo;
172+
<div class="version-current">
173+
<div class="version-label">Current Version</div>
174+
<div class="version-value">
175+
@if (info.IsDockerVersion)
176+
{
177+
<span class="badge bg-secondary me-2">Docker</span>
178+
}
179+
else if (info.IsDevVersion)
180+
{
181+
<span class="badge bg-warning text-dark me-2">Dev</span>
182+
}
183+
else
184+
{
185+
<span class="badge bg-success me-2">Release</span>
186+
}
187+
<code>@info.CurrentVersion</code>
188+
</div>
189+
</div>
190+
191+
@if (info.LatestRelease != null)
192+
{
193+
<div class="version-section @(info.HasNewRelease ? "has-update" : "")">
194+
<div class="version-label">
195+
Latest Release
196+
@if (info.HasNewRelease)
197+
{
198+
<span class="badge bg-primary ms-2">New!</span>
199+
}
200+
</div>
201+
<div class="version-value">
202+
<code>@info.LatestRelease.tag_name</code>
203+
<small class="text-muted ms-2">@info.LatestRelease.published_at.ToString("yyyy-MM-dd")</small>
204+
</div>
205+
@if (info.HasNewRelease)
206+
{
207+
<a href="@info.LatestRelease.html_url" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
208+
<i class="bi bi-box-arrow-up-right"></i> View Release
209+
</a>
210+
}
211+
</div>
212+
}
213+
214+
@if (info.LatestDev != null)
215+
{
216+
<div class="version-section @(info.HasNewDev ? "has-update" : "")">
217+
<div class="version-label">
218+
Latest Dev
219+
@if (info.HasNewDev)
220+
{
221+
<span class="badge bg-warning text-dark ms-2">New!</span>
222+
}
223+
</div>
224+
<div class="version-value">
225+
<code>@info.LatestDev.tag_name</code>
226+
<small class="text-muted ms-2">@info.LatestDev.published_at.ToString("yyyy-MM-dd")</small>
227+
</div>
228+
@if (info.HasNewDev && info.IsDevVersion)
229+
{
230+
<a href="@info.LatestDev.html_url" target="_blank" class="btn btn-sm btn-outline-warning mt-2">
231+
<i class="bi bi-box-arrow-up-right"></i> View Dev Release
232+
</a>
233+
}
234+
</div>
235+
}
236+
}
237+
else
238+
{
239+
<div class="text-center py-3">
240+
<div class="spinner-border spinner-border-sm" role="status"></div>
241+
<span class="ms-2">Loading version info...</span>
242+
</div>
243+
}
244+
</div>
245+
<div class="version-dialog-footer">
246+
<a href="https://github.com/mateof/TelegramFileManager/releases" target="_blank" class="btn btn-sm btn-outline-secondary">
247+
<i class="bi bi-github"></i> All Releases
248+
</a>
249+
<button class="btn btn-sm btn-secondary" @onclick="CloseVersionModal">Close</button>
250+
</div>
251+
</div>
252+
</div>
253+
}
158254

159255
@code {
160256

161257
private Offcanvas offcanvas = default!;
162258
private Pages.Modals.ImportDataModal ImportModal { get; set; }
163259
private NavMenu menu { get; set; }
260+
private VersionBadge versionBadge { get; set; }
164261
private bool active { get; set; } = true;
165262
private bool sidebarCollapsed { get; set; } = false;
166263
private bool navMenuCollapsed { get; set; } = true;
264+
private bool showVersionModal { get; set; } = false;
167265

168266
protected override async Task OnAfterRenderAsync(bool firstRender)
169267
{
@@ -260,6 +358,15 @@
260358
StateHasChanged();
261359
}
262360

361+
private async Task CloseVersionModal()
362+
{
363+
showVersionModal = false;
364+
if (versionBadge != null)
365+
{
366+
await versionBadge.CloseModal();
367+
}
368+
}
369+
263370
public void Dispose()
264371
{
265372
tis.TaskEventChanged -= eventChangedWorkingTasks;

‎TelegramDownloader/Shared/VersionBadge.razor‎

Lines changed: 13 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@inject GHService GHService
44

55
<div class="version-badge-container">
6-
<button class="btn btn-link version-badge @(HasUpdate ? "has-update" : "")" @onclick="ShowVersionModal" title="Version info">
6+
<button class="btn btn-link version-badge @(HasUpdate ? "has-update" : "")" @onclick="ToggleModal" title="Version info">
77
<i class="bi bi-info-circle-fill"></i>
88
@if (HasUpdate)
99
{
@@ -12,100 +12,6 @@
1212
</button>
1313
</div>
1414

15-
@if (ShowModal)
16-
{
17-
<div class="version-modal-overlay" @onclick="CloseModal">
18-
<div class="version-modal" @onclick:stopPropagation="true">
19-
<div class="version-modal-header">
20-
<h5>Version Information</h5>
21-
<button class="btn-close" @onclick="CloseModal"></button>
22-
</div>
23-
<div class="version-modal-body">
24-
@if (VersionInfo != null)
25-
{
26-
<div class="version-current">
27-
<div class="version-label">Current Version</div>
28-
<div class="version-value @(VersionInfo.IsDevVersion ? "dev" : "release")">
29-
@if (VersionInfo.IsDockerVersion)
30-
{
31-
<span class="badge bg-secondary me-2">Docker</span>
32-
}
33-
else if (VersionInfo.IsDevVersion)
34-
{
35-
<span class="badge bg-warning text-dark me-2">Dev</span>
36-
}
37-
else
38-
{
39-
<span class="badge bg-success me-2">Release</span>
40-
}
41-
<code>@VersionInfo.CurrentVersion</code>
42-
</div>
43-
</div>
44-
45-
@if (VersionInfo.LatestRelease != null)
46-
{
47-
<div class="version-section @(VersionInfo.HasNewRelease ? "has-update" : "")">
48-
<div class="version-label">
49-
Latest Release
50-
@if (VersionInfo.HasNewRelease)
51-
{
52-
<span class="badge bg-primary ms-2">New!</span>
53-
}
54-
</div>
55-
<div class="version-value">
56-
<code>@VersionInfo.LatestRelease.tag_name</code>
57-
<small class="text-muted ms-2">@VersionInfo.LatestRelease.published_at.ToString("yyyy-MM-dd")</small>
58-
</div>
59-
@if (VersionInfo.HasNewRelease)
60-
{
61-
<a href="@VersionInfo.LatestRelease.html_url" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
62-
<i class="bi bi-box-arrow-up-right"></i> View Release
63-
</a>
64-
}
65-
</div>
66-
}
67-
68-
@if (VersionInfo.LatestDev != null)
69-
{
70-
<div class="version-section @(VersionInfo.HasNewDev ? "has-update" : "")">
71-
<div class="version-label">
72-
Latest Dev
73-
@if (VersionInfo.HasNewDev)
74-
{
75-
<span class="badge bg-warning text-dark ms-2">New!</span>
76-
}
77-
</div>
78-
<div class="version-value">
79-
<code>@VersionInfo.LatestDev.tag_name</code>
80-
<small class="text-muted ms-2">@VersionInfo.LatestDev.published_at.ToString("yyyy-MM-dd")</small>
81-
</div>
82-
@if (VersionInfo.HasNewDev && VersionInfo.IsDevVersion)
83-
{
84-
<a href="@VersionInfo.LatestDev.html_url" target="_blank" class="btn btn-sm btn-outline-warning mt-2">
85-
<i class="bi bi-box-arrow-up-right"></i> View Dev Release
86-
</a>
87-
}
88-
</div>
89-
}
90-
}
91-
else
92-
{
93-
<div class="text-center py-3">
94-
<div class="spinner-border spinner-border-sm" role="status"></div>
95-
<span class="ms-2">Loading version info...</span>
96-
</div>
97-
}
98-
</div>
99-
<div class="version-modal-footer">
100-
<a href="https://github.com/mateof/TelegramFileManager/releases" target="_blank" class="btn btn-sm btn-outline-secondary">
101-
<i class="bi bi-github"></i> All Releases
102-
</a>
103-
<button class="btn btn-sm btn-secondary" @onclick="CloseModal">Close</button>
104-
</div>
105-
</div>
106-
</div>
107-
}
108-
10915
<style>
11016
.version-badge-container {
11117
position: relative;
@@ -143,91 +49,16 @@
14349
50% { transform: scale(1.2); opacity: 0.7; }
14450
100% { transform: scale(1); opacity: 1; }
14551
}
146-
147-
.version-modal-overlay {
148-
position: fixed;
149-
top: 0;
150-
left: 0;
151-
width: 100%;
152-
height: 100%;
153-
background-color: rgba(0, 0, 0, 0.5);
154-
display: flex;
155-
align-items: center;
156-
justify-content: center;
157-
z-index: 1050;
158-
}
159-
160-
.version-modal {
161-
background: var(--bs-body-bg, #fff);
162-
border-radius: 0.5rem;
163-
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
164-
max-width: 400px;
165-
width: 90%;
166-
}
167-
168-
.version-modal-header {
169-
display: flex;
170-
justify-content: space-between;
171-
align-items: center;
172-
padding: 1rem;
173-
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
174-
}
175-
176-
.version-modal-header h5 {
177-
margin: 0;
178-
}
179-
180-
.version-modal-body {
181-
padding: 1rem;
182-
}
183-
184-
.version-current {
185-
background: var(--bs-tertiary-bg, #f8f9fa);
186-
padding: 1rem;
187-
border-radius: 0.375rem;
188-
margin-bottom: 1rem;
189-
}
190-
191-
.version-section {
192-
padding: 0.75rem;
193-
border: 1px solid var(--bs-border-color, #dee2e6);
194-
border-radius: 0.375rem;
195-
margin-bottom: 0.75rem;
196-
}
197-
198-
.version-section.has-update {
199-
border-color: var(--bs-primary);
200-
background: rgba(var(--bs-primary-rgb), 0.05);
201-
}
202-
203-
.version-label {
204-
font-size: 0.875rem;
205-
color: var(--bs-secondary-color, #6c757d);
206-
margin-bottom: 0.25rem;
207-
}
208-
209-
.version-value {
210-
font-weight: 500;
211-
}
212-
213-
.version-value code {
214-
background: var(--bs-tertiary-bg, #e9ecef);
215-
padding: 0.2rem 0.4rem;
216-
border-radius: 0.25rem;
217-
font-size: 0.9rem;
218-
}
219-
220-
.version-modal-footer {
221-
display: flex;
222-
justify-content: space-between;
223-
padding: 1rem;
224-
border-top: 1px solid var(--bs-border-color, #dee2e6);
225-
}
22652
</style>
22753

22854
@code {
229-
private VersionInfo? VersionInfo { get; set; }
230-
private bool ShowModal { get; set; } = false;
55+
[Parameter]
56+
public bool ShowModal { get; set; } = false;
57+
58+
[Parameter]
59+
public EventCallback<bool> ShowModalChanged { get; set; }
60+
61+
public VersionInfo? VersionInfo { get; private set; }
23162
private bool HasUpdate => VersionInfo?.HasNewRelease == true || VersionInfo?.HasNewDev == true;
23263

23364
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -239,17 +70,19 @@
23970
}
24071
}
24172

242-
private async Task ShowVersionModal()
73+
private async Task ToggleModal()
24374
{
244-
ShowModal = true;
24575
if (VersionInfo == null)
24676
{
24777
VersionInfo = await GHService.GetVersionInfo(forceRefresh: true);
24878
}
79+
ShowModal = true;
80+
await ShowModalChanged.InvokeAsync(ShowModal);
24981
}
25082

251-
private void CloseModal()
83+
public async Task CloseModal()
25284
{
25385
ShowModal = false;
86+
await ShowModalChanged.InvokeAsync(ShowModal);
25487
}
25588
}

0 commit comments

Comments
 (0)