Skip to content

Commit

Permalink
Get rid of custom styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Anastasia Orishchenko committed Jul 28, 2020
1 parent 463798f commit e72dc27
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 39 deletions.
28 changes: 13 additions & 15 deletions windows/ReactTestApp/MainPage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
#include "MainPage.g.cpp"

using winrt::Windows::ApplicationModel::Core::CoreApplication;
using winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar;
using winrt::Windows::Foundation::IAsyncAction;
using winrt::Windows::UI::ViewManagement::ApplicationView;
using winrt::Windows::UI::Xaml::RoutedEventArgs;
using winrt::Windows::UI::Xaml::Style;
using winrt::Windows::UI::Xaml::Window;
using winrt::Windows::UI::Xaml::Controls::Button;
using winrt::Windows::UI::Xaml::Controls::MenuFlyout;
using winrt::Windows::UI::Xaml::Controls::MenuFlyoutItem;
using winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs;

namespace winrt::ReactTestApp::implementation
Expand All @@ -25,19 +26,19 @@ namespace winrt::ReactTestApp::implementation

SetUpTitleBar();

auto menuItems = ReactMenu().Children();
auto menuItems = MenuFlyout().Items();
std::optional<::ReactTestApp::Manifest> manifest = ::ReactTestApp::GetManifest();
if (!manifest.has_value()) {
Button newMenuItem;
newMenuItem.Content(winrt::box_value(L"Couldn't parse app.json"));
MenuFlyoutItem newMenuItem;
newMenuItem.Text(L"Couldn't parse app.json");
newMenuItem.IsEnabled(false);
menuItems.Append(newMenuItem);
} else {
AppTitle().Text(to_hstring(manifest.value().displayName));

auto &components = manifest.value().components;
for (auto &&c : components) {
Button newMenuItem = GetComponentMenuButton(c);
MenuFlyoutItem newMenuItem = GetComponentMenuButton(c);
menuItems.Append(newMenuItem);
}

Expand Down Expand Up @@ -73,7 +74,7 @@ namespace winrt::ReactTestApp::implementation

void MainPage::SetReactComponentName(IInspectable const &sender, RoutedEventArgs)
{
auto s = sender.as<Button>().CommandParameter();
auto s = sender.as<MenuFlyoutItem>().CommandParameter();
ReactRootView().ComponentName(s.as<ComponentViewModel>()->AppKey());
}

Expand All @@ -82,17 +83,15 @@ namespace winrt::ReactTestApp::implementation
ReactButton().Flyout().ShowAt(ReactButton());
}

Button MainPage::GetComponentMenuButton(::ReactTestApp::Component &component)
MenuFlyoutItem MainPage::GetComponentMenuButton(::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);

Button newMenuItem;
auto style = this->Resources().Lookup(winrt::box_value(L"ReactMenuButton")).as<::Style>();
newMenuItem.Style(style);
newMenuItem.Content(winrt::box_value(newComponent.DisplayName()));
MenuFlyoutItem newMenuItem;
newMenuItem.Text(newComponent.DisplayName());
newMenuItem.CommandParameter(newComponent);
newMenuItem.Click({this, &MainPage::SetReactComponentName});
return newMenuItem;
Expand All @@ -112,9 +111,8 @@ namespace winrt::ReactTestApp::implementation
}

// Adjust height of custom title bar to match close, minimize and maximize icons
void MainPage::CoreTitleBarLayoutMetricsChanged(
winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
Windows::Foundation::IInspectable const &)
void MainPage::CoreTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar const &sender,
IInspectable const &)
{
TitleBar().Height(sender.Height());
}
Expand Down
11 changes: 4 additions & 7 deletions windows/ReactTestApp/MainPage.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,21 @@ namespace winrt::ReactTestApp::implementation
Windows::UI::Xaml::RoutedEventArgs);
void LoadFromDevServer(Windows::Foundation::IInspectable const &,
Windows::UI::Xaml::RoutedEventArgs);
void MainPage::OpenReactMenu(Windows::Foundation::IInspectable const &,
winrt::Windows::UI::Xaml::RoutedEventArgs);
void OpenReactMenu(Windows::Foundation::IInspectable const &,
winrt::Windows::UI::Xaml::RoutedEventArgs);
Windows::Foundation::IAsyncAction
OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs const &e);
using Base = MainPageT;

void OnItemClick(Windows::Foundation::IInspectable const &sender,
Windows::UI::Xaml::Controls::ItemClickEventArgs e);

private:
::ReactTestApp::ReactInstance reactInstance_;

void SetReactComponentName(Windows::Foundation::IInspectable const &,
Windows::UI::Xaml::RoutedEventArgs);
Windows::UI::Xaml::Controls::Button
Windows::UI::Xaml::Controls::MenuFlyoutItem
GetComponentMenuButton(::ReactTestApp::Component &component);
void CoreTitleBarLayoutMetricsChanged(
winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
Windows::Foundation::IInspectable const &);
void SetUpTitleBar();
};
Expand Down
38 changes: 21 additions & 17 deletions windows/ReactTestApp/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@
xmlns:react="using:Microsoft.ReactNative">

<Page.Resources>
<Style TargetType="Button" x:Key="ReactMenuButton" BasedOn="{StaticResource TextBlockButtonStyle}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="12pt"/>
</Style>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAltHighColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAltHighColor}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Expand All @@ -26,24 +31,23 @@
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="React" x:Name="ReactButton" Click="OpenReactMenu" Style="{StaticResource ReactMenuButton}">
<Grid x:Name="BackgroundElement" Grid.Column="1" Background="Transparent">
<TextBlock x:Name="AppTitle" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

<Button Grid.Column="1" Content="React" x:Name="ReactButton" Click="OpenReactMenu">
<Button.Flyout>
<Flyout Placement="BottomEdgeAlignedLeft" x:Name="MenuFlyout">
<StackPanel x:Name="ReactMenu">
<Button Click="LoadFromJSBundle" Style="{StaticResource ReactMenuButton}">Load from JS bundle</Button>
<Button Click="LoadFromDevServer" Style="{StaticResource ReactMenuButton}">Load from dev server</Button>
<MenuFlyoutSeparator/>
</StackPanel>
</Flyout>
<MenuFlyout x:Name="MenuFlyout" Placement="BottomEdgeAlignedLeft">
<MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
<MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
<MenuFlyoutSeparator/>
</MenuFlyout>
</Button.Flyout>
</Button>
<Grid x:Name="BackgroundElement" Grid.Column="2" Background="Transparent">
<TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

</Grid>

</Grid>
Expand Down

0 comments on commit e72dc27

Please sign in to comment.