From 0a9b9785c945067f5a265614c21550f31d71b5df Mon Sep 17 00:00:00 2001
From: Sandra Borst <108298114+VerfluchteZocke@users.noreply.github.com>
Date: Sat, 8 Mar 2025 13:41:41 +0100
Subject: [PATCH] improved design of session screen as well as burger menu
---
.../Screens/Regulaer/02Session.xaml | 98 ++++++++++++-------
.../Screens/Regulaer/02Session.xaml.cs | 14 +--
.../Styles/Styles.xaml | 31 ++++--
3 files changed, 95 insertions(+), 48 deletions(-)
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml
index 5ae7dcb..abe0dc2 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml
@@ -7,54 +7,82 @@
xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates"
mc:Ignorable="d"
Unloaded="Page_Unloaded"
- Height="550" Width="900">
+ Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid>
- <ToggleButton x:Name="BurgerMenuButton" Content="☰" Width="50" Height="50" Click="BurgerMenuButton_Click" Margin="10,20,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Style="{StaticResource BurgerMenuButtonStyle}" />
+ <ToggleButton x:Name="BurgerMenuButton"
+ Click="BurgerMenuButton_Click"
+ Margin="10,20,0,0"
+ VerticalAlignment="Top"
+ HorizontalAlignment="Left"
+ Style="{StaticResource BurgerMenuButtonStyle}">
+ <TextBlock Text="☰" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+ </ToggleButton>
<StackPanel x:Name="MenuPanel"
Visibility="Collapsed"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="10,80,0,0">
- <Button Content="Distractions"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_2"/>
- <Button Content="ProgrammsList"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_3"/>
- <Button Content="Overview"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_4"/>
- <Button Content="Statistics"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_5"/>
- <Button Content="Abonnement"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_6"/>
- <Button Content="Contract"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_7"/>
- <Button Content="Settings"
- Style="{StaticResource MenuButtonStyle}"
- Click="Button_Click_8"/>
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_2">
+ <TextBlock Text="Distractions" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_3">
+ <TextBlock Text="ProgrammsList" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_4">
+ <TextBlock Text="Overview" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_5">
+ <TextBlock Text="Statistics" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_6">
+ <TextBlock Text="Abonnement" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_7">
+ <TextBlock Text="Contract" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
+ <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_8">
+ <TextBlock Text="Settings" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+
</StackPanel>
-
- <!-- <header:HeaderTemplate VerticalAlignment="Center" Height="534"/> -->
- <Button Margin="0,100,150,10" Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" BorderBrush="Transparent" Click="DiscardSession_Click">
- <Grid >
- <Line X1="5" Y1="5" X2="35" Y2="35" Stroke="Gray" StrokeThickness="5" />
- <Line X1="5" Y1="35" X2="35" Y2="5" Stroke="Gray" StrokeThickness="5" />
+
+ <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}"
+ CornerRadius="20" Padding="30"
+ HorizontalAlignment="Center" VerticalAlignment="Center" >
+ <Grid>
+ <Border
+ HorizontalAlignment="Right" VerticalAlignment="Top"
+ Background="Transparent"
+ MouseDown="DiscardSession_Click" Cursor="Hand" Width="40" Height="40">
+ <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
+ <Line X1="5" Y1="5" X2="35" Y2="35" Stroke="{StaticResource TEXT_PRIMARY_BRUSH}" StrokeThickness="5"/>
+ <Line X1="5" Y1="35" X2="35" Y2="5" Stroke="{StaticResource TEXT_PRIMARY_BRUSH}" StrokeThickness="5"/>
</Grid>
- </Button>
- <TextBlock Name ="Title" Text="Focus Session 0 of 0" Style="{StaticResource Heading1}" HorizontalAlignment="Center" Height="42" TextWrapping="Wrap" VerticalAlignment="Top" Width="442" Margin="0,133,0,0"/>
- <TextBlock Name="Clock" Text="00:00" Style="{StaticResource Heading1}" HorizontalAlignment="Center" Height="104" TextWrapping="Wrap" VerticalAlignment="Top" Width="326" Margin="0,180,0,0" FontSize="72" FontWeight="Bold"/>
+ </Border>
+
+ <StackPanel Orientation="Vertical">
+ <StackPanel Orientation="Horizontal"></StackPanel>
+ <TextBlock TextAlignment="Center" Name ="Title" Text="Focus Session 0 of 0" Style="{StaticResource Header1}" HorizontalAlignment="Center" Height="42" TextWrapping="Wrap" VerticalAlignment="Top" Width="442" Margin="0,5,0,0"/>
+ <TextBlock TextAlignment="Center" Name="Clock" Text="00:00" Style="{StaticResource Header1}" HorizontalAlignment="Center" Height="104" TextWrapping="Wrap" VerticalAlignment="Top" Width="326" FontSize="72" FontWeight="Bold"/>
- <StackPanel x:Name="CyclesIndicatorPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,60,0,0">
+ <StackPanel x:Name="CyclesIndicatorPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
</StackPanel>
- <Button Content="Pause" Name="PlayPauseButton" Style="{StaticResource PlayPauseButton}" HorizontalAlignment="Center" Margin="0,320,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Click="PlayPause_Click"></Button>
+ <Border Style="{StaticResource RoundedButtonBorder}" MouseDown="PlayPause_Click" Width="100" Margin="0,30,0,0" HorizontalAlignment="Center">
+ <TextBlock x:Name="PlayPauseButtonText" Text="Pause" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
+ </StackPanel>
+ </Grid>
+ </Border>
+
<!--<Button Content="Mascott Up" Click="Button_Click_1" HorizontalAlignment="Left" Margin="116,375,0,0" VerticalAlignment="Top"/>
<Button Content="Mascott Down" Click="Button_Click" HorizontalAlignment="Left" Margin="116,400,0,0" VerticalAlignment="Top"/>-->
- <TextBlock HorizontalAlignment="Left" Margin="116,350,0,0" Text="0" VerticalAlignment="Top" Name="StageText"/>
</Grid>
</Page>
\ No newline at end of file
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml.cs b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml.cs
index bff5c55..d6c47eb 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml.cs
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml.cs
@@ -80,26 +80,26 @@ namespace InnoLabProjektDektopApp
seconds = maxTime; // Zeit für die Fokusperiode
isBreakPeriod = false; // Zurück zum Fokus
currentSession++; // Gehe zum nächsten Zyklus
- PlayPauseButton.Content = "Pause";
+ PlayPauseButtonText.Text = "Pause";
}
private void HandleMonitorPaused(object sender, EventArgs e)
{
timer.Stop(); // Stop the time
step = 0; // Stop counting down
- PlayPauseButton.Content = "Continue"; // Update button text
+ PlayPauseButtonText.Text = "Continue";
}
private void HandleMonitorResumed(object sender, EventArgs e)
{
timer.Start();
step = -1; // Set step to countdown
- PlayPauseButton.Content = "Pause";
+ PlayPauseButtonText.Text = "Pause";
}
private void HandleMonitorBreakStarted(object sender, EventArgs e)
{
- PlayPauseButton.Content = "Skip Break";
+ PlayPauseButtonText.Text = "Skip Break";
seconds = breakPeriod; // Zeit für die Pause
isBreakPeriod = true; // Wechsel in den Pausenmodus
}
@@ -199,7 +199,7 @@ namespace InnoLabProjektDektopApp
Width = 20,
Height = 20,
Margin = new Thickness(10),
- Fill = new SolidColorBrush(Color.FromRgb(72, 98, 132)), // Ausgefüllter Kreis
+ Fill = new SolidColorBrush(Color.FromRgb(173, 216, 230)), // Ausgefüllter Kreis
};
CyclesIndicatorPanel.Children.Add(filledCircle);
}
@@ -219,8 +219,8 @@ namespace InnoLabProjektDektopApp
Width = 50, // Gleiche Breite wie der Hintergrund
Height = 20, // Gleiche Höhe wie der Hintergrund
Fill = GradientGenerator.GenerateTwoColorBrush(
- Color.FromRgb(72, 98, 132),
- Color.FromRgb(222, 222, 222),
+ Color.FromRgb(173, 216, 230),
+ Color.FromRgb(238, 238, 238),
1 - (seconds / (double)maxTime)
),
RadiusX = 10,
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
index 19abad2..2a17abc 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
@@ -98,6 +98,24 @@
</Style.Triggers>
</Style>
+ <Style TargetType="Border" x:Key="RoundedButtonBorder2">
+ <Setter Property="Width" Value="150"/>
+ <Setter Property="Height" Value="40"/>
+ <Setter Property="CornerRadius" Value="5"/>
+ <Setter Property="Margin" Value="0,0,0,5"/>
+ <Setter Property="Background" Value="{StaticResource TEXT_PRIMARY_BRUSH}"/>
+ <!-- Light gray background -->
+ <Setter Property="VerticalAlignment" Value="Center"/>
+ <Setter Property="HorizontalAlignment" Value="Left"/>
+ <Setter Property="Cursor" Value="Hand"/>
+ <Style.Triggers>
+ <Trigger Property="IsMouseOver" Value="True">
+ <Setter Property="Background" Value="#DDDDDD"/>
+ <!-- Slightly darker gray on hover -->
+ </Trigger>
+ </Style.Triggers>
+ </Style>
+
<Style TargetType="TextBlock" x:Key="ButtonTextStyle">
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
@@ -232,11 +250,11 @@
<Setter Property="Margin" Value="10,20,0,0"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
- <Setter Property="Background" Value="DarkGray"/>
+ <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Green background -->
- <Setter Property="Foreground" Value="White"/>
+ <Setter Property="Foreground" Value="{StaticResource TEXT_PRIMARY_BRUSH}"/>
<!-- White text -->
- <Setter Property="FontSize" Value="24"/>
+ <Setter Property="FontSize" Value="40"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Cursor" Value="Hand"/>
@@ -254,11 +272,11 @@
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
- <Setter Property="Background" Value="DarkGray"/>
+ <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Darker green on hover -->
</Trigger>
<Trigger Property="IsChecked" Value="True">
- <Setter Property="Background" Value="DarkGray"/>
+ <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Even darker green when checked -->
</Trigger>
</Style.Triggers>
@@ -269,7 +287,7 @@
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="10"/>
- <Setter Property="Background" Value="DarkGray"/>
+ <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Blue background -->
<Setter Property="Foreground" Value="DarkGray"/>
<!-- White text -->
@@ -280,6 +298,7 @@
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
+ <Setter Property="Foreground" Value="Green"/>
<!-- Darker blue on hover -->
</Trigger>
</Style.Triggers>
--
GitLab