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

improved design of distractions screen (not completely finished yet)

parent f70f0fa6
No related branches found
No related tags found
1 merge request!43improved design of distractions screen (not completely finished yet)
Show whitespace changes
Inline Side-by-side
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/02Progress.xaml
+ 1
− 2
View file @ b49a4282
......@@ -5,13 +5,12 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InnoLabProjektDektopApp"
mc:Ignorable="d"
Background="#1E1E1E">
Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid VerticalAlignment="Center">
<!-- Überschrift -->
<TextBlock Text="Your way to working more focused"
Style="{StaticResource Header0}"
Foreground="White"
HorizontalAlignment="Center"/>
<TextBlock Text="Three steps and you are good to go!"
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml
+ 86
− 79
View file @ b49a4282
......@@ -5,8 +5,9 @@
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>
mc:Ignorable="d"
Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
<Grid VerticalAlignment="Center">
<StackPanel Margin="20,0,20,20">
......@@ -25,10 +26,12 @@
HorizontalAlignment="Left" />
<!-- 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 -->
<Grid>
<TextBox x:Name="SearchBox"
Margin="10,0"
Width="150"
Height="30"
FontSize="14"
......@@ -36,37 +39,43 @@
Padding="5"
HorizontalAlignment="Left"
Background="Transparent"
Foreground="Black"
BorderBrush="Gray"
Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
BorderThickness="1"
TextChanged="SearchBox_TextChanged" />
<TextBlock x:Name="SearchPlaceholder"
Text="Search..."
VerticalAlignment="Center"
HorizontalAlignment="Left"
Foreground="Gray"
Foreground="{StaticResource TEXT_SECONDARY_BRUSH}"
FontSize="14"
Padding="5"
IsHitTestVisible="False"
Margin="5,0,0,0" />
</Grid>
Margin="15,0,0,0" />
<!-- Lupe-Symbol -->
<Button Width="30"
<Border Width="30"
Height="30"
Margin="5,0,0,0"
Margin="165,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Click="SearchButton_Click">
MouseDown="SearchButton_Click">
<TextBlock Text="🔍"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Button>
</DockPanel>
</Border>
</Grid>
<TextBlock Style="{StaticResource StandardText}" Text="By clicking on each category, you can change the programs/websites that should be marked as distracting."/>
<!-- Lupe-Symbol -->
</Border>
</Grid>
<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">
<StackPanel x:Name="SearchResultsPanel" />
......@@ -76,7 +85,7 @@
<!-- 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.ColumnDefinitions>
<ColumnDefinition Width="2*" />
......@@ -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>
<UniformGrid Columns="3" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="0,10,0,0">
<!-- Kategorie: Social Media -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/socialmediaicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Social Media">
<TextBlock Text="Social Media" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Social Media">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Social Media">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Social Media >" />
</Border>
</StackPanel>
</StackPanel>
<!-- Kategorie: Shopping -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/shoppingicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Shopping">
<TextBlock Text="Shopping" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Shopping">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Shopping">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Shopping >" />
</Border>
</StackPanel>
</StackPanel>
<!-- Kategorie: Games -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/gamesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Games">
<TextBlock Text="Games" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Games">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Games">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Games >" />
</Border>
</StackPanel>
</StackPanel>
<!-- Kategorie: Porn -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/pornicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Porn">
<TextBlock Text="Porn" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Porn">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Porn">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Porn >" />
</Border>
</StackPanel>
</StackPanel>
<!-- Kategorie: Other Websites -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/otherwebsitesicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Websites">
<TextBlock Text="Other Websites" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Websites">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Other Websites">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Other Websites >" />
</Border>
</StackPanel>
</StackPanel>
<!-- Kategorie: Other Programs -->
<StackPanel Margin="10">
<Grid Background="White" Height="120" Width="150" MouseDown="Grid_MouseDown">
<Image Source="pack://application:,,,/Assets/programsicon.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Border CornerRadius="20" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" Height="120" Width="170" MouseDown="Grid_MouseDown">
<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" />
</Grid>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,5,0,0">
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Programs">
<TextBlock Text="Other Programs" FontSize="14" FontWeight="Bold" />
</Button>
<Button Background="Transparent" BorderThickness="0" Click="NavigateToDistractionList" Tag="Other Programs">
<TextBlock Text=" >" FontSize="14" FontWeight="Bold" Margin="5,0,0,0" />
</Button>
<Border MouseDown="NavigateToDistractionList" DataContext="Other Programs">
<TextBlock Style="{StaticResource ButtonTextStyle2}" Text="Other Programs >" />
</Border>
</StackPanel>
</StackPanel>
</UniformGrid>
......@@ -270,8 +273,10 @@
</StackPanel>
<!-- 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,520,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 -->
......@@ -289,7 +294,9 @@
<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>
</Grid>
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs
+ 2
− 2
View file @ b49a4282
......@@ -219,12 +219,12 @@ namespace InnoLabProjektDektopApp
private void NavigateToDistractionList(object sender, RoutedEventArgs e)
{
var clickedButton = sender as Button;
var clickedButton = sender as Border;
if (clickedButton != null)
{
// Kategorie aus Tag lesen
string category = clickedButton.Tag?.ToString();
string category = clickedButton.DataContext?.ToString();
if (!string.IsNullOrEmpty(category))
{
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+ 15
− 0
View file @ b49a4282
......@@ -72,6 +72,21 @@
<Setter Property="TextAlignment" Value="Center"/>
</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 -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment