Skip to content

Commit d880978

Browse files
AGIBuildAGIBuild
committed
optimize thenavigation bar
1 parent f7431cd commit d880978

14 files changed

Lines changed: 209 additions & 223 deletions

‎src/Modulus.App/App.axaml‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,76 @@
11
<Application xmlns="https://github.com/avaloniaui"
2-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
x:Class="Modulus.App.App"
4-
RequestedThemeVariant="Default">
5-
<!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
6-
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
x:Class="Modulus.App.App"
4+
RequestedThemeVariant="Default">
5+
<!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available
6+
options. -->
7+
<Application.Resources>
8+
<ResourceDictionary>
9+
<ResourceDictionary.MergedDictionaries>
10+
<ResourceInclude Source="avares://Modulus.App/Assets/Icons.axaml"/>
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
714
<Application.Styles>
815
<FluentTheme />
916

1017
<Style Selector="Button.transparent">
11-
<Setter Property="Background" Value="Transparent"/>
12-
<Setter Property="BorderThickness" Value="0"/>
18+
<Setter Property="Background" Value="Transparent" />
19+
<Setter Property="BorderThickness" Value="0" />
1320
</Style>
1421
<Style Selector="Button.transparent:pointerover /template/ ContentPresenter">
15-
<Setter Property="Background" Value="{DynamicResource SystemFillColorNeutralSubtleSecondary}"/>
22+
<Setter Property="Background"
23+
Value="{DynamicResource SystemFillColorNeutralSubtleSecondary}" />
1624
</Style>
1725
<Style Selector="Button.transparent:pressed /template/ ContentPresenter">
18-
<Setter Property="Background" Value="{DynamicResource SystemFillColorNeutralSubtleTertiary}"/>
26+
<Setter Property="Background"
27+
Value="{DynamicResource SystemFillColorNeutralSubtleTertiary}" />
1928
</Style>
2029

2130
<!-- 卡片式切换按钮样式 -->
2231
<Style Selector="ToggleButton">
23-
<Setter Property="Background" Value="Transparent"/>
24-
<Setter Property="BorderThickness" Value="0"/>
25-
<Setter Property="Padding" Value="8"/>
26-
<Setter Property="CornerRadius" Value="4"/>
32+
<Setter Property="Background" Value="Transparent" />
33+
<Setter Property="BorderThickness" Value="0" />
34+
<Setter Property="Padding" Value="8" />
35+
<Setter Property="CornerRadius" Value="4" />
2736
</Style>
2837
<Style Selector="ToggleButton:pointerover /template/ ContentPresenter">
29-
<Setter Property="Background" Value="{DynamicResource SystemFillColorNeutralSubtleSecondary}"/>
38+
<Setter Property="Background"
39+
Value="{DynamicResource SystemFillColorNeutralSubtleSecondary}" />
3040
</Style>
3141
<Style Selector="ToggleButton:checked /template/ ContentPresenter">
32-
<Setter Property="Background" Value="{DynamicResource SystemAccentColorLight3}"/>
42+
<Setter Property="Background" Value="{DynamicResource SystemAccentColorLight3}" />
3343
</Style>
3444

3545
<!-- 危险按钮样式 -->
3646
<Style Selector="Button.danger">
37-
<Setter Property="Background" Value="Transparent"/>
38-
<Setter Property="BorderThickness" Value="0"/>
39-
<Setter Property="Padding" Value="8"/>
40-
<Setter Property="CornerRadius" Value="4"/>
41-
<Setter Property="Foreground" Value="{DynamicResource SystemFillColorCritical}"/>
47+
<Setter Property="Background" Value="Transparent" />
48+
<Setter Property="BorderThickness" Value="0" />
49+
<Setter Property="Padding" Value="8" />
50+
<Setter Property="CornerRadius" Value="4" />
51+
<Setter Property="Foreground" Value="{DynamicResource SystemFillColorCritical}" />
4252
</Style>
4353
<Style Selector="Button.danger:pointerover /template/ ContentPresenter">
44-
<Setter Property="Background" Value="{DynamicResource SystemFillColorCriticalSubtleSecondary}"/>
54+
<Setter Property="Background"
55+
Value="{DynamicResource SystemFillColorCriticalSubtleSecondary}" />
4556
</Style>
4657
<Style Selector="Button.danger:pressed /template/ ContentPresenter">
47-
<Setter Property="Background" Value="{DynamicResource SystemFillColorCriticalSubtleTertiary}"/>
58+
<Setter Property="Background"
59+
Value="{DynamicResource SystemFillColorCriticalSubtleTertiary}" />
4860
</Style>
4961

5062
<!-- 插件卡片样式 -->
5163
<Style Selector="Border.plugin-card">
52-
<Setter Property="Background" Value="{DynamicResource SystemAltHighColor}"/>
53-
<Setter Property="BorderThickness" Value="1"/>
54-
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlTransparentBrush}"/>
55-
<Setter Property="CornerRadius" Value="8"/>
56-
<Setter Property="Margin" Value="0,0,16,16"/>
57-
<Setter Property="Padding" Value="16"/>
64+
<Setter Property="Background" Value="{DynamicResource SystemAltHighColor}" />
65+
<Setter Property="BorderThickness" Value="1" />
66+
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlTransparentBrush}" />
67+
<Setter Property="CornerRadius" Value="8" />
68+
<Setter Property="Margin" Value="0,0,16,16" />
69+
<Setter Property="Padding" Value="16" />
5870
</Style>
5971
<Style Selector="Border.plugin-card:pointerover">
60-
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorLight2}"/>
61-
<Setter Property="Background" Value="{DynamicResource SystemAltMediumHighColor}"/>
72+
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorLight2}" />
73+
<Setter Property="Background" Value="{DynamicResource SystemAltMediumHighColor}" />
6274
</Style>
6375
</Application.Styles>
64-
</Application>
76+
</Application>

