Skip to content

Commit a75c4a1

Browse files
BartoszKlonowskiBartoszKlonowski
authored
Settings screen - basic layout and engine implementation (#26)
* Enable default settings icon button on navigation panel * Add new XAML page for settings screen * Add initial model for settings * Implement initial View for settings page
1 parent c0c33f4 commit a75c4a1

13 files changed

+702
-570
lines changed

‎index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ import NotesMainPanel from './src/NotesMainPanel';
77
import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
88
import CreateNotePanel from './src/CreateNotePanel';
99
import ToDoListPanel from './src/ToDoListPanel';
10+
import SettingsPanel from './src/SettingsPanel';

‎src/SettingsPanel.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
import React from 'react';
6+
import {AppRegistry, StyleSheet, View} from 'react-native';
7+
8+
interface Props {}
9+
10+
interface State {}
11+
12+
class SettingsPanel extends React.Component<Props, State> {
13+
constructor(props: Props) {
14+
super(props);
15+
}
16+
17+
render() {
18+
return <View style={styles.mainPanel}></View>;
19+
}
20+
}
21+
22+
const styles = StyleSheet.create({
23+
mainPanel: {
24+
flex: 1,
25+
flexDirection: 'column',
26+
alignItems: 'center',
27+
margin: 30,
28+
},
29+
});
30+
31+
AppRegistry.registerComponent('SettingsPanel', () => SettingsPanel);
32+
33+
export default SettingsPanel;

‎windows/ReactNativeNotes/MainPage.cpp

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,57 @@
1-
#include "pch.h"
2-
#include "MainPage.h"
3-
#if __has_include("MainPage.g.cpp")
4-
#include "MainPage.g.cpp"
5-
#endif
6-
7-
#include "App.h"
8-
9-
using namespace winrt;
10-
using namespace Windows::UI::Xaml;
11-
12-
namespace winrt::ReactNativeNotes::implementation
13-
{
14-
MainPage::MainPage()
15-
{
16-
InitializeComponent();
17-
auto app = Application::Current().as<App>();
18-
Navigate( L"NotesPage", false );
19-
}
20-
21-
void MainPage::ItemInvokedEventHandler( Microsoft::UI::Xaml::Controls::NavigationView const& sender, Microsoft::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
22-
{
23-
if( args.IsSettingsInvoked() == true )
24-
{
25-
Navigate( L"ApplicationSettingsPage" );
26-
}
27-
else if( args.InvokedItemContainer() != nullptr )
28-
{
29-
auto selectedPageTag = unbox_value_or<hstring>( args.InvokedItemContainer().Tag(), L"" );
30-
Navigate( selectedPageTag );
31-
}
32-
}
33-
34-
void MainPage::BackRequestedEventHandler( Microsoft::UI::Xaml::Controls::NavigationView const& sender, Microsoft::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args )
35-
{
36-
}
37-
38-
void MainPage::Navigate( hstring pageName, const bool hasAnimation ) noexcept
39-
{
40-
auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
41-
{
42-
to_hstring( L"ReactNativeNotes." + pageName ),
43-
Windows::UI::Xaml::Interop::TypeKind::Custom
44-
};
45-
if( hasAnimation )
46-
{
47-
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
48-
navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromBottom );
49-
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
50-
}
51-
else
52-
{
53-
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
54-
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
55-
}
56-
}
57-
}
1+
#include "pch.h"
2+
#include "MainPage.h"
3+
#if __has_include("MainPage.g.cpp")
4+
#include "MainPage.g.cpp"
5+
#endif
6+
7+
#include "App.h"
8+
9+
using namespace winrt;
10+
using namespace Windows::UI::Xaml;
11+
12+
namespace winrt::ReactNativeNotes::implementation
13+
{
14+
MainPage::MainPage()
15+
{
16+
InitializeComponent();
17+
auto app = Application::Current().as<App>();
18+
Navigate( L"NotesPage", false );
19+
}
20+
21+
void MainPage::ItemInvokedEventHandler( Microsoft::UI::Xaml::Controls::NavigationView const& sender, Microsoft::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
22+
{
23+
if( args.IsSettingsInvoked() == true )
24+
{
25+
Navigate( L"SettingsPage" );
26+
}
27+
else if( args.InvokedItemContainer() != nullptr )
28+
{
29+
auto selectedPageTag = unbox_value_or<hstring>( args.InvokedItemContainer().Tag(), L"" );
30+
Navigate( selectedPageTag );
31+
}
32+
}
33+
34+
void MainPage::BackRequestedEventHandler( Microsoft::UI::Xaml::Controls::NavigationView const& sender, Microsoft::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args )
35+
{
36+
}
37+
38+
void MainPage::Navigate( hstring pageName, const bool hasAnimation ) noexcept
39+
{
40+
auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
41+
{
42+
to_hstring( L"ReactNativeNotes." + pageName ),
43+
Windows::UI::Xaml::Interop::TypeKind::Custom
44+
};
45+
if( hasAnimation )
46+
{
47+
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
48+
navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromBottom );
49+
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
50+
}
51+
else
52+
{
53+
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
54+
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
55+
}
56+
}
57+
}

‎windows/ReactNativeNotes/MainPage.xaml

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
1-
<Page
2-
x:Class="ReactNativeNotes.MainPage"
3-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5-
xmlns:local="using:ReactNativeNotes"
6-
xmlns:react="using:Microsoft.ReactNative"
7-
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
8-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
9-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10-
Background="Transparent"
11-
mc:Ignorable="d">
12-
<Page.Resources>
13-
<SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#FF5A2D"/>
14-
</Page.Resources>
15-
16-
<muxc:NavigationView x:Name="TopNavigationPanel" IsSettingsVisible="False" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftCompact" OpenPaneLength="150" ItemInvoked="ItemInvokedEventHandler">
17-
<muxc:NavigationView.Resources>
18-
<SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>
19-
<SolidColorBrush x:Key="NavigationBackButto" Color="White"/>
20-
</muxc:NavigationView.Resources>
21-
22-
<muxc:NavigationView.Background>
23-
<LinearGradientBrush>
24-
<GradientStop Offset="0.3" Color="#D0E7F3"/>
25-
<GradientStop Offset="1.4" Color="#A6B3D9"/>
26-
<GradientStop Offset="0.6" Color="#F8A878"/>
27-
<GradientStop Offset="0.9" Color="#D0E7F3"/>
28-
</LinearGradientBrush>
29-
</muxc:NavigationView.Background>
30-
31-
<muxc:NavigationView.MenuItems>
32-
33-
<muxc:NavigationViewItem Content="Create" Tag="CreateNotePage" Foreground="White" Margin="0,5,0,5">
34-
<muxc:NavigationViewItem.Icon>
35-
<FontIcon Glyph="&#xe109;"/>
36-
</muxc:NavigationViewItem.Icon>
37-
</muxc:NavigationViewItem>
38-
39-
<muxc:NavigationViewItem Content="Notes" Tag="NotesPage" Foreground="White" Margin="0,5,0,5">
40-
<muxc:NavigationViewItem.Icon>
41-
<FontIcon Glyph="&#xe8a9;"/>
42-
</muxc:NavigationViewItem.Icon>
43-
</muxc:NavigationViewItem>
44-
45-
<muxc:NavigationViewItem Content="ToDo List" Tag="ToDoListPage" Foreground="White" Margin="0,5,0,5">
46-
<muxc:NavigationViewItem.Icon>
47-
<FontIcon Glyph="&#xe9d5;"/>
48-
</muxc:NavigationViewItem.Icon>
49-
</muxc:NavigationViewItem>
50-
51-
</muxc:NavigationView.MenuItems>
52-
<Grid>
53-
<Grid.RowDefinitions>
54-
<RowDefinition Height="14*"/>
55-
<RowDefinition Height="*"/>
56-
</Grid.RowDefinitions>
57-
<Frame x:Name="ApplicationContentFrame" Grid.RowSpan="2"/>
58-
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right">
59-
<TextBlock Grid.Row="1" Text="Powered by " HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White" FontSize="18"/>
60-
<TextBlock Grid.Row="1" Margin="10,0,10,5" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" FontSize="25">{callstack}</TextBlock>
61-
</StackPanel>
62-
</Grid>
63-
</muxc:NavigationView>
64-
</Page>
1+
<Page
2+
x:Class="ReactNativeNotes.MainPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:local="using:ReactNativeNotes"
6+
xmlns:react="using:Microsoft.ReactNative"
7+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
8+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
9+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10+
Background="Transparent"
11+
mc:Ignorable="d">
12+
<Page.Resources>
13+
<SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#FF5A2D"/>
14+
</Page.Resources>
15+
16+
<muxc:NavigationView x:Name="TopNavigationPanel" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftCompact" OpenPaneLength="150" ItemInvoked="ItemInvokedEventHandler">
17+
<muxc:NavigationView.Resources>
18+
<SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>
19+
<SolidColorBrush x:Key="NavigationBackButto" Color="White"/>
20+
</muxc:NavigationView.Resources>
21+
22+
<muxc:NavigationView.Background>
23+
<LinearGradientBrush>
24+
<GradientStop Offset="0.3" Color="#D0E7F3"/>
25+
<GradientStop Offset="1.4" Color="#A6B3D9"/>
26+
<GradientStop Offset="0.6" Color="#F8A878"/>
27+
<GradientStop Offset="0.9" Color="#D0E7F3"/>
28+
</LinearGradientBrush>
29+
</muxc:NavigationView.Background>
30+
31+
<muxc:NavigationView.MenuItems>
32+
33+
<muxc:NavigationViewItem Content="Create" Tag="CreateNotePage" Foreground="White" Margin="0,5,0,5">
34+
<muxc:NavigationViewItem.Icon>
35+
<FontIcon Glyph="&#xe109;"/>
36+
</muxc:NavigationViewItem.Icon>
37+
</muxc:NavigationViewItem>
38+
39+
<muxc:NavigationViewItem Content="Notes" Tag="NotesPage" Foreground="White" Margin="0,5,0,5">
40+
<muxc:NavigationViewItem.Icon>
41+
<FontIcon Glyph="&#xe8a9;"/>
42+
</muxc:NavigationViewItem.Icon>
43+
</muxc:NavigationViewItem>
44+
45+
<muxc:NavigationViewItem Content="ToDo List" Tag="ToDoListPage" Foreground="White" Margin="0,5,0,5">
46+
<muxc:NavigationViewItem.Icon>
47+
<FontIcon Glyph="&#xe9d5;"/>
48+
</muxc:NavigationViewItem.Icon>
49+
</muxc:NavigationViewItem>
50+
51+
</muxc:NavigationView.MenuItems>
52+
<Grid>
53+
<Grid.RowDefinitions>
54+
<RowDefinition Height="14*"/>
55+
<RowDefinition Height="*"/>
56+
</Grid.RowDefinitions>
57+
<Frame x:Name="ApplicationContentFrame" Grid.RowSpan="2"/>
58+
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right">
59+
<TextBlock Grid.Row="1" Text="Powered by " HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White" FontSize="18"/>
60+
<TextBlock Grid.Row="1" Margin="10,0,10,5" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" FontSize="25">{callstack}</TextBlock>
61+
</StackPanel>
62+
</Grid>
63+
</muxc:NavigationView>
64+
</Page>

0 commit comments

Comments
 (0)