update file ui

Control/Control.csproj

@@ -0,0 +1,7 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+  </PropertyGroup>
+
+</Project>

Control/TabItemExpander.cs

@@ -0,0 +1,10 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace Editopia.Control
+{
+    class TabItemExpander
+    {
+    }
+}

Editopia.Control/Editopia.Control.csproj

@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Avalonia\src\Avalonia.Controls\Avalonia.Controls.csproj" />
+  </ItemGroup>
+
+</Project>

Editopia.Control/TabItemIcon.cs

@@ -0,0 +1,35 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Mixins;
+using Avalonia.Controls.Primitives;
+using System;
+
+namespace Editopia.Control
+{
+    public class TabItemIcon : HeaderedContentControl, ISelectable
+    {
+        /// <summary>
+        /// Defines the <see cref="IsSelected"/> property.
+        /// </summary>
+        public static readonly StyledProperty<bool> IsSelectedProperty =
+            ListBoxItem.IsSelectedProperty.AddOwner<TabItem>();
+
+        /// <summary>
+        /// Initializes static members of the <see cref="TabItem"/> class.
+        /// </summary>
+        static TabItemIcon()
+        {
+            SelectableMixin.Attach<TabItemIcon>(IsSelectedProperty);
+            FocusableProperty.OverrideDefaultValue(typeof(TabItem), true);
+        }
+
+        /// <summary>
+        /// Gets or sets the selection state of the item.
+        /// </summary>
+        public bool IsSelected
+        {
+            get { return GetValue(IsSelectedProperty); }
+            set { SetValue(IsSelectedProperty, value); }
+        }
+    }
+}

Editopia.Editor/App.xaml

@@ -2,18 +2,59 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Application.Styles>
 
-    <Style Selector="TextBlock.h1">
+    <Style Selector="Border.grouped">
+      <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLightBrush}"/>
+      <Setter Property="CornerRadius" Value="2"/>
+      <Setter Property="BorderThickness" Value="3"/>
+    </Style>
+    
+    <Style Selector="Button">
+      <Setter Property="FontWeight" Value="Light"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Light.ttf?assembly=Editopia.Editor#Roboto" />
+      <Setter Property="FontSize" Value="14"/>
+    </Style>
+
+    <Style Selector="TextBlock.content">
       <Setter Property="Foreground" Value="#212121"/>
       <Setter Property="FontSize" Value="20"/>
-      <Setter Property="FontWeight" Value="Medium"/>
+      <Setter Property="FontWeight" Value="Regular"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Regular.ttf?assembly=Editopia.Editor#Roboto"/>
     </Style>
 
-    <Style Selector="TextBlock.h2">
+    <Style Selector="TextBlock.emph">
+      <Setter Property="FontWeight" Value="Bold"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Bold.ttf?assembly=Editopia.Editor#Roboto"/>
+    </Style>
+
+    <Style Selector="TextBlock.h1">
+      <Setter Property="Foreground" Value="#212121"/>
+      <Setter Property="FontSize" Value="56"/>
+      <Setter Property="FontWeight" Value="Light"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Light.ttf?assembly=Editopia.Editor#Roboto"/>
+    </Style>
+
+    <Style Selector="TextBlock.sub1">
+      <Setter Property="FontWeight" Value="Regular"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Regular.ttf?assembly=Editopia.Editor#Roboto"/>
       <Setter Property="Foreground" Value="#727272"/>
       <Setter Property="FontSize" Value="13"/>
     </Style>
+
+    <Style Selector="TextBlock.h2">
+      <Setter Property="Foreground" Value="#212121"/>
+      <Setter Property="FontSize" Value="42"/>
+      <Setter Property="FontWeight" Value="Light"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Roboto-Light.ttf?assembly=Editopia.Editor#Roboto"/>
+    </Style>
+    
+    <Style Selector="TextBlock.brand">
+      <Setter Property="FontWeight" Value="Regular"/>
+      <Setter Property="FontFamily" Value="resm:Editopia.Editor.Assets.Font.Awesome.Fa5-Brands-Regular-400.otf?assembly=Editopia.Editor#FontAwesome"/>
+    </Style>
+
     <StyleInclude Source="resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"/>
     <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default"/>