‎src/Modulus.App/Assets/Icons.axaml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3+
<!-- Navigation Icons -->
4+
<PathGeometry x:Key="home_regular">M11.5664 4.49963L7.33337 1.08342C6.89784 0.72305 6.28843 0.723051 5.8529 1.08342L1.61986 4.49963C1.23306 4.82054 1 5.3021 1 5.81395V13.0002C1 13.7875 1.56282 14.5832 2.50024 14.5832H10.6865C11.6239 14.5832 12.1867 13.7875 12.1867 13.0002V5.81395C12.1867 5.3021 11.9532 4.82054 11.5664 4.49963ZM6.59314 13.0002H2.50024V5.81395L6.59314 2.50867L10.6865 5.81395V13.0002H6.59314Z</PathGeometry>
5+
6+
<PathGeometry x:Key="home_filled">M12.5664 4.49963L8.33337 1.08342C7.89784 0.72305 7.28843 0.723051 6.8529 1.08342L2.61986 4.49963C2.23306 4.82054 2 5.3021 2 5.81395V13.0002C2 13.7875 2.56282 14.5832 3.50024 14.5832H11.6865C12.6239 14.5832 13.1867 13.7875 13.1867 13.0002V5.81395C13.1867 5.3021 12.9532 4.82054 12.5664 4.49963Z</PathGeometry>
7+
8+
<PathGeometry x:Key="settings_regular">M6.34315 16.4l.21838-1.204c.05048-.2782.21922-.5139.47554-.6487.25633-.1349.5584-.1437.84159-.0131l1.16358.5314c.86975-.7993 1.51996-1.8054 1.87886-2.9218l-1.05905-.6849c-.25165-.1628-.40744-.4359-.42817-.7559-.0207-.32.09931-.6328.33433-.8678l.95486-.9549c-.23502-.861-.61652-1.6611-1.12496-2.3708l-1.16358.5314c-.28318.1306-.58525.1218-.84159-.0131-.25632-.1348-.42505-.3705-.47554-.6487L7.02473 5.6c-.44071-.0844-.89082-.1267-1.34158-.1267-.45075 0-.90087.0423-1.34158.1267l-.21838 1.204c-.05049.2782-.21922.5139-.47554.6487-.25634.1349-.55841.1437-.84159.0131l-1.16358-.5314c-.50844.7097-.88994 1.5098-1.12496 2.3708l.95486.9549c.23502.235.35504.5478.33433.8678-.02073.32-.17652.5931-.42817.7559l-1.05905.6849c.3589 1.1164 1.00911 2.1225 1.87886 2.9218l1.16358-.5314c.28319-.1306.58526-.1218.84159.0131.25632.1348.42506.3705.47554.6487l.21838 1.204c.44071.0844.89083.1267 1.34158.1267.45076 0 .90087-.0423 1.34158-.1267zM5.68315 8.4c1.65685 0 3 1.3431 3 3 0 1.6569-1.34315 3-3 3s-3-1.3431-3-3c0-1.6569 1.34315-3 3-3z</PathGeometry>
9+
10+
<PathGeometry x:Key="puzzle_regular">M12.0002 6.75V8.5C12.0002 9.4 12.7002 10 13.5002 10C14.3002 10 15.0002 10.7 15.0002 11.5V13.5C15.0002 14.3 14.3002 15 13.5002 15H11.5002C10.7002 15 10.0002 14.3 10.0002 13.5C10.0002 12.7 9.40021 12 8.50021 12H6.75021V14C6.75021 14.4 6.40021 14.75 6.00021 14.75H2.00021C1.60021 14.75 1.25021 14.4 1.25021 14V10C1.25021 9.6 1.60021 9.25 2.00021 9.25H4.00021V7.5C4.00021 6.6 4.70021 6 5.50021 6C6.30021 6 7.00021 5.3 7.00021 4.5V2.5C7.00021 1.7 7.70021 1 8.50021 1H10.5002C11.3002 1 12.0002 1.7 12.0002 2.5C12.0002 3.3 12.6002 4 13.5002 4H15.7502C16.1502 4 16.5002 4.35 16.5002 4.75V8.75C16.5002 9.15 16.1502 9.5 15.7502 9.5H13.7502V6.75H12.0002Z</PathGeometry>
11+
12+
<!-- Menu Icons -->
13+
<PathGeometry x:Key="menu_regular">M2 4.5C2 4.22386 2.22386 4 2.5 4H13.5C13.7761 4 14 4.22386 14 4.5C14 4.77614 13.7761 5 13.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 8C2 7.72386 2.22386 7.5 2.5 7.5H13.5C13.7761 7.5 14 7.72386 14 8C14 8.27614 13.7761 8.5 13.5 8.5H2.5C2.22386 8.5 2 8.27614 2 8ZM2.5 11C2.22386 11 2 11.2239 2 11.5C2 11.7761 2.22386 12 2.5 12H13.5C13.7761 12 14 11.7761 14 11.5C14 11.2239 13.7761 11 13.5 11H2.5Z</PathGeometry>
14+
15+
<!-- Action Icons -->
16+
<PathGeometry x:Key="add_regular">M8.5 3C8.5 2.72386 8.27614 2.5 8 2.5C7.72386 2.5 7.5 2.72386 7.5 3V7.5H3C2.72386 7.5 2.5 7.72386 2.5 8C2.5 8.27614 2.72386 8.5 3 8.5H7.5V13C7.5 13.2761 7.72386 13.5 8 13.5C8.27614 13.5 8.5 13.2761 8.5 13V8.5H13C13.2761 8.5 13.5 8.27614 13.5 8C13.5 7.72386 13.2761 7.5 13 7.5H8.5V3Z</PathGeometry>
17+
18+
<PathGeometry x:Key="delete_regular">M14.5 3L13.5 3L12.5 3L11.5 3L4.5 3L3.5 3L2.5 3L1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H2.5V13.5C2.5 14.3284 3.17157 15 4 15H12C12.8284 15 13.5 14.3284 13.5 13.5V4H14.5C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3ZM12.5 4L12.5 13.5C12.5 13.7761 12.2761 14 12 14L4 14C3.72386 14 3.5 13.7761 3.5 13.5V4L12.5 4ZM5 2.5H11C11.2761 2.5 11.5 2.27614 11.5 2C11.5 1.72386 11.2761 1.5 11 1.5H5C4.72386 1.5 4.5 1.72386 4.5 2C4.5 2.27614 4.72386 2.5 5 2.5Z</PathGeometry>
19+
20+
<PathGeometry x:Key="search_regular">M6.5 1C9.53757 1 12 3.46243 12 6.5C12 7.74052 11.6375 8.89452 11 9.86951L14.7071 13.5766C14.8946 13.7641 14.8946 14.0677 14.7071 14.2552C14.5196 14.4427 14.2161 14.4427 14.0286 14.2552L10.3214 10.5481C9.34645 11.1856 8.19245 11.5481 7 11.5481C3.96243 11.5481 1.5 9.08567 1.5 6.0481C1.5 3.01053 3.96243 0.548096 7 0.548096L6.5 1ZM6.5 2C4.01472 2 2 4.01472 2 6.5C2 8.98528 4.01472 11 6.5 11C8.98528 11 11 8.98528 11 6.5C11 4.01472 8.98528 2 6.5 2Z</PathGeometry>
21+
22+
<PathGeometry x:Key="power_regular">M7.5 1.5C7.5 1.22386 7.72386 1 8 1C8.27614 1 8.5 1.22386 8.5 1.5V7.5C8.5 7.77614 8.27614 8 8 8C7.72386 8 7.5 7.77614 7.5 7.5V1.5ZM4.58579 4.58579C4.78105 4.39052 5.09763 4.39052 5.2929 4.58579C5.48816 4.78105 5.48816 5.09763 5.2929 5.2929C4.54605 6.03975 4.08579 7.07191 4.08579 8.17157C4.08579 10.3807 5.87868 12.1736 8.08784 12.1736C10.297 12.1736 12.0899 10.3807 12.0899 8.17157C12.0899 7.07191 11.6296 6.03975 10.8828 5.2929C10.6875 5.09763 10.6875 4.78105 10.8828 4.58579C11.078 4.39052 11.3946 4.39052 11.5899 4.58579C12.5306 5.52648 13.0899 6.83702 13.0899 8.17157C13.0899 10.933 10.8492 13.1736 8.08784 13.1736C5.32649 13.1736 3.08579 10.933 3.08579 8.17157C3.08579 6.83702 3.64509 5.52648 4.58579 4.58579Z</PathGeometry>
23+
24+
<PathGeometry x:Key="info_regular">M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM8 6.5C8.27614 6.5 8.5 6.72386 8.5 7V11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11V7C7.5 6.72386 7.72386 6.5 8 6.5ZM8 4C8.41421 4 8.75 4.33579 8.75 4.75C8.75 5.16421 8.41421 5.5 8 5.5C7.58579 5.5 7.25 5.16421 7.25 4.75C7.25 4.33579 7.58579 4 8 4Z</PathGeometry>
25+
26+
<PathGeometry x:Key="folder_regular">M13.5 4H7.5L6.1465 2.6465C5.95625 2.4562 5.69945 2.25 5.25 2.25H2.5C1.67157 2.25 1 2.92157 1 3.75V12.25C1 13.0784 1.67157 13.75 2.5 13.75H13.5C14.3284 13.75 15 13.0784 15 12.25V5.5C15 4.67157 14.3284 4 13.5 4ZM2 3.75C2 3.47386 2.22386 3.25 2.5 3.25H5.25C5.41055 3.25 5.51695 3.3188 5.6035 3.4035L7.25 5.05H13.5C13.7761 5.05 14 5.27386 14 5.5V6H2V3.75ZM2 7H14V12.25C14 12.5261 13.7761 12.75 13.5 12.75H2.5C2.22386 12.75 2 12.5261 2 12.25V7Z</PathGeometry>
27+
28+
<PathGeometry x:Key="arrow_sync_regular">M6.8534 2.64645C7.04866 2.84171 7.04866 3.15829 6.8534 3.35355L4.20695 6H9.5C11.433 6 13 7.567 13 9.5V10C13 10.2761 12.7761 10.5 12.5 10.5C12.2239 10.5 12 10.2761 12 10V9.5C12 8.11929 10.8807 7 9.5 7H4.20695L6.8534 9.64645C7.04866 9.84171 7.04866 10.1583 6.8534 10.3536C6.65814 10.5488 6.34156 10.5488 6.1463 10.3536L2.64645 6.85355C2.45118 6.65829 2.45118 6.34171 2.64645 6.14645L6.1463 2.64645C6.34156 2.45118 6.65814 2.45118 6.8534 2.64645ZM3.5 5.5C3.77614 5.5 4 5.72386 4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5ZM9.1466 13.3536C8.95134 13.1583 8.95134 12.8417 9.1466 12.6464L11.7931 10H6.5C4.567 10 3 8.433 3 6.5V6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6V6.5C4 7.88071 5.11929 9 6.5 9H11.7931L9.1466 6.35355C8.95134 6.15829 8.95134 5.84171 9.1466 5.64645C9.34186 5.45118 9.65844 5.45118 9.8537 5.64645L13.3536 9.14645C13.5488 9.34171 13.5488 9.65829 13.3536 9.85355L9.8537 13.3536C9.65844 13.5488 9.34186 13.5488 9.1466 13.3536ZM12.5 9.5C12.2239 9.5 12 9.72386 12 10C12 10.2761 12.2239 10.5 12.5 10.5C12.7761 10.5 13 10.2761 13 10C13 9.72386 12.7761 9.5 12.5 9.5Z</PathGeometry>
29+
30+
<PathGeometry x:Key="arrow_download_regular">M7.5 11.0001L3.85355 7.35371C3.65829 7.15845 3.34171 7.15845 3.14645 7.35371C2.95118 7.54897 2.95118 7.86555 3.14645 8.06081L7.64645 12.5608C7.84171 12.7561 8.15829 12.7561 8.35355 12.5608L12.8536 8.06081C13.0488 7.86555 13.0488 7.54897 12.8536 7.35371C12.6583 7.15845 12.3417 7.15845 12.1464 7.35371L8.5 11.0001L8.5 2.50017C8.5 2.22403 8.27614 2.00017 8 2.00017C7.72386 2.00017 7.5 2.22403 7.5 2.50017L7.5 11.0001Z</PathGeometry>
31+
</ResourceDictionary>

