DarthAffe/Artemis
1
0
Fork 0
mirror of https://github.com/Artemis-RGB/Artemis synced 2025-12-13 05:48:35 +00:00
Code Issues Releases Wiki Activity

Editor - Tweaked profile tree visuals

Browse Source 
Editor - Add current profile name display, added smooth zooming
This commit is contained in:
Robert 2022-01-08 17:20:32 +01:00
parent 9bbab5f9f8
commit 33c54eaeb0
9 changed files with 108 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Artemis.UI.Avalonia.Shared/Artemis.UI.Avalonia.Shared.xml
View File

@ -201,7 +201,12 @@
</member>
<member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.BorderThicknessProperty">
<summary>
Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderBrush" /> property.
Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderThickness" /> property.
</summary>
</member>
<member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadiusProperty">
<summary>
Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadius" /> property.
</summary>
</member>
<member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.InputElementProperty">
@ -227,6 +232,11 @@
Gets or sets the width of the control's border
</summary>
</member>
<member name="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadius">
<summary>
Gets or sets the radius of the control's border
</summary>
</member>
<member name="P:Artemis.UI.Shared.Controls.SelectionRectangle.InputElement">
<summary>
Gets or sets the element that captures input for the selection rectangle.

19
src/Avalonia/Artemis.UI.Shared/Controls/SelectionRectangle.cs
View File

@ -26,11 +26,17 @@ namespace Artemis.UI.Shared.Controls
AvaloniaProperty.Register<SelectionRectangle, IBrush>(nameof(BorderBrush), new SolidColorBrush(Colors.CadetBlue));
/// <summary>
/// Defines the <see cref="BorderBrush" /> property.
/// Defines the <see cref="BorderThickness" /> property.
/// </summary>
public static readonly StyledProperty<double> BorderThicknessProperty =
AvaloniaProperty.Register<SelectionRectangle, double>(nameof(BorderThickness), 1);
/// <summary>
/// Defines the <see cref="BorderRadius" /> property.
/// </summary>
public static readonly StyledProperty<double> BorderRadiusProperty =
AvaloniaProperty.Register<SelectionRectangle, double>(nameof(BorderRadius), 0);
/// <summary>
/// Defines the <see cref="InputElement" /> property.
/// </summary>
@ -75,6 +81,15 @@ namespace Artemis.UI.Shared.Controls
set => SetValue(BorderThicknessProperty, value);
}
/// <summary>
/// Gets or sets the radius of the control's border
/// </summary>
public double BorderRadius
{
get => GetValue(BorderRadiusProperty);
set => SetValue(BorderRadiusProperty, value);
}
/// <summary>
/// Gets or sets the element that captures input for the selection rectangle.
/// </summary>
@ -181,7 +196,7 @@ namespace Artemis.UI.Shared.Controls
public override void Render(DrawingContext drawingContext)
{
if (_displayRect != null)
drawingContext.DrawRectangle(Background, new Pen(BorderBrush, BorderThickness), _displayRect.Value, 4, 4);
drawingContext.DrawRectangle(Background, new Pen(BorderBrush, BorderThickness), _displayRect.Value, BorderRadius, BorderRadius);
}
/// <inheritdoc />

6
src/Avalonia/Artemis.UI.Shared/Styles/TreeView.axaml
View File

@ -64,7 +64,7 @@
ColumnDefinitions="Auto, *"
Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
<Panel Name="PART_ExpandCollapseChevronContainer"
Margin="{StaticResource TreeViewItemExpandCollapseChevronMargin}">
Margin="8 0 4 0">
<ToggleButton Name="PART_ExpandCollapseChevron"
Classes="ExpandCollapseChevron"
Focusable="False"
@ -90,6 +90,10 @@
</Setter>
</Style>
<Style Selector="Border#TreeViewItemLayoutRoot Panel.PART_ExpandCollapseChevronContainer">
<Setter Property="Margin" Value="0"></Setter>
</Style>
<!-- <Style Selector="TreeView.no-right-margin TreeViewItem /template/ Border#TreeViewItemLayoutRoot"> -->
<!-- <Setter Property="Margin" Value="2 2 0 2"/> -->
<!-- </Style> -->

5
src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/ProfileTree/FolderTreeItemView.axaml
View File

@ -13,16 +13,17 @@
Foreground="White"
Background="#E74C4C"
BorderBrush="#E74C4C"
Margin="0 0 5 0"
Command="{Binding ShowBrokenStateExceptions}">
<avalonia:MaterialIcon Kind="AlertCircle" />
</Button>
<avalonia:MaterialIcon Grid.Column="1"
Kind="Folder"
Margin="5 0"
Margin="0 0 5 0"
IsVisible="{Binding !IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}" />
<avalonia:MaterialIcon Grid.Column="1"
Kind="FolderOpen"
Margin="5 0"
Margin="0 0 5 0"
IsVisible="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}" />
<TextBlock Grid.Column="2" Text="{Binding Folder.Name}" VerticalAlignment="Center" />
<ToggleButton Grid.Column="3"

3
src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/ProfileTree/LayerTreeItemView.axaml
View File

@ -11,10 +11,11 @@
IsVisible="{Binding ProfileElement.BrokenState, Converter={x:Static ObjectConverters.IsNotNull}}"
Classes="icon-button icon-button-small"
Foreground="#E74C4C"
Margin="0 0 5 0"
Command="{Binding ShowBrokenStateExceptions}">
<avalonia:MaterialIcon Kind="AlertCircle" />
</Button>
<avalonia:MaterialIcon Grid.Column="1" Kind="{Binding Layer.LayerBrush.Descriptor.Icon}" Margin="5 0" />
<avalonia:MaterialIcon Grid.Column="1" Kind="{Binding Layer.LayerBrush.Descriptor.Icon}" Margin="0 0 5 0" />
<TextBlock Grid.Column="2" Text="{Binding Layer.Name}" VerticalAlignment="Center" />
<ToggleButton Grid.Column="3"
Classes="icon-button icon-button-small"

