From ccac0db9a76fd6b786313b5075be2489b571ff88 Mon Sep 17 00:00:00 2001
From: Sandra Borst <108298114+VerfluchteZocke@users.noreply.github.com>
Date: Sat, 1 Mar 2025 14:17:37 +0100
Subject: [PATCH] improved design of progress screen
---
.../InnoLabProjektDektopApp.csproj | 12 ++
.../Screens/FirstLaunch/02Progress.xaml | 139 +++++++++++-------
.../Styles/Styles.xaml | 16 +-
3 files changed, 109 insertions(+), 58 deletions(-)
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/InnoLabProjektDektopApp.csproj b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/InnoLabProjektDektopApp.csproj
index ef48017..2e00aeb 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/InnoLabProjektDektopApp.csproj
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/InnoLabProjektDektopApp.csproj
@@ -17,6 +17,7 @@
<None Remove="Assets\distractingPrograms.json" />
<None Remove="Assets\distractingWebsites.json" />
<None Remove="Assets\end.png" />
+ <None Remove="Assets\filter.png" />
<None Remove="Assets\gamesicon.png" />
<None Remove="Assets\HappyMascot.jpg" />
<None Remove="Assets\icon.ico" />
@@ -589,10 +590,12 @@
<None Remove="Assets\otherwebsitesicon.png" />
<None Remove="Assets\pause.png" />
<None Remove="Assets\pencilicon.png" />
+ <None Remove="Assets\play.png" />
<None Remove="Assets\pornicon.png" />
<None Remove="Assets\profileicon.png" />
<None Remove="Assets\programsicon.png" />
<None Remove="Assets\settings.json" />
+ <None Remove="Assets\settings.png" />
<None Remove="Assets\shoppingicon.png" />
<None Remove="Assets\skip.png" />
<None Remove="Assets\socialmediaicon.png" />
@@ -634,6 +637,9 @@
<Content Include="Assets\end.png">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
+ <Content Include="Assets\filter.png">
+ <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+ </Content>
<Content Include="Assets\gamesicon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
@@ -643,6 +649,9 @@
<Content Include="Assets\pencilicon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
+ <Content Include="Assets\play.png">
+ <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+ </Content>
<Content Include="Assets\pornicon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
@@ -655,6 +664,9 @@
<Content Include="Assets\settings.json">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
+ <Content Include="Assets\settings.png">
+ <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+ </Content>
<Content Include="Assets\shoppingicon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/02Progress.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/02Progress.xaml
index 7114c23..45dcc2e 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/02Progress.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/02Progress.xaml
@@ -1,67 +1,100 @@
<Page x:Class="InnoLabProjektDektopApp.Progress"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- 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:local="clr-namespace:InnoLabProjektDektopApp"
- xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates"
- mc:Ignorable="d">
- <Grid>
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+ 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:local="clr-namespace:InnoLabProjektDektopApp"
+ mc:Ignorable="d"
+ Background="#1E1E1E">
- <Label Content="Your way to working more focused" HorizontalAlignment="Center" Margin="0,91,0,0" VerticalAlignment="Top" Height="108" Width="780" FontSize="48" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
+ <Grid VerticalAlignment="Center">
+ <!-- Überschrift -->
+ <TextBlock Text="Your way to working more focused"
+ Style="{StaticResource Header0}"
+ Foreground="White"
+ HorizontalAlignment="Center"/>
- <Canvas HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,240,0,0">
- <Path StrokeThickness="3" Canvas.Left="-261" Canvas.Top="45.833" HorizontalAlignment="Center" Stretch="Fill" VerticalAlignment="Top" Width="191" Height="30" Stroke="Black">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="20,100">
- <BezierSegment Point1="100,100" Point2="200,0" Point3="300,50" />
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- <Path StrokeThickness="3" Canvas.Left="50.5" Canvas.Top="45.833" Stretch="Fill" Width="191" Height="30" Stroke="Black" HorizontalAlignment="Center" VerticalAlignment="Top">
- <Path.Data>
- <PathGeometry Figures="M20,100 C100,100 200,0 300,50"/>
- </Path.Data>
- </Path>
- </Canvas>
+ <TextBlock Text="Three steps and you are good to go!"
+ Style="{StaticResource Header2}"
+ TextAlignment="Center"
+ Width="600"
+ Padding="0,70,0,0"/>
- <TextBlock HorizontalAlignment="Center" Height="39" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et" VerticalAlignment="Top" Width="324" Margin="0,188,0,0"/>
- <Label Content="Edit distracting items" HorizontalAlignment="Left" Height="30" Margin="68,331,0,0" VerticalAlignment="Top" Width="125"/>
- <Label Content="Edit Settings" HorizontalAlignment="Left" Height="25" Margin="386,336,0,0" VerticalAlignment="Top" Width="92"/>
- <Label Content="Start focus session" HorizontalAlignment="Left" Height="26" Margin="695,335,0,0" VerticalAlignment="Top" Width="130"/>
- <TextBlock HorizontalAlignment="Left" Height="68" Margin="68,366,0,0" TextWrapping="Wrap" Text="Aliquam erat volutpat. Integer malesuada turpis id fringilla suscipit. Maecenas ultrices, orci vitae convallis mattis." VerticalAlignment="Top" Width="126"/>
- <TextBlock HorizontalAlignment="Center" Height="68" Margin="0,366,0,0" TextWrapping="Wrap" Text="Aliquam erat volutpat. Integer malesuada turpis id fringilla suscipit. Maecenas ultrices, orci vitae convallis mattis." VerticalAlignment="Top" Width="124"/>
- <TextBlock HorizontalAlignment="Left" Height="68" Margin="695,366,0,0" TextWrapping="Wrap" Text="Aliquam erat volutpat. Integer malesuada turpis id fringilla suscipit. Maecenas ultrices, orci vitae convallis mattis." VerticalAlignment="Top" Width="125"/>
+ <Grid Margin="0,130,0,0">
+ <!-- Drei Karten für die Schritte -->
+ <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Panel.ZIndex="1">
+ <!-- Erste Box -->
+ <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Width="200" Height="200" Padding="15" Margin="10,0">
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <Border Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="20" Width="80" Height="80" HorizontalAlignment="Center" VerticalAlignment="Top">
+ <Image Source="pack://application:,,,/Assets/filter.png" Width="50" Height="50" Margin="15"/>
+ </Border>
+ <TextBlock Text="Edit distracting items" Style="{StaticResource Header3}" Foreground="White" TextAlignment="Center" Margin="0,10,0,0"/>
+ <TextBlock Text="Organize the websites and programs that distract you in different folders."
+ Margin="0,5,0,0" FontSize="12" TextAlignment="Center" TextWrapping="Wrap"/>
+ </StackPanel>
+ </Border>
+ <!-- Zweite Box -->
+ <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Width="200" Height="200" Padding="15" Margin="10,0">
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <Border Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="20" Width="80" Height="80" HorizontalAlignment="Center" VerticalAlignment="Top">
+ <Image Source="pack://application:,,,/Assets/settings.png" Width="50" Height="50" Margin="15"/>
+ </Border>
+ <TextBlock Text="Edit Settings" Style="{StaticResource Header3}" Foreground="White" TextAlignment="Center" Margin="0,10,0,0"/>
+ <TextBlock Text="Decide what should happen when you are distracted. Do you want a motivating mascot?"
+ Margin="0,5,0,0" FontSize="12" TextAlignment="Center" TextWrapping="Wrap" />
+ </StackPanel>
+ </Border>
+
+ <!-- Dritte Box -->
+ <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Width="200" Height="200" Padding="15" Margin="10,0">
+ <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+ <Border Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="20" Width="80" Height="80" HorizontalAlignment="Center" VerticalAlignment="Top">
+ <Image Source="pack://application:,,,/Assets/play.png" Width="50" Height="50" Margin="15"/>
+ </Border>
+ <TextBlock Text="Start focus session" Style="{StaticResource Header3}" Foreground="White" TextAlignment="Center" Margin="0,10,0,0"/>
+ <TextBlock Text="Check the settings for the current session. Then start!"
+ FontSize="12" Margin="0,5,0,0" TextAlignment="Center" TextWrapping="Wrap"/>
+ </StackPanel>
+ </Border>
+ </StackPanel>
+
+
+ <!-- Verbindungslinien -->
+ <Canvas HorizontalAlignment="Center" VerticalAlignment="Top" Panel.ZIndex="2">
+ <Path StrokeThickness="3" Canvas.Left="-171" Canvas.Top="40.833" Stretch="Fill" Width="120" Height="30" Stroke="White">
+ <Path.Data>
+ <PathGeometry>
+ <PathFigure StartPoint="20,100">
+ <BezierSegment Point1="100,100" Point2="200,0" Point3="300,50" />
+ </PathFigure>
+ </PathGeometry>
+ </Path.Data>
+ </Path>
+ <Path StrokeThickness="3" Canvas.Left="50.5" Canvas.Top="40.833" Stretch="Fill" Width="120" Height="30" Stroke="White" HorizontalAlignment="Center" VerticalAlignment="Top">
+ <Path.Data>
+ <PathGeometry Figures="M20,100 C100,100 200,0 300,50"/>
+ </Path.Data>
+ </Path>
+ </Canvas>
+ </Grid>
+
+
<!-- Pagination -->
- <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,478,0,0" Width="265" VerticalAlignment="Top">
- <Button Content="Previous" Width="70" Margin="5" Click="PreviousPage_Click" />
+ <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,370,0,0" VerticalAlignment="Top">
+ <Border Style="{StaticResource RoundedButtonBorder}" MouseDown="PreviousPage_Click" Width="100" Margin="10">
+ <TextBlock Text="Previous" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
<StackPanel Orientation="Horizontal">
- <Ellipse Width="15" Height="15" Fill="Black" Margin="5"/>
- <!-- Aktive Seite -->
+ <Ellipse Width="15" Height="15" Fill="{StaticResource TEXT_PRIMARY_BRUSH}" Margin="5"/>
<Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
- <!-- Inaktive Seite -->
<Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
<Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
</StackPanel>
-
- <!--
- <Button Content="1" Width="20" Margin="5" Click="first_Page" />
- <Button Content="2" Width="20" Margin="5" Click="Second_Page" />
- <Button Content="3" Width="20" Margin="5" Click="third_Page" />
- <Button Content="4" Width="20" Margin="5" Click="fourth_Page" />
- <Button Content="5" Width="20" Margin="5" Click="fifth_Page" />
- -->
-
- <Button Content="Next" Width="70" Margin="5" Click="NextPage_Click" />
+ <Border Style="{StaticResource RoundedButtonBorder}" MouseDown="NextPage_Click" Width="100" Margin="10">
+ <TextBlock Text="Next" Style="{StaticResource ButtonTextStyle}" />
+ </Border>
</StackPanel>
- <Image HorizontalAlignment="Left" Height="57" Margin="81,269,0,0" VerticalAlignment="Top" Width="54" Source="/Screens/FirstLaunch/filter.png"/>
- <Image HorizontalAlignment="Center" Height="57" Margin="0,269,0,0" VerticalAlignment="Top" Width="54" Source="/Screens/FirstLaunch/settings.png"/>
- <Image HorizontalAlignment="Left" Height="57" Margin="731,269,0,0" VerticalAlignment="Top" Width="54" Source="/Screens/FirstLaunch/play.png"/>
-
-
</Grid>
-
</Page>
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
index 6de17a5..5d23978 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
@@ -77,6 +77,7 @@
<!-- Text -->
<Style TargetType="TextBlock">
<Setter Property="ToolTipService.InitialShowDelay" Value="0" />
+ <Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Foreground" Value="{StaticResource TEXT_PRIMARY_BRUSH}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
@@ -92,19 +93,24 @@
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Bold"/>
- <Setter Property="TextWrapping" Value="Wrap"/>
</Style>
<!-- Style für Header 2 -->
<Style TargetType="TextBlock" x:Key="Header2" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
- <Setter Property="FontWeight" Value="SemiBold"/>
- <Setter Property="TextWrapping" Value="Wrap"/>
- <Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
+ <Setter Property="FontWeight" Value="SemiBold" />
</Style>
- <!-- Style für Standardtext -->
+ <!-- Style für Header 3 -->
+ <Style TargetType="TextBlock" x:Key="Header3" BasedOn="{StaticResource {x:Type TextBlock}}">
+ <Setter Property="FontFamily" Value="Segoe UI"/>
+ <Setter Property="FontSize" Value="16"/>
+ <Setter Property="FontWeight" Value="Bold"/>
+ </Style>
+
+
+ <!-- TO DELETE: Style für Standardtext -->
<Style TargetType="TextBlock" x:Key="StandardText">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="14"/>
--
GitLab