‎src/Modulus.App/Controls/ContentArea.axaml‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,6 @@
1616
<!-- 内容区头部 -->
1717
<Grid Grid.Row="0" Height="64" Margin="16,8,16,0">
1818
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
19-
<!-- 折叠/展开按钮 -->
20-
<Button x:Name="ToggleButton"
21-
Width="40" Height="40"
22-
CornerRadius="8"
23-
Background="Transparent"
24-
IsVisible="{Binding ShowToggleButton, ElementName=control}">
25-
<TextBlock x:Name="ToggleButtonIcon"
26-
Text="{Binding CollapseExpandIcon, ElementName=control}"
27-
FontFamily="Segoe MDL2 Assets"
28-
FontSize="16"
29-
VerticalAlignment="Center"
30-
HorizontalAlignment="Center" />
31-
</Button>
32-
3319
<!-- 页面标题 -->
3420
<TextBlock x:Name="PageTitleText"
3521
Text="{Binding PageTitle, ElementName=control}"

‎src/Modulus.App/Controls/ContentArea.axaml.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ public string PageTitle
4949
/// 定义 CollapseExpandIcon 依赖属性
5050
/// </summary>
5151
public static readonly StyledProperty<string> CollapseExpandIconProperty =
52-
AvaloniaProperty.Register<ContentArea, string>(nameof(CollapseExpandIcon), defaultValue: "\uE700");
52+
AvaloniaProperty.Register<ContentArea, string>(nameof(CollapseExpandIcon), defaultValue: "menu_regular");
5353