17
src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/VisualEditor/VisualEditorView.axaml
View File

@ -7,9 +7,9 @@
xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Artemis.UI.Screens.ProfileEditor.VisualEditor.VisualEditorView">
<Grid>
<paz:ZoomBorder Name="ZoomBorder"
Stretch="None"
ZoomSpeed="1.2"
ClipToBounds="True"
Focusable="True"
VerticalAlignment="Stretch"
@ -18,6 +18,11 @@
ZoomChanged="ZoomBorder_OnZoomChanged">
<Grid Name="ContainerGrid"
Background="Transparent">
<Grid.Transitions>
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Grid.Transitions>
<ItemsControl Items="{Binding Devices}" ClipToBounds="False">
<ItemsControl.Styles>
<Style Selector="ContentPresenter">
@ -38,4 +43,14 @@
</ItemsControl>
</Grid>
</paz:ZoomBorder>
<Border CornerRadius="0 0 8 0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Border.Background>
<SolidColorBrush Color="{DynamicResource CardStrokeColorDefaultSolid}" Opacity="0.65"></SolidColorBrush>
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="8">
<controls:ProfileConfigurationIcon ConfigurationIcon="{Binding ProfileConfiguration.Icon}" Margin="0 0 5 0"></controls:ProfileConfigurationIcon>
<TextBlock Text="{Binding ProfileConfiguration.Name}"/>
</StackPanel>
</Border>
</Grid>
</UserControl>

15
src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/VisualEditor/VisualEditorViewModel.cs
View File

@ -1,17 +1,28 @@
using System.Collections.ObjectModel;
using System;
using System.Collections.ObjectModel;
using System.Reactive.Disposables;
using Artemis.Core;
using Artemis.Core.Services;
using Artemis.UI.Services;
using Artemis.UI.Services.ProfileEditor;
using Artemis.UI.Shared;
using ReactiveUI;
namespace Artemis.UI.Screens.ProfileEditor.VisualEditor
{
public class VisualEditorViewModel : ActivatableViewModelBase
{
private ProfileConfiguration? _profileConfiguration;
public VisualEditorViewModel(IProfileEditorService profileEditorService, IRgbService rgbService)
{
Devices = new ObservableCollection<ArtemisDevice>(rgbService.EnabledDevices);
this.WhenActivated(d => profileEditorService.ProfileConfiguration.Subscribe(configuration => ProfileConfiguration = configuration).DisposeWith(d));
}
public ProfileConfiguration? ProfileConfiguration
{
get => _profileConfiguration;
set => this.RaiseAndSetIfChanged(ref _profileConfiguration, value);
}
public ObservableCollection<ArtemisDevice> Devices { get; }

4
src/Avalonia/Artemis.UI/Screens/SurfaceEditor/SurfaceDeviceView.axaml
View File

@ -26,10 +26,10 @@
Classes.selection-border-selected="{Binding Highlighted}"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource SystemAccentColor}"></SolidColorBrush>
<SolidColorBrush Color="{DynamicResource SystemAccentColorLight2}"></SolidColorBrush>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource SystemAccentColor}" Opacity="0.2"></SolidColorBrush>
<SolidColorBrush Color="{DynamicResource SystemAccentColorLight2}" Opacity="0.2"></SolidColorBrush>
</Border.Background>
</Border>
</Grid>

13
src/Avalonia/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.axaml
View File

@ -11,7 +11,6 @@
<Border Classes="router-container">
<paz:ZoomBorder Name="ZoomBorder"
Stretch="None"
ZoomSpeed="1.2"
ClipToBounds="True"
Focusable="True"
VerticalAlignment="Stretch"
@ -22,6 +21,11 @@
PointerMoved="ZoomBorder_OnPointerMoved"
PointerReleased="ZoomBorder_OnPointerReleased">
<Grid Name="ContainerGrid" Background="Transparent">
<Grid.Transitions>
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Grid.Transitions>
<ItemsControl Items="{Binding SurfaceDeviceViewModels}" ClipToBounds="False">
<ItemsControl.Styles>
<Style Selector="ContentPresenter">
@ -89,9 +93,10 @@
<controls:SelectionRectangle Name="SelectionRectangle"
InputElement="{Binding #ZoomBorder}"
SelectionUpdated="SelectionRectangle_OnSelectionUpdated"
BorderBrush="{DynamicResource SystemAccentColor}">
BorderBrush="{DynamicResource SystemAccentColor}"
BorderRadius="8">
<controls:SelectionRectangle.Background>
<SolidColorBrush Color="{DynamicResource SystemAccentColor}" Opacity="0.2"></SolidColorBrush>
<SolidColorBrush Color="{DynamicResource SystemAccentColorLight1}" Opacity="0.2"></SolidColorBrush>
</controls:SelectionRectangle.Background>
</controls:SelectionRectangle>
@ -101,7 +106,7 @@
Width="{Binding MaxTextureSize}"
Height="{Binding MaxTextureSize}"
BorderThickness="2"
BorderBrush="{DynamicResource SystemAccentColorDark3}"
BorderBrush="{DynamicResource SystemAccentColorLight3}"
CornerRadius="8" />
</Grid>
</paz:ZoomBorder>