Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Home section #243

Merged
merged 6 commits into from
Jan 17, 2025
Merged

Improve Home section #243

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
809697a
Improve Home Section
SuperJMN Jan 13, 2025
93daa29
Buttonize sections
SuperJMN Jan 13, 2025
17576b4
Improve underlying design and classes
SuperJMN Jan 13, 2025
4d84115
Improve text
SuperJMN Jan 13, 2025
1baae6c
Merge branch 'main' into improve-home
SuperJMN Jan 16, 2025
5c57e96
Fix dependency versions
SuperJMN Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/Angor/Avalonia/AngorApp/CompositionRoot.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

namespace AngorApp;

public class CompositionRoot
public static class CompositionRoot
{
public static MainViewModel CreateMainViewModel(Control control)
{
Expand All @@ -30,20 +30,24 @@ public static MainViewModel CreateMainViewModel(Control control)

var walletStoreDesign = new WalletProviderDesign();
var walletFactory = new WalletFactory(new WalletBuilderDesign(), uiServices);

MainViewModel mainViewModel = null!;

IEnumerable<SectionBase> sections =
[
new Section("Home", new HomeSectionViewModel(), "svg:/Assets/angor-icon.svg"),
new Section("Home", new HomeSectionViewModel(walletStoreDesign, uiServices, () => mainViewModel), "svg:/Assets/angor-icon.svg"),
new Separator(),
new Section("Wallet", new WalletSectionViewModel(walletFactory, walletStoreDesign, uiServices), "fa-wallet"),
new Section("Browse", new NavigationViewModel(navigator => new BrowseSectionViewModel(walletStoreDesign, navigator, uiServices)), "fa-magnifying-glass"),
new Section("Portfolio", new PortfolioSectionViewModel(), "fa-hand-holding-dollar"),
new Section("Founder", new FounderSectionViewModel(), "fa-money-bills"),
new Separator(),
new Section("Settings", null, "fa-gear"),
new CommandSection("Angor Hub", ReactiveCommand.CreateFromTask(() => uiServices.LauncherService.LaunchUri(new Uri("https://www.angor.io"))), "fa-magnifying-glass") { IsPrimary = false }
new CommandSection("Angor Hub", ReactiveCommand.CreateFromTask(() => uiServices.LauncherService.LaunchUri(Constants.AngorHubUri)), "fa-magnifying-glass") { IsPrimary = false }
];

return new MainViewModel(sections, uiServices);
mainViewModel = new MainViewModel(sections, uiServices);

return mainViewModel;
}
}
6 changes: 6 additions & 0 deletions src/Angor/Avalonia/AngorApp/Constants.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
namespace AngorApp;

public static class Constants
{
public static readonly Uri AngorHubUri = new("https://hub.angor.io");
}
52 changes: 30 additions & 22 deletions src/Angor/Avalonia/AngorApp/Controls/Pane.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,8 @@
xmlns:c="clr-namespace:AngorApp.Controls"
xmlns:avalonia="https://github.com/projektanker/icons.avalonia">

<Style Selector="c|Pane /template/ TextBlock#PART_Title">
<Setter Property="FontSize" Value="20" />
</Style>
<Style Selector="c|Pane /template/ TextBlock#PART_Subtitle">
<Setter Property="FontSize" Value="16" />
</Style>

<Styles.Resources>

<SolidColorBrush x:Key="PaneBackground" Color="{StaticResource Level2}" />
<SolidColorBrush x:Key="ItemPaneBackground" Color="{StaticResource Level2}" />

Expand Down Expand Up @@ -55,25 +49,19 @@
<TextBlock ToolTip.Tip="{Binding $self.Text}" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" x:Name="PART_Subtitle" Text="{TemplateBinding Subtitle}" IsVisible="{Binding !!$self.Text}" />
</StackPanel>
</DockPanel>

<!-- <c:SectionItem Background="Transparent" x:Name="PART_TitleSection" Padding="0 0 0 10" -->
<!-- IsVisible="{TemplateBinding IsTitleVisible}" BorderThickness="0" DockPanel.Dock="Top" -->
<!-- LeftContent="{TemplateBinding TitleIcon}" -->
<!-- RightContent="{TemplateBinding TitleRightContent}"> -->
<!-- <c:SectionItem.Content> -->
<!-- <StackPanel> -->
<!-- <TextBlock ToolTip.Tip="{Binding $self.Text}" TextTrimming="CharacterEllipsis" x:Name="PART_Title" Text="{TemplateBinding Title}" /> -->
<!-- <TextBlock ToolTip.Tip="{Binding $self.Text}" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" x:Name="PART_Subtitle" Text="{TemplateBinding Subtitle}" IsVisible="{Binding !!$self.Text}" /> -->
<!-- </StackPanel> -->
<!-- </c:SectionItem.Content> -->
<!-- </c:SectionItem> -->

<ContentPresenter Content="{TemplateBinding Content}" />
<ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" />
</DockPanel>
</DockPanel>
</Border>
</ControlTemplate>
</Setter>

<Style Selector="^ /template/ TextBlock#PART_Title">
<Setter Property="FontSize" Value="{StaticResource FontSizeBig}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Subtitle">
<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}" />
</Style>
</ControlTheme>

<ControlTheme x:Key="Borderless" TargetType="c:Pane" BasedOn="{StaticResource {x:Type c:Pane}}">
Expand All @@ -82,10 +70,24 @@
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Effect" Value="{x:Null}" />
</ControlTheme>

<ControlTheme x:Key="Card" TargetType="c:Pane" BasedOn="{StaticResource {x:Type c:Pane}}">
<Setter Property="Padding" Value="30" />
<Style Selector="^ /template/ TextBlock#PART_Title">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0 10 0 0" />
</Style>
</ControlTheme>

</Styles.Resources>

<Design.PreviewWith>
<StackPanel Orientation="Horizontal" Width="1000">
<StackPanel Orientation="Horizontal">

<c:Pane Margin="20" Title="Title" VerticalAlignment="Top">
<c:Pane.Content>
Expand Down Expand Up @@ -155,6 +157,12 @@
Content
</c:Pane>

<c:Pane Theme="{StaticResource Card}" VerticalAlignment="Top" Title="Setup Wallet" IsTitleVisible="True" Width="300" Height="200">
<TextBlock TextWrapping="Wrap">
Create a new <InlineUIContainer><HyperlinkButton Padding="0" Content="wallet"></HyperlinkButton></InlineUIContainer> or recover your existing one to get started with Angor
</TextBlock>
</c:Pane>

</StackPanel>
</Design.PreviewWith>

Expand Down
78 changes: 63 additions & 15 deletions src/Angor/Avalonia/AngorApp/Sections/Home/HomeSectionView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,74 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:AngorApp.Controls"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AngorApp.Sections.Home.HomeSectionView">
xmlns:c="clr-namespace:AngorApp.Controls"
xmlns:home="clr-namespace:AngorApp.Sections.Home"
mc:Ignorable="d" d:DesignWidth="900" d:DesignHeight="450"
x:Class="AngorApp.Sections.Home.HomeSectionView" x:DataType="home:IHomeSectionViewModel">

<Design.DataContext>
<home:HomeSectionViewModelDesign IsWalletSetup="False" />
</Design.DataContext>

<UserControl.Styles>
<Style Selector="TextBlock">
<Setter Property="FontSize" Value="16" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style Selector="Svg">
<Setter Property="Height" Value="100" />
</Style>

<Style Selector="Button">
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="TextBlock.FontWeight" Value="Normal" />
</Style>

</UserControl.Styles>

<controls:Pane Margin="50">
<StackPanel Spacing="10" VerticalAlignment="Center">
<Svg Path="/Assets/angor-icon.svg" />
<TextBlock FontWeight="Bold">Welcome to Angor</TextBlock>
<TextBlock>A decentralized crowdfunding protocol built on Bitcoin and Nostr</TextBlock>
</StackPanel>
</controls:Pane>
<StackPanel Margin="50" Spacing="40">
<c:Pane>
<StackPanel Spacing="10" VerticalAlignment="Center">
<Svg Path="/Assets/angor-icon.svg" />
<TextBlock Foreground="{StaticResource Level4}" TextAlignment="Center" FontSize="{StaticResource FontSizeLarge}" FontWeight="Bold">Welcome to Angor</TextBlock>
<TextBlock Foreground="{StaticResource Level4}" TextAlignment="Center">A P2P funding protocol built on Bitcoin and Nostr</TextBlock>
</StackPanel>
</c:Pane>
<UniformGrid Margin="-20">
<Button Command="{Binding GoToWalletSection}" Margin="20">
<c:Pane IsVisible="{Binding !IsWalletSetup}" Theme="{StaticResource Card}" Title="Setup Wallet" IsTitleVisible="True">
<TextBlock TextWrapping="Wrap">
<Bold>Create</Bold> or <Bold>recover</Bold> your wallet to get started with Angor
</TextBlock>
</c:Pane>
</Button>
<Button Margin="20" Command="{Binding OpenHub}">
<c:Pane Theme="{StaticResource Card}" Title="Discover Projects" IsTitleVisible="True">
<TextBlock TextWrapping="Wrap">Browse through innovative projects on <Bold>Angor Hub</Bold> and find your next investment</TextBlock>
</c:Pane>
</Button>
<Button Margin="20" IsHitTestVisible="False">
<c:Pane Theme="{StaticResource Card}" Title="Launch or Invest" IsTitleVisible="True">
<TextBlock TextWrapping="Wrap">Start your fundraising journey or invest in promising projects</TextBlock>
</c:Pane>
</Button>
<Interaction.Behaviors>
<AdaptiveBehavior>
<AdaptiveClassSetter MinWidth="0" MaxWidth="600" ClassName="Vertical" />
<AdaptiveClassSetter MinWidth="600" MaxWidth="Infinity" ClassName="Horizontal" />
</AdaptiveBehavior>
</Interaction.Behaviors>
<UniformGrid.Styles>
<Style Selector="UniformGrid.Horizontal">
<Setter Property="Rows" Value="1" />
</Style>
<Style Selector="UniformGrid.Vertical">
<Setter Property="Columns" Value="1" />
</Style>
</UniformGrid.Styles>
</UniformGrid>
</StackPanel>