-    <StyleInclude Source="resm:Editopia.Editor.SideBar.xaml"/>
+    <StyleInclude Source="resm:Editopia.Editor.Sidebar.Sidebar.xaml"/>
   </Application.Styles>
 </Application>

Editopia.Editor/Design/Brushes.cs

@@ -0,0 +1,20 @@
+using Avalonia.Media;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace Editopia.Editor.Design
+{
+    public class Brushes
+    {
+        private ImageBrush _mainBackgroundBrush = new ImageBrush(new Avalonia.Media.Imaging.Bitmap("resm:Editopia.Editor.Assets.background_acc.png"));
+
+        public IImageBrush ThemeBackgroundBrush
+        {
+            get
+            {
+                return _mainBackgroundBrush;
+            }
+        }
+    }
+}

Editopia.Editor/Editopia.Editor.csproj

@@ -21,12 +21,48 @@
     </EmbeddedResource>
   </ItemGroup>
   <ItemGroup>
+    <None Remove="Assets\background_acc.png" />
+    <None Remove="Assets\Font\Awesome\gitsquare.png" />
+    <None Remove="Assets\Font\Roboto-Black.ttf" />
+    <None Remove="Assets\Font\Roboto-BlackItalic.ttf" />
+    <None Remove="Assets\Font\Roboto-Bold.ttf" />
+    <None Remove="Assets\Font\Roboto-BoldItalic.ttf" />
+    <None Remove="Assets\Font\Roboto-Italic.ttf" />
+    <None Remove="Assets\Font\Roboto-Light.ttf" />
+    <None Remove="Assets\Font\Roboto-LightItalic.ttf" />
+    <None Remove="Assets\Font\Roboto-Medium.ttf" />
+    <None Remove="Assets\Font\Roboto-MediumItalic.ttf" />
+    <None Remove="Assets\Font\Roboto-Regular.ttf" />
+    <None Remove="Assets\Font\Roboto-Thin.ttf" />
+    <None Remove="Assets\Font\Roboto-ThinItalic.ttf" />
+    <None Remove="Assets\git.png" />
+    <None Remove="Assets\outline_folder_black_36dp.png" />
+    <None Remove="Assets\project-diagram.png" />
     <None Remove="MainView.xaml" />
     <None Remove="Pages\EditTrainer.xaml" />
     <None Remove="Pages\FilePage.xaml" />
     <None Remove="sidebar.xaml" />
   </ItemGroup>
   <ItemGroup>
+    <EmbeddedResource Include="Assets\background_acc.png" />
+    <EmbeddedResource Include="Assets\Font\Awesome\gitsquare.png" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Black.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-BlackItalic.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Bold.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-BoldItalic.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Italic.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Light.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-LightItalic.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Medium.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-MediumItalic.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Regular.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-Thin.ttf" />
+    <EmbeddedResource Include="Assets\Font\Roboto-ThinItalic.ttf" />
+    <EmbeddedResource Include="Assets\git.png" />
+    <EmbeddedResource Include="Assets\outline_folder_black_36dp.png" />
+    <EmbeddedResource Include="Assets\Font\Awesome\project-diagram.png" />
+  </ItemGroup>
+  <ItemGroup>
     <ProjectReference Include="..\Avalonia\src\Avalonia.Animation\Avalonia.Animation.csproj" />
     <ProjectReference Include="..\Avalonia\src\Avalonia.Base\Avalonia.Base.csproj" />
     <ProjectReference Include="..\Avalonia\src\Avalonia.Controls\Avalonia.Controls.csproj" />
@@ -40,6 +76,7 @@
     <ProjectReference Include="..\Avalonia\src\Avalonia.Visuals\Avalonia.Visuals.csproj" />
     <ProjectReference Include="..\Avalonia\src\Markup\Avalonia.Markup.Xaml\Avalonia.Markup.Xaml.csproj" />
     <ProjectReference Include="..\Avalonia\src\Markup\Avalonia.Markup\Avalonia.Markup.csproj" />
+    <ProjectReference Include="..\Editopia.Control\Editopia.Control.csproj" />
   </ItemGroup>
   <ItemGroup>
     <Compile Update="MainView.xaml.cs">

Editopia.Editor/MainView.xaml

@@ -1,6 +1,9 @@
 <UserControl xmlns="https://github.com/avaloniaui"
         xmlns:pages="clr-namespace:Editopia.Editor.Pages"
+        xmlns:sidebar="clr-namespace:Editopia.Editor.Sidebar"
+        xmlns:editopia.control="clr-namespace:Editopia.Control"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
   <TabControl Classes="sidebar" Name="Sidebar">
     <TabItem Header="File">
       <pages:FilePage/>

Editopia.Editor/MainView.xaml.cs

@@ -1,5 +1,10 @@
-using Avalonia.Controls;
+using Avalonia.Collections;
+using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Editopia.Editor.Pages;
+using System;
+using System.Collections;
+using System.Collections.Generic;
 
 namespace Editopia.Editor
 {
@@ -13,6 +18,12 @@ namespace Editopia.Editor
         private void InitializeComponent()
         {
             AvaloniaXamlLoader.Load(this);
+            IList tabItems = ((IList)this.FindControl<TabControl>("Sidebar").Items);
+            tabItems.Add(new TabItem()
+            {
+                Header = "Trainer Page",
+                Content = new EditTrainer()
+            });
         }
     }
 }

Editopia.Editor/Pages/FilePage.xaml

@@ -1,6 +1,74 @@
 <UserControl xmlns="https://github.com/avaloniaui">
-  <StackPanel Orientation="Vertical" Gap="4">
+  <UserControl.Styles>
+  </UserControl.Styles>
+  <StackPanel Orientation="Vertical" Gap="4" Background="{DynamicResource ThemeBackgroundBrush}">
     <TextBlock Classes="h1">File</TextBlock>
