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

improved design of overview screen; added custom style for radio buttons;...

improved design of overview screen; added custom style for radio buttons; improved design of warning box; improved text input field on overview screen; added warning seconds functionality
parent 9775fc6e
No related branches found
No related tags found
1 merge request!56improved design of overview screen; added custom style for radio buttons;...
......@@ -28,37 +28,82 @@
VerticalAlignment="Center"
ToolTip="You can choose between 3 modes: In all modes, the mascot gives you visual feedback that you are currently distracting yourself. In full-blocking mode, the distracting item you try to reach is instantly automatically closed. In the warning mode, you receive a warning for X seconds during which you can re-decide if you want to enter the distracting item or not." />
</StackPanel>
<RadioButton x:Name="DistractionModeFullBlocking" Content="full-blocking mode" GroupName="Modes" IsChecked="True" />
<RadioButton x:Name="DistractionModeMascotFeedback" Content="only mascot feedback mode" GroupName="Modes" Margin="0,5,0,0"/>
<StackPanel HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- RadioButton -->
<ColumnDefinition Width="Auto"/>
<!-- Text -->
</Grid.ColumnDefinitions>
<RadioButton x:Name="DistractionModeFullBlocking"
GroupName="Modes"
IsChecked="True"
Grid.Column="0"/>
<TextBlock Text="full-blocking mode" VerticalAlignment="Center" Margin="5,0,0,0" Grid.Column="1"/>
</Grid>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0">
<RadioButton Content=""
<Grid Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- RadioButton -->
<ColumnDefinition Width="Auto"/>
<!-- Text -->
</Grid.ColumnDefinitions>
<RadioButton x:Name="DistractionModeMascotFeedback"
GroupName="Modes"
VerticalAlignment="Center" />
<Border Name="DropdownBorder" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Margin="0,0,5,0"
Width="70" MouseDown="TogglePopup">
<Grid>
<TextBlock x:Name="SelectedText" Text="10" 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>
Grid.Column="0"/>
<TextBlock Text="only mascot feedback mode" VerticalAlignment="Center" Margin="5,0,0,0" Grid.Column="1"/>
</Grid>
<!-- RadioButton mit Dropdown -->
<Grid Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- RadioButton -->
<ColumnDefinition Width="Auto"/>
<!-- Dropdown -->
<ColumnDefinition Width="Auto"/>
<!-- Text -->
</Grid.ColumnDefinitions>
<!-- Popup für die Dropdown-Liste -->
<Popup Name="PopupMenu" Placement="Bottom" PlacementTarget="{Binding ElementName=DropdownBorder}" StaysOpen="True" Width="70">
<Border Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Width="70">
<ListBox x:Name="CategoryList" SelectionChanged="CategoryList_SelectionChanged" Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}">
<ListBoxItem Content="3"/>
<ListBoxItem Content="5"/>
<ListBoxItem Content="10"/>
<ListBoxItem Content="15"/>
<ListBoxItem Content="30" />
</ListBox>
<RadioButton Name="DistractionModeSecondsWarning"
GroupName="Modes"
VerticalAlignment="Center"
Grid.Column="0"/>
<Border Name="DropdownBorder" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}"
CornerRadius="5" BorderThickness="1" BorderBrush="Black" Margin="5,0,5,0"
Width="70" MouseDown="TogglePopup"
Grid.Column="1">
<Grid>
<TextBlock x:Name="SelectedText" Text="10" 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>
<TextBlock Text="seconds warning mode"
VerticalAlignment="Center" />
<TextBlock Text="seconds warning mode" VerticalAlignment="Center" Grid.Column="2"/>
</Grid>
</StackPanel>
<!-- Popup für die Dropdown-Liste -->
<Popup Name="PopupMenu" Placement="Bottom" PlacementTarget="{Binding ElementName=DropdownBorder}" StaysOpen="True" Width="70">
<Border Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Width="70">
<ListBox x:Name="CategoryList" SelectionChanged="CategoryList_SelectionChanged" Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}">
<ListBoxItem Content="3"/>
<ListBoxItem Content="5"/>
<ListBoxItem Content="10"/>
<ListBoxItem Content="15"/>
<ListBoxItem Content="30"/>
</ListBox>
</Border>
</Popup>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,10,0,0">
<TextBlock Style="{StaticResource Header2}"
......@@ -71,8 +116,40 @@ Margin="5,0,0,0"
VerticalAlignment="Center"
ToolTip="If the mascot is visible while you work, its emotions reflect how focused you are which can be motivating. Deselect the mascot if you find it annoying." />
</StackPanel>
<RadioButton x:Name="MascotVisibleYes" Content="yes" GroupName="MascotVisibility" IsChecked="True" Checked="MascotVisibilityChanged"/>
<RadioButton x:Name="MascotVisibleNo" Content="no" GroupName="MascotVisibility" Checked="MascotVisibilityChanged"/>
<StackPanel HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- RadioButton -->
<ColumnDefinition Width="Auto"/>
<!-- Text -->
</Grid.ColumnDefinitions>
<RadioButton x:Name="MascotVisibleYes"
GroupName="MascotVisibility"
IsChecked="True"
Checked="MascotVisibilityChanged"
Grid.Column="0"/>
<TextBlock Text="yes" VerticalAlignment="Center" Margin="5,0,0,0" Grid.Column="1"/>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- RadioButton -->
<ColumnDefinition Width="Auto"/>
<!-- Text -->
</Grid.ColumnDefinitions>
<RadioButton x:Name="MascotVisibleNo"
GroupName="MascotVisibility"
Checked="MascotVisibilityChanged"
Grid.Column="0"/>
<TextBlock Text="no" VerticalAlignment="Center" Margin="5,0,0,0" Grid.Column="1"/>
</Grid>
</StackPanel>
<StackPanel x:Name="MotivationSection">
......
......@@ -217,10 +217,23 @@ Width="200" MouseDown="TogglePopup">
<StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" Margin="10" Width="150">
<TextBlock Text="Mascot visible" Foreground="White" FontSize="14" FontWeight="Bold" />
<ComboBox x:Name="MascotVisibilityComboBox" Width="80" HorizontalAlignment="Left" SelectionChanged="MascotVisibilityComboBox_SelectionChanged">
<ComboBoxItem Content="Yes" IsSelected="True" />
<ComboBoxItem Content="No" />
</ComboBox>
<Border Name="DropdownBorder5" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Margin="0,0,5,0"
Width="70" MouseDown="TogglePopup5" HorizontalAlignment="Left">
<Grid>
<TextBlock x:Name="SelectedText5" Text="Yes" 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="PopupMenu5" Placement="Bottom" PlacementTarget="{Binding ElementName=DropdownBorder5}" StaysOpen="True" Width="70">
<Border Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Width="70">
<ListBox x:Name="CategoryList5" SelectionChanged="CategoryList_SelectionChanged5" Background="{StaticResource HIGHLIGHT_SECONDARY_BRUSH}">
<ListBoxItem Content="Yes"/>
<ListBoxItem Content="No"/>
</ListBox>
</Border>
</Popup>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="3" VerticalAlignment="Stretch" Margin="10" x:Name="MotivationOptionsPanel" Visibility="Collapsed">
......@@ -242,13 +255,18 @@ Width="200" MouseDown="TogglePopup">
<!-- Input Field with Placeholder -->
<Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,0,10,0">
<Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,5,10,0">
<TextBox x:Name="FocusTopicInputBox"
VerticalAlignment="Center"
Padding="5"
FontSize="14"
Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
AcceptsReturn="True"
TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto"
MinHeight="30"
MaxHeight="100"
Background="Transparent"
Foreground="Black"
BorderBrush="Gray"
BorderThickness="1"
TextChanged="FocusTopicInputBox_TextChanged" />
......@@ -263,7 +281,7 @@ TextChanged="FocusTopicInputBox_TextChanged" />
</Grid>
<!-- Start Button -->
<Border Margin="0,10" Style="{StaticResource RoundedButtonBorder}" MouseDown="StartButton_Click">
<Border Margin="0,20" Style="{StaticResource RoundedButtonBorder}" MouseDown="StartButton_Click">
<TextBlock Text="Start" Style="{StaticResource ButtonTextStyle}" />
</Border>
......
......@@ -167,7 +167,19 @@ namespace InnoLabProjektDektopApp
if (profileSettings.TryGetProperty("mascotVisibility", out var mascotVisibilityElement))
{
string mascotVisibility = mascotVisibilityElement.GetString();
MascotVisibilityComboBox.SelectedItem = FindComboBoxItem(MascotVisibilityComboBox, mascotVisibility);
// Setze den geladenen Wert in das Textfeld
SelectedText5.Text = mascotVisibility;
// Falls der geladene Wert mit einem ListBoxItem übereinstimmt, markiere es
foreach (ListBoxItem item in CategoryList5.Items)
{
if (item.Content.ToString() == mascotVisibility)
{
CategoryList5.SelectedItem = item;
break;
}
}
// Überprüfen, ob es "No" ist
if (mascotVisibility == "No")
......@@ -349,7 +361,24 @@ namespace InnoLabProjektDektopApp
warningSeconds = 10;
}
string mascotVisible = ((ComboBoxItem)MascotVisibilityComboBox.SelectedItem)?.Content.ToString() ?? "Yes";
// Standardwert für distractionMode
string mascotVisible = "Yes";
// Prüfe zuerst, ob die TextBox (`SelectedText`) einen gültigen Wert enthält
if (!string.IsNullOrWhiteSpace(SelectedText5.Text))
{
mascotVisible = SelectedText5.Text; // Wert aus der TextBox übernehmen
}
else if (CategoryList5.SelectedItem is ListBoxItem selectedItem)
{
mascotVisible = selectedItem.Content.ToString(); // Falls in der ListBox etwas gewählt wurde
}
else
{
// Falls nichts gültiges eingegeben wurde, setze den Standardwert
mascotVisible = "Yes";
}
bool wordsOfAffirmation = WordsOfAffirmationCheckBox.IsChecked ?? false;
bool insultingWords = InsultingWordsCheckBox.IsChecked ?? false;
......@@ -390,29 +419,6 @@ namespace InnoLabProjektDektopApp
}
private void MascotVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (MascotVisibilityComboBox.SelectedItem is ComboBoxItem selectedItem)
{
string selectedValue = selectedItem.Content.ToString();
if (MotivationOptionsPanel == null) return;
// MotivationOptionsPanel wird sichtbar oder verborgen
if (selectedValue == "No")
{
MotivationOptionsPanel.Visibility = Visibility.Collapsed;
WordsOfAffirmationCheckBox.IsChecked = false;
InsultingWordsCheckBox.IsChecked = false;
}
else
{
MotivationOptionsPanel.Visibility = Visibility.Visible;
}
}
}
private void SelectedTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
TextBox textBox = sender as TextBox;
......@@ -553,7 +559,7 @@ namespace InnoLabProjektDektopApp
private void TogglePopup3(object sender, MouseButtonEventArgs e)
{
// Popup umschalten
PopupMenu3.IsOpen = !PopupMenu2.IsOpen;
PopupMenu3.IsOpen = !PopupMenu3.IsOpen;
// Wenn das Popup geöffnet wird, registriere das globale Klick-Event
if (PopupMenu3.IsOpen)
......@@ -576,7 +582,7 @@ namespace InnoLabProjektDektopApp
private void ClosePopupOnClickOutside3(object sender, MouseButtonEventArgs e)
{
if (!PopupMenu3.IsMouseOver && !DropdownBorder2.IsMouseOver)
if (!PopupMenu3.IsMouseOver && !DropdownBorder3.IsMouseOver)
{
PopupMenu3.IsOpen = false;
this.PreviewMouseDown -= ClosePopupOnClickOutside3; // Event entfernen
......@@ -586,7 +592,7 @@ namespace InnoLabProjektDektopApp
private void TogglePopup4(object sender, MouseButtonEventArgs e)
{
// Popup umschalten
PopupMenu4.IsOpen = !PopupMenu2.IsOpen;
PopupMenu4.IsOpen = !PopupMenu4.IsOpen;
// Wenn das Popup geöffnet wird, registriere das globale Klick-Event
if (PopupMenu4.IsOpen)
......@@ -609,12 +615,59 @@ namespace InnoLabProjektDektopApp
private void ClosePopupOnClickOutside4(object sender, MouseButtonEventArgs e)
{
if (!PopupMenu4.IsMouseOver && !DropdownBorder2.IsMouseOver)
if (!PopupMenu4.IsMouseOver && !DropdownBorder4.IsMouseOver)
{
PopupMenu4.IsOpen = false;
this.PreviewMouseDown -= ClosePopupOnClickOutside4; // Event entfernen
}
}
private void TogglePopup5(object sender, MouseButtonEventArgs e)
{
// Popup umschalten
PopupMenu5.IsOpen = !PopupMenu5.IsOpen;
// Wenn das Popup geöffnet wird, registriere das globale Klick-Event
if (PopupMenu5.IsOpen)
{
this.PreviewMouseDown += ClosePopupOnClickOutside5;
}
}
private void CategoryList_SelectionChanged5(object sender, SelectionChangedEventArgs e)
{
if (CategoryList5.SelectedItem is ListBoxItem selectedItem)
{
SelectedText5.Text = selectedItem.Content.ToString();
PopupMenu5.IsOpen = false; // Popup schließen nach Auswahl
this.PreviewMouseDown -= ClosePopupOnClickOutside5; // Event entfernen
}
if (MotivationOptionsPanel == null) return;
// MotivationOptionsPanel wird sichtbar oder verborgen
if (SelectedText5.Text == "No")
{
MotivationOptionsPanel.Visibility = Visibility.Collapsed;
WordsOfAffirmationCheckBox.IsChecked = false;
InsultingWordsCheckBox.IsChecked = false;
}
else
{
MotivationOptionsPanel.Visibility = Visibility.Visible;
}
}
private void ClosePopupOnClickOutside5(object sender, MouseButtonEventArgs e)
{
if (!PopupMenu5.IsMouseOver && !DropdownBorder5.IsMouseOver)
{
PopupMenu5.IsOpen = false;
this.PreviewMouseDown -= ClosePopupOnClickOutside4; // Event entfernen
}
}
}
}
......@@ -255,7 +255,7 @@ namespace InnoLabProjektDektopApp
{
Title = "Warum beenden Sie die Sitzung?",
Width = 600,
Height = 180,
Height = 200,
WindowStartupLocation = WindowStartupLocation.CenterScreen,
ResizeMode = ResizeMode.NoResize
};
......@@ -266,18 +266,43 @@ namespace InnoLabProjektDektopApp
Margin = new Thickness(10)
};
// Radiobuttons für die Gründe
RadioButton reason1 = new() { Content = "Ich habe mich dazu entschieden, frühzeitig zu beenden (wird in die Statistik mit aufgenommen).", Margin = new Thickness(5), IsChecked = true };
RadioButton reason2 = new() { Content = "Mir ist etwas sehr Wichtiges dazwischengekommen, was ich nicht verschieben konnte.", Margin = new Thickness(5) };
// Radiobuttons für die Gründe mit explizitem TextBlock zur Steuerung der Textfarbe
RadioButton reason1 = new()
{
Content = new TextBlock
{
Text = "Ich habe mich dazu entschieden, frühzeitig zu beenden (wird in die Statistik mit aufgenommen).",
Foreground = Brushes.Black // Hier wird die Textfarbe korrekt gesetzt
},
Margin = new Thickness(5),
IsChecked = true,
Style = null
};
// OK-Button
RadioButton reason2 = new()
{
Content = new TextBlock
{
Text = "Mir ist etwas sehr Wichtiges dazwischengekommen, was ich nicht verschieben konnte.",
Foreground = Brushes.Black // Hier wird die Textfarbe korrekt gesetzt
},
Margin = new Thickness(5),
Style = null
};
// OK-Button mit explizitem TextBlock für die Textfarbe
Button okButton = new()
{
Content = "Ok",
Content = new TextBlock
{
Text = "Ok",
Foreground = Brushes.Black // Hier wird die Textfarbe korrekt gesetzt
},
Margin = new Thickness(5),
Width = 80,
HorizontalAlignment = HorizontalAlignment.Right
};
okButton.Click += (s, args) =>
{
string selectedReason = reason1.IsChecked == true ? "Ich habe mich dazu entschieden, frühzeitig zu beenden" :
......@@ -290,7 +315,7 @@ namespace InnoLabProjektDektopApp
};
// Radiobuttons und Button zum StackPanel hinzufügen
stackPanel.Children.Add(new TextBlock { Text = "Wählen Sie den Grund für den Abbruch aus:", Margin = new Thickness(5) });
stackPanel.Children.Add(new TextBlock { Text = "Wählen Sie den Grund für den Abbruch aus:", Margin = new Thickness(5), Foreground= Brushes.Black });
stackPanel.Children.Add(reason1);
stackPanel.Children.Add(reason2);
stackPanel.Children.Add(okButton);
......
......@@ -25,6 +25,42 @@
<SolidColorBrush x:Key="TEXT_SECONDARY_BRUSH" Color="{StaticResource TEXT_SECONDARY_COLOR}" />
<Style TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<!-- Äußerer Kreis -->
<Border Width="15" Height="15" CornerRadius="7.5"
BorderBrush="White" BorderThickness="2"
Background="Transparent"
x:Name="OuterCircle">
<!-- Innerer Kreis (wird bei Auswahl sichtbar) -->
<Ellipse Width="7" Height="7"
Fill="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}"
Visibility="Collapsed"
x:Name="InnerCircle"/>
</Border>
<!-- Text des RadioButtons -->
<ContentPresenter HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Wenn der RadioButton ausgewählt ist -->
<Trigger Property="IsChecked" Value="True">
<!-- Äußerer Kreis wird blau -->
<Setter TargetName="OuterCircle" Property="BorderBrush" Value="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}"/>
<!-- Innerer Kreis wird sichtbar -->
<Setter TargetName="InnerCircle" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ToolTip">
......
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