</UserControl>
24 changes: 23 additions & 1 deletion src/Angor/Avalonia/AngorApp/Sections/Home/HomeSectionViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
using System.Windows.Input;
using AngorApp.Sections.Shell;
using AngorApp.Sections.Wallet.NoWallet;
using AngorApp.Services;

namespace AngorApp.Sections.Home;

public class HomeSectionViewModel : ReactiveObject;
public class HomeSectionViewModel : ReactiveObject, IHomeSectionViewModel
{
private readonly IWalletProvider provider;

public HomeSectionViewModel(IWalletProvider provider, UIServices uiServices, Func<IMainViewModel> getMainViewModel)
{
this.provider = provider;
provider.GetWallet();
GoToWalletSection = ReactiveCommand.Create(() => getMainViewModel().GoToSection("Wallet"));
OpenHub = ReactiveCommand.CreateFromTask(() => uiServices.LauncherService.LaunchUri(Constants.AngorHubUri));
//GoToFounderSection = ReactiveCommand.Create(() => getMainViewModel().GoToSection("Founder"));
}

public bool IsWalletSetup => provider.GetWallet().HasValue;
public ICommand GoToWalletSection { get; }
public ICommand GoToFounderSection { get; }
public ICommand OpenHub { get; }
}
11 changes: 11 additions & 0 deletions src/Angor/Avalonia/AngorApp/Sections/Home/HomeSectionViewModelDesign.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using System.Windows.Input;

namespace AngorApp.Sections.Home;

public class HomeSectionViewModelDesign : IHomeSectionViewModel
{
public bool IsWalletSetup { get; set; }
public ICommand GoToWalletSection { get; }
public ICommand GoToFounderSection { get; }
public ICommand OpenHub { get; }
}
11 changes: 11 additions & 0 deletions src/Angor/Avalonia/AngorApp/Sections/Home/IHomeSectionViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using System.Windows.Input;

namespace AngorApp.Sections.Home;

public interface IHomeSectionViewModel
{
public bool IsWalletSetup { get; }
public ICommand GoToWalletSection { get; }
public ICommand GoToFounderSection { get; }
public ICommand OpenHub { get; }
}
1 change: 1 addition & 0 deletions src/Angor/Avalonia/AngorApp/Sections/Shell/IMainViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ public interface IMainViewModel
ReactiveCommand<Unit, Unit> OpenHub { get; }
IEnumerable<SectionBase> Sections { get; }
Section SelectedSection { get; set; }
void GoToSection(string sectionName);
}
3 changes: 1 addition & 2 deletions src/Angor/Avalonia/AngorApp/Sections/Shell/MainView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,11 @@
<DockPanel Margin="10">
<shell:Sidebar Margin="10 20 10 20" />
<shell:Network DockPanel.Dock="Top" Margin="10 20 10 10" />
<!-- <ListBox DisplayMemberBinding="{Binding Name}" ItemsSource="{Binding Sections}" SelectedItem="{Binding SelectedSection}" /> -->
<ScrollViewer Margin="0 0 0 10">
<Interaction.Behaviors>
<behaviors:NestedScrollViewerBehavior />
</Interaction.Behaviors>
<ContentControl Margin="10 10 10 10" Content="{Binding SelectedSection.ViewModel}" ClipToBounds="False" />
<ContentControl MinWidth="300" MinHeight="300" Margin="10 10 10 10" Content="{Binding SelectedSection.ViewModel}" ClipToBounds="False" />
</ScrollViewer>
</DockPanel>
</UserControl>
9 changes: 7 additions & 2 deletions src/Angor/Avalonia/AngorApp/Sections/Shell/MainViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,15 @@ public MainViewModel(IEnumerable<SectionBase> sections, UIServices uiServices)
{
Sections = sections;
SelectedSection = Sections.OfType<Section>().Skip(0).First();
OpenHub = ReactiveCommand.CreateFromTask(() => uiServices.LauncherService.LaunchUri(new Uri("https://www.angor.io")));
OpenHub = ReactiveCommand.CreateFromTask(() => uiServices.LauncherService.LaunchUri(Constants.AngorHubUri));
}

public ReactiveCommand<Unit,Unit> OpenHub { get; set; }
public ReactiveCommand<Unit,Unit> OpenHub { get; }

public IEnumerable<SectionBase> Sections { get; }

public void GoToSection(string sectionName)
{
SelectedSection = Sections.OfType<Section>().First(x => x.Name == sectionName);
}
}
5 changes: 4 additions & 1 deletion src/Angor/Avalonia/AngorApp/Sections/Shell/MainViewModelDesign.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ public MainViewModelDesign()
{
Sections =
[
new Section("Home", new HomeSectionViewModel(), "svg:/Assets/angor-icon.svg"),
new Section("Home", new HomeSectionViewModelDesign(), "svg:/Assets/angor-icon.svg"),
new Separator(),
new Section("Wallet", null, "fa-wallet"),
new Section("Browse", null, "fa-magnifying-glass"),
Expand All @@ -28,4 +28,7 @@ public MainViewModelDesign()
public ReactiveCommand<Unit, Unit> OpenHub { get; }
public IEnumerable<SectionBase> Sections { get; }
public Section SelectedSection { get; set; }
public void GoToSection(string sectionName)
{
}
}
2 changes: 1 addition & 1 deletion src/Angor/Avalonia/AngorApp/Sections/Wallet/Operate/Receive.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</Design.DataContext>

<StackPanel>
<TextBlock Text="Use this address receive funds in this wallet" TextAlignment="Center" />
<TextBlock Text="Use this address to receive funds in this wallet:" TextAlignment="Center" />
<c:SectionItem Theme="{StaticResource Basic}" Content="{Binding Wallet.ReceiveAddress}">
<c:SectionItem.RightContent>
<Button CommandParameter="{Binding Wallet.ReceiveAddress}" Command="{Binding Source={x:Static s:Commands.Instance}, Path=CopyText}">
Expand Down
11 changes: 8 additions & 3 deletions src/Angor/Avalonia/AngorApp/Styles.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
<Color x:Key="Level4">#1F5D6A</Color>
<Color x:Key="Level5">#022229</Color>

<x:Double x:Key="FontSizeLarge">24</x:Double>
<x:Double x:Key="FontSizeBig">20</x:Double>
<x:Double x:Key="FontSizeNormal">16</x:Double>
<x:Double x:Key="FontSizeSmall">12</x:Double>

<SolidColorBrush x:Key="SystemRegionBrush" Color="{StaticResource Level3}" />
<SolidColorBrush x:Key="ButtonBackground" Color="{StaticResource Level3}" />
<SolidColorBrush x:Key="FlyoutPresenterBackground" Color="{StaticResource Level2}" />
Expand Down Expand Up @@ -67,15 +72,15 @@
</Styles.Resources>

<Style Selector="TextBlock.SizeSmall">
<Setter Property="FontSize" Value="12" />
<Setter Property="FontSize" Value="{StaticResource FontSizeSmall}" />
</Style>

<Style Selector="TextBlock.SizeNormal">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}" />
</Style>

<Style Selector="TextBlock.SizeBig">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBig}" />
</Style>

<Style Selector="avalonia|Icon">
Expand Down
4 changes: 2 additions & 2 deletions src/Angor/Avalonia/Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
<PackageVersion Include="ReactiveUI.SourceGenerators" Version="2.0.17" />
<PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.0.1.1" />
<PackageVersion Include="Zafiro" Version="14.0.7" />
<PackageVersion Include="Zafiro.Avalonia" Version="20.0.1" />
<PackageVersion Include="Zafiro.Avalonia" Version="20.0.7" />
<PackageVersion Include="CSharpFunctionalExtensions" Version="3.4.0" />
<PackageVersion Include="Zafiro.Avalonia.Dialogs" Version="20.0.1" />
<PackageVersion Include="Zafiro.Avalonia.Dialogs" Version="20.0.7" />
</ItemGroup>
</Project>
Loading