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

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

improved design of distractions page; improved combobox (now listbox + popup)

See merge request !44
parents dc6cc6f2 178b2ccf
No related branches found
No related tags found
1 merge request!44improved design of distractions page; improved combobox (now listbox + popup)
Hide whitespace changes
Inline Side-by-side
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml
+ 64
− 57
View file @ c7cf6b31
......@@ -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"/>
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml.cs
+ 40
− 2
View file @ c7cf6b31
......@@ -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)
{
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+ 2
− 0
View file @ c7cf6b31
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment