-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from ItsTheSky/features/better-sidebar
Better sidebar management
- Loading branch information
Showing
10 changed files
with
353 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,94 @@ | ||
| using System.Collections.Generic; | ||
| using Avalonia.Controls; | ||
| using Avalonia.Media; | ||
| using CommunityToolkit.Mvvm.Input; | ||
| using FluentAvalonia.UI.Controls; | ||
| using SkEditor.Controls.Sidebar; | ||
| using SkEditor.Utilities; | ||
|
|
||
| namespace SkEditor.Controls; | ||
| public partial class SideBarControl : UserControl | ||
| { | ||
| private static readonly List<SidebarPanel> Panels = new(); | ||
|
|
||
| public readonly ExplorerSidebarPanel.ExplorerPanel ProjectPanel = new(); | ||
|
|
||
| public static void RegisterPanel(SidebarPanel panel) | ||
| { | ||
| Panels.Add(panel); | ||
| } | ||
|
|
||
| private SidebarPanel? _currentPanel; | ||
| public SideBarControl() | ||
| { | ||
| InitializeComponent(); | ||
|
|
||
| RegisterPanel(ProjectPanel); | ||
| } | ||
|
|
||
| AssignCommands(); | ||
| public void LoadPanels() | ||
| { | ||
| foreach (SidebarPanel panel in Panels) | ||
| { | ||
| var btn = CreatePanelButton(panel); | ||
| var content = panel.Content; | ||
| content.Width = 0; | ||
|
|
||
| btn.Command = new RelayCommand(() => | ||
| { | ||
| if (_currentPanel == panel) | ||
| { | ||
| _currentPanel.Content.Width = 0; // Close current panel | ||
| _currentPanel.OnClose(); | ||
| _currentPanel = null; | ||
| return; | ||
| } | ||
| if (panel.IsDisabled) | ||
| return; | ||
| if (_currentPanel != null) | ||
| { | ||
| _currentPanel.OnClose(); | ||
| _currentPanel.Content.Width = 0; // Close current panel | ||
| _currentPanel = null; | ||
| } | ||
| _currentPanel = panel; | ||
| _currentPanel.Content.Width = 250; | ||
| _currentPanel.OnOpen(); | ||
| }); | ||
|
|
||
| GridPanels.Children.Add(content); | ||
| Grid.SetColumn(content, 1); | ||
|
|
||
| Buttons.Children.Add(btn); | ||
| } | ||
| } | ||
|
|
||
| private void AssignCommands() | ||
| private Button CreatePanelButton(SidebarPanel panel) | ||
| { | ||
| ProjectsButton.Command = new RelayCommand(() => | ||
| var icon = panel.Icon; | ||
| if (icon is SymbolIconSource symbolIcon) symbolIcon.FontSize = 24; | ||
| IconSourceElement iconElement = new() | ||
| { | ||
| IconSource = icon, | ||
| Width = 24, | ||
| Height = 24, | ||
| Foreground = new SolidColorBrush(Color.Parse("#bfffffff")), | ||
| }; | ||
|
|
||
| Button button = new() | ||
| { | ||
| ScrollViewer.SetHorizontalScrollBarVisibility(FileTreeView, Avalonia.Controls.Primitives.ScrollBarVisibility.Disabled); | ||
| ScrollViewer.SetVerticalScrollBarVisibility(FileTreeView, Avalonia.Controls.Primitives.ScrollBarVisibility.Auto); | ||
| ExtendedSideBar.Width = ExtendedSideBar.Width == 0 ? 250 : 0; | ||
| }); | ||
| Height = 36, | ||
| Width = 36, | ||
| Classes = { "barButton" }, | ||
| Content = iconElement, | ||
| IsEnabled = !panel.IsDisabled, | ||
| }; | ||
|
|
||
| return button; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <UserControl xmlns="https://github.com/avaloniaui" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:ui="using:FluentAvalonia.UI.Controls" | ||
| x:Class="SkEditor.Controls.Sidebar.ExplorerSidebarPanel"> | ||
|
|
||
| <UserControl.Styles> | ||
| <Style Selector="Button.barButton"> | ||
| <Setter Property="Background" Value="Transparent"/> | ||
| <Setter Property="BorderThickness" Value="0"/> | ||
| <Setter Property="Padding" Value="0"/> | ||
| </Style> | ||
| <Style Selector="Separator"> | ||
| <Setter Property="Margin" Value="0,1"/> | ||
| </Style> | ||
| <Style Selector="TreeViewItem"> | ||
| <Setter Property="FontWeight" Value="Regular"/> | ||
| </Style> | ||
| </UserControl.Styles> | ||
|
|
||
| <Border Name="ExtendedSideBar" Background="{DynamicResource SkEditorBorderBackground}" CornerRadius="7" Margin="10,0,0,0"> | ||
| <Border.Transitions> | ||
| <Transitions> | ||
| <DoubleTransition Property="Width" Duration="0:0:0.05" Easing="QuadraticEaseIn"/> | ||
| </Transitions> | ||
| </Border.Transitions> | ||
|
|
||
| <Grid RowDefinitions="auto,auto,*"> | ||
| <TextBlock Grid.Row="0" Text="Explorer" FontWeight="DemiBold" Margin="20,10,20,10"/> | ||
| <Separator Grid.Row="1" Margin="0,0,0,10"/> | ||
| <TreeView Grid.Row="2" Name="FileTreeView"> | ||
|
|
||
| </TreeView> | ||
| </Grid> | ||
| </Border> | ||
| </UserControl> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| using Avalonia; | ||
| using Avalonia.Controls; | ||
| using Avalonia.Markup.Xaml; | ||
| using FluentAvalonia.UI.Controls; | ||
| using SkEditor.Utilities; | ||
|
|
||
| namespace SkEditor.Controls.Sidebar; | ||
|
|
||
| public partial class ExplorerSidebarPanel : UserControl | ||
| { | ||
| public ExplorerSidebarPanel() | ||
| { | ||
| InitializeComponent(); | ||
| } | ||
|
|
||
| public class ExplorerPanel : SidebarPanel | ||
| { | ||
| public override UserControl Content => Panel; | ||
| public override IconSource Icon => new SymbolIconSource() { Symbol = Symbol.Folder }; | ||
| public override bool IsDisabled => false; | ||
|
|
||
| public readonly ExplorerSidebarPanel Panel = new (); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| <Styles xmlns="https://github.com/avaloniaui" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"> | ||
| <Design.PreviewWith> | ||
| <Border Padding="20"> | ||
| <StackPanel> | ||
| <Button Classes="success" Content="Success Button" Margin="8" HorizontalAlignment="Center" /> | ||
| <Button Classes="accent" Content="FA Accent Button" Margin="8" HorizontalAlignment="Center" /> | ||
| <Button Classes="danger" Content="Danger Button" Margin="8" HorizontalAlignment="Center" /> | ||
| <Button Classes="info" Content="Info Button" Margin="8" HorizontalAlignment="Center" /> | ||
| <Button Content="Disabled Button" Margin="8" IsEnabled="False" HorizontalAlignment="Center" /> | ||
| </StackPanel> | ||
| </Border> | ||
| </Design.PreviewWith> | ||
|
|
||
| <Style Selector="Button.success"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeGreenColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeGreenColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" /> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pointerover"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeDarkGreenColor}"/> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeDarkGreenColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pressed"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeDarkDarkGreenColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeDarkDarkGreenColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:disabled"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" /> | ||
| </Style> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <!-- Danger --> | ||
| <Style Selector="Button.danger"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeRedColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeRedColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" /> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pointerover"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeDarkRedColor}"/> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeDarkRedColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pressed"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeDarkDarkRedColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeDarkDarkRedColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:disabled"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" /> | ||
| </Style> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <!-- Info --> | ||
| <Style Selector="Button.info"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeLightBlueColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeLightBlueColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" /> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pointerover"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeBlueColor}"/> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeBlueColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pressed"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ThemeDarkBlueColor}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ThemeDarkBlueColor}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:disabled"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushDisabled}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" /> | ||
| </Style> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <!--Accent Button--> | ||
| <Style Selector="Button.accent"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource AccentButtonBackground}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrush}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource AccentButtonForeground}" /> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pointerover"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPointerOver}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPointerOver}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPointerOver}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pressed"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPressed}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPressed}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPressed}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:disabled"> | ||
| <Style Selector="^ /template/ ui|FABorder#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundDisabled}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushDisabled}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> | ||
| <Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundDisabled}" /> | ||
| </Style> | ||
| </Style> | ||
| </Style> | ||
| </Styles> |
Oops, something went wrong.