-    <TextBlock Classes="h2">Manage your project</TextBlock>
+    <TextBlock Classes="sub1">Manage your project</TextBlock>
+    <Grid RowDefinitions="Auto,*"
+          ColumnDefinitions="Auto,*" Margin="0,16,0,0">
+      <StackPanel Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Margin="0,0,0,0">
+        <Border Classes="grouped">
+          <StackPanel Margin="8">
+            <StackPanel Orientation="Horizontal" Gap="10">
+              <Image Source="resm:Editopia.Editor.Assets.Font.Awesome.project-diagram.png" Width="30" Height="36" Grid.Column="0" Grid.Row="0"/>
+              <TextBlock Classes="h2" >Project Data</TextBlock>
+            </StackPanel>
+
+            <Grid RowDefinitions="Auto,*" ColumnDefinitions="Auto,*">
+              <StackPanel Grid.Column="0" Grid.Row="0">
+                <TextBlock Classes="content emph">Name: </TextBlock>
+                <TextBlock Classes="content emph">Workspace: </TextBlock>
+                <TextBlock Classes="content emph">Modules: </TextBlock>
+              </StackPanel>
+              <StackPanel Grid.Column="1" Grid.Row="0" Margin="8,0,0,0">
+                <TextBlock Classes="content">{projectName}</TextBlock>
+                <TextBlock Classes="content">{workspacePath}</TextBlock>
+                <TextBlock Classes="content">{loadedModules[]}</TextBlock>
+              </StackPanel>
+              
+            </Grid>
+            <Button Margin="0,8,0,0">OPEN FOLDER</Button>
+          </StackPanel>
+
+        </Border>
+      </StackPanel>
+
+            
+      
+      <Border Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,32,0" Classes="grouped">
+        <StackPanel>
+          <Grid RowDefinitions="Auto,*" Margin="8"
+            ColumnDefinitions="Auto,*">
+            <Image Source="resm:Editopia.Editor.Assets.Font.Awesome.gitsquare.png" Width="30" Height="36" Grid.Column="0" Grid.Row="0"/>
+            <TextBlock Classes="h2" Grid.Column="1" Grid.Row="0" Margin="12,0,0,0">Version Control</TextBlock>
+            <!--
+              <Image Source="resm:Editopia.Editor.Assets.git.png" Width="24" Height="30" Grid.Column="2" Grid.Row="0"/>
+            -->
+
+          </Grid>
+          <Grid RowDefinitions="Auto,*" ColumnDefinitions="Auto,*">
+
+
+            <StackPanel Grid.Column="0" Grid.Row="0" Margin="8">
+              <TextBlock Classes="content emph">Branch: </TextBlock>
+              <TextBlock Classes="content emph">Commit: </TextBlock>
+              <TextBlock Classes="content emph">Status: </TextBlock>
+            </StackPanel>
+            <StackPanel Grid.Column="1" Grid.Row="0" Margin="8">
+              <TextBlock Classes="content">{branch}</TextBlock>
+              <TextBlock Classes="content">{commitHash}</TextBlock>
+              <TextBlock Classes="content">{repositoryStatus}</TextBlock>
+
+            </StackPanel>
+
+
+          </Grid>
+
+        </StackPanel>
+
+      </Border>
+
+    </Grid>
+
   </StackPanel>
 </UserControl>

Editopia.Editor/SideBar.xaml → Editopia.Editor/Sidebar/Sidebar.xaml

@@ -33,6 +33,11 @@
     <Setter Property="Margin" Value="0"/>
     <Setter Property="Padding" Value="16"/>
     <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.1"/>
+      </Transitions>
+    </Setter>
   </Style>
 
   <Style Selector="TabControl.sidebar TabStripItem:pointerover">

Editopia.sln

@@ -53,6 +53,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Win32", "Avalonia\
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.ReactiveUI", "Avalonia\src\Avalonia.ReactiveUI\Avalonia.ReactiveUI.csproj", "{FD55342C-7A40-44DE-8A90-C8F2F2165FB1}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Editopia.Control", "Editopia.Control\Editopia.Control.csproj", "{A874E7B7-44B2-4918-AB15-BBA352CB3B88}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -151,6 +153,10 @@ Global
 		{FD55342C-7A40-44DE-8A90-C8F2F2165FB1}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{FD55342C-7A40-44DE-8A90-C8F2F2165FB1}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{FD55342C-7A40-44DE-8A90-C8F2F2165FB1}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A874E7B7-44B2-4918-AB15-BBA352CB3B88}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A874E7B7-44B2-4918-AB15-BBA352CB3B88}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A874E7B7-44B2-4918-AB15-BBA352CB3B88}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A874E7B7-44B2-4918-AB15-BBA352CB3B88}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -179,6 +185,7 @@ Global
 		{DE60FF65-3F0A-4F27-BCD3-0697A45DD24C} = {BE2ACD11-9552-42C2-A288-D803C94A4196}
 		{1BB33107-5BD0-49DB-BF8B-CEA312E4DC62} = {BE2ACD11-9552-42C2-A288-D803C94A4196}
 		{FD55342C-7A40-44DE-8A90-C8F2F2165FB1} = {BE2ACD11-9552-42C2-A288-D803C94A4196}
+		{A874E7B7-44B2-4918-AB15-BBA352CB3B88} = {C722AF49-670F-4338-8DD6-A2BE0304A799}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {1E71EF89-9E35-40BB-9071-247DE301209B}