From 641a19763e74a76bd2797afd6a242d267656be8d Mon Sep 17 00:00:00 2001
From: database64128 <free122448@hotmail.com>
Date: Tue, 5 Jan 2021 02:51:51 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=8C=20UI:=20Routing=20and=20Settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewModels/MainWindowViewModel.cs         |  14 ++
 Shadowsocks.WPF/Views/DashboardView.xaml      |  31 ++--
 Shadowsocks.WPF/Views/MainWindow.xaml.cs      |  19 ++-
 Shadowsocks.WPF/Views/RoutingView.xaml        | 102 ++++++++++--
 Shadowsocks.WPF/Views/ServersView.xaml        |  31 ++--
 Shadowsocks.WPF/Views/SettingsView.xaml       | 151 ++++++++++++++++--
 6 files changed, 306 insertions(+), 42 deletions(-)

diff --git a/Shadowsocks.WPF/ViewModels/MainWindowViewModel.cs b/Shadowsocks.WPF/ViewModels/MainWindowViewModel.cs
index c024f127..87d22bfc 100644
--- a/Shadowsocks.WPF/ViewModels/MainWindowViewModel.cs
+++ b/Shadowsocks.WPF/ViewModels/MainWindowViewModel.cs
@@ -1,4 +1,6 @@
 using ReactiveUI;
+using ReactiveUI.Fody.Helpers;
+using Shadowsocks.WPF.Views;
 
 namespace Shadowsocks.WPF.ViewModels
 {
@@ -6,6 +8,18 @@ namespace Shadowsocks.WPF.ViewModels
     {
         public MainWindowViewModel()
         {
+            GetDashboardView = new();
+            GetServersView = new();
+            GetRoutingView = new();
+            GetSettingsView = new();
         }
+
+        public DashboardView GetDashboardView { get; }
+
+        public ServersView GetServersView { get; }
+
+        public RoutingView GetRoutingView { get; }
+
+        public SettingsView GetSettingsView { get; }
     }
 }
diff --git a/Shadowsocks.WPF/Views/DashboardView.xaml b/Shadowsocks.WPF/Views/DashboardView.xaml
index 4614e373..84d0f9cd 100644
--- a/Shadowsocks.WPF/Views/DashboardView.xaml
+++ b/Shadowsocks.WPF/Views/DashboardView.xaml
@@ -8,20 +8,31 @@
     xmlns:local="clr-namespace:Shadowsocks.WPF.Views"
     xmlns:vms="clr-namespace:Shadowsocks.WPF.ViewModels"
     xmlns:reactiveui="http://reactiveui.net"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:lex="http://wpflocalizeextension.codeplex.com"
     lex:LocalizeDictionary.DesignCulture="en"
     lex:ResxLocalizationProvider.DefaultAssembly="Shadowsocks"
     lex:ResxLocalizationProvider.DefaultDictionary="Strings"
     mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
-    <Grid Margin="8">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-        </Grid.ColumnDefinitions>
-    </Grid>
+    <ScrollViewer materialDesign:ScrollViewerAssist.IsAutoHideEnabled="True"
+                  HorizontalScrollBarVisibility="Auto"
+                  VerticalScrollBarVisibility="Auto">
+        <Grid Margin="16">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <TextBlock Grid.Row="0"
+                       Grid.Column="0"
+                       Margin="8 0 8 8"
+                       FontSize="28">
+                Dashboard
+            </TextBlock>
+        </Grid>
+    </ScrollViewer>
 </reactiveui:ReactiveUserControl>
diff --git a/Shadowsocks.WPF/Views/MainWindow.xaml.cs b/Shadowsocks.WPF/Views/MainWindow.xaml.cs
index 25115d9a..98434331 100644
--- a/Shadowsocks.WPF/Views/MainWindow.xaml.cs
+++ b/Shadowsocks.WPF/Views/MainWindow.xaml.cs
@@ -1,6 +1,6 @@
 using ReactiveUI;
-
 using Shadowsocks.WPF.ViewModels;
+using System.Reactive.Disposables;
 
 namespace Shadowsocks.WPF.Views
 {
@@ -15,7 +15,22 @@ namespace Shadowsocks.WPF.Views
             ViewModel = new MainWindowViewModel();
             this.WhenActivated(disposables =>
             {
-
+                this.OneWayBind(ViewModel,
+                    viewModel => viewModel.GetDashboardView,
+                    view => view.dashboardTabItem.Content)
+                    .DisposeWith(disposables);
+                this.OneWayBind(ViewModel,
+                    viewModel => viewModel.GetServersView,
+                    view => view.serversTabItem.Content)
+                    .DisposeWith(disposables);
+                this.OneWayBind(ViewModel,
+                    viewModel => viewModel.GetRoutingView,
+                    view => view.routingTabItem.Content)
+                    .DisposeWith(disposables);
+                this.OneWayBind(ViewModel,
+                    viewModel => viewModel.GetSettingsView,
+                    view => view.settingsTabItem.Content)
+                    .DisposeWith(disposables);
             });
         }
     }
