Skip to content

Commit

Permalink
fix(Windows): Move React menu to title bar (#178)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnastasiaOrishchenko @tido64
AnastasiaOrishchenko authored and tido64 committed Sep 7, 2020
1 parent fcd7f95 commit 0db047a
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 19 deletions.
62 changes: 52 additions & 10 deletions windows/ReactTestApp/MainPage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@

#include "MainPage.h"

#include <winrt/Windows.ApplicationModel.Core.h>
#include <winrt/Windows.UI.ViewManagement.h>

#include "ComponentViewModel.h"
#include "MainPage.g.cpp"
#include "Manifest.h"

using winrt::Windows::ApplicationModel::Core::CoreApplication;
using winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar;
using winrt::Windows::Foundation::IAsyncAction;
using winrt::Windows::UI::Colors;
using winrt::Windows::UI::ViewManagement::ApplicationView;
using winrt::Windows::UI::Xaml::RoutedEventArgs;
using winrt::Windows::UI::Xaml::Window;
using winrt::Windows::UI::Xaml::Controls::MenuFlyout;
using winrt::Windows::UI::Xaml::Controls::MenuFlyoutItem;
using winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs;
Expand All @@ -18,6 +25,8 @@ namespace winrt::ReactTestApp::implementation
{
InitializeComponent();

SetUpTitleBar();

auto menuItems = MenuFlyout().Items();
std::optional<::ReactTestApp::Manifest> manifest = ::ReactTestApp::GetManifest();
if (!manifest.has_value()) {
Expand All @@ -26,17 +35,11 @@ namespace winrt::ReactTestApp::implementation
newMenuItem.IsEnabled(false);
menuItems.Append(newMenuItem);
} else {
AppTitle().Text(to_hstring(manifest.value().displayName));

auto &components = manifest.value().components;
for (auto &&c : components) {
hstring componentDisplayName = to_hstring(c.displayName.value_or(c.appKey));
hstring appKey = to_hstring(c.appKey);
ReactTestApp::ComponentViewModel newComponent =
winrt::make<ComponentViewModel>(appKey, componentDisplayName);

MenuFlyoutItem newMenuItem;
newMenuItem.CommandParameter(newComponent);
newMenuItem.Text(newComponent.DisplayName());
newMenuItem.Click({this, &MainPage::SetReactComponentName});
MenuFlyoutItem newMenuItem = MakeComponentMenuButton(c);
menuItems.Append(newMenuItem);
}

Expand Down Expand Up @@ -76,4 +79,43 @@ namespace winrt::ReactTestApp::implementation
ReactRootView().ComponentName(s.as<ComponentViewModel>()->AppKey());
}

void MainPage::OnReactMenuClick(IInspectable const &, RoutedEventArgs)
{
ReactMenuButton().Flyout().ShowAt(ReactMenuButton());
}

MenuFlyoutItem MainPage::MakeComponentMenuButton(::ReactTestApp::Component &component)
{
hstring componentDisplayName = to_hstring(component.displayName.value_or(component.appKey));
hstring appKey = to_hstring(component.appKey);
ReactTestApp::ComponentViewModel newComponent =
winrt::make<ComponentViewModel>(appKey, componentDisplayName);

MenuFlyoutItem newMenuItem;
newMenuItem.Text(newComponent.DisplayName());
newMenuItem.CommandParameter(newComponent);
newMenuItem.Click({this, &MainPage::SetReactComponentName});
return newMenuItem;
}

void MainPage::SetUpTitleBar()
{
// Set close, minimize and maximize icons background to transparent
auto appView = ApplicationView::GetForCurrentView().TitleBar();
appView.ButtonBackgroundColor(Colors::Transparent());
appView.BackgroundColor(Colors::Transparent());

auto coreTitleBar = CoreApplication::GetCurrentView().TitleBar();
coreTitleBar.LayoutMetricsChanged({this, &MainPage::OnCoreTitleBarLayoutMetricsChanged});
coreTitleBar.ExtendViewIntoTitleBar(true);
Window::Current().SetTitleBar(BackgroundElement());
}

// Adjust height of custom title bar to match close, minimize and maximize icons
void MainPage::OnCoreTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar const &sender,
IInspectable const &)
{
TitleBar().Height(sender.Height());
}

} // namespace winrt::ReactTestApp::implementation
11 changes: 10 additions & 1 deletion windows/ReactTestApp/MainPage.h
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
#pragma once

#include "MainPage.g.h"
#include "Manifest.h"
#include "ReactInstance.h"

namespace winrt::ReactTestApp::implementation
Expand All @@ -12,6 +13,8 @@ namespace winrt::ReactTestApp::implementation
Windows::UI::Xaml::RoutedEventArgs);
void LoadFromDevServer(Windows::Foundation::IInspectable const &,
Windows::UI::Xaml::RoutedEventArgs);
void OnReactMenuClick(Windows::Foundation::IInspectable const &,
Windows::UI::Xaml::RoutedEventArgs);
Windows::Foundation::IAsyncAction
OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs const &e);
using Base = MainPageT;
Expand All @@ -20,7 +23,13 @@ namespace winrt::ReactTestApp::implementation
::ReactTestApp::ReactInstance reactInstance_;

void SetReactComponentName(Windows::Foundation::IInspectable const &,
Windows::UI::Xaml::RoutedEventArgs e);
Windows::UI::Xaml::RoutedEventArgs);
Windows::UI::Xaml::Controls::MenuFlyoutItem
MakeComponentMenuButton(::ReactTestApp::Component &component);
void OnCoreTitleBarLayoutMetricsChanged(
Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
Windows::Foundation::IInspectable const &);
void SetUpTitleBar();
};
} // namespace winrt::ReactTestApp::implementation

Expand Down
39 changes: 31 additions & 8 deletions windows/ReactTestApp/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,44 @@
mc:Ignorable="d"
xmlns:react="using:Microsoft.ReactNative">

<Page.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAltHighColor}"/>
</ResourceDictionary>
</Page.Resources>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<MenuBar VerticalAlignment="Top" Grid.Row="0">
<MenuBarItem Title="React" x:Name="MenuFlyout">
<MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
<MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
<MenuFlyoutSeparator/>
</MenuBarItem>
</MenuBar>
<Grid x:Name="TitleBar">
<Grid>
<Grid x:Name="BackgroundElement" Background="Transparent">
<TextBlock x:Name="AppTitle" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

<Button Content="React" x:Name="ReactMenuButton" Click="OnReactMenuClick">
<Button.Flyout>
<MenuFlyout x:Name="MenuFlyout" Placement="BottomEdgeAlignedLeft">
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType= "MenuFlyoutPresenter" >
<Setter Property = "Margin" Value= "0,-5,0,0"/>
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
<MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
<MenuFlyoutSeparator/>
</MenuFlyout>
</Button.Flyout>
</Button>

</Grid>

</Grid>

<react:ReactRootView x:Name="ReactRootView" Grid.Row="1"/>
<react:ReactRootView x:Name="ReactRootView" Grid.Row="2"/>

</Grid>
</Page>

0 comments on commit 0db047a

Please sign in to comment.