redesign to material standards and clean up some sylings

This commit is contained in:
Rene Schwarz
2021-04-08 03:31:21 +02:00
parent 73f864ea20
commit ca432897af
78 changed files with 1904 additions and 309 deletions

View File

@@ -3,11 +3,14 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:vm="clr-namespace:Server_Dashboard"
xmlns:local="clr-namespace:Server_Dashboard.Views.DashboardPages" xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
mc:Ignorable="d"
d:DesignHeight="720" d:DesignWidth="1200">
<Grid Background="{StaticResource 700Gray}">
d:DesignHeight="920" d:DesignWidth="1600">
<UserControl.DataContext>
<vm:DashboardModuleViewModel/>
</UserControl.DataContext>
<Grid Background="{StaticResource BackgroundSurface_00dp}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
@@ -18,11 +21,114 @@
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{StaticResource 900Gray}">
<Grid Grid.Column="0" Background="{StaticResource BackgroundSurface_02dp}">
<Grid.Effect>
<DropShadowEffect Direction="0" BlurRadius="5" ShadowDepth="0"/>
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button
Grid.Row="0"
Command="{Binding CreateModuleCommand}"
Content="CREATE MODULE"
Height="50"
Margin="0 10 0 0"
/>
<Button
Grid.Row="1"
Command="{Binding DeleteModuleCommand}"
Content="DELETE MODULE"
Height="50"
Margin="0 10 0 0"
/>
<Button
Grid.Row="2"
Command="{Binding UpdateModuleCommand}"
Content="UPDATE MODULE"
Height="50"
Margin="0 10 0 0"
/>
</Grid>
<Grid Grid.Column="1" Background="{StaticResource 800Gray}">
<Grid Grid.Column="1">
<ScrollViewer VerticalScrollBarVisibility="Hidden">
<ItemsControl MaxWidth="1400" ItemsSource="{Binding Modules}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border MinHeight="100" MinWidth="300" Width="Auto" Height="Auto" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="0"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border
Grid.Row="0"
Background="{StaticResource BackgroundSurface_08dp}"
CornerRadius="12 12 0 0"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="7.5 0 7.5 0" Height="25" Width="25" Source="{Binding ModuleIcon}"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" Text="{Binding ModulName}"/>
<Border Background="{Binding StatusIndicator}" Grid.Column="3" CornerRadius="0 11 0 0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Margin="7 0 30 0" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="0" Foreground="{StaticResource White}" FontSize="20" Text="Status"/>
<Border Grid.Column="1" CornerRadius="0 11 0 0" HorizontalAlignment="Right" Background="{Binding StatusIndicatorBG}" Padding="6">
<Ellipse Fill="{Binding StatusIndicator}" StrokeThickness="0" Width="25" Height="25"/>
</Border>
</Grid>
</Border>
</Grid>
</Border>
<Grid Grid.Row="2" Background="{StaticResource BackgroundSurface_02dp}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--
Add List of information later
-->
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Grid>

View File

@@ -5,17 +5,25 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Server_Dashboard.Views"
xmlns:root="clr-namespace:Server_Dashboard"
xmlns:views="clr-namespace:Server_Dashboard.Views.DashboardPages" xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
mc:Ignorable="d"
Height="800" Width="1200" WindowStyle="None" AllowsTransparency="True" Background="Transparent" ResizeMode="CanResize">
<Grid>
xmlns:views="clr-namespace:Server_Dashboard.Views.DashboardPages"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
MinHeight="400" MinWidth="600"
Height="1000" Width="1600" WindowStyle="None" Background="Transparent" ResizeMode="CanResize">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0"/>
</WindowChrome.WindowChrome>
<Window.DataContext>
<root:DashboardViewModel/>
</Window.DataContext>
<Grid Background="{StaticResource BackgroundSurface_00dp}">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Window Title-->
<Grid Grid.Row="0" Background="{StaticResource 1000Gray}">
<Grid Background="{StaticResource BackgroundSurface_06dp}" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
@@ -26,7 +34,7 @@
</i:EventTrigger>
</i:Interaction.Triggers>
<Label Grid.Column="0"/>
<Button Grid.Column="2" Style="{StaticResource CloseButton}" Content="✕">
<Button Style="{StaticResource CloseButton}" Grid.Column="2" Content="✕" Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:CallMethodAction MethodName="Close" TargetObject="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
@@ -35,7 +43,10 @@
</Button>
</Grid>
<!--Settings, Docs, User, links etc-->
<Grid Grid.Row="1" x:Name="TopBarGrid" Background="{StaticResource 950Gray}" Loaded="Grid_Loaded">
<Grid Background="{StaticResource BackgroundSurface_04dp}" Grid.Row="1" x:Name="TopBarGrid">
<Grid.Effect>
<DropShadowEffect Direction="270" BlurRadius="5"/>
</Grid.Effect>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
@@ -43,94 +54,221 @@
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Style="{StaticResource TopBarLinksButton}">
<Button Grid.Column="0" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="4" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Image x:Name="TopBarButtonImage" Source="../Assets/Images/SettingsLight.png" Height="Auto"/>
<Border
x:Name="Border"
CornerRadius="4"
Padding="2"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
>
<svgc:SvgViewbox
Source="../Assets/Images/Settings.svg"
Margin="5"
IsHitTestVisible="False"
Opacity="0.87"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource HighlightedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedBlue}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource PressedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource 950Gray}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="TopBarButtonImage" Property="Source" Value="../Assets/Images/Settings.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="2" Content="GitHub" Style="{StaticResource TopBarLinksButton}">
<Button
Grid.Column="4"
Command="{Binding OpenLinkCommand}"
Content="{Binding UserName}"
Margin="10 0 10 0"
Height="40"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="4" Padding="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal">
<Image x:Name="TopBarButtonImage" Source="../Assets/Images/GitHubLight.png" Height="{TemplateBinding FontSize}" Margin="0 0 5 0"/>
<TextBlock TextAlignment="Center" Padding="5" TextWrapping="Wrap" Text="GitHub" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<Border x:Name="Border" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0">
<Border.Effect>
<DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5"/>
</Border.Effect>
<Border x:Name="BackgroundOverlay" CornerRadius="4" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border.BorderBrush>
<SolidColorBrush Color="White" Opacity="0.12"/>
</Border.BorderBrush>
<StackPanel Orientation="Horizontal">
<svgc:SvgViewbox
Source="../Assets/Images/User.svg"
Margin="5"
IsHitTestVisible="False"
Opacity="0.87"
/>
<TextBlock
FontSize="{TemplateBinding FontSize}"
TextAlignment="Center"
Padding="0"
TextWrapping="Wrap"
Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5 0 10 0"
/>
</StackPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource HighlightedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedBlue}"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.04"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource PressedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource 950Gray}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="TopBarButtonImage" Property="Source" Value="../Assets/Images/GitHub.png"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.12"/>
</Setter.Value>
</Setter>
<Setter TargetName="BackgroundOverlay" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity=".87"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="3" Content="Docs" Style="{StaticResource TopBarLinksButton}" Cursor="Hand">
<Button
Grid.Column="3"
Command="{Binding OpenLinkCommand}"
CommandParameter="https://github.com/Crylia/Server-Dashboard/wiki"
Content="Docs"
Margin="10 0 10 0"
Height="40"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="4" Padding="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal">
<Image x:Name="TopBarButtonImage" Source="../Assets/Images/DocsLight.png" Height="{TemplateBinding FontSize}" Margin="0 0 5 0"/>
<TextBlock TextAlignment="Center" Padding="5" TextWrapping="Wrap" Text="Docs" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<Border x:Name="Border" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0">
<Border.Effect>
<DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5"/>
</Border.Effect>
<Border x:Name="BackgroundOverlay" CornerRadius="4" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border.BorderBrush>
<SolidColorBrush Color="White" Opacity="0.12"/>
</Border.BorderBrush>
<StackPanel Orientation="Horizontal">
<svgc:SvgViewbox
Source="../Assets/Images/Docs.svg"
Margin="5"
IsHitTestVisible="False"
Opacity="0.87"
/>
<TextBlock
FontSize="{TemplateBinding FontSize}"
TextAlignment="Center"
Padding="0"
TextWrapping="Wrap"
Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5 0 10 0"
/>
</StackPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource HighlightedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedBlue}"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.04"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource PressedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource 950Gray}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="TopBarButtonImage" Property="Source" Value="../Assets/Images/Docs.png"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.12"/>
</Setter.Value>
</Setter>
<Setter TargetName="BackgroundOverlay" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity=".87"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="4" Style="{StaticResource TopBarLinksButton}" Cursor="Hand">
<Button
Grid.Column="2"
Command="{Binding OpenLinkCommand}"
CommandParameter="https://github.com/Crylia/Server-Dashboard"
Content="GitHub"
Margin="10 0 10 0"
Height="40"
Opacity="0.87"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="4" Padding="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal">
<Image x:Name="TopBarButtonImage" Source="../Assets/Images/UserLight.png" Height="{TemplateBinding FontSize}" Margin="0 0 5 0"/>
<TextBlock TextAlignment="Center" Padding="5" TextWrapping="Wrap" Text="{Binding UserName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<Border x:Name="Border" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0">
<Border.Effect>
<DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5"/>
</Border.Effect>
<Border x:Name="BackgroundOverlay" CornerRadius="4" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border.BorderBrush>
<SolidColorBrush Color="White" Opacity="0.12"/>
</Border.BorderBrush>
<StackPanel Orientation="Horizontal">
<Image
Source="../Assets/Images/GitHubLight.png"
Margin="5"
/>
<TextBlock
FontSize="{TemplateBinding FontSize}"
TextAlignment="Center"
Padding="0"
TextWrapping="Wrap"
Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5 0 10 0"
/>
</StackPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource HighlightedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedBlue}"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.04"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource PressedBlue}"/>
<Setter Property="Foreground" Value="{StaticResource 950Gray}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="TopBarButtonImage" Property="Source" Value="../Assets/Images/User.png"/>
<Setter TargetName="BackgroundOverlay" Property="Background">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity="0.12"/>
</Setter.Value>
</Setter>
<Setter TargetName="BackgroundOverlay" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="#B388FF" Opacity=".87"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

View File

@@ -18,11 +18,5 @@ namespace Server_Dashboard.Views {
public DashboardWindow() {
InitializeComponent();
}
private void Grid_Loaded(object sender, RoutedEventArgs e) {
foreach(Button b in TopBarGrid.Children) {
//b.Template.FindName("TopBarButtonImage")
}
}
}
}