Skip to content

Commit 75d9d31

Browse files
miladsoftmiladsoft
authored
View project/UI (#114)
* Create add.svg * Create recovery.svg * Create info.svg * Update create and recover wallet icons * Add btn-border class * Create visibility.svg * Create visibility-off.svg * Add bs-modal-color CSS variable * Update dashboard.css * Update NotificationComponent.razor * Update Wallet.razor * Update Browse.razor * Update Wallet.razor * Update NotificationComponent.razor * Update app.css * Update dashboard.css * Update NavMenu.razor * Update Wallet.razor * Update ShowQrCode.razor * Add toggle button to show/hide extra word * Create list.svg * Create grid.svg * Update Browse.razor * Update app.css * Update Wallet.razor * Update Browse.razor * Update Wallet.razor * Update Wallet.razor * Update Settings.razor * Create search.svg * Update Browse.razor * Create view.svg * Update MainLayout.razor * Start working on View * Update Browse.razor * Add animation to active btn * Add animation to logo * Add profile pictures to the project list * Update Browse.razor * Update MainLayout.razor
1 parent e62b403 commit 75d9d31

23 files changed

+436
-215
lines changed

‎src/Angor/Client/Components/ShowQrCode.razor

+7-14
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<!-- Trigger Button -->
1313
<div class="col-6 text-end">
14-
<i @onclick="ShowModal" data-cy="SHOW_QR_CODE">
15-
@((MarkupString)qrCodeIcon)
14+
<i role="button" @onclick="ShowModal" data-cy="SHOW_QR_CODE">
15+
<Icon IconName="qr-code"></Icon>
1616
</i>
1717
</div>
1818
<!-- Modal -->
@@ -26,15 +26,17 @@
2626
<div class="modal-header">
2727
<h5 class="modal-title" id="coinControlModalLabel">Receive</h5>
2828
<span type="button" data-bs-dismiss="modal" @onclick="HideModal" data-cy="QR_IMAGE_IN_POPUP">
29-
@((MarkupString)closeIcon)
29+
<Icon IconName="close-circle"></Icon>
3030
</span>
3131
</div>
3232
<div class="modal-body">
3333
<img src="data:image/png;base64,@base64qrcode" class="qrcode-image" alt="QR Code" />
3434
<div class="address-container">
3535
<div class="d-flex align-items-center">
3636
<p id="receive-address" class="address-text mb-0 overflow-x-auto" data-cy="WALLET_ADRESS_IN_QR_POPUP">@Data</p>
37-
<i @onclick="CopyToClipboard" class="material-icons opacity-10 btn-angor fs-3 ms-auto cursor-pointer user-select-none">copy</i>
37+
<i @onclick="CopyToClipboard" class="ms-auto cursor-pointer user-select-none">
38+
<Icon IconName="copy"></Icon>
39+
</i>
3840
</div>
3941
</div>
4042
</div>
@@ -57,16 +59,7 @@
5759

5860
public NotificationComponent notificationComponent;
5961

60-
private string qrCodeIcon;
61-
private string closeIcon;
62-
63-
protected override async Task OnInitializedAsync()
64-
{
65-
var iconColor = "var(--bs-primary)";
66-
qrCodeIcon = await IconService.GetIcon("qr-code", 32, 32, iconColor);
67-
closeIcon = await IconService.GetIcon("close-circle", 32, 32, iconColor);
68-
69-
}
62+
7063

7164
private void ShowModal()
7265
{

‎src/Angor/Client/Pages/Browse.razor

+36-21
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
<div>
3333
@if (projects.Count > 0)
3434
{
35-
<span role="button" class="material-icons fs-3 opacity-10 btn-angor user-select-none" @onclick="ToggleView">
36-
@viewModeIcon
35+
<span role="button" class="user-select-none" @onclick="ToggleView">
36+
<Icon IconName="@viewModeIcon" />
3737
</span>
3838
}
3939
</div>
@@ -47,25 +47,29 @@
4747
<!-- Search Section -->
4848
<div class="input-group">
4949
<input type="text" class="form-control" placeholder="Enter Angor project identifier" id="searchQuery" @oninput="UpdateSearchQuery" @onkeydown="HandleKeyDown">
50-
<button class="btn btn-primary" type="button" @onclick="SearchProject" disabled="@searchInProgress" data-cy="find-button">Find</button>
50+
<button class="btn btn-border" type="button" @onclick="SearchProject" disabled="@searchInProgress" data-cy="find-button">
51+
<Icon IconName="search" />
52+
</button>
5153
</div>
5254
</div>
5355
</div>
5456
</div>
5557

56-
@if (searchInProgress)
58+
@if (searchInProgress )
5759
{
5860
<div class="d-flex justify-content-center mt-4">
5961
<div class="loader"></div>
6062
</div>
6163
}
6264

63-
@if (!projects.Any() && !searchInProgress)
65+
@if (!projects.Any() && !searchInProgress && noProject)
6466
{
6567
<div class="row mt-4">
6668
<div class="card card-body angor-alert-info pt-2 pb-2">
6769
<div class="d-flex align-items-center">
68-
<span class="material-icons opacity-10 fs-1 me-3 text-white user-select-none">info</span>
70+
<span class="me-3 user-select-none">
71+
<Icon IconName="info" Width="40" Height="40" Color="var(--bs-primary-btn-icon)" />
72+
</span>
6973
<span class="text-white" data-cy="projectsGrid">No projects found.</span>
7074
</div>
7175
</div>
@@ -80,11 +84,16 @@ else
8084
{
8185
<div class="col d-flex align-items-stretch">
8286
<div class="card mt-4 w-100 project-card">
83-
<a class="d-block blur-shadow-image">
87+
<a class="d-block">
8488
@if (!nostrSearchInProgress && SessionStorage.IsProjectInStorageById(indexerData.ProjectIdentifier))
8589
{
8690
var project = SessionStorage.GetProjectById(indexerData.ProjectIdentifier);
87-
<img class="card-img-top" src="@(project?.Metadata?.Banner ?? "/assets/img/no-image.jpg")" alt="@(project?.Metadata?.Banner != null ? "" : "no-image")" onerror="this.onerror=null; this.src='/assets/img/no-image.jpg';" />
91+
<div class="banner-container">
92+
<img class="banner-image" src="@(project?.Metadata?.Banner ?? "/assets/img/no-image.jpg")" alt="@(project?.Metadata?.Banner != null ? "" : "no-image")" onerror="this.onerror=null; this.src='/assets/img/no-image.jpg';" />
93+
<div class="profile-container">
94+
<img class="profile-image" src="@(project?.Metadata?.Picture ?? "/assets/img/no-image.jpg")" alt="@(project?.Metadata?.Banner != null ? "" : "no-image")" onerror="this.onerror=null; this.src='/assets/img/no-image.jpg';" />
95+
</div>
96+
</div>
8897
}
8998
</a>
9099

@@ -119,7 +128,6 @@ else
119128
<hr class="horizontal light mt-3">
120129
<div role="button" class="btn btn-view w-100" @onclick="() => ViewProjectDetails(indexerData.ProjectIdentifier)">
121130
<div class="d-flex align-items-center justify-content-center">
122-
<span class="material-icons opacity-10 me-1" data-cy="generate-wallet-words">chevron_right</span>
123131
<span>View Project</span>
124132
</div>
125133
</div>
@@ -128,6 +136,7 @@ else
128136
</div>
129137
}
130138
</div>
139+
131140
}
132141
else
133142
{
@@ -136,19 +145,20 @@ else
136145
{
137146
<div class="card mt-4 project-card">
138147
<div class="row g-0">
139-
<div class="col-md-4">
140-
<div class="img-responsive img-responsive-16by9 position-relative blur-shadow-image" role="button" @onclick="() => ViewProjectDetails(indexerData.ProjectIdentifier)">
148+
<div class="col-md-4 position-relative">
149+
<div class="banner-container-list">
141150
@if (!nostrSearchInProgress && SessionStorage.IsProjectInStorageById(indexerData.ProjectIdentifier))
142151
{
143152
var project = SessionStorage.GetProjectById(indexerData.ProjectIdentifier);
144-
<div class="card-header card-header-img">
145-
<img class="img-responsive-item" src="@(project?.Metadata?.Banner ?? "/assets/img/no-image.jpg")" alt="@(project?.Metadata?.Banner != null ? "" : "no-image")" onerror="this.onerror=null; this.src='/assets/img/no-image.jpg';" />
153+
<img class="banner-image" src="@(project?.Metadata?.Banner ?? "/assets/img/no-image.jpg")" alt="@(project?.Metadata?.Banner != null ? "" : "no-image")" onerror="this.onerror=null; this.src='/assets/img/no-image.jpg';" />
154+
<div class="profile-container">
155+
<img class="profile-image" src="@(project?.Metadata?.Picture ?? "/assets/img/no-image.jpg")" alt="Profile Image" />
146156
</div>
147157
}
148158
</div>
149159
</div>
150-
<div class="col-md-8 d-flex align-items-center position-relative">
151-
<div class="card-body card-loader loading">
160+
<div class="col-md-8 d-flex align-items-center">
161+
<div class="card-body">
152162
@if (nostrSearchInProgress)
153163
{
154164
<div class="p-3">
@@ -173,12 +183,9 @@ else
173183
<p class="text-warning-emphasis">Project not found in any relay!</p>
174184
}
175185
</div>
176-
177186
<hr class="horizontal light m-only">
178-
179187
<div role="button" class="btn btn-view vertical-button w-100-m" @onclick="() => ViewProjectDetails(indexerData.ProjectIdentifier)">
180188
<div class="d-flex align-items-center justify-content-center">
181-
<span class="material-icons opacity-10 me-1" data-cy="generate-wallet-words">chevron_right</span>
182189
<span>View Project</span>
183190
</div>
184191
</div>
@@ -190,14 +197,17 @@ else
190197
</div>
191198
}
192199
</div>
200+
193201
}
194202
}
195203

196204
@if (!searchInProgress)
197205
{
198206
<div class="d-flex justify-content-center mt-4">
199207
<a class="btn btn-secondary my-3" href="https://browse.angor.io" target="_blank">
200-
<i class="material-icons opacity-10">search</i>
208+
<i>
209+
<Icon IconName="browse" Color="var(--bs-primary-btn-icon)"></Icon>
210+
</i>
201211
<span class="nav-link-text ms-1">Project Explorer</span>
202212
</a>
203213
</div>
@@ -209,13 +219,15 @@ else
209219
private bool searchInProgress = false;
210220
private bool nostrSearchInProgress;
211221
private bool isGridView = true;
212-
private string viewModeIcon = "grid_view";
222+
private string viewModeIcon = "list";
223+
private bool noProject = false;
213224

214225
private ProjectIndexerData? findProject = null;
215226
private List<ProjectIndexerData> projects = new();
216227

217228
protected override async Task OnInitializedAsync()
218229
{
230+
await GetAllProjects();
219231
projects = SessionStorage.GetProjectIndexerData() ?? new List<ProjectIndexerData>();
220232

221233
if (projects.Any())
@@ -228,6 +240,7 @@ else
228240
}
229241
else
230242
{
243+
searchInProgress = true;
231244
// No projects are cached, fetch new projects after ensuring services are available
232245
await FetchAndEnsureServices();
233246
}
@@ -246,6 +259,8 @@ else
246259
if (primaryIndexer == null || primaryRelay == null)
247260
{
248261
notificationComponent.ShowNotificationMessage("No primary indexer or relay found. Please configure them in settings.");
262+
searchInProgress = false;
263+
noProject = true;
249264
return;
250265
}
251266

@@ -309,7 +324,7 @@ else
309324
private void ToggleView()
310325
{
311326
isGridView = !isGridView;
312-
viewModeIcon = isGridView ? "grid_view" : "view_list";
327+
viewModeIcon = isGridView ? "list" : "grid";
313328
}
314329

315330
private async Task SearchProject()

‎src/Angor/Client/Pages/Index.razor

+20-18
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
@page "/"
22

33
<PageTitle>Angor</PageTitle>
4-
<div class="card">
5-
<div class="row g-0">
6-
<div class="col-md-6">
7-
<div class="embed-responsive embed-responsive-16by9 position-relative">
8-
<!-- Loader for Video -->
9-
<div class="video-loader loading">
10-
<div class="loader"></div>
11-
</div>
12-
<!-- Replace 'VIDEO_ID' with the actual ID of your YouTube video -->
13-
<iframe id="youtube-video" class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
4+
<div class="card">
5+
<div class="row g-0">
6+
<div class="col-md-6">
7+
<div class="embed-responsive embed-responsive-16by9 position-relative">
8+
<!-- Loader for Video -->
9+
<div class="video-loader loading">
10+
<div class="loader"></div>
1411
</div>
12+
<!-- Replace 'VIDEO_ID' with the actual ID of your YouTube video -->
13+
<iframe id="youtube-video" class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
1514
</div>
16-
<div class="col-md-6 d-flex align-items-center justify-content-center position-relative">
17-
<!-- Loader for Card -->
18-
<div class="card-body card-loader loading">
19-
<div class="card-loader-overlay"></div>
20-
<h5 class="card-title text-center">Welcome to Angor</h5>
21-
<p class="card-text text-center">Stay in control of your investments with Angor</p>
22-
</div>
15+
</div>
16+
<div class="col-md-6 d-flex align-items-center justify-content-center position-relative">
17+
<!-- Loader for Card -->
18+
<div class="card-body card-loader loading text-center">
19+
<span class="main-logo mb-3">
20+
<Icon IconName="angor-logo" Width="72" Height="72" />
21+
</span>
22+
<h5 class="card-title text-center">Welcome to Angor</h5>
23+
<p class="card-text text-center">Stay in control of your investments with Angor</p>
2324
</div>
2425
</div>
2526
</div>
26-
27+
</div>
28+
2729

‎src/Angor/Client/Pages/Settings.razor

+11-10
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@
6969
<div class="modal-content">
7070
<div class="modal-header">
7171
<h5 class="modal-title" id="coinControlModalLabel">Change Network</h5>
72-
<button type="button" class="btn-close" data-bs-dismiss="modal" @onclick="() => showChangeNetworkModal = false" aria-label="Close"></button>
72+
<span type="button" data-bs-dismiss="modal" @onclick="() => showChangeNetworkModal = false" aria-label="Close">
73+
<Icon IconName="close-circle" />
74+
</span>
7375
</div>
7476
<div class="modal-body modal-body-scroll">
7577
<div class="alert alert-danger" role="alert">
@@ -115,8 +117,7 @@
115117
</div>
116118
<div class="modal-footer">
117119
<button class="btn btn-danger" @onclick="ChangeNetwork">Change Network</button>
118-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="() => showChangeNetworkModal = false">Close</button>
119-
</div>
120+
</div>
120121
</div>
121122
</div>
122123
</div>
@@ -179,8 +180,8 @@
179180
<form @onsubmit="AddIndexer">
180181
<div class="input-group mb-3">
181182
<input type="text" @bind-value="newIndexerLink" class="form-control" placeholder="Enter new indexer link" aria-label="Enter new indexer link" aria-describedby="button-addon">
182-
<button class="btn btn-primary" type="submit" id="button-addon">
183-
<Icon IconName="plus" Height="24" Width="24" Color="var(--bs-primary-btn-icon)"></Icon>
183+
<button class="btn btn-border" type="submit" id="button-addon">
184+
<Icon IconName="plus" Height="24" Width="24"></Icon>
184185
</button>
185186
</div>
186187
</form>
@@ -251,8 +252,8 @@
251252
<form @onsubmit="AddRelay">
252253
<div class="input-group mb-3">
253254
<input type="text" @bind-value="newRelayLink" class="form-control" placeholder="Enter new relay link" aria-label="Enter new relay link" aria-describedby="button-addon2">
254-
<button class="btn btn-primary" type="submit" id="button-addon2">
255-
<Icon IconName="plus" Height="24" Width="24" Color="var(--bs-primary-btn-icon)"></Icon>
255+
<button class="btn btn-border" type="submit" id="button-addon2">
256+
<Icon IconName="plus" Height="24" Width="24"></Icon>
256257
</button>
257258
</div>
258259
</form>
@@ -333,7 +334,9 @@
333334
<div class="modal-content">
334335
<div class="modal-header">
335336
<h5 class="modal-title" id="coinControlModalLabel">Wipe Storage</h5>
336-
<button type="button" class="btn-close" data-bs-dismiss="modal" @onclick="() => showWipeallModal = false" aria-label="Close"></button>
337+
<span type="button" data-bs-dismiss="modal" @onclick="() => showWipeallModal = false" aria-label="Close">
338+
<Icon IconName="close-circle" />
339+
</span>
337340
</div>
338341
<div class="modal-body modal-body-scroll">
339342
<div class="card">
@@ -363,8 +366,6 @@
363366
</div>
364367
<div class="modal-footer">
365368
<button class="btn btn-danger" @onclick="WipeAllData">Wipe Storage</button>
366-
367-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="() => showWipeallModal = false">Close</button>
368369
</div>
369370
</div>
370371
</div>

0 commit comments

Comments
 (0)