From 178b2ccf1632c46525b73ae09925feb257d59cb9 Mon Sep 17 00:00:00 2001
From: Sandra Borst <108298114+VerfluchteZocke@users.noreply.github.com>
Date: Sat, 1 Mar 2025 19:33:38 +0100
Subject: [PATCH] improved design of distractions page; improved combobox (now
listbox + popup)
---
.../Screens/FirstLaunch/03_0Distractions.xaml | 121 +++++++++---------
.../FirstLaunch/03_0Distractions.xaml.cs | 42 +++++-
.../Styles/Styles.xaml | 2 +
3 files changed, 106 insertions(+), 59 deletions(-)
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml
index 2935f63..84252f5 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml
@@ -41,7 +41,7 @@
Background="Transparent"
Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
- BorderThickness="1"
+ BorderThickness="0"
TextChanged="SearchBox_TextChanged" />
<TextBlock x:Name="SearchPlaceholder"
Text="Search..."
@@ -53,6 +53,13 @@
IsHitTestVisible="False"
Margin="15,0,0,0" />
+ <!-- Untere Linie als Border -->
+ <Border Height="1"
+ Background="{StaticResource TEXT_PRIMARY_BRUSH}"
+ VerticalAlignment="Bottom"
+ HorizontalAlignment="Stretch"
+ Margin="10,0,40,0" />
+
<Border Width="30"
Height="30"
Margin="165,0,0,0"
@@ -62,15 +69,14 @@ MouseDown="SearchButton_Click">
<TextBlock Text="🔍"
FontSize="14"
VerticalAlignment="Center"
- HorizontalAlignment="Center" />
+ HorizontalAlignment="Center"
+ Style="{StaticResource ButtonTextStyle2}"/>
+
</Border>
</Grid>
-
- <!-- Lupe-Symbol -->
-
</Border>
@@ -88,20 +94,17 @@ MouseDown="SearchButton_Click">
<Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Padding="10" Margin="0,10,0,0">
<Grid>
<Grid.ColumnDefinitions>
- <ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
- <ColumnDefinition Width="2*" />
- <ColumnDefinition Width="Auto" />
+ <ColumnDefinition Width="5*" />
+ <ColumnDefinition Width="3*" />
+ <ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- Label -->
<TextBlock Text="Add a distracting website:"
VerticalAlignment="Center"
- Foreground="White"
- FontSize="14"
- FontWeight="Bold"
- Grid.Column="0"
- Margin="10,0,10,0" />
+ Margin="10,0,10,0"
+ Style="{StaticResource Header3}"/>
<!-- Input Field with Placeholder -->
<Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,0,10,0">
@@ -112,7 +115,7 @@ MouseDown="SearchButton_Click">
Background="Transparent"
Foreground="White"
BorderBrush="Gray"
- BorderThickness="1"
+ BorderThickness="0"
TextChanged="UrlInputBox_TextChanged" />
<TextBlock x:Name="UrlPlaceholder"
Text="Url"
@@ -122,51 +125,55 @@ MouseDown="SearchButton_Click">
Padding="5"
IsHitTestVisible="False"
Margin="5,0,0,0" />
+
+ <!-- Untere Linie als Border -->
+ <Border Height="1"
+ Background="{StaticResource TEXT_PRIMARY_BRUSH}"
+ VerticalAlignment="Bottom"
+ HorizontalAlignment="Stretch"
+ Margin="0,0,0,0" />
</Grid>
- <!-- Dropdown for Category -->
- <StackPanel Grid.Column="2" VerticalAlignment="Center" Margin="0,0,10,0">
- <TextBlock Text="Category"
- HorizontalAlignment="Left"
- Foreground="White"
- FontSize="14"
- FontWeight="Bold"
- Margin="0,0,0,5" />
- <ComboBox VerticalAlignment="Center"
- x:Name="CategoryComboBox"
- Padding="5"
- FontSize="14"
- Foreground="Black"
- Background="#ADD8E6"
- FontWeight="Bold"
- SelectedIndex="4">
-
- <ComboBoxItem Content="Social Media" />
- <ComboBoxItem Content="Shopping" />
- <ComboBoxItem Content="Games" />
- <ComboBoxItem Content="Porn" />
- <ComboBoxItem Content="Other Websites" />
- </ComboBox>
+ <StackPanel Grid.Column="2" VerticalAlignment="Center" Margin="0,0,10,0" HorizontalAlignment="Center" Width="200">
+ <TextBlock Text="Category" HorizontalAlignment="Left" Margin="0,0,0,5" Style="{StaticResource Header3}"/>
+
+ <!-- Button zum Öffnen des Dropdowns -->
+ <Border Name="DropdownBorder" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black"
+ Width="200" MouseDown="TogglePopup">
+ <Grid>
+ <TextBlock x:Name="SelectedText" Text="Select Category" Foreground="{StaticResource BACKGROUND_PRIMARY_BRUSH}" FontWeight="Bold" VerticalAlignment="Center" Margin="10,0,30,0"/>
+ <Path Fill="{StaticResource BACKGROUND_PRIMARY_BRUSH}" Data="M 0 0 L 8 8 L 16 0 Z" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10"/>
+ </Grid>
+ </Border>
+
+ <!-- Popup für die Dropdown-Liste -->
+ <Popup Name="PopupMenu" Placement="Bottom" StaysOpen="True" Width="200">
+ <Border Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Width="200">
+ <ListBox x:Name="CategoryList" SelectionChanged="CategoryList_SelectionChanged" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}">
+ <ListBoxItem Content="Social Media"/>
+ <ListBoxItem Content="Shopping"/>
+ <ListBoxItem Content="Games"/>
+ <ListBoxItem Content="Porn"/>
+ <ListBoxItem Content="Other Websites" />
+ </ListBox>
+ </Border>
+ </Popup>
</StackPanel>
- <!-- Add Button -->
- <Button Width="30"
- Height="30"
- VerticalAlignment="Center"
- HorizontalAlignment="Right"
- Grid.Column="3"
- Margin="0"
- BorderThickness="0"
- ToolTip="Add"
- Click="AddButton_Click">
- <TextBlock Text="+"
- FontSize="20"
- Foreground="#333436"
- VerticalAlignment="Center"
- HorizontalAlignment="Center"
- />
- </Button>
+
+
+
+
+
+ <!-- Add Button als Border -->
+ <Border Width="40" Height="40" CornerRadius="10" Background="{StaticResource TEXT_PRIMARY_BRUSH}" Cursor="Hand"
+ Grid.Column="3"
+ VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0"
+ MouseDown="AddButton_Click">
+ <TextBlock Text="+" FontSize="24" FontWeight="Bold" Foreground="Black"
+ VerticalAlignment="Center" HorizontalAlignment="Center"/>
+ </Border>
</Grid>
</Border>
@@ -273,14 +280,14 @@ MouseDown="SearchButton_Click">
</StackPanel>
<!-- Pagination -->
- <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,520,0,0" VerticalAlignment="Top">
+ <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,550,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"/>
+ <Ellipse Width="15" Height="15" Fill="{StaticResource TEXT_PRIMARY_BRUSH}" Margin="5"/>
<!-- Aktive Seite -->
- <Ellipse Width="15" Height="15" Fill="Black" Margin="5"/>
+ <Ellipse Width="15" Height="15" Fill="{StaticResource TEXT_PRIMARY_BRUSH}" Margin="5"/>
<!-- Inaktive Seite -->
<Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
<Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs
index 93e9850..ac074af 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs
@@ -28,6 +28,7 @@ namespace InnoLabProjektDektopApp
{
InitializeComponent();
LoadJsonData();
+ this.MouseDown += ClosePopupOnClickOutside;
}
@@ -147,7 +148,7 @@ namespace InnoLabProjektDektopApp
private void AddButton_Click(object sender, RoutedEventArgs e)
{
string enteredUrl = UrlInputBox.Text.Trim();
- string selectedCategory = (CategoryComboBox.SelectedItem as ComboBoxItem)?.Content?.ToString();
+ string selectedCategory = (CategoryList.SelectedItem as ListBoxItem)?.Content?.ToString();
// Validate category selection
if (string.IsNullOrEmpty(selectedCategory))
@@ -174,9 +175,13 @@ namespace InnoLabProjektDektopApp
// Clear input fields
UrlInputBox.Clear();
- CategoryComboBox.SelectedIndex = -1;
+ CategoryList.SelectedIndex = -1; // Auswahl zurücksetzen
+ SelectedText.Text = "Select Category"; // Den Text im UI zurücksetzen
}
+
+
+
private void SaveJsonData()
{
try
@@ -216,6 +221,39 @@ namespace InnoLabProjektDektopApp
}
}
+ private void TogglePopup(object sender, MouseButtonEventArgs e)
+{
+ // Popup umschalten
+ PopupMenu.IsOpen = !PopupMenu.IsOpen;
+
+ // Wenn das Popup geöffnet wird, registriere das globale Klick-Event
+ if (PopupMenu.IsOpen)
+ {
+ this.PreviewMouseDown += ClosePopupOnClickOutside;
+ }
+}
+
+private void CategoryList_SelectionChanged(object sender, SelectionChangedEventArgs e)
+{
+ if (CategoryList.SelectedItem is ListBoxItem selectedItem)
+ {
+ SelectedText.Text = selectedItem.Content.ToString();
+ PopupMenu.IsOpen = false; // Popup schließen nach Auswahl
+ this.PreviewMouseDown -= ClosePopupOnClickOutside; // Event entfernen
+ }
+}
+
+private void ClosePopupOnClickOutside(object sender, MouseButtonEventArgs e)
+{
+ if (!PopupMenu.IsMouseOver && !DropdownBorder.IsMouseOver)
+ {
+ PopupMenu.IsOpen = false;
+ this.PreviewMouseDown -= ClosePopupOnClickOutside; // Event entfernen
+ }
+}
+
+
+
private void NavigateToDistractionList(object sender, RoutedEventArgs e)
{
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
index 42c58ee..3047394 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
@@ -79,9 +79,11 @@
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Center"/>
+ <Setter Property="Cursor" Value="Arrow"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource TEXT_SECONDARY_BRUSH}"/>
+ <Setter Property="Cursor" Value="Hand"/>
<!-- Slightly darker gray on hover -->
</Trigger>
</Style.Triggers>
--
GitLab