Skip to content
Snippets Groups Projects
Commit 8cea1434 authored by Sandra Borst's avatar Sandra Borst
Browse files

Merge branch 'design-of-session-screen' into 'develop' 

improved design of session screen as well as burger menu

See merge request !57
parents 1242e57d 0a9b9785
No related branches found
No related tags found
1 merge request!57improved design of session screen as well as burger menu
Show whitespace changes
Inline Side-by-side
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml
+ 63
− 35
View file @ 8cea1434
...@@ -7,54 +7,82 @@ ...@@ -7,54 +7,82 @@
xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates" xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates"
mc:Ignorable="d" mc:Ignorable="d"
Unloaded="Page_Unloaded" Unloaded="Page_Unloaded"
Height="550" Width="900"> Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid> <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" <StackPanel x:Name="MenuPanel"
Visibility="Collapsed" Visibility="Collapsed"
VerticalAlignment="Top" VerticalAlignment="Top"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Margin="10,80,0,0"> Margin="10,80,0,0">
<Button Content="Distractions" <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_2">
Style="{StaticResource MenuButtonStyle}" <TextBlock Text="Distractions" Style="{StaticResource ButtonTextStyle}" />
Click="Button_Click_2"/> </Border>
<Button Content="ProgrammsList"
Style="{StaticResource MenuButtonStyle}" <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_3">
Click="Button_Click_3"/> <TextBlock Text="ProgrammsList" Style="{StaticResource ButtonTextStyle}" />
<Button Content="Overview" </Border>
Style="{StaticResource MenuButtonStyle}"
Click="Button_Click_4"/> <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_4">
<Button Content="Statistics" <TextBlock Text="Overview" Style="{StaticResource ButtonTextStyle}" />
Style="{StaticResource MenuButtonStyle}" </Border>
Click="Button_Click_5"/>
<Button Content="Abonnement" <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_5">
Style="{StaticResource MenuButtonStyle}" <TextBlock Text="Statistics" Style="{StaticResource ButtonTextStyle}" />
Click="Button_Click_6"/> </Border>
<Button Content="Contract"
Style="{StaticResource MenuButtonStyle}" <Border Style="{StaticResource RoundedButtonBorder2}" MouseDown="Button_Click_6">
Click="Button_Click_7"/> <TextBlock Text="Abonnement" Style="{StaticResource ButtonTextStyle}" />
<Button Content="Settings" </Border>
Style="{StaticResource MenuButtonStyle}"
Click="Button_Click_8"/> <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> </StackPanel>
<!-- <header:HeaderTemplate VerticalAlignment="Center" Height="534"/> --> <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}"
<Button Margin="0,100,150,10" Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" BorderBrush="Transparent" Click="DiscardSession_Click"> CornerRadius="20" Padding="30"
HorizontalAlignment="Center" VerticalAlignment="Center" >
<Grid> <Grid>
<Line X1="5" Y1="5" X2="35" Y2="35" Stroke="Gray" StrokeThickness="5" /> <Border
<Line X1="5" Y1="35" X2="35" Y2="5" Stroke="Gray" StrokeThickness="5" /> 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> </Grid>
</Button> </Border>
<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"/> <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> </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 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"/>--> <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> </Grid>
</Page> </Page>
\ No newline at end of file
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/02Session.xaml.cs
+ 7
− 7
View file @ 8cea1434
...@@ -80,26 +80,26 @@ namespace InnoLabProjektDektopApp ...@@ -80,26 +80,26 @@ namespace InnoLabProjektDektopApp
seconds = maxTime; // Zeit für die Fokusperiode seconds = maxTime; // Zeit für die Fokusperiode
isBreakPeriod = false; // Zurück zum Fokus isBreakPeriod = false; // Zurück zum Fokus
currentSession++; // Gehe zum nächsten Zyklus currentSession++; // Gehe zum nächsten Zyklus
PlayPauseButton.Content = "Pause"; PlayPauseButtonText.Text = "Pause";
} }
private void HandleMonitorPaused(object sender, EventArgs e) private void HandleMonitorPaused(object sender, EventArgs e)
{ {
timer.Stop(); // Stop the time timer.Stop(); // Stop the time
step = 0; // Stop counting down step = 0; // Stop counting down
PlayPauseButton.Content = "Continue"; // Update button text PlayPauseButtonText.Text = "Continue";
} }
private void HandleMonitorResumed(object sender, EventArgs e) private void HandleMonitorResumed(object sender, EventArgs e)
{ {
timer.Start(); timer.Start();
step = -1; // Set step to countdown step = -1; // Set step to countdown
PlayPauseButton.Content = "Pause"; PlayPauseButtonText.Text = "Pause";
} }
private void HandleMonitorBreakStarted(object sender, EventArgs e) private void HandleMonitorBreakStarted(object sender, EventArgs e)
{ {
PlayPauseButton.Content = "Skip Break"; PlayPauseButtonText.Text = "Skip Break";
seconds = breakPeriod; // Zeit für die Pause seconds = breakPeriod; // Zeit für die Pause
isBreakPeriod = true; // Wechsel in den Pausenmodus isBreakPeriod = true; // Wechsel in den Pausenmodus
} }
...@@ -199,7 +199,7 @@ namespace InnoLabProjektDektopApp ...@@ -199,7 +199,7 @@ namespace InnoLabProjektDektopApp
Width = 20, Width = 20,
Height = 20, Height = 20,
Margin = new Thickness(10), 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); CyclesIndicatorPanel.Children.Add(filledCircle);
} }
...@@ -219,8 +219,8 @@ namespace InnoLabProjektDektopApp ...@@ -219,8 +219,8 @@ namespace InnoLabProjektDektopApp
Width = 50, // Gleiche Breite wie der Hintergrund Width = 50, // Gleiche Breite wie der Hintergrund
Height = 20, // Gleiche Höhe wie der Hintergrund Height = 20, // Gleiche Höhe wie der Hintergrund
Fill = GradientGenerator.GenerateTwoColorBrush( Fill = GradientGenerator.GenerateTwoColorBrush(
Color.FromRgb(72, 98, 132), Color.FromRgb(173, 216, 230),
Color.FromRgb(222, 222, 222), Color.FromRgb(238, 238, 238),
1 - (seconds / (double)maxTime) 1 - (seconds / (double)maxTime)
), ),
RadiusX = 10, RadiusX = 10,
... ...
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+ 25
− 6
View file @ 8cea1434
...@@ -98,6 +98,24 @@ ...@@ -98,6 +98,24 @@
</Style.Triggers> </Style.Triggers>
</Style> </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"> <Style TargetType="TextBlock" x:Key="ButtonTextStyle">
<Setter Property="FontSize" Value="16"/> <Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/> <Setter Property="FontWeight" Value="Bold"/>
...@@ -232,11 +250,11 @@ ...@@ -232,11 +250,11 @@
<Setter Property="Margin" Value="10,20,0,0"/> <Setter Property="Margin" Value="10,20,0,0"/>
<Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Background" Value="DarkGray"/> <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Green background --> <!-- Green background -->
<Setter Property="Foreground" Value="White"/> <Setter Property="Foreground" Value="{StaticResource TEXT_PRIMARY_BRUSH}"/>
<!-- White text --> <!-- White text -->
<Setter Property="FontSize" Value="24"/> <Setter Property="FontSize" Value="40"/>
<Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/> <Setter Property="BorderThickness" Value="0"/>
<Setter Property="Cursor" Value="Hand"/> <Setter Property="Cursor" Value="Hand"/>
...@@ -254,11 +272,11 @@ ...@@ -254,11 +272,11 @@
</Setter> </Setter>
<Style.Triggers> <Style.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGray"/> <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Darker green on hover --> <!-- Darker green on hover -->
</Trigger> </Trigger>
<Trigger Property="IsChecked" Value="True"> <Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="DarkGray"/> <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Even darker green when checked --> <!-- Even darker green when checked -->
</Trigger> </Trigger>
</Style.Triggers> </Style.Triggers>
...@@ -269,7 +287,7 @@ ...@@ -269,7 +287,7 @@
<Setter Property="Margin" Value="5"/> <Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="10"/> <Setter Property="Padding" Value="10"/>
<Setter Property="Background" Value="DarkGray"/> <Setter Property="Background" Value="{StaticResource BACKGROUND_SECONDARY_BRUSH}"/>
<!-- Blue background --> <!-- Blue background -->
<Setter Property="Foreground" Value="DarkGray"/> <Setter Property="Foreground" Value="DarkGray"/>
<!-- White text --> <!-- White text -->
...@@ -280,6 +298,7 @@ ...@@ -280,6 +298,7 @@
<Style.Triggers> <Style.Triggers>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/> <Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
<!-- Darker blue on hover --> <!-- Darker blue on hover -->
</Trigger> </Trigger>
</Style.Triggers> </Style.Triggers>
... ...
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment