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

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

improved design of programlist screen as well as input dialog, made text of...

See merge request !58
parents 8cea1434 f75b91c4
No related branches found
No related tags found
1 merge request!58improved design of programlist screen as well as input dialog, made text of...
Show whitespace changes
Inline Side-by-side
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_2ProgramsList.xaml
+ 91
− 134
View file @ e7417f30
......@@ -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,20,20,20">
<Grid>
<Grid.ColumnDefinitions>
......@@ -14,168 +15,124 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Width="40"
Height="40"
Background="White"
BorderBrush="Black"
BorderThickness="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="BackButton_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="Gray" />
<TextBlock Text="←"
FontSize="16"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<!-- Überschrift -->
<TextBlock Grid.Column="0"
Style="{StaticResource Header1}"
Text="Edit the list of distracting programs"
HorizontalAlignment="Left" Margin="0,46,0,-46" />
HorizontalAlignment="Left" />
<!-- Suchfeld -->
<DockPanel Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,0,0">
<!-- TextBox für Suche -->
<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"
VerticalAlignment="Center"
Padding="5"
HorizontalAlignment="Left"
Foreground="Black"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="1"
Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
BorderThickness="0"
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" />
<!-- Untere Linie als Border -->
<Border Height="1"
Background="{StaticResource TEXT_PRIMARY_BRUSH}"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="10,0,40,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">
HorizontalAlignment="Right"
>
<TextBlock Text="🔍"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Button>
</DockPanel>
</Grid>
<TextBlock Style="{StaticResource StandardText}" Margin="0,40,0,0"
Text="By clicking on a toggle, you can change the programs that should be marked as distracting." />
HorizontalAlignment="Center"
/>
<Border Background="#2C2C2C" CornerRadius="10" Padding="10" Margin="0,10,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Border>
</Grid>
</Border>
<!-- Label -->
<TextBlock Text="Add a distracting program:"
VerticalAlignment="Center"
Foreground="White"
FontSize="14"
FontWeight="Bold"
Grid.Column="0"
Margin="10,0,10,0" />
<!-- Input Field with Placeholder -->
<Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,0,10,0">
<TextBox x:Name="UrlInputBox"
VerticalAlignment="Center"
Padding="5"
FontSize="14"
Background="Transparent"
Foreground="White"
BorderBrush="Gray"
BorderThickness="1"
TextChanged="UrlInputBox_TextChanged" />
<TextBlock x:Name="UrlPlaceholder"
Text="process name"
VerticalAlignment="Center"
Foreground="Gray"
FontSize="14"
Padding="5"
IsHitTestVisible="False"
Margin="5,0,0,0" />
</Grid>
<TextBlock Margin="0,10,0,0"
Text="On the left side, you can find the programs that you marked as distracting. On the left, you find all currently running programs that you can potentially add to the distracting programs." />
<!-- 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>
</Grid>
</Border>
<!-- Überschrift -->
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,10,0,10" Width="350">
<Grid Margin="0,20">
<!-- Define two equal columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Left Column StackPanel -->
<StackPanel Grid.Column="0" Margin="20,10,10,8">
<!-- Header -->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,15">
<CheckBox x:Name="OtherProgramsCheckBox" IsChecked="True" VerticalAlignment="Center"/>
<TextBlock x:Name="HeaderTextBlock"
Style="{StaticResource Header2}"
Text="CATEGORY" RenderTransformOrigin="0.548,1.689" Margin="10,0,0,0"/>
Text="CATEGORY"
Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,10,0,10" Width="430">
<!-- ScrollViewer for Items -->
<ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200">
<StackPanel x:Name="ItemsPanel" />
</ScrollViewer>
</StackPanel>
<!-- Right Column StackPanel -->
<StackPanel Grid.Column="1" Margin="20,10,20,8">
<!-- Header -->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,0" >
<TextBlock x:Name="HeaderTextBlock2"
Style="{StaticResource Header2}"
Text="Running Programs" RenderTransformOrigin="0.548,1.689" Margin="0,0,0,0" HorizontalAlignment="Right"/>
<Button Width="110" Margin="150,0,0,0" ToolTip="Refresh" Click="RefreshButton_Click">
<TextBlock Text="Click to Refresh"/>
</Button>
</StackPanel>
</Grid>
Text="Running Programs"
VerticalAlignment="Center"/>
<!-- Refresh Button -->
<Border Margin="10,0,0,0" Style="{StaticResource RoundedButtonBorder}" MouseDown="RefreshButton_Click" Width="40" Height="40" VerticalAlignment="Center">
<Viewbox Width="20" Height="20" HorizontalAlignment="Center">
<Path Margin="-4,0,0,0" Fill="Black" Data="M12,4V1L8,5L12,9V6C15.3,6 18,8.7 18,12C18,15.3 15.3,18 12,18C8.7,18 6,15.3 6,12H4C4,16.4 7.6,20 12,20C16.4,20 20,16.4 20,12C20,7.6 16.4,4 12,4Z"/>
</Viewbox>
</Border>
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="20,225,10,8" Grid.Column="0">
<StackPanel x:Name="ItemsPanel" />
</ScrollViewer>
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="10,225,20,8" Grid.Column="1">
<!-- ScrollViewer for Running Programs -->
<ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200">
<StackPanel x:Name="ItemsPanel2" />
</ScrollViewer>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</Page>
\ No newline at end of file
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_2ProgramsList.xaml.cs
+ 88
− 103
View file @ e7417f30
......@@ -73,65 +73,6 @@ namespace InnoLabProjektDektopApp
}
private void AddButton_Click(object sender, RoutedEventArgs e)
{
string enteredUrl = UrlInputBox.Text.Trim();
if (string.IsNullOrEmpty(enteredUrl))
{
MessageBox.Show("Please enter a URL.", "Invalid Input", MessageBoxButton.OK, MessageBoxImage.Warning);
return;
}
// Add the new URL to the current category
if (!_data.ContainsKey("Programs"))
{
_data["Programs"] = new List<ProcessEntry>();
}
// Check if the process is already in the list
if (_data["Programs"].Any(p => p.ProcessName.Equals(enteredUrl, StringComparison.CurrentCultureIgnoreCase)))
{
MessageBox.Show($"Process '{enteredUrl}' is already added.", "Info", MessageBoxButton.OK, MessageBoxImage.Information);
UrlInputBox.Clear();
return;
}
_data["Programs"].Add(new ProcessEntry
{
ProcessName = enteredUrl.ToLower(),
MainWindowTitle = enteredUrl,
IsDistracting = true
});
// Save changes to the JSON
SaveData();
// Add to UI dynamically
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
var checkBox = new CheckBox
{
Content = $"{enteredUrl}: {enteredUrl}",
Margin = new Thickness(5),
IsChecked = true,
Tag = new ProcessEntry { ProcessName = enteredUrl, MainWindowTitle = enteredUrl, IsDistracting = true }
};
checkBox.Checked += CheckBox_CheckedChanged;
checkBox.Unchecked += CheckBox_CheckedChanged;
stackPanel.Children.Add(checkBox);
ItemsPanel.Children.Add(stackPanel);
// Clear the input field
UrlInputBox.Clear();
// Refresh Panel to exclude duplicates
RefreshRunningProcessList();
}
private void RefreshButton_Click(object sender, RoutedEventArgs e)
{
RefreshRunningProcessList();
......@@ -146,39 +87,72 @@ namespace InnoLabProjektDektopApp
item.MainWindowTitle.Contains(filter, StringComparison.CurrentCultureIgnoreCase)
)
.ToList();
ItemsPanel2.Children.Clear();
foreach (var process in windowedProcesses)
{
// check if the process is not already in the list
if (_data["Programs"].Any(p => p.ProcessName.Equals(process.Name, StringComparison.CurrentCultureIgnoreCase))) continue;
// Prüfen, ob der Prozess bereits in der Liste ist
if (_data["Programs"].Any(p => p.ProcessName.Equals(process.Name, StringComparison.CurrentCultureIgnoreCase)))
continue;
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
// Grid für bessere Platzverteilung
var newGrid = new Grid { Margin = new Thickness(5, 2, 5, 2) };
var button = new Button
{
Content = "+",
Width = 30,
Margin = new Thickness(5)
};
// Spalten:
// 1. Dynamische Spalte für den TextBlock
// 2. Feste Spalte für den Button
newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
// TextBlock für Prozessname mit TextWrapping
var textBlock = new TextBlock
{
Text = $"{process.MainWindowTitle} ({process.Name})",
Margin = new Thickness(5),
ToolTip = $"{process.MainWindowTitle} ({process.Name})"
ToolTip = $"{process.MainWindowTitle} ({process.Name})",
TextWrapping = TextWrapping.Wrap
};
button.Click += (s, args) =>
// Button als Border mit Style "RoundedButtonBorder"
var addButtonBorder = new Border
{
Style = (Style)Application.Current.Resources["RoundedButtonBorder"],
Child = new TextBlock
{
Text = "+",
Margin = new Thickness(0, 0, 0, 4),
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Foreground = (Brush)Application.Current.Resources["BACKGROUND_PRIMARY_BRUSH"],
FontSize = 24,
FontWeight = FontWeights.Bold
},
Margin = new Thickness(5, 0, 10, 0), // Rechts Abstand zur Scrollbar/Rand
Cursor = Cursors.Hand,
Width = 30, // Feste Breite
Height = 30 // Feste Höhe
};
// Klick-Event für Button
addButtonBorder.MouseDown += (s, args) =>
{
AddProcessFromList(process.Name, process.MainWindowTitle);
};
stackPanel.Children.Add(button);
stackPanel.Children.Add(textBlock);
ItemsPanel2.Children.Add(stackPanel);
// Elemente ins Grid setzen
Grid.SetColumn(textBlock, 0); // Dynamische Spalte für Text
Grid.SetColumn(addButtonBorder, 1); // Button bleibt konstant rechts
newGrid.Children.Add(textBlock);
newGrid.Children.Add(addButtonBorder);
// Zum UI-Stack hinzufügen
ItemsPanel2.Children.Add(newGrid);
}
}
private void AddProcessFromList(string processName, string mainWindowTitle)
{
// Check if the process is already in the list
......@@ -220,29 +194,60 @@ namespace InnoLabProjektDektopApp
private void ShowNewItemInList(string processName, string mainWindowTitle, bool isDistracting)
{
// Add to UI dynamically
var newStackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
var newGrid = new Grid { Margin = new Thickness(5, 2, 5, 2) };
// Zwei Spalten: 1. für CheckBox + Text, 2. für den Button
newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
var newCheckBox = new CheckBox
{
Content = $"{mainWindowTitle} ({processName})",
Margin = new Thickness(5),
IsChecked = isDistracting,
ToolTip = $"{mainWindowTitle} ({processName})",
Tag = new ProcessEntry { ProcessName = processName, MainWindowTitle = mainWindowTitle, IsDistracting = isDistracting }
};
var textBlock = new TextBlock
{
Text = $"{mainWindowTitle} ({processName})",
TextWrapping = TextWrapping.Wrap,
};
newCheckBox.Content = textBlock;
newCheckBox.Checked += CheckBox_CheckedChanged;
newCheckBox.Unchecked += CheckBox_CheckedChanged;
var editButton = new Button
{
Content = "Edit",
Margin = new Thickness(5, 0, 0, 0),
Tag = newCheckBox // Store reference to checkbox for easier editing
var editButtonBorder = new Border
{
Style = (Style)Application.Current.Resources["RoundedButtonBorder"],
Child = new TextBlock
{
Text = "Edit",
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Foreground = (Brush)Application.Current.Resources["BACKGROUND_PRIMARY_BRUSH"],
FontWeight = FontWeights.Bold
},
Margin = new Thickness(5, 0, 10, 0),
Cursor = Cursors.Hand,
Width = 50,
Height = 30,
CornerRadius = new CornerRadius(10)
};
editButton.Click += (s, e) => EditItemInList(processName, mainWindowTitle);
editButtonBorder.MouseDown += (s, e) => EditItemInList(processName, mainWindowTitle);
// Elemente ins Grid setzen
Grid.SetColumn(newCheckBox, 0);
Grid.SetColumn(editButtonBorder, 1);
newStackPanel.Children.Add(newCheckBox);
newStackPanel.Children.Add(editButton);
ItemsPanel.Children.Add(newStackPanel);
newGrid.Children.Add(newCheckBox);
newGrid.Children.Add(editButtonBorder);
// Element zum UI-Stack hinzufügen
ItemsPanel.Children.Add(newGrid);
}
private void EditItemInList(string processName, string mainWindowTitle)
......@@ -257,20 +262,6 @@ namespace InnoLabProjektDektopApp
RefreshProgramList();
}
private void UrlInputBox_TextChanged(object sender, TextChangedEventArgs e)
{
// Überprüfen, ob die TextBox leer ist
if (!string.IsNullOrEmpty(UrlInputBox.Text))
{
UrlPlaceholder.Visibility = Visibility.Collapsed; // Placeholder ausblenden
}
else
{
UrlPlaceholder.Visibility = Visibility.Visible; // Placeholder anzeigen
}
}
public void RefreshProgramList()
{
ItemsPanel.Children.Clear();
......@@ -348,12 +339,6 @@ namespace InnoLabProjektDektopApp
MessageBox.Show($"Error saving data: {ex.Message}");
}
}
private void BackButton_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.Navigate(new Distractions());
}
public class ProcessEntry
{
[JsonPropertyName("processName")]
......
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml
+ 56
− 0
View file @ e7417f30
......@@ -25,6 +25,62 @@
<SolidColorBrush x:Key="TEXT_SECONDARY_BRUSH" Color="{StaticResource TEXT_SECONDARY_COLOR}" />
<Style x:Key="InputDialogBorderButtonStyle" TargetType="Border">
<!-- Standardwerte -->
<Setter Property="Width" Value="75"/>
<Setter Property="Height" Value="30"/>
<Setter Property="CornerRadius" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Background" Value="#E5E5E5"/>
<!-- Standardgrau -->
<Setter Property="Cursor" Value="Hand"/>
<!-- Triggers für Effekte -->
<Style.Triggers>
<!-- Maus-Hover-Effekt -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#D6D6D6"/>
<!-- Dunkleres Grau -->
</Trigger>
<!-- Fokus-Effekt (blaue Umrandung) -->
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="#0078D7"/>
<!-- Blau wie in Windows -->
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!-- Deaktivierter Zustand -->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#F1F1F1"/>
<!-- Helleres Grau -->
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Opacity" Value="0.6"/>
<!-- Button wird leicht transparent -->
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="InputDialogBorderButtonTextStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="Black"/>
<!-- Deaktivierter Zustand -->
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
......
......
InnoLabProjektDektopApp/InnoLabProjektDektopApp/Utils/InputDialog.xaml
+ 11
− 3
View file @ e7417f30
......@@ -3,12 +3,20 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Input Dialog" Height="150" Width="300" WindowStartupLocation="CenterOwner">
<StackPanel Margin="10">
<TextBlock x:Name="PromptText" Text="Enter your input:" Margin="0,0,0,10" TextWrapping="Wrap"/>
<TextBlock x:Name="PromptText" Text="Enter your input:" Margin="0,0,0,10" TextWrapping="Wrap" Foreground="{StaticResource BACKGROUND_PRIMARY_BRUSH}"/>
<TextBox x:Name="InputTextBox" Margin="0,0,0,10"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="OK" Click="OK_Click" Width="75" Margin="0,0,10,0" IsDefault="True"/>
<Button Content="Cancel" Click="Cancel_Click" Width="75" IsCancel="True"/>
<!-- OK Button -->
<Border Style="{StaticResource InputDialogBorderButtonStyle}" MouseDown="OK_Click" Margin="0,0,10,0">
<TextBlock Text="OK" Style="{StaticResource InputDialogBorderButtonTextStyle}"/>
</Border>
<!-- Cancel Button -->
<Border Style="{StaticResource InputDialogBorderButtonStyle}" MouseDown="Cancel_Click">
<TextBlock Text="Cancel" Style="{StaticResource InputDialogBorderButtonTextStyle}"/>
</Border>
</StackPanel>
</StackPanel>
</Window>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment