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

chore: update appbar #1048

Merged
merged 2 commits into from
Nov 10, 2023
Merged

chore: update appbar #1048

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a39422c
chore: update appbar
Xiaoy312 Nov 8, 2023
873a2fe
fix: Update Wasm Banner for the mobile / narrow version and light / d…
agneszitte Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
343 changes: 338 additions & 5 deletions Uno.Gallery/Uno.Gallery.Shared/Views/Shell.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,193 @@
xmlns:local="using:Uno.Gallery"
xmlns:not_wasm="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:wasm="http://uno.ui/wasm"
xmlns:xamarin="http://uno.ui/xamarin"
mc:Ignorable="wasm xamarin">
xmlns:todo="what should be done"
mc:Ignorable="wasm xamarin todo">

<UserControl.Resources>
<Style x:Key="AppBarButtonStyle"
TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Margin" Value="27.2,11.2" />

<Setter Property="FontSize" Value="19" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarDropdownButtonStyle"
TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Margin" Value="27.2,11.2" />

<Setter Property="FontSize" Value="19" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal"
Spacing="8">
<ContentPresenter Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
<PathIcon todo:Data="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
Data="M 7.41 6.58 L 12 11.17 L 16.59 6.58 L 18 8 L 12 14 L 6 8 L 7.41 6.58 Z"
VerticalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarCtaButtonStyle"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource UnoGreenColorBrush}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Padding" Value="32,8" />
<Setter Property="Margin" Value="16,0" />

<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<!-- todo: add gradient animation -->
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{StaticResource UnoBlueColorBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{StaticResource UnoPurpleColorBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarMenuFlyoutPresenterStyle"
TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
<Setter Property="Padding" Value="20" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<utu:ShadowContainer Background="{TemplateBinding Background}">
<utu:ShadowContainer.Shadows>
<utu:ShadowCollection x:Name="Shadows">
<utu:Shadow OffsetX="0" OffsetY="0" BlurRadius="20" Spread="2" Color="{ThemeResource OutlineColor}" Opacity="0.2" />
</utu:ShadowCollection>
</utu:ShadowContainer.Shadows>

<ItemsPresenter Padding="{TemplateBinding Padding}" />
</utu:ShadowContainer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarMenuFlyoutItemStyle"
TargetType="MenuFlyoutItem">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="10" />

<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutItem">
<Grid x:Name="RootGrid"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="TextBlock.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="TextBlock.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<TextBlock x:Name="TextBlock"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Text}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}"
MaxLines="1"
TextTrimming="CharacterEllipsis"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarHeaderMenuFlyoutItemStyle"
BasedOn="{StaticResource AppBarMenuFlyoutItemStyle}"
TargetType="MenuFlyoutItem">
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
</UserControl.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

Expand All @@ -20,9 +203,159 @@
</Grid.RowDefinitions>

<!-- Banner similar to the Uno website (WASM only) -->
<wasm:Border Grid.Row="1">
<local:Banner />
</wasm:Border>
<wasm:Grid Grid.Row="1"
Padding="32,16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>

<Image Grid.Column="0"
Width="120"
Height="35"
IsTabStop="False"
wasm:Source="https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2021/03/24151905/uno-logo-tm.svg" />

<StackPanel Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Center">

<Button Content="PLATFORMS"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Overview"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/platforms/"
Style="{StaticResource AppBarHeaderMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="iOS and Android"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/ios-and-android/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Web (WebAssembly)"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-web-webassembly/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Windows 10-11"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/windows-10-11/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Windows 7"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/windows7/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Linux"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-linux/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="MacOS"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-macos/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="IDE &amp; TOOLS"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Visual Studio"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/visual-studio/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="VS Code"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/vs-code/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Rider"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/get-started-rider.html"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Reative/MVUX"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/reactive/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="MAUI Embedding"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/net-maui-embedding/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="C# Markup"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/c-markup/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Extensions"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-extensions/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Themes"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-themes/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Toolkit"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-toolkit/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Figma"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/unofigma/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="BLOG"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/blog/"
Style="{StaticResource AppBarButtonStyle}" />
<Button Content="DOCS"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/intro.html"
Style="{StaticResource AppBarButtonStyle}" />
<Button Content="RESOURCES"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Workshop - Simple Calc"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/simple-calc/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Workshop - Tube player"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/tube-player/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Code Samples"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/code-samples/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Uno Gallery"
Click="OnAppBarButtonClick"
Tag="https://gallery.platform.uno/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Uno Playgroud"
Click="OnAppBarButtonClick"
Tag="https://playground.platform.uno/#wasm-start"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Support"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/support/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Contact Us"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/contact/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="Get Started"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/getting-started-tutorial-1.html"
Style="{StaticResource AppBarCtaButtonStyle}" />
</StackPanel>
</wasm:Grid>

<!-- We set CompactModeThresholdWidth to a very high value so that it never happens. We don't want to use the compact mode. -->
<muxc:NavigationView Grid.Row="2"
Expand Down Expand Up @@ -51,7 +384,7 @@
HorizontalAlignment="Left" />

<!-- Dark/Light Toggle -->
<ToggleButton x:Name="DarkLightModeToggle"
<ToggleButton x:Name="DarkLightModeToggle"
Content="Light and Dark"
Style="{StaticResource DarkLightToggleTheme}"
Click="ToggleButton_Click"
Expand Down
10 changes: 10 additions & 0 deletions Uno.Gallery/Uno.Gallery.Shared/Views/Shell.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using MUXC = Microsoft.UI.Xaml.Controls;
using System.Threading.Tasks;
using Windows.System;

namespace Uno.Gallery
{
Expand Down Expand Up @@ -245,5 +247,13 @@ private void CtrlF_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvoke
{
SamplesSearchBox.Focus(FocusState.Programmatic);
}

private async void OnAppBarButtonClick(object sender, RoutedEventArgs e)
{
if (sender is FrameworkElement { Tag: string { Length: >0 } url })
{
await Launcher.LaunchUriAsync(new Uri(url));
}
}
}
}