Skip to content

Commit

Permalink
Refine UI by updating color scheme and margins
Browse files Browse the repository at this point in the history 
The commit involves comprehensive changes in the appearance of the Scenarium Editor. It includes updates to the color scheme, transitioning from `DarkGray` to `DarkerGray` for backdrops. Moreover, the margins of several elements have been adjusted for a more fluid visual appearance. Finally, modifications are done to improve the crispness of border rendering with the
  • Loading branch information
@xorza
xorza committed May 18, 2024
1 parent 5388782 commit cf0439e
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 119 deletions.
180 changes: 86 additions & 94 deletions ScenariumEditor.NET/ScenariumEditor.NET/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,105 +13,97 @@
Title="MainWindow"
Height="450"
Width="800"
Background="{StaticResource DarkGray}"
Background="{StaticResource DarkerGray}"

Style="{StaticResource DefaultWindow}"

Loaded="MainWindow_OnLoaded">



<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="50" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto"
MinHeight="50" />
<RowDefinition
Height="2" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>

<Border BorderBrush="{x:Null}" BorderThickness="0">
<Button
Margin="0"
Content="click"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Click="AddDesignNodeButton_OnClick" />
</Border>

<Border Grid.Row="1" BorderThickness="1"
BorderBrush="{StaticResource Blue}">
</Border>

<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="Auto" MinWidth="250" />
</Grid.ColumnDefinitions>

<Grid ClipToBounds="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" MinHeight="50" />
</Grid.RowDefinitions>

<ItemsControl
Grid.Row="0"
ItemsSource="{Binding Connections}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:Connection}">
<local:Connection
InputPosition="{Binding Input.CanvasPosition}"
OutputPosition="{Binding Output.CanvasPosition}"
BorderBrush="{StaticResource Blue}"
HoverBrush="{StaticResource HighlightOverlayBrush}"
Thickness="2"
Width="500"
Height="500" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

<ItemsControl
Grid.Row="0"
ItemsSource="{Binding Nodes}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:Node}">
<local:Node
NodeDataContext="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter
Property="Canvas.Left"
Value="{Binding Path=CanvasPosition.X}" />
<Setter
Property="Canvas.Top"
Value="{Binding Path=CanvasPosition.Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>

</Grid>

<Border Grid.Column="1" BorderThickness="1"
BorderBrush="{StaticResource Blue}">
</Border>

<Border Grid.Column="2" ></Border>
<Button
Margin="0"
Content="click"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Click="AddDesignNodeButton_OnClick" />
</Grid>

<Rectangle Grid.Row="1" Fill="{StaticResource Gray}" />

<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="Auto" MinWidth="250" />
</Grid.ColumnDefinitions>

<Grid ClipToBounds="True" Background="{StaticResource DarkGray}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" MinHeight="50" />
</Grid.RowDefinitions>

<ItemsControl
Grid.Row="0"
ItemsSource="{Binding Connections}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:Connection}">
<local:Connection
InputPosition="{Binding Input.CanvasPosition}"
OutputPosition="{Binding Output.CanvasPosition}"
BorderBrush="{StaticResource Blue}"
HoverBrush="{StaticResource HighlightOverlayBrush}"
Thickness="2"
Width="500"
Height="500" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

<ItemsControl
Grid.Row="0"
ItemsSource="{Binding Nodes}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:Node}">
<local:Node
NodeDataContext="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter
Property="Canvas.Left"
Value="{Binding Path=CanvasPosition.X}" />
<Setter
Property="Canvas.Top"
Value="{Binding Path=CanvasPosition.Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>

</Grid>

<Rectangle Grid.Column="1" Fill="{StaticResource Gray}" />

<Border Grid.Column="2"></Border>
</Grid>
</Grid>
</Window>
14 changes: 7 additions & 7 deletions ScenariumEditor.NET/ScenariumEditor.NET/Node.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@
<Border BorderBrush="#444"
Margin="4" Padding="0"
BorderThickness="2"
Background="{StaticResource DarkGray}"
Background="{StaticResource DarkerGray}"
CornerRadius="2">

<StackPanel Orientation="Vertical" Margin="0">
<Border Background="#444"
Margin="-1 -1 -1 0"
Margin="0"
CornerRadius="1 1 0 0"
Padding="0"
MouseLeftButtonDown="Title_OnMouseLeftButtonDown"
Expand All @@ -63,7 +63,7 @@
<Button Style="{StaticResource PinButton}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="-5 -5 0 0"
Margin="-6 1 0 0"
Background="{StaticResource Red}" />

<Label Grid.Column="0" Content="{Binding Name}"
Expand All @@ -83,7 +83,7 @@
VerticalAlignment="Center" />

<Path Style="{StaticResource CrossPath}"
Stroke="{StaticResource DarkGray}"
Stroke="{StaticResource DarkerGray}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
Expand All @@ -108,7 +108,7 @@

<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource PinButton}"
Margin="-5 0 0 0"
Margin="-6 0 0 0"
Background="{StaticResource Yellow}"
DataContext="{Binding}"
Loaded="Input_OnLoaded" />
Expand All @@ -134,7 +134,7 @@
<Label Content="{Binding Name}" VerticalAlignment="Center"></Label>

<Button Style="{StaticResource PinButton}"
Margin="0 0 -5 0"
Margin="0 0 -6 0"
Background="{StaticResource Red}"
Loaded="Output_OnLoaded" />
</StackPanel>
Expand All @@ -153,7 +153,7 @@
<Label Content="{Binding Name}" VerticalAlignment="Center"></Label>