5454
/// <summary>
5555
/// 获取或设置折叠/展开按钮图标

‎src/Modulus.App/Controls/NavigationBody.axaml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
xmlns:vm="clr-namespace:Modulus.App.Controls.ViewModels"
66
xmlns:conv="clr-namespace:Modulus.App.Converters"
77
xmlns:controls="clr-namespace:Modulus.App.Controls"
8+
xmlns:system="clr-namespace:System;assembly=netstandard"
89
mc:Ignorable="d" d:DesignWidth="220" d:DesignHeight="400"
910
x:Class="Modulus.App.Controls.NavigationBody"
1011
x:Name="control"
@@ -95,12 +96,12 @@
9596
</Grid.ColumnDefinitions>
9697

9798
<!-- 图标 -->
98-
<TextBlock Text="{Binding Icon}"
99-
Grid.Column="0"
100-
FontFamily="Segoe MDL2 Assets"
101-
FontSize="18"
102-
VerticalAlignment="Center"
103-
HorizontalAlignment="Center"/>
99+
<PathIcon Grid.Column="0"
100+
Width="18" Height="18"
101+
Foreground="White"
102+
Data="{Binding Icon, Converter={x:Static conv:ResourceKeyToGeometryConverter.Instance}}"
103+
VerticalAlignment="Center"
104+
HorizontalAlignment="Center"/>
104105

105106
<!-- 标签文本 -->
106107
<TextBlock Text="{Binding Label}"

‎src/Modulus.App/Controls/NavigationFooter.axaml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@
9393
</Grid.ColumnDefinitions>
9494

9595
<!-- 图标 -->
96-
<TextBlock Text="{Binding Icon}"
97-
Grid.Column="0"
98-
FontFamily="Segoe MDL2 Assets"
99-
FontSize="18"
100-
VerticalAlignment="Center"
101-
HorizontalAlignment="Center"/>
96+
<PathIcon Grid.Column="0"
97+
Width="18" Height="18"
98+
Foreground="White"
99+
Data="{Binding Icon, Converter={x:Static conv:ResourceKeyToGeometryConverter.Instance}}"
100+
VerticalAlignment="Center"
101+
HorizontalAlignment="Center"/>
102102

103103
<!-- 标签文本 -->
104104
<TextBlock Text="{Binding Label}"

0 commit comments

Comments
 (0)