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

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

improved design of distractions screen (not completely finished yet)

See merge request !43
parents c317d389 b49a4282
No related branches found
No related tags found
1 merge request!43improved design of distractions screen (not completely finished yet)
...@@ -5,13 +5,12 @@ ...@@ -5,13 +5,12 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InnoLabProjektDektopApp" xmlns:local="clr-namespace:InnoLabProjektDektopApp"
mc:Ignorable="d" mc:Ignorable="d"
Background="#1E1E1E"> Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid VerticalAlignment="Center"> <Grid VerticalAlignment="Center">
<!-- Überschrift --> <!-- Überschrift -->
<TextBlock Text="Your way to working more focused" <TextBlock Text="Your way to working more focused"
Style="{StaticResource Header0}" Style="{StaticResource Header0}"
Foreground="White"
HorizontalAlignment="Center"/> HorizontalAlignment="Center"/>
<TextBlock Text="Three steps and you are good to go!" <TextBlock Text="Three steps and you are good to go!"
......
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InnoLabProjektDektopApp" xmlns:local="clr-namespace:InnoLabProjektDektopApp"
xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates" xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates"
mc:Ignorable="d"> mc:Ignorable="d"
<Grid> Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid VerticalAlignment="Center">
<StackPanel Margin="20,0,20,20"> <StackPanel Margin="20,0,20,20">
...@@ -25,10 +26,12 @@ ...@@ -25,10 +26,12 @@
HorizontalAlignment="Left" /> HorizontalAlignment="Left" />
<!-- Suchfeld --> <!-- Suchfeld -->
<DockPanel Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,0,0">
<Border CornerRadius="10" Padding="10" Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,0,0" Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}">
<!-- Input Field with Placeholder --> <!-- Input Field with Placeholder -->
<Grid> <Grid>
<TextBox x:Name="SearchBox" <TextBox x:Name="SearchBox"
Margin="10,0"
Width="150" Width="150"
Height="30" Height="30"
FontSize="14" FontSize="14"
...@@ -36,37 +39,43 @@ ...@@ -36,37 +39,43 @@
Padding="5" Padding="5"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Background="Transparent" Background="Transparent"
Foreground="Black" Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
BorderBrush="Gray" BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
BorderThickness="1" BorderThickness="1"
TextChanged="SearchBox_TextChanged" /> TextChanged="SearchBox_TextChanged" />
<TextBlock x:Name="SearchPlaceholder" <TextBlock x:Name="SearchPlaceholder"
Text="Search..." Text="Search..."
VerticalAlignment="Center" VerticalAlignment="Center"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Foreground="Gray" Foreground="{StaticResource TEXT_SECONDARY_BRUSH}"
FontSize="14" FontSize="14"
Padding="5" Padding="5"
IsHitTestVisible="False" IsHitTestVisible="False"
Margin="5,0,0,0" /> Margin="15,0,0,0" />
<Border Width="30"
Height="30"
Margin="165,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
MouseDown="SearchButton_Click">
<TextBlock Text="🔍"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
</Grid> </Grid>
<!-- Lupe-Symbol --> <!-- Lupe-Symbol -->
<Button Width="30"
Height="30" </Border>
Margin="5,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Click="SearchButton_Click">
<TextBlock Text="🔍"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Button>
</DockPanel>
</Grid> </Grid>
<TextBlock Style="{StaticResource StandardText}" Text="By clicking on each category, you can change the programs/websites that should be marked as distracting."/> <TextBlock Text="By clicking on each category, you can change the programs/websites that should be marked as distracting."/>
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="20,0,0,8" Height="0"> <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="20,0,0,8" Height="0">
<StackPanel x:Name="SearchResultsPanel" /> <StackPanel x:Name="SearchResultsPanel" />
...@@ -76,7 +85,7 @@ ...@@ -76,7 +85,7 @@
<!-- Kategorien in UniformGrid --> <!-- Kategorien in UniformGrid -->
<Border Background="#2C2C2C" CornerRadius="10" Padding="10" Margin="0,10,0,0"> <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Padding="10" Margin="0,10,0,0">
<Grid> <Grid>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" /> <ColumnDefinition Width="2*" />
...@@ -163,104 +172,98 @@ ...@@ -163,104 +172,98 @@
<Border Background="#E6F7FF" CornerRadius="10" Padding="10" Margin="0,10,0,0"> <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Padding="10" Margin="0,10,0,0">
<Grid> <Grid>
<UniformGrid Columns="3" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="0,10,0,0"> <UniformGrid Columns="3" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="0,10,0,0">
<!-- Kategorie: Social Media --> <!-- Kategorie: Social Media -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/socialmediaicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Source="pack://application:,,,/Assets/socialmediaicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" Width="100"/>
<CheckBox x:Name="SocialMediaCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="SocialMediaCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Social Media"> <Border MouseDown="NavigateToDistractionList" DataContext="Social Media">
<TextBlock Text="Social Media" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Social Media >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Social Media">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<!-- Kategorie: Shopping --> <!-- Kategorie: Shopping -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/shoppingicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Width="100" Source="pack://application:,,,/Assets/shoppingicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CheckBox x:Name="ShoppingCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="ShoppingCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Shopping"> <Border MouseDown="NavigateToDistractionList" DataContext="Shopping">
<TextBlock Text="Shopping" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Shopping >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Shopping">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<!-- Kategorie: Games --> <!-- Kategorie: Games -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/gamesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Width="100" Source="pack://application:,,,/Assets/gamesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CheckBox x:Name="GamesCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="GamesCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Games"> <Border MouseDown="NavigateToDistractionList" DataContext="Games">
<TextBlock Text="Games" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Games >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Games">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<!-- Kategorie: Porn --> <!-- Kategorie: Porn -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/pornicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Width="100" Source="pack://application:,,,/Assets/pornicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CheckBox x:Name="PornCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="PornCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Porn"> <Border MouseDown="NavigateToDistractionList" DataContext="Porn">
<TextBlock Text="Porn" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Porn >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Porn">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<!-- Kategorie: Other Websites --> <!-- Kategorie: Other Websites -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/otherwebsitesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Width="80" Source="pack://application:,,,/Assets/otherwebsitesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CheckBox x:Name="OtherWebsitesCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="OtherWebsitesCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Websites"> <Border MouseDown="NavigateToDistractionList" DataContext="Other Websites">
<TextBlock Text="Other Websites" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Other Websites >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Websites">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
<!-- Kategorie: Other Programs --> <!-- Kategorie: Other Programs -->
<StackPanel Margin="10"> <StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown"> <Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/programsicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Grid>
<Image Width="100" Source="pack://application:,,,/Assets/programsicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CheckBox x:Name="OtherProgramsCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" /> <CheckBox x:Name="OtherProgramsCheckBox" IsChecked="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10" />
</Grid> </Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Programs"> <Border MouseDown="NavigateToDistractionList" DataContext="Other Programs">
<TextBlock Text="Other Programs" FontSize="14" FontWeight="Bold" /> <TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Other Programs >" />
</Button> </Border>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Programs">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</UniformGrid> </UniformGrid>
...@@ -270,8 +273,10 @@ ...@@ -270,8 +273,10 @@
</StackPanel> </StackPanel>
<!-- Pagination --> <!-- Pagination -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,478,0,0" Width="265" VerticalAlignment="Top"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,520,0,0" VerticalAlignment="Top">
<Button Content="Previous" Width="70" Margin="5" Click="PreviousPage_Click" /> <Border Style="{StaticResource RoundedButtonBorder}" MouseDown="PreviousPage_Click" Width="100" Margin="10">
<TextBlock Text="Previous" Style="{StaticResource ButtonTextStyle}" />
</Border>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<Ellipse Width="15" Height="15" Fill="Black" Margin="5"/> <Ellipse Width="15" Height="15" Fill="Black" Margin="5"/>
<!-- Aktive Seite --> <!-- Aktive Seite -->
...@@ -289,7 +294,9 @@ ...@@ -289,7 +294,9 @@
<Button Content="5" Width="20" Margin="5" Click="fifth_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> </StackPanel>
</Grid> </Grid>
......
...@@ -219,12 +219,12 @@ namespace InnoLabProjektDektopApp ...@@ -219,12 +219,12 @@ namespace InnoLabProjektDektopApp
private void NavigateToDistractionList(object sender, RoutedEventArgs e) private void NavigateToDistractionList(object sender, RoutedEventArgs e)
{ {
var clickedButton = sender as Button; var clickedButton = sender as Border;
if (clickedButton != null) if (clickedButton != null)
{ {
// Kategorie aus Tag lesen // Kategorie aus Tag lesen
string category = clickedButton.Tag?.ToString(); string category = clickedButton.DataContext?.ToString();
if (!string.IsNullOrEmpty(category)) if (!string.IsNullOrEmpty(category))
{ {
......
...@@ -72,6 +72,21 @@ ...@@ -72,6 +72,21 @@
<Setter Property="TextAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/>
</Style> </Style>
<Style TargetType="TextBlock" x:Key="ButtonTextStyle2">
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="{StaticResource TEXT_PRIMARY_BRUSH}"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource TEXT_SECONDARY_BRUSH}"/>
<!-- Slightly darker gray on hover -->
</Trigger>
</Style.Triggers>
</Style>
<!-- Text --> <!-- Text -->
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment