Skip to content

Commit dca9ef5

Browse files
dangershonydangershony
authored
Making the settings page fit the new ui (#633)
* making the settings page fit the new ui * defalut indexers when list is empty * Enhance refresh buttons with loading indicators in settings section * Remove DeleteWallet command and adjust BackupWallet logic in SettingsSectionViewModel
1 parent 474f363 commit dca9ef5

4 files changed

Lines changed: 282 additions & 101 deletions

File tree

‎src/Angor/Avalonia/AngorApp/UI/Sections/Settings/ISettingsSectionViewModel.cs‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,15 @@ internal interface ISettingsSectionViewModel : IDisposable
1919
ReactiveCommand<Unit, Unit> AddIndexer { get; }
2020
ReactiveCommand<Unit, Unit> AddRelay { get; }
2121
ReactiveCommand<Unit, Unit> RefreshIndexers { get; }
22-
ReactiveCommand<Unit, Unit> DeleteWallet { get; }
22+
ReactiveCommand<Unit, Unit> RefreshRelays { get; }
23+
ReactiveCommand<Unit, Unit> ChangeNetwork { get; }
24+
ReactiveCommand<Unit, Unit> WipeData { get; }
25+
ReactiveCommand<Unit, Unit> BackupWallet { get; }
2326
IEnhancedCommand ImportWallet { get; }
2427
bool IsBitcoinPreferred { get; set; }
2528
bool IsDebugMode { get; set; }
2629
bool IsTestnet { get; }
30+
bool HasWallet { get; }
2731
}
2832

2933
internal class SettingsSectionViewModelSample : ISettingsSectionViewModel
@@ -32,11 +36,14 @@ public SettingsSectionViewModelSample()
3236
{
3337
Indexers = new ObservableCollection<SettingsUrlViewModel>
3438
{
35-
new("https://indexer.angor.io", true, UrlStatus.Online, DateTime.UtcNow, _ => { }, _ => { })
39+
new("https://test.indexer.angor.io", false, UrlStatus.Offline, DateTime.UtcNow, _ => { }, _ => { }),
40+
new("https://signet.angor.online", true, UrlStatus.Online, DateTime.UtcNow, _ => { }, _ => { }),
41+
new("https://signet2.angor.online", false, UrlStatus.Offline, DateTime.UtcNow, _ => { }, _ => { })
3642
};
3743
Relays = new ObservableCollection<SettingsUrlViewModel>
3844
{
39-
new("wss://relay.angor.io", false, UrlStatus.Offline, DateTime.UtcNow, _ => { })
45+
new("wss://relay.angor.io", false, UrlStatus.Online, DateTime.UtcNow, _ => { }, name: "strfry default"),
46+
new("wss://relay2.angor.io", false, UrlStatus.Online, DateTime.UtcNow, _ => { }, name: "strfry2 default")
4047
};
4148
}
4249

@@ -49,10 +56,14 @@ public SettingsSectionViewModelSample()
4956
public ReactiveCommand<Unit, Unit> AddIndexer { get; } = ReactiveCommand.Create(() => { });
5057
public ReactiveCommand<Unit, Unit> AddRelay { get; } = ReactiveCommand.Create(() => { });
5158
public ReactiveCommand<Unit, Unit> RefreshIndexers { get; } = ReactiveCommand.Create(() => { });
52-
public ReactiveCommand<Unit, Unit> DeleteWallet { get; } = ReactiveCommand.Create(() => { });
59+
public ReactiveCommand<Unit, Unit> RefreshRelays { get; } = ReactiveCommand.Create(() => { });
60+
public ReactiveCommand<Unit, Unit> ChangeNetwork { get; } = ReactiveCommand.Create(() => { });
61+
public ReactiveCommand<Unit, Unit> WipeData { get; } = ReactiveCommand.Create(() => { });
62+
public ReactiveCommand<Unit, Unit> BackupWallet { get; } = ReactiveCommand.Create(() => { });
5363
public IEnhancedCommand ImportWallet { get; } = ReactiveCommand.Create(() => { }).Enhance();
5464
public bool IsBitcoinPreferred { get; set; } = true;
5565
public bool IsDebugMode { get; set; } = false;
5666
public bool IsTestnet { get; } = true;
67+
public bool HasWallet { get; } = true;
5768
public void Dispose() { }
5869
}

‎src/Angor/Avalonia/AngorApp/UI/Sections/Settings/SettingsSectionView.axaml‎

Lines changed: 131 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:controls="clr-namespace:AngorApp.UI.Shared.Controls"
66
xmlns:settings="clr-namespace:AngorApp.UI.Sections.Settings"
7+
xmlns:fa="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
8+
xmlns:i="https://github.com/projektanker/icons.avalonia"
79
mc:Ignorable="d" d:DesignWidth="1200"
810
x:Class="AngorApp.UI.Sections.Settings.SettingsSectionView"
911
x:DataType="settings:ISettingsSectionViewModel">
@@ -32,108 +34,188 @@
3234
<Style Selector="Card StackPanel">
3335
<Setter Property="Spacing" Value="10" />
3436
</Style>
37+
<!-- Status Badge Styles -->
38+
<Style Selector="Badge[Tag=Unknown]">
39+
<Setter Property="Color" Value="Gray" />
40+
</Style>
41+
<Style Selector="Badge[Tag=Online]">
42+
<Setter Property="Color" Value="{DynamicResource SuccessColor}" />
43+
</Style>
44+
<Style Selector="Badge[Tag=Offline]">
45+
<Setter Property="Color" Value="{DynamicResource ErrorColor}" />
46+
</Style>
47+
<Style Selector="Badge[Tag=NotReady]">
48+
<Setter Property="Color" Value="{DynamicResource WarningColor}" />
49+
</Style>
50+
51+
<!-- Link styling for URLs -->
52+
<Style Selector="SlimDataGrid TextBlock.Link">
53+
<Setter Property="Foreground" Value="{DynamicResource SuccessColor}" />
54+
</Style>
55+
56+
<!-- Trash button styling -->
57+
<Style Selector="EnhancedButton.Trash">
58+
<Setter Property="Foreground" Value="{DynamicResource ErrorColor}" />
59+
</Style>
3560

3661
</UserControl.Styles>
3762

