mrleo1nid/PLib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor PLib video library manager's UI to implement a side panel for settings, enhancing accessibility and layout. Update MainWindow and SettingsView to accommodate the new design, ensuring the settings panel integrates seamlessly without overlaying the main content. Revise styles for app bars and status bars for consistency across the application. Update README.md to reflect these UI changes.

Browse Source
This commit is contained in:
Leonid Pershin
2026-08-08 12:52:59 +03:00
parent 835937357e
commit 5920f7a940
5 changed files with 125 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PLib.Desktop/Themes/LibraryStyles.axaml
+40 -39
View File
@@ -104,56 +104,57 @@
<Setter Property="FontSize" Value="12.5" />
</Style>
<!-- ======================== Settings overlay ======================== -->
<!-- ========================= Window bars ========================= -->
<!--
The overlay stays in the tree and hides behind opacity rather than IsVisible: a collapsed
element has nothing to animate from, and the slide-in is the whole point. Nothing inside
is focusable while it is closed, because the panel's content is null until it opens.
The library and the settings panel sit side by side, so their top and bottom bars have to
line up: the separators read as one continuous line across the window. Fixing the heights
here, in one place, is what keeps them from drifting apart as either side gains controls.
-->
<Style Selector="Panel.settingsOverlay">
<Setter Property="Opacity" Value="0" />
<Setter Property="IsHitTestVisible" Value="False" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.16" Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="Panel.settingsOverlay.open">
<Setter Property="Opacity" Value="1" />
<Setter Property="IsHitTestVisible" Value="True" />
</Style>
<!-- Click-anywhere-to-dismiss backdrop. A Button gets the click handling for free. -->
<Style Selector="Button.scrim">
<Setter Property="Background" Value="{DynamicResource OverlayBrush}" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Border.drawer">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Width" Value="470" />
<Setter Property="Background" Value="{DynamicResource PageBackgroundBrush}" />
<Style Selector="Border.appBar">
<Setter Property="Height" Value="62" />
<Setter Property="Padding" Value="20,0" />
<Setter Property="Background" Value="{DynamicResource SurfaceBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource SurfaceBorderBrush}" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
<Style Selector="Border.statusBar">
<Setter Property="Height" Value="50" />
<Setter Property="Padding" Value="20,0" />
<Setter Property="Background" Value="{DynamicResource SurfaceBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource SurfaceBorderBrush}" />
<Setter Property="BorderThickness" Value="0,1,0,0" />
</Style>
<!-- ======================== Settings panel ======================== -->
<!--
The panel is a column of the layout rather than an overlay, so opening it squeezes the
grid instead of covering it. Width is animated because Avalonia has no transition for
GridLength; the content inside keeps its full width and is simply clipped while the
column grows, which stops the whole panel reflowing on every animation frame.
-->
<Style Selector="Border.settingsPanel">
<Setter Property="Width" Value="0" />
<Setter Property="ClipToBounds" Value="True" />
<!--
Its own backdrop and a stronger divider than the usual surface border: once the bars on
both sides line up, a hairline in the ordinary border colour reads as one continuous
bar and the panel stops looking like a separate region.
-->
<Setter Property="Background" Value="{DynamicResource PanelBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource PanelDividerBrush}" />
<Setter Property="BorderThickness" Value="1,0,0,0" />
<Setter Property="RenderTransform" Value="translateX(30px)" />
<Setter Property="Transitions">
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut" />
<DoubleTransition Property="Width" Duration="0:0:0.22" Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="Panel.settingsOverlay.open Border.drawer">
<Setter Property="RenderTransform" Value="none" />
<Style Selector="Border.settingsPanel.open">
<Setter Property="Width" Value="400" />
</Style>
<!-- ============================ Badge ============================ -->