Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Material][Non-Mobile] NavigationBar Icons do not match design sizes #877

Closed
kazo0 opened this issue Oct 17, 2023 · 2 comments · Fixed by #976
Closed

[Material][Non-Mobile] NavigationBar Icons do not match design sizes #877

kazo0 opened this issue Oct 17, 2023 · 2 comments · Fixed by #976
Assignees
@kazo0
Labels
control/navigationbar kind/bug Something isn't working theme/material

Comments

@kazo0
Copy link
Contributor

kazo0 commented Oct 17, 2023 •
edited
Loading

Design:
image

Actual (WASM):
image

Comparison:
image

XAML from above example:

  <Page.Resources>
    <x:String x:Key="Icon_Arrow_Back">F1 M 16 7 L 3.8299999237060547 7 L 9.420000076293945 1.4099998474121094 L 8 0 L 0 8 L 8 16 L 9.40999984741211 14.59000015258789 L 3.8299999237060547 9 L 16 9 L 16 7 Z</x:String>
    <x:String x:Key="Icon_Calendar_Today">F1 M 16.2 1.8181818181818181 L 15.3 1.8181818181818181 L 15.3 0 L 13.5 0 L 13.5 1.8181818181818181 L 4.5 1.8181818181818181 L 4.5 0 L 2.7 0 L 2.7 1.8181818181818181 L 1.8 1.8181818181818181 C 0.8099999785423279 1.8181818181818181 0 2.6363636146892198 0 3.6363636363636362 L 0 18.18181818181818 C 0 19.181818203492597 0.8099999785423279 20 1.8 20 L 16.2 20 C 17.19000002145767 20 18 19.181818203492597 18 18.18181818181818 L 18 3.6363636363636362 C 18 2.6363636146892198 17.19000002145767 1.8181818181818181 16.2 1.8181818181818181 Z M 16.2 18.18181818181818 L 1.8 18.18181818181818 L 1.8 6.363636363636363 L 16.2 6.363636363636363 L 16.2 18.18181818181818 Z</x:String>
    <x:String x:Key="Icon_Close">F1 M 14 1.4099998474121094 L 12.59000015258789 0 L 7 5.590000152587891 L 1.4099998474121094 0 L 0 1.4099998474121094 L 5.590000152587891 7 L 0 12.59000015258789 L 1.4099998474121094 14 L 7 8.40999984741211 L 12.59000015258789 14 L 14 12.59000015258789 L 8.40999984741211 7 L 14 1.4099998474121094 Z</x:String>
    <x:String x:Key="Icon_Menu">F1 M 0 12 L 18 12 L 18 10 L 0 10 L 0 12 Z M 0 7 L 18 7 L 18 5 L 0 5 L 0 7 Z M 0 0 L 0 2 L 18 2 L 18 0 L 0 0 Z</x:String>
    <x:String x:Key="Icon_More_Vert">F1 M 2 4 C 3.100000023841858 4 4 3.100000023841858 4 2 C 4 0.8999999761581421 3.100000023841858 0 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 C 0 3.100000023841858 0.8999999761581421 4 2 4 Z M 2 6 C 0.8999999761581421 6 0 6.899999976158142 0 8 C 0 9.100000023841858 0.8999999761581421 10 2 10 C 3.100000023841858 10 4 9.100000023841858 4 8 C 4 6.899999976158142 3.100000023841858 6 2 6 Z M 2 12 C 0.8999999761581421 12 0 12.899999976158142 0 14 C 0 15.100000023841858 0.8999999761581421 16 2 16 C 3.100000023841858 16 4 15.100000023841858 4 14 C 4 12.899999976158142 3.100000023841858 12 2 12 Z</x:String>
    <x:String x:Key="Icon_Search">F1 M 12.5 11 L 11.710000038146973 11 L 11.430000305175781 10.729999542236328 C 12.410000324249268 9.589999556541443 13 8.110000014305115 13 6.5 C 13 2.9100000858306885 10.089999914169312 0 6.5 0 C 2.9100000858306885 0 0 2.9100000858306885 0 6.5 C 0 10.089999914169312 2.9100000858306885 13 6.5 13 C 8.110000014305115 13 9.589999556541443 12.410000324249268 10.729999542236328 11.430000305175781 L 11 11.710000038146973 L 11 12.5 L 16 17.489999771118164 L 17.489999771118164 16 L 12.5 11 L 12.5 11 Z M 6.5 11 C 4.009999990463257 11 2 8.990000009536743 2 6.5 C 2 4.009999990463257 4.009999990463257 2 6.5 2 C 8.990000009536743 2 11 4.009999990463257 11 6.5 C 11 8.990000009536743 8.990000009536743 11 6.5 11 Z</x:String>
  </Page.Resources>
  <utu:AutoLayout Background="{ThemeResource BackgroundBrush}" Spacing="10" Padding="10">
    <utu:NavigationBar HorizontalContentAlignment="Center" Content="Default">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Menu}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
      <utu:NavigationBar.PrimaryCommands>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Calendar_Today}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.PrimaryCommands>
    </utu:NavigationBar>
    <utu:NavigationBar HorizontalContentAlignment="Left" Content="Default">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Close}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
      <utu:NavigationBar.PrimaryCommands>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Calendar_Today}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Search}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_More_Vert}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.PrimaryCommands>
    </utu:NavigationBar>
    <utu:NavigationBar Background="{ThemeResource SecondaryBrush}" HorizontalContentAlignment="Left" Foreground="{ThemeResource OnPrimaryBrush}" Content="Primary">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Arrow_Back}" Foreground="{ThemeResource OnPrimaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
      <utu:NavigationBar.PrimaryCommands>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Calendar_Today}" Foreground="{ThemeResource OnPrimaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Search}" Foreground="{ThemeResource OnPrimaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_More_Vert}" Foreground="{ThemeResource OnPrimaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.PrimaryCommands>
    </utu:NavigationBar>
    <utu:NavigationBar Background="{ThemeResource TertiaryBrush}" HorizontalContentAlignment="Left" Foreground="{ThemeResource OnTertiaryBrush}" Content="Modal Primary">
      <utu:NavigationBar.MainCommand>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Arrow_Back}" Foreground="{ThemeResource OnTertiaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.MainCommand>
      <utu:NavigationBar.PrimaryCommands>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Calendar_Today}" Foreground="{ThemeResource OnTertiaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_Search}" Foreground="{ThemeResource OnTertiaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton>
          <AppBarButton.Icon>
            <PathIcon Data="{StaticResource Icon_More_Vert}" Foreground="{ThemeResource OnTertiaryBrush}" />
          </AppBarButton.Icon>
        </AppBarButton>
      </utu:NavigationBar.PrimaryCommands>
    </utu:NavigationBar>
  </utu:AutoLayout>
@agneszitte
Copy link
Contributor

(Related issue : https://github.com/unoplatform/Uno.Figma/issues/1484)

@vatsashah45 vatsashah45 self-assigned this Nov 29, 2023
@kazo0 kazo0 removed their assignment Dec 13, 2023
@vatsashah45 vatsashah45 mentioned this issue Dec 15, 2023
Merged
18 tasks
@kazo0
Copy link
Contributor Author

kazo0 commented Feb 9, 2024

Icons are too large now :D

image

@kazo0 kazo0 reopened this Feb 9, 2024
@kazo0 kazo0 assigned kazo0 and unassigned vatsashah45 Feb 9, 2024
@kazo0 kazo0 closed this as completed Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kazo0 kazo0

Labels
control/navigationbar kind/bug Something isn't working theme/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Navbar Icons sizing unoplatform/uno.toolkit.ui
3 participants
@kazo0 @agneszitte @vatsashah45