3863
<controls:PageContainer>
3964
<ScrollViewer IconOptions.Size="{StaticResource IconSizeSmall}">
4065
<StackPanel Classes="BigGap" MaxWidth="700">
41-
<Card HeaderStartContent="{Icon fa-network-wired}" Header="Network">
42-
<StackPanel Classes="BigGap">
43-
<TextBlock Classes="Warning Wrap Center">WARNING NOTICE: Changing networks will wipe your wallet data.</TextBlock>
44-
<ComboBox HorizontalAlignment="Center" MinWidth="200" ItemsSource="{Binding Networks}" SelectedItem="{Binding Network}" />
45-
</StackPanel>
46-
</Card>
47-
<Card Header="Appearance">
48-
<ToggleSwitch IsChecked="{Binding IsBitcoinPreferred}" Content="Unit for amount entry" OnContent="BTC" OffContent="sats" />
49-
</Card>
50-
<Card Header="Debug Mode" IsVisible="{Binding IsTestnet}">
51-
<StackPanel Classes="BigGap">
52-
<TextBlock Classes="Wrap Center">Debug mode is only available on testnet networks. When enabled, additional debugging features will be available.</TextBlock>
53-
<ToggleSwitch IsChecked="{Binding IsDebugMode}" Content="Debug Mode" OnContent="Enabled" OffContent="Disabled" HorizontalAlignment="Center" />
66+
67+
<!-- Network Section -->
68+
<Card HeaderStartContent="{Icon fa-globe}" Header="Network">
69+
<Card.HeaderEndContent>
70+
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Change Network" Command="{Binding ChangeNetwork}" />
71+
</Card.HeaderEndContent>
72+
<StackPanel Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
73+
<TextBlock Text="Network Type:" VerticalAlignment="Center" />
74+
<TextBlock Text="{Binding Network}" FontWeight="Bold" VerticalAlignment="Center" />
5475
</StackPanel>
5576
</Card>
77+
78+
<!-- Indexer Section -->
5679
<Card HeaderStartContent="{Icon fa-server}" Header="Indexer">
80+
<Card.HeaderEndContent>
81+
<StackPanel Orientation="Horizontal" Spacing="10">
82+
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Add" Command="{Binding AddIndexer}" />
83+
<EnhancedButton Classes="Primary" Content="Refresh" Command="{Binding RefreshIndexers}">
84+
<EnhancedButton.Icon>
85+
<Panel>
86+
<i:Icon Value="fa-rotate-right" IsVisible="{Binding !RefreshIndexers.IsExecuting^}" />
87+
<fa:ProgressRing Width="16" Height="16" IsVisible="{Binding RefreshIndexers.IsExecuting^}" />
88+
</Panel>
89+
</EnhancedButton.Icon>
90+
</EnhancedButton>
91+
</StackPanel>
92+
</Card.HeaderEndContent>
5793
<StackPanel>
58-
<DockPanel Margin="0 0 20 0">
59-
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="10">
60-
<EnhancedButton Icon="{Icon fa-rotate-right}" Command="{Binding RefreshIndexers}" />
61-
<EnhancedButton Icon="{Icon fa-plus}" Command="{Binding AddIndexer}" />
62-
</StackPanel>
63-
<TextBox VerticalContentAlignment="Center" Watermark="Enter new indexer link" Text="{Binding NewIndexer}" />
64-
</DockPanel>
94+
<TextBox Watermark="Enter new indexer link" Text="{Binding NewIndexer}" Margin="0 0 0 10" />
6595
<SlimDataGrid ItemsSource="{Binding Indexers}">
6696
<SlimDataGrid.Columns>
67-
<Column Header="Primary" Width="Auto" Binding="{Binding}">
97+
<Column Header="Link" Width="*">
6898
<Column.CellTemplate>
6999
<DataTemplate>
70-
<RadioButton GroupName="Indexer" Command="{Binding SetPrimary}" IsChecked="{Binding IsPrimary, Mode=TwoWay}" />
100+
<TextBlock Classes="Link" Text="{Binding Url}" />
71101
</DataTemplate>
72102
</Column.CellTemplate>
73103
</Column>
74-
<Column Header="Address" Binding="{Binding Url}" />
75104
<Column Header="Status" Width="Auto">
76105
<Column.CellTemplate>
77106
<DataTemplate>
78-
<Badge Content="{Binding Status}" Tag="{Binding Status}">
79-
<Badge.Styles>
80-
<Style Selector="Badge[Tag=Unknown]">
81-
<Setter Property="Color" Value="Gray" />
82-
</Style>
83-
<Style Selector="Badge[Tag=Online]">
84-
<Setter Property="Color" Value="{DynamicResource SuccessColor}" />
85-
</Style>
86-
<Style Selector="Badge[Tag=Offline]">
87-
<Setter Property="Color" Value="{DynamicResource ErrorColor}" />
88-
</Style>
89-
<Style Selector="Badge[Tag=NotReady]">
90-
<Setter Property="Color" Value="{DynamicResource WarningColor}" />
91-
</Style>
92-
</Badge.Styles>
93-
</Badge>
107+
<Badge Content="{Binding Status}" Tag="{Binding Status}" />
108+
</DataTemplate>
109+
</Column.CellTemplate>
110+
</Column>
111+
<Column Header="Default" Width="Auto">
112+
<Column.CellTemplate>
113+
<DataTemplate>
114+
<CheckBox IsChecked="{Binding IsPrimary}" Command="{Binding SetPrimary}" IsEnabled="{Binding !IsPrimary}" />
94115
</DataTemplate>
95116
</Column.CellTemplate>
96117
</Column>
97118
<Column Width="Auto" Binding="{Binding}">
98119
<Column.CellTemplate>
99120
<DataTemplate>
100-
<EnhancedButton Icon="{Icon fa-trash}" Command="{Binding Remove}" />
121+
<EnhancedButton Classes="Trash" Icon="{Icon fa-trash}" Command="{Binding Remove}" />
101122
</DataTemplate>
102123
</Column.CellTemplate>
103124
</Column>
104125
</SlimDataGrid.Columns>
105126
</SlimDataGrid>
106127
</StackPanel>
107128
</Card>
129+
130+
<!-- Nostr Relays Section -->
108131
<Card HeaderStartContent="{Icon mdi-antenna}" Header="Nostr Relays">
132+
<Card.HeaderEndContent>
133+
<StackPanel Orientation="Horizontal" Spacing="10">
134+
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Add" Command="{Binding AddRelay}" />
135+
<EnhancedButton Classes="Primary" Content="Refresh" Command="{Binding RefreshRelays}">
136+
<EnhancedButton.Icon>
137+
<Panel>
138+
<i:Icon Value="fa-rotate-right" IsVisible="{Binding !RefreshRelays.IsExecuting^}" />
139+
<fa:ProgressRing Width="16" Height="16" IsVisible="{Binding RefreshRelays.IsExecuting^}" />
140+
</Panel>
141+
</EnhancedButton.Icon>
142+
</EnhancedButton>
143+
</StackPanel>
144+
</Card.HeaderEndContent>
109145
<StackPanel>
110-
<DockPanel Margin="0 0 20 0">
111-
<EnhancedButton Icon="{Icon fa-plus}" Command="{Binding AddRelay}" />
112-
<TextBox Watermark="Enter new relay link" Text="{Binding NewRelay}" />
113-
</DockPanel>
146+
<TextBox Watermark="Enter new relay link" Text="{Binding NewRelay}" Margin="0 0 0 10" />
114147
<SlimDataGrid ItemsSource="{Binding Relays}">
115148
<SlimDataGrid.Columns>
116-
<Column Header="Address" Binding="{Binding Url}" />
149+
<Column Header="Link" Width="*">
150+
<Column.CellTemplate>
151+
<DataTemplate>
152+
<TextBlock Classes="Link" Text="{Binding Url}" />
153+
</DataTemplate>
154+
</Column.CellTemplate>
155+
</Column>
156+
<Column Header="Name" Binding="{Binding Name}" Width="Auto" />
157+
<Column Header="Status" Width="Auto">
158+
<Column.CellTemplate>
159+
<DataTemplate>
160+
<Badge Content="{Binding Status}" Tag="{Binding Status}" />
161+
</DataTemplate>
162+
</Column.CellTemplate>
163+
</Column>
117164
<Column Width="Auto" Binding="{Binding}">
118165
<Column.CellTemplate>
119166
<DataTemplate>
120-
<EnhancedButton Icon="{Icon fa-trash}" Command="{Binding Remove}" />
167+
<EnhancedButton Classes="Trash" Icon="{Icon fa-trash}" Command="{Binding Remove}" />
121168
</DataTemplate>
122169
</Column.CellTemplate>
123170
</Column>
124171
</SlimDataGrid.Columns>
125172
</SlimDataGrid>
126173
</StackPanel>
127174
</Card>
128-
<Card HeaderStartContent="{Icon fa-wallet}" Header="Wallet">
175+
176+
<!-- Currency Display Section -->
177+
<Card HeaderStartContent="{Icon fa-bitcoin}" Header="Currency Display">
129178
<StackPanel Classes="BigGap">
130-
<TextBlock Classes="Wrap Center">Import an existing wallet using your recovery words.</TextBlock>
179+
<StackPanel Orientation="Horizontal" Spacing="15">
180+
<TextBlock Text="Select Currency:" VerticalAlignment="Center" />
181+
<ToggleSwitch IsChecked="{Binding IsBitcoinPreferred}" OnContent="Bitcoin (BTC)" OffContent="Satoshis (sats)" />
182+
</StackPanel>
183+
<TextBlock Classes="Muted Wrap" Text="Bitcoin-only application - currency display is fixed to BTC or sats." />
184+
</StackPanel>
185+
</Card>
186+
187+
<!-- Debug Mode Section (Testnet only) -->
188+
<Card Header="Debug Mode" IsVisible="{Binding IsTestnet}">
189+
<StackPanel Classes="BigGap">
190+
<TextBlock Classes="Wrap Muted">Debug mode is only available on testnet networks. When enabled, additional debugging features will be available.</TextBlock>
191+
<ToggleSwitch IsChecked="{Binding IsDebugMode}" Content="Debug Mode" OnContent="Enabled" OffContent="Disabled" HorizontalAlignment="Left" />
192+
</StackPanel>
193+
</Card>
194+
195+
<!-- Backup Account Section -->
196+
<Card HeaderStartContent="{Icon fa-download}" Header="Backup Account" IsVisible="{Binding HasWallet}">
197+
<StackPanel Classes="BigGap">
198+
<TextBlock Classes="Wrap Muted">Download a backup of your account (seed) so you never lose access.</TextBlock>
199+
<EnhancedButton HorizontalAlignment="Left" Icon="{Icon fa-download}" Content="Download Backup" Command="{Binding BackupWallet}" />
200+
</StackPanel>
201+
</Card>
202+
203+
<!-- Wallet Section -->
204+
<Card HeaderStartContent="{Icon fa-wallet}" Header="Wallet" IsVisible="{Binding !HasWallet}">
205+
<StackPanel Classes="BigGap">
206+
<TextBlock Classes="Wrap Muted">Import an existing wallet using your recovery words.</TextBlock>
131207
<EnhancedButton HorizontalAlignment="Right" Command="{Binding ImportWallet}" Content="Import wallet" />
132208
</StackPanel>
133209
</Card>
210+
211+
<!-- Danger Zone Section -->
134212
<Card BorderBrush="{StaticResource DangerColor}" BorderThickness="3" HeaderStartContent="{Icon mdi alert-outline}" Header="Danger Zone">
135-
<EnhancedButton HorizontalAlignment="Right" Classes="Danger" Content="Delete wallet" Command="{Binding DeleteWallet}" />
213+
<Card.HeaderEndContent>
214+
<TextBlock Classes="Muted" Text="Irreversible actions" VerticalAlignment="Center" />
215+
</Card.HeaderEndContent>
216+
<EnhancedButton HorizontalAlignment="Left" Classes="Danger" Icon="{Icon fa-trash}" Content="Wipe Data" Command="{Binding WipeData}" />
136217
</Card>
218+
137219
</StackPanel>
138220
</ScrollViewer>
139221
</controls:PageContainer>

0 commit comments

Comments
 (0)