diff --git a/Shadowsocks.WPF/Views/RoutingView.xaml b/Shadowsocks.WPF/Views/RoutingView.xaml
index 01766672..3bcdb00c 100644
--- a/Shadowsocks.WPF/Views/RoutingView.xaml
+++ b/Shadowsocks.WPF/Views/RoutingView.xaml
@@ -8,20 +8,102 @@
     xmlns:local="clr-namespace:Shadowsocks.WPF.Views"
     xmlns:vms="clr-namespace:Shadowsocks.WPF.ViewModels"
     xmlns:reactiveui="http://reactiveui.net"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:lex="http://wpflocalizeextension.codeplex.com"
     lex:LocalizeDictionary.DesignCulture="en"
     lex:ResxLocalizationProvider.DefaultAssembly="Shadowsocks"
     lex:ResxLocalizationProvider.DefaultDictionary="Strings"
     mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
-    <Grid Margin="8">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-        </Grid.ColumnDefinitions>
-    </Grid>
+    <ScrollViewer materialDesign:ScrollViewerAssist.IsAutoHideEnabled="True"
+                  HorizontalScrollBarVisibility="Auto"
+                  VerticalScrollBarVisibility="Auto">
+        <Grid Margin="16">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <TextBlock Grid.Row="0"
+                       Grid.Column="0"
+                       Margin="8 0 8 8"
+                       FontSize="28">
+                Routing
+            </TextBlock>
+            
+            <TextBlock Grid.Row="1"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
+                       FontWeight="Medium"
+                       VerticalAlignment="Center">
+                Preset
+            </TextBlock>
+            <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
+                <ListBox Margin="8"
+                         x:Name="presetListBox"
+                         Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineListBox}"/>
+                <Button x:Name="addPresetButton"
+                        Style="{StaticResource MaterialDesignIconForegroundButton}"
+                        ToolTip="Add a preset">
+                    <materialDesign:PackIcon Kind="Plus"/>
+                </Button>
+                <Button x:Name="deletePresetButton"
+                        Style="{StaticResource MaterialDesignIconForegroundButton}"
+                        ToolTip="Delete the preset">
+                    <materialDesign:PackIcon Kind="Minus"/>
+                </Button>
+                <Button x:Name="editPresetButton"
+                        Style="{StaticResource MaterialDesignIconForegroundButton}"
+                        ToolTip="Edit the preset">
+                    <materialDesign:PackIcon Kind="Edit"/>
+                </Button>
+            </StackPanel>
+            
+            <TextBlock Grid.Row="2"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center">
+                Domain strategy
+            </TextBlock>
+            <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal">
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipAccentOutlineRadioButton}"
+                             GroupName="DomainStrategy"
+                             FontFamily="pack://application:,,,/Resources/RobotoMono/#Roboto Mono">
+                    AsIs
+                </RadioButton>
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipAccentOutlineRadioButton}"
+                             GroupName="DomainStrategy"
+                             FontFamily="pack://application:,,,/Resources/RobotoMono/#Roboto Mono">
+                    IPIfNonMatch
+                </RadioButton>
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipAccentOutlineRadioButton}"
+                             GroupName="DomainStrategy"
+                             FontFamily="pack://application:,,,/Resources/RobotoMono/#Roboto Mono">
+                    IPOnDemand
+                </RadioButton>
+            </StackPanel>
+            
+            <TextBlock Grid.Row="3"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center">
+                Rules
+            </TextBlock>
+            <ListBox Grid.Row="4"
+                     Grid.Column="0"
+                     Grid.ColumnSpan="2"
+                     Margin="8"
+                     x:Name="rulesListBox"
+                     Style="{StaticResource MaterialDesignCardsListBox}"/>
+        </Grid>
+    </ScrollViewer>
 </reactiveui:ReactiveUserControl>
diff --git a/Shadowsocks.WPF/Views/ServersView.xaml b/Shadowsocks.WPF/Views/ServersView.xaml
index d2cbd701..46f3caa3 100644
--- a/Shadowsocks.WPF/Views/ServersView.xaml
+++ b/Shadowsocks.WPF/Views/ServersView.xaml
@@ -8,20 +8,31 @@
     xmlns:local="clr-namespace:Shadowsocks.WPF.Views"
     xmlns:vms="clr-namespace:Shadowsocks.WPF.ViewModels"
     xmlns:reactiveui="http://reactiveui.net"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:lex="http://wpflocalizeextension.codeplex.com"
     lex:LocalizeDictionary.DesignCulture="en"
     lex:ResxLocalizationProvider.DefaultAssembly="Shadowsocks"
     lex:ResxLocalizationProvider.DefaultDictionary="Strings"
     mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
-    <Grid Margin="8">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-        </Grid.ColumnDefinitions>
-    </Grid>
+    <ScrollViewer materialDesign:ScrollViewerAssist.IsAutoHideEnabled="True"
+                  HorizontalScrollBarVisibility="Auto"
+                  VerticalScrollBarVisibility="Auto">
+        <Grid Margin="16">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <TextBlock Grid.Row="0"
+                       Grid.Column="0"
+                       Margin="8 0 8 8"
+                       FontSize="28">
+                Servers
+            </TextBlock>
+        </Grid>
+    </ScrollViewer>
 </reactiveui:ReactiveUserControl>
