Skip to content

Commit

Permalink
Merge pull request #15 from PetrusAriaa/dev
Browse files Browse the repository at this point in the history 
feat: create main window and sidebar menus
  • Loading branch information
@PetrusAriaa
PetrusAriaa authored Oct 20, 2023
2 parents 6516d3b + bba4dfd commit 14d0ac5
Show file tree
Hide file tree
Showing 18 changed files with 437 additions and 102 deletions.
1 change: 1 addition & 0 deletions Berkati-Frontend/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
<ResourceDictionary Source="FontAwesomeResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Expand Down
9 changes: 9 additions & 0 deletions Berkati-Frontend/Berkati-Frontend.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,20 @@
<UseWPF>true</UseWPF>
</PropertyGroup>

<ItemGroup>
<None Remove="Fonts\FaFreeSolid.otf" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="AdonisUI" Version="1.17.1" />
<PackageReference Include="AdonisUI.ClassicTheme" Version="1.17.1" />
<PackageReference Include="MahApps.Metro.IconPacks" Version="4.11.0" />
<PackageReference Include="MaterialDesignColors" Version="2.1.4" />
<PackageReference Include="MaterialDesignThemes" Version="4.9.0" />
</ItemGroup>

<ItemGroup>
<Resource Include="Fonts\FaFreeSolid.otf" />
</ItemGroup>

</Project>
5 changes: 5 additions & 0 deletions Berkati-Frontend/FontAwesomeResource.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<FontFamily x:Key="FaFreeSolid">/Fonts/FaFreeSolid.otf#Font Awesome 6 Free Solid</FontFamily>
</ResourceDictionary>
Binary file added Berkati-Frontend/Fonts/FaFreeSolid.otf
View file
Binary file not shown.
215 changes: 116 additions & 99 deletions Berkati-Frontend/LoginWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,121 +4,138 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Berkati_Frontend"
mc:Ignorable="d"
Title="LoginWindow" Height="550" Width="800"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="White"
WindowStartupLocation="CenterScreen">

<!-- Grid untuk mengatur susunan UI -->
<Grid>

<!-- Row Definition: Mengatur tinggi baris sesuai kebutuhan -->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<!-- Card Login -->
<materialDesign:Card UniformCornerRadius="15" Background="AliceBlue" Height="400" Width="300">
<materialDesign:Card.Effect>
<DropShadowEffect BlurRadius="15"
Direction ="-90"
RenderingBias ="Quality"
ShadowDepth ="2"
Color ="Gray" />
</materialDesign:Card.Effect>
<!-- Efek bayangan untuk card -->
<materialDesign:Card.Effect>
<DropShadowEffect BlurRadius="15"
Direction="-90"
RenderingBias="Quality"
ShadowDepth="2"
Color="Gray" />
</materialDesign:Card.Effect>
<!-- StackPanel untuk menyusun elemen-elemen UI di dalam card -->
<StackPanel Orientation="Vertical" Margin="20">
<!-- Teks "Berkati" -->
<TextBlock Text="Berkati"
FontSize="27"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontWeight="Bold"
Margin="0,20,0,0"
/>
FontSize="27"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontWeight="Bold"
Margin="0,20,0,0"/>
<!-- Teks "Login" -->
<TextBlock Text="Login"
FontSize="25"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontWeight="Bold"
Padding="10"
/>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="User Name"
Grid.Row="0"
Margin="0,15"
HorizontalAlignment="Left"/>
<TextBox Grid.Column="1"
Grid.Row="1"
Padding="0,5"
Width="255"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"
materialDesign:HintAssist.Hint="Input User Name"/>
<TextBlock Text="Password"
Grid.Row="2"
Margin="0,15"
HorizontalAlignment="Left"/>
<PasswordBox Grid.Row="3"
materialDesign:HintAssist.Hint="Input Password"
Padding="0,5"
Width="255"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"/>
</Grid>
<Button x:Name="LoginBtn"
Content="Login"
Foreground="White"
Background="Black"
Margin="0,25"
Height="35"
Width="250"
Cursor="Hand">
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="LoginBorder" Background="{TemplateBinding Background}"
CornerRadius="16">
<Border.Effect>
<!-- Efek bayangan menggunakan DropShadowEffect -->
<DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="Black" Opacity="0.5"/>
</Border.Effect>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Ubah efek bayangan saat tombol dihover -->
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="3" BlurRadius="10" Color="Black" Opacity="0.7"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- Ubah efek bayangan saat tombol diklik -->
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="3" BlurRadius="5" Color="Black" Opacity="0.7"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</StackPanel>
</materialDesign:Card>
<TextBlock Text="Login"
FontSize="25"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontWeight="Bold"
Padding="10"/>
<!-- Grid untuk mengatur tata letak elemen-elemen input -->
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Label dan TextBox untuk input username -->
<TextBlock Text="User Name"
Grid.Row="0"
Margin="0,15"
HorizontalAlignment="Left"/>
<TextBox Grid.Column="1"
Grid.Row="1"
Padding="0,5"
Width="255"
MaxLength="20"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"
materialDesign:HintAssist.Hint="Input User Name"/>
<!-- Label dan PasswordBox untuk input password -->
<TextBlock Text="Password"
Grid.Row="2"
Margin="0,15"
HorizontalAlignment="Left"/>
<PasswordBox Grid.Row="3"
materialDesign:HintAssist.Hint="Input Password"
Padding="0,5"
Width="255"
MaxLength="16"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"/>
</Grid>
<!-- Button Login -->
<Button x:Name="LoginBtn"
Foreground="White"
Background="Black"
Margin="0,25"
Height="35"
Width="250"
Cursor="Hand" Click="LoginBtn_Click">
<!-- Mengatur letak content dengan icon -->
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center">Login</TextBlock>
<!-- Icon login -->
<iconPacks:PackIconMaterial Kind="LoginVariant"
Width="16"
Height="16"
Margin="5,0,0,0"
VerticalAlignment="Center"/>
</StackPanel>
<!-- Mengatur style dari Login button -->
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="LoginBorder" Background="{TemplateBinding Background}"
CornerRadius="16">
<Border.Effect>
<!-- Efek bayangan menggunakan DropShadowEffect -->
<DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="Black" Opacity="0.5"/>
</Border.Effect>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Ubah efek bayangan saat tombol dihover -->
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="3" BlurRadius="10" Color="Black" Opacity="0.7"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- Ubah efek bayangan saat tombol diklik -->
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="3" BlurRadius="5" Color="Black" Opacity="0.7"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</StackPanel>
</materialDesign:Card>
</Grid>
</Window>
7 changes: 7 additions & 0 deletions Berkati-Frontend/LoginWindow.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,12 @@ public LoginWindow()
{
InitializeComponent();
}

private void LoginBtn_Click(object sender, RoutedEventArgs e)
{
MainWindow mainWindow = new MainWindow();
mainWindow.Show();
this.Close();
}
}
}
47 changes: 44 additions & 3 deletions Berkati-Frontend/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,52 @@
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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Berkati_Frontend"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
Title="MainWindow"
SnapsToDevicePixels="True"
Height="450"
Width="800">

<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="356,148,0,0" VerticalAlignment="Top"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>

<!-- Logo Berkati -->
<Label Margin="0,10,0,0" VerticalAlignment="Top" Height="25" Width="25" Content= "&#x42;" FontFamily="{StaticResource FaFreeSolid}" FontSize="18"/>

<!-- Menu -->
<ListBox Grid.Column="0" SelectionMode="Single" SelectionChanged="sidebar_SelectionChanged" x:Name="sidebar" Margin="0,50,0,50" BorderThickness="0">

<local:NavButton Navlink="/Pages/Page1.xaml" Margin="5" Padding="8" Content= "&#xf03a;" FontFamily="{StaticResource FaFreeSolid}"/>
<local:NavButton Navlink="/Pages/Page2.xaml" Margin="5" Padding="8" Content= "&#x2b;" FontFamily="{StaticResource FaFreeSolid}"/>
<local:NavButton Navlink="/Pages/Page3.xaml" Margin="5" Padding="8" Content= "&#xe537;" FontFamily="{StaticResource FaFreeSolid}"/>
<local:NavButton Navlink="/Pages/Page4.xaml" Margin="5" Padding="8" Content= "&#xf2b5;" FontFamily="{StaticResource FaFreeSolid}"/>

</ListBox>

<!-- Button Logout-->
<Button x:Name="LogoutBtn"
Margin="0,380,0,0"
Height="25"
Width="25"
Foreground="White"
Background="White"
Cursor="Hand"/>

<StackPanel Orientation="Horizontal">
<!-- Icon logout -->
<iconPacks:PackIconMaterial Kind="LogoutVariant"
Width="25"
Height="25"
Margin="13,380,0,0"
VerticalAlignment="Center"/>
</StackPanel>

<Frame Grid.Column="1" x:Name="navframe" NavigationUIVisibility="Hidden" Background="#e9ecef"/>

</Grid>
</Window>
</Window>
9 changes: 9 additions & 0 deletions Berkati-Frontend/MainWindow.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,14 @@ public MainWindow()
{
InitializeComponent();
}

private void sidebar_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

var selected = sidebar.SelectedItem as NavButton;

navframe.Navigate(selected.Navlink);

}
}
}
Loading

0 comments on commit 14d0ac5

Please sign in to comment.