<Button Style="{StaticResource PinButton}"
Margin="0 0 -5 0"
Margin="0 0 -6 0"
Background="{StaticResource Green}"
Loaded="Output_OnLoaded" />
</StackPanel>
Expand Down
20 changes: 16 additions & 4 deletions ScenariumEditor.NET/ScenariumEditor.NET/Styles/Basic.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,28 @@
<Brush x:Key="Yellow">#E9BB35</Brush>
<Brush x:Key="Green">#53A957</Brush>
<Brush x:Key="Blue">#34A0F6</Brush>
<Brush x:Key="Red">#F53636</Brush>
<Brush x:Key="Red">#ED5353</Brush>

<Brush x:Key="LiteYellow">#FFDD80</Brush>
<Brush x:Key="LiteGreen">#80FF84</Brush>
<Brush x:Key="LiteBlue">#80C8FF</Brush>
<Brush x:Key="LiteRed">#FF8080</Brush>

<Brush x:Key="DarkYellow">#996A34</Brush>
<Brush x:Key="DarkGreen">#376E37</Brush>
<Brush x:Key="DarkBlue">#2A68A9</Brush>
<Brush x:Key="DarkRed">#A32A2A</Brush>

<Brush x:Key="DarkWhite">#BCBCBC</Brush>
<Brush x:Key="Gray">#333333</Brush>

<Brush x:Key="DarkerGray">#222</Brush>
<Brush x:Key="DarkGray">#131313</Brush>

<Style TargetType="Border" >
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>

<Brush x:Key="DarkWhite">#BBBCC1</Brush>

<Brush x:Key="DarkGray">#222</Brush>

<Style TargetType="Label">
<Setter Property="Margin" Value="2"></Setter>
Expand Down
21 changes: 11 additions & 10 deletions ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,9 @@
<Setter Property="MinWidth" Value="68" />
<Setter Property="MinHeight" Value="28" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Background" Value="{StaticResource DarkGray}" />
<Setter Property="Background" Value="{StaticResource DarkerGray}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<EventSetter Event="Loaded" Handler="Window_Loaded" />
Expand All @@ -66,7 +67,7 @@
<Grid>
<Border BorderThickness="2"
CornerRadius="5"
BorderBrush="{StaticResource Blue}"
BorderBrush="{StaticResource DarkBlue}"
Background="{TemplateBinding Background}"
Padding="0" />

Expand All @@ -75,9 +76,9 @@
<!-- header & content -->
<controls:ClippingBorder ClipToBounds="True"
Background="{x:Null}"
CornerRadius="4"
CornerRadius="3"
BorderThickness="0"
Margin="1.75">
Margin="2">
<Grid>
<!-- dragging header -->
<Button Style="{StaticResource EmptyButton}"
Expand Down Expand Up @@ -149,10 +150,10 @@

<!-- min max close buttons -->
<Border Padding="5"
Background="{StaticResource Blue}"
Background="{StaticResource DarkBlue}"
VerticalAlignment="Top" HorizontalAlignment="Right"
CornerRadius="0 4 0 4"
Margin="1.75">
CornerRadius="0 3 0 3"
Margin="2">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center">
Expand All @@ -165,7 +166,7 @@
Margin="0 2 0 0"
Style="{StaticResource CrossPath}"
Data="M 0,0 L 1,0"
Stroke="{StaticResource DarkGray}" />
Stroke="{StaticResource DarkerGray}" />
</Button>
<Button Style="{StaticResource RoundButton}"
Background="{StaticResource Yellow}"
Expand All @@ -176,7 +177,7 @@
Height="8"
Style="{StaticResource CrossPath}"
Data="M 0,0 L 0,1 L 1,1 L 1,0 Z"
Stroke="{StaticResource DarkGray}" />
Stroke="{StaticResource DarkerGray}" />
</Button>
<Button Style="{StaticResource RoundButton}"
Background="{StaticResource Red}"
Expand All @@ -185,7 +186,7 @@
<Path Width="8"
Height="8"
Style="{StaticResource CrossPath}"
Stroke="{StaticResource DarkGray}" />
Stroke="{StaticResource DarkerGray}" />
</Button>
</StackPanel>
</Border>
Expand Down
9 changes: 5 additions & 4 deletions ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ private void btnMax_Click(object sender, RoutedEventArgs e) {
};
wnd.WindowState = WindowState.Maximized;
}

e.Handled = true;
}

Expand Down Expand Up @@ -70,7 +71,7 @@ private void borderRect_MouseMove(object sender, MouseEventArgs e) {
double width = e.GetPosition(mainWindow).X;
double height = e.GetPosition(mainWindow).Y;
senderRect.CaptureMouse();

if (senderRect.Name.ToLower().Contains("right")) {
if (width > 0)
mainWindow.Width = width;
Expand Down Expand Up @@ -103,12 +104,12 @@ private void borderRect_MouseMove(object sender, MouseEventArgs e) {
#endregion

#region dragging

private void Header_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
var header = (FrameworkElement)sender;
var wnd = Window.GetWindow(header)!;
wnd.DragMove();
e.Handled = true;
wnd.DragMove();
e.Handled = true;
}

#endregion
Expand Down

0 comments on commit cf0439e

Please sign in to comment.