diff --git a/Shadowsocks.WPF/Views/SettingsView.xaml b/Shadowsocks.WPF/Views/SettingsView.xaml
index 471ef2c7..6a2a6fe3 100644
--- a/Shadowsocks.WPF/Views/SettingsView.xaml
+++ b/Shadowsocks.WPF/Views/SettingsView.xaml
@@ -8,20 +8,151 @@
     xmlns:local="clr-namespace:Shadowsocks.WPF.Views"
     xmlns:vms="clr-namespace:Shadowsocks.WPF.ViewModels"
     xmlns:reactiveui="http://reactiveui.net"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:lex="http://wpflocalizeextension.codeplex.com"
     lex:LocalizeDictionary.DesignCulture="en"
     lex:ResxLocalizationProvider.DefaultAssembly="Shadowsocks"
     lex:ResxLocalizationProvider.DefaultDictionary="Strings"
     mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
-    <Grid Margin="8">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-        </Grid.ColumnDefinitions>
-    </Grid>
+    <ScrollViewer materialDesign:ScrollViewerAssist.IsAutoHideEnabled="True"
+                  HorizontalScrollBarVisibility="Auto"
+                  VerticalScrollBarVisibility="Auto">
+        <Grid Margin="16">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            
+            <TextBlock Grid.Row="0"
+                       Grid.Column="0"
+                       Margin="8 0 8 8"
+                       FontSize="28">
+                Settings
+            </TextBlock>
+            
+            <TextBlock Grid.Row="1"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignHeadline6TextBlock}">
+                UI
+            </TextBlock>
+            
+            <TextBlock Grid.Row="2"
+                       Grid.Column="0"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center"
+                       Margin="8">
+                Color Mode
+            </TextBlock>
+            <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal">
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
+                             GroupName="ColorMode">
+                    System
+                </RadioButton>
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
+                             GroupName="ColorMode">
+                    Light
+                </RadioButton>
+                <RadioButton Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
+                             GroupName="ColorMode">
+                    Dark
+                </RadioButton>
+            </StackPanel>
+            
+            <TextBlock Grid.Row="3"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignHeadline6TextBlock}">
+                Backend
+            </TextBlock>
+            <TextBlock Grid.Row="4"
+                       Grid.Column="0"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center"
+                       Margin="8">
+                Start on boot
+            </TextBlock>
+            <ToggleButton Grid.Row="4"
+                          Grid.Column="1"
+                          x:Name="startOnBootToggleButton"
+                          Margin="8"
+                          HorizontalAlignment="Left"/>
+            
+            <TextBlock Grid.Row="5"
+                       Grid.Column="0"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center"
+                       Margin="8">
+                <Span FontFamily="pack://application:,,,/Resources/RobotoMono/#Roboto Mono">shadowsocks-rust</Span> Path
+            </TextBlock>
+            <TextBox Grid.Row="5"
+                     Grid.Column="1"
+                     x:Name="ssRustPathTextBox"
+                     Margin="2,8,2,8"
+                     Width="400"
+                     materialDesign:HintAssist.Hint="Path to shadowsocks-rust executable"/>
+            <Button Grid.Row="5"
+                    Grid.Column="2"
+                    x:Name="ssRustPathBrowseButton"
+                    Margin="2,0,8,0"
+                    Style="{StaticResource MaterialDesignFlatButton}">
+                Browse
+            </Button>
+            
+            <TextBlock Grid.Row="6"
+                       Grid.Column="0"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center"
+                       Margin="8,8,8,8">
+                <Span FontFamily="pack://application:,,,/Resources/RobotoMono/#Roboto Mono">V2Ray</Span> Path
+            </TextBlock>
+            <TextBox Grid.Row="6"
+                     Grid.Column="1"
+                     x:Name="v2rayPathTextBox"
+                     Margin="2,8,2,8"
+                     Width="400"
+                     materialDesign:HintAssist.Hint="Path to v2ray-core executable"/>
+            <Button Grid.Row="6"
+                    Grid.Column="2"
+                    x:Name="v2rayPathBrowseButton"
+                    Margin="2,0,8,0"
+                    Style="{StaticResource MaterialDesignFlatButton}">
+                Browse
+            </Button>
+            
+            <TextBlock Grid.Row="7"
+                       Grid.Column="0"
+                       Margin="8"
+                       Style="{StaticResource MaterialDesignHeadline6TextBlock}">
+                Network
+            </TextBlock>
+            <TextBlock Grid.Row="8"
+                       Grid.Column="0"
+                       Style="{StaticResource MaterialDesignBody2TextBlock}"
+                       VerticalAlignment="Center"
+                       Margin="8,8,8,8">
+                Forward Proxy
+            </TextBlock>
+            <Button Grid.Row="8"
+                    Grid.Column="1"
+                    x:Name="forwardProxySettingsButton"
+                    Margin="2,0,8,0"
+                    Style="{StaticResource MaterialDesignRaisedAccentButton}">
+                Open settings
+            </Button>
+        </Grid>
+    </ScrollViewer>
 </reactiveui:ReactiveUserControl>