From e91f41cb49352502c98e5d4dfa8428f8ba05a4aa Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 09:52:11 +0100 Subject: [PATCH 1/9] Make the App a main layout The main layout of the application is divided into sections, each containing crucial options and features. The main App class component should be responsible only for calling widgets provided by separate components' classes. --- App.js | 46 +++++----------------------------------------- 1 file changed, 5 insertions(+), 41 deletions(-) diff --git a/App.js b/App.js index 798e0d5..3d9dbf5 100644 --- a/App.js +++ b/App.js @@ -1,7 +1,4 @@ /** - * Sample React Native App - * https://github.com/facebook/react-native - * * @format * @flow strict-local */ @@ -9,58 +6,25 @@ import React from 'react'; import { StyleSheet, - ScrollView, View, - Text, } from 'react-native'; -import { - Header, - LearnMoreLinks, - Colors, -} from 'react-native/Libraries/NewAppScreen'; - class App extends React.Component { render() { return ( - -
- - - Learn More - - Read the docs to discover what to do next: - - - - - + + ); } }; const styles = StyleSheet.create({ - scrollView: { - backgroundColor: Colors.lighter, - }, - body: { - backgroundColor: Colors.lighter, + mainLayout: { + flex: 1, + flexDirection: "row", }, - sectionTitle: { - fontSize: 24, - paddingHorizontal: 24, - fontWeight: '600', - color: Colors.black, - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - paddingHorizontal: 24, - fontWeight: '400', - color: Colors.dark, - } }); export default App; From f7de4b6f60312f21dcc5060db18fa73340a1856d Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 10:20:43 +0100 Subject: [PATCH 2/9] Divide application into Components The initial thought is to divide the application into three main panels, each providing separate functinalities: * UserAccountPanel - responsbile for handling user's login/logout actions, user's info displaying, user's account options * LeftOptionsPanel - panel containing options related to the notes: adding, removing, etc. * NotesMainPanel - responsible for displaying the main content of the app - Notes. Each note will be represented as a Touchable widget with UI elements. This commit adds the components only with the Placeholder text in them. --- App.js | 13 +++++++++++-- src/LeftOptionsPanel.js | 32 ++++++++++++++++++++++++++++++++ src/NotesMainPanel.js | 33 +++++++++++++++++++++++++++++++++ src/UserAccountPanel.js | 33 +++++++++++++++++++++++++++++++++ 4 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 src/LeftOptionsPanel.js create mode 100644 src/NotesMainPanel.js create mode 100644 src/UserAccountPanel.js diff --git a/App.js b/App.js index 3d9dbf5..b047c90 100644 --- a/App.js +++ b/App.js @@ -9,13 +9,22 @@ import { View, } from 'react-native'; +import NotesMainPanel from './src/NotesMainPanel'; +import LeftOptionsPanel from './src/LeftOptionsPanel'; +import UserAccountPanel from './src/UserAccountPanel'; + class App extends React.Component { render() { return ( - - + <> + + + + + + ); } }; diff --git a/src/LeftOptionsPanel.js b/src/LeftOptionsPanel.js new file mode 100644 index 0000000..ec548f3 --- /dev/null +++ b/src/LeftOptionsPanel.js @@ -0,0 +1,32 @@ +/** + * @format + * @flow strict-local + */ +import React from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, +} from 'react-native'; + + +class LeftOptionsPanel extends React.Component { + + render() { + return( + + Placeholder + + ); + } +}; + + +const styles = StyleSheet.create({ +}); + + +AppRegistry.registerComponent("LeftOptionsPanel", LeftOptionsPanel); + +export default LeftOptionsPanel; diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js new file mode 100644 index 0000000..8779737 --- /dev/null +++ b/src/NotesMainPanel.js @@ -0,0 +1,33 @@ +/** + * @format + * @flow strict-local + */ + +import React from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, +} from 'react-native'; + + +class NotesMainPanel extends React.Component { + + render() { + return( + + Placeholder + + ); + } +}; + + +const styles = StyleSheet.create({ +}); + + +AppRegistry.registerComponent("NotesMainPanel", NotesMainPanel); + +export default NotesMainPanel; diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js new file mode 100644 index 0000000..c0efcff --- /dev/null +++ b/src/UserAccountPanel.js @@ -0,0 +1,33 @@ +/** + * @format + * @flow strict-local + */ + +import React from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, +} from 'react-native'; + + +class UserAccountPanel extends React.Component { + + render() { + return( + + Placeholder + + ); + } +}; + + +const styles = StyleSheet.create({ +}); + + +AppRegistry.registerComponent("UserAccountPanel", UserAccountPanel); + +export default UserAccountPanel; From e71baa2eb76dda4877927ef6a4b0bfb54411ab60 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 11:53:33 +0100 Subject: [PATCH 3/9] Create initial layout of panels Each panel has been provided with styles (width, height, most basic behavior) and it has been marked with the border to mark it's position in the application window. The Placeholder text has been replaced with the panel's name. --- App.js | 2 +- src/LeftOptionsPanel.js | 40 ++++++++++++++++++++++++++++++++++++++-- src/NotesMainPanel.js | 2 +- src/UserAccountPanel.js | 15 +++++++++++++-- 4 files changed, 53 insertions(+), 6 deletions(-) diff --git a/App.js b/App.js index b047c90..0400bcb 100644 --- a/App.js +++ b/App.js @@ -19,7 +19,7 @@ class App extends React.Component { render() { return ( <> - + diff --git a/src/LeftOptionsPanel.js b/src/LeftOptionsPanel.js index ec548f3..e42a62e 100644 --- a/src/LeftOptionsPanel.js +++ b/src/LeftOptionsPanel.js @@ -7,16 +7,34 @@ import { AppRegistry, StyleSheet, Text, + TouchableHighlight, View, } from 'react-native'; class LeftOptionsPanel extends React.Component { + constructor(props) { + super(props); + this.state = { + shouldExpand: true + }; + } + + OnResizeButtonPressed = () => { + this.setState( (state) => ({ shouldExpand: state.shouldExpand ? false : true})); + }; render() { return( - - Placeholder + + + + Resize + + + + LeftOptionsPanel + ); } @@ -24,6 +42,24 @@ class LeftOptionsPanel extends React.Component { const styles = StyleSheet.create({ + panelModeButton: { + margin: 10, + backgroundColor: "grey", + }, + panelContent: { + flex: 1, + flexDirection: "column", + }, + panel: { + width: "20%", + borderWidth: 1, + borderColor: "black", + }, + panelShrinked: { + width: 50, + borderWidth: 1, + borderColor: "black", + } }); diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js index 8779737..9eaa1dc 100644 --- a/src/NotesMainPanel.js +++ b/src/NotesMainPanel.js @@ -17,7 +17,7 @@ class NotesMainPanel extends React.Component { render() { return( - Placeholder + NotesMainPanel ); } diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js index c0efcff..a04d38b 100644 --- a/src/UserAccountPanel.js +++ b/src/UserAccountPanel.js @@ -16,8 +16,10 @@ class UserAccountPanel extends React.Component { render() { return( - - Placeholder + + + UserAccountPanel + ); } @@ -25,6 +27,15 @@ class UserAccountPanel extends React.Component { const styles = StyleSheet.create({ + panel: { + height: 75, + borderColor: "black", + borderWidth: 1, + }, + panelContent: { + flex: 1, + flexDirection: "column", + } }); From 86f05a98b11d3838eff814ad69e91b6660eb5adf Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 15:32:21 +0100 Subject: [PATCH 4/9] Rename LeftOptionsPanel to ApplicationSettingsPanel --- App.js | 2 -- src/{LeftOptionsPanel.js => ApplicationSettingsPanel.js} | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) rename src/{LeftOptionsPanel.js => ApplicationSettingsPanel.js} (86%) diff --git a/App.js b/App.js index 0400bcb..ab679d2 100644 --- a/App.js +++ b/App.js @@ -10,7 +10,6 @@ import { } from 'react-native'; import NotesMainPanel from './src/NotesMainPanel'; -import LeftOptionsPanel from './src/LeftOptionsPanel'; import UserAccountPanel from './src/UserAccountPanel'; @@ -21,7 +20,6 @@ class App extends React.Component { <> - diff --git a/src/LeftOptionsPanel.js b/src/ApplicationSettingsPanel.js similarity index 86% rename from src/LeftOptionsPanel.js rename to src/ApplicationSettingsPanel.js index e42a62e..f2e932f 100644 --- a/src/LeftOptionsPanel.js +++ b/src/ApplicationSettingsPanel.js @@ -12,7 +12,7 @@ import { } from 'react-native'; -class LeftOptionsPanel extends React.Component { +class ApplicationSettingsPanel extends React.Component { constructor(props) { super(props); this.state = { @@ -63,6 +63,6 @@ const styles = StyleSheet.create({ }); -AppRegistry.registerComponent("LeftOptionsPanel", LeftOptionsPanel); +AppRegistry.registerComponent("ApplicationSettingsPanel", () => ApplicationSettingsPanel); -export default LeftOptionsPanel; +export default ApplicationSettingsPanel; From 713e04e5f6570b88ec386e6a1141899486c2bc90 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 17:04:36 +0100 Subject: [PATCH 5/9] Convert JS Components registration into function calls --- src/NotesMainPanel.js | 2 +- src/UserAccountPanel.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js index 9eaa1dc..12b3cf0 100644 --- a/src/NotesMainPanel.js +++ b/src/NotesMainPanel.js @@ -28,6 +28,6 @@ const styles = StyleSheet.create({ }); -AppRegistry.registerComponent("NotesMainPanel", NotesMainPanel); +AppRegistry.registerComponent("NotesMainPanel", () => NotesMainPanel); export default NotesMainPanel; diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js index a04d38b..8fad890 100644 --- a/src/UserAccountPanel.js +++ b/src/UserAccountPanel.js @@ -39,6 +39,6 @@ const styles = StyleSheet.create({ }); -AppRegistry.registerComponent("UserAccountPanel", UserAccountPanel); +AppRegistry.registerComponent("UserAccountPanel", () => UserAccountPanel); export default UserAccountPanel; From 03702c33bdc65218db63629f3a4be3c7db578924 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 17:07:31 +0100 Subject: [PATCH 6/9] Create pages for each of the Application component The architecture of the whole application system is based on the navigation between separate components implemented in the React Native. These components are to be rendered as the UWP's Page content, just like in the original RNW application. The difference is, that in this approach each RN Component will be rendered inside separate Page as it's own ReactNative Root View. This approach requires all Components to have the separate Page implemented, each containing XAML scheme, IDL implementation and it's code-behind implemented in native C++. --- .../ApplicationSettingsPage.cpp | 16 ++++++ .../ApplicationSettingsPage.h | 19 +++++++ .../ApplicationSettingsPage.idl | 8 +++ .../ApplicationSettingsPage.xaml | 15 ++++++ windows/ReactNativeNotes/NotesPage.cpp | 16 ++++++ windows/ReactNativeNotes/NotesPage.h | 20 +++++++ windows/ReactNativeNotes/NotesPage.idl | 8 +++ windows/ReactNativeNotes/NotesPage.xaml | 15 ++++++ .../ReactNativeNotes/ReactNativeNotes.vcxproj | 52 +++++++++++++++++-- .../ReactNativeNotes.vcxproj.filters | 3 ++ windows/ReactNativeNotes/UserAccountPage.cpp | 16 ++++++ windows/ReactNativeNotes/UserAccountPage.h | 19 +++++++ windows/ReactNativeNotes/UserAccountPage.idl | 8 +++ windows/ReactNativeNotes/UserAccountPage.xaml | 15 ++++++ 14 files changed, 227 insertions(+), 3 deletions(-) create mode 100644 windows/ReactNativeNotes/ApplicationSettingsPage.cpp create mode 100644 windows/ReactNativeNotes/ApplicationSettingsPage.h create mode 100644 windows/ReactNativeNotes/ApplicationSettingsPage.idl create mode 100644 windows/ReactNativeNotes/ApplicationSettingsPage.xaml create mode 100644 windows/ReactNativeNotes/NotesPage.cpp create mode 100644 windows/ReactNativeNotes/NotesPage.h create mode 100644 windows/ReactNativeNotes/NotesPage.idl create mode 100644 windows/ReactNativeNotes/NotesPage.xaml create mode 100644 windows/ReactNativeNotes/UserAccountPage.cpp create mode 100644 windows/ReactNativeNotes/UserAccountPage.h create mode 100644 windows/ReactNativeNotes/UserAccountPage.idl create mode 100644 windows/ReactNativeNotes/UserAccountPage.xaml diff --git a/windows/ReactNativeNotes/ApplicationSettingsPage.cpp b/windows/ReactNativeNotes/ApplicationSettingsPage.cpp new file mode 100644 index 0000000..131ac28 --- /dev/null +++ b/windows/ReactNativeNotes/ApplicationSettingsPage.cpp @@ -0,0 +1,16 @@ +#include "pch.h" +#include "ApplicationSettingsPage.h" +#include "ApplicationSettingsPage.g.cpp" + +#include "App.h" + + +namespace winrt::ReactNativeNotes::implementation +{ + ApplicationSettingsPage::ApplicationSettingsPage() + { + InitializeComponent(); + auto app = Windows::UI::Xaml::Application::Current().as(); + ReactRootView().ReactNativeHost( app->Host() ); + } +} diff --git a/windows/ReactNativeNotes/ApplicationSettingsPage.h b/windows/ReactNativeNotes/ApplicationSettingsPage.h new file mode 100644 index 0000000..75bcf96 --- /dev/null +++ b/windows/ReactNativeNotes/ApplicationSettingsPage.h @@ -0,0 +1,19 @@ +#pragma once + +#include "ApplicationSettingsPage.g.h" + +namespace winrt::ReactNativeNotes::implementation +{ + class ApplicationSettingsPage : public ApplicationSettingsPageT + { + public: + ApplicationSettingsPage(); + }; +} + +namespace winrt::ReactNativeNotes::factory_implementation +{ + class ApplicationSettingsPage : public ApplicationSettingsPageT + { + }; +} diff --git a/windows/ReactNativeNotes/ApplicationSettingsPage.idl b/windows/ReactNativeNotes/ApplicationSettingsPage.idl new file mode 100644 index 0000000..6459091 --- /dev/null +++ b/windows/ReactNativeNotes/ApplicationSettingsPage.idl @@ -0,0 +1,8 @@ +namespace ReactNativeNotes +{ + [default_interface] + runtimeclass ApplicationSettingsPage : Windows.UI.Xaml.Controls.Page + { + ApplicationSettingsPage(); + } +} diff --git a/windows/ReactNativeNotes/ApplicationSettingsPage.xaml b/windows/ReactNativeNotes/ApplicationSettingsPage.xaml new file mode 100644 index 0000000..4656fc1 --- /dev/null +++ b/windows/ReactNativeNotes/ApplicationSettingsPage.xaml @@ -0,0 +1,15 @@ + + + diff --git a/windows/ReactNativeNotes/NotesPage.cpp b/windows/ReactNativeNotes/NotesPage.cpp new file mode 100644 index 0000000..4d2778f --- /dev/null +++ b/windows/ReactNativeNotes/NotesPage.cpp @@ -0,0 +1,16 @@ +#include "pch.h" +#include "NotesPage.h" +#include "NotesPage.g.cpp" + +#include "App.h" + + +namespace winrt::ReactNativeNotes::implementation +{ + NotesPage::NotesPage() + { + InitializeComponent(); + auto app = Windows::UI::Xaml::Application::Current().as(); + ReactRootView().ReactNativeHost( app->Host() ); + } +} diff --git a/windows/ReactNativeNotes/NotesPage.h b/windows/ReactNativeNotes/NotesPage.h new file mode 100644 index 0000000..0c441f7 --- /dev/null +++ b/windows/ReactNativeNotes/NotesPage.h @@ -0,0 +1,20 @@ +#pragma once + +#include "NotesPage.g.h" +#include + +namespace winrt::ReactNativeNotes::implementation +{ + class NotesPage : public NotesPageT + { + public: + NotesPage(); + }; +} + +namespace winrt::ReactNativeNotes::factory_implementation +{ + class NotesPage : public NotesPageT + { + }; +} diff --git a/windows/ReactNativeNotes/NotesPage.idl b/windows/ReactNativeNotes/NotesPage.idl new file mode 100644 index 0000000..a5b15d7 --- /dev/null +++ b/windows/ReactNativeNotes/NotesPage.idl @@ -0,0 +1,8 @@ +namespace ReactNativeNotes +{ + [default_interface] + runtimeclass NotesPage : Windows.UI.Xaml.Controls.Page + { + NotesPage(); + } +} diff --git a/windows/ReactNativeNotes/NotesPage.xaml b/windows/ReactNativeNotes/NotesPage.xaml new file mode 100644 index 0000000..9a38813 --- /dev/null +++ b/windows/ReactNativeNotes/NotesPage.xaml @@ -0,0 +1,15 @@ + + + diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj index 76d436c..047a83d 100644 --- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj +++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj @@ -14,7 +14,7 @@ Windows Store 10.0 10.0.18362.0 - 10.0.16299.0 + 10.0.17763.0 ReactNativeNotes_TemporaryKey.pfx 2D6D803E40573C229AE14FFCCBB1DAD20B244DC4 password @@ -71,7 +71,8 @@ false - + + @@ -108,12 +109,24 @@ MainPage.xaml Code + + NotesPage.xaml + Code + App.xaml + + UserAccountPage.xaml + Code + + + ApplicationSettingsPage.xaml + Code + @@ -139,6 +152,10 @@ MainPage.xaml Code + + NotesPage.xaml + Code + @@ -148,6 +165,14 @@ App.xaml + + UserAccountPage.xaml + Code + + + ApplicationSettingsPage.xaml + Code + @@ -157,6 +182,18 @@ MainPage.xaml Code + + NotesPage.xaml + Code + + + UserAccountPage.xaml + Code + + + ApplicationSettingsPage.xaml + Code + @@ -169,6 +206,15 @@ Designer + + Designer + + + Designer + + + Designer + @@ -193,4 +239,4 @@ - + \ No newline at end of file diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters index 2aa08b7..a0dc1bc 100644 --- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters +++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters @@ -59,5 +59,8 @@ + + + \ No newline at end of file diff --git a/windows/ReactNativeNotes/UserAccountPage.cpp b/windows/ReactNativeNotes/UserAccountPage.cpp new file mode 100644 index 0000000..23536ae --- /dev/null +++ b/windows/ReactNativeNotes/UserAccountPage.cpp @@ -0,0 +1,16 @@ +#include "pch.h" +#include "UserAccountPage.h" +#include "UserAccountPage.g.cpp" + +#include "App.h" + + +namespace winrt::ReactNativeNotes::implementation +{ + UserAccountPage::UserAccountPage() + { + InitializeComponent(); + auto app = Windows::UI::Xaml::Application::Current().as(); + ReactRootView().ReactNativeHost( app->Host() ); + } +} diff --git a/windows/ReactNativeNotes/UserAccountPage.h b/windows/ReactNativeNotes/UserAccountPage.h new file mode 100644 index 0000000..2cc2356 --- /dev/null +++ b/windows/ReactNativeNotes/UserAccountPage.h @@ -0,0 +1,19 @@ +#pragma once + +#include "UserAccountPage.g.h" + +namespace winrt::ReactNativeNotes::implementation +{ + class UserAccountPage : public UserAccountPageT + { + public: + UserAccountPage(); + }; +} + +namespace winrt::ReactNativeNotes::factory_implementation +{ + class UserAccountPage : public UserAccountPageT + { + }; +} diff --git a/windows/ReactNativeNotes/UserAccountPage.idl b/windows/ReactNativeNotes/UserAccountPage.idl new file mode 100644 index 0000000..196446a --- /dev/null +++ b/windows/ReactNativeNotes/UserAccountPage.idl @@ -0,0 +1,8 @@ +namespace ReactNativeNotes +{ + [default_interface] + runtimeclass UserAccountPage : Windows.UI.Xaml.Controls.Page + { + UserAccountPage(); + } +} diff --git a/windows/ReactNativeNotes/UserAccountPage.xaml b/windows/ReactNativeNotes/UserAccountPage.xaml new file mode 100644 index 0000000..0a6161b --- /dev/null +++ b/windows/ReactNativeNotes/UserAccountPage.xaml @@ -0,0 +1,15 @@ + + + From 5550ce9026484e965992d2623fa79e3913b30412 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 17:11:07 +0100 Subject: [PATCH 7/9] Wrap application in NavigationView The NavigationView is a native UWP control which is able to easily create navigation panel and provides developer with embedded event handlers. More can be found here: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview Using this control each page given as a tag is converted into TypeName and directly invoked as a type to navigate to. --- windows/ReactNativeNotes/MainPage.cpp | 33 ++++++++++++++++++++++++-- windows/ReactNativeNotes/MainPage.h | 12 ++++++++-- windows/ReactNativeNotes/MainPage.xaml | 15 +++++++----- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/windows/ReactNativeNotes/MainPage.cpp b/windows/ReactNativeNotes/MainPage.cpp index 05f9cae..db5bae9 100644 --- a/windows/ReactNativeNotes/MainPage.cpp +++ b/windows/ReactNativeNotes/MainPage.cpp @@ -15,6 +15,35 @@ namespace winrt::ReactNativeNotes::implementation { InitializeComponent(); auto app = Application::Current().as(); - ReactRootView().ReactNativeHost(app->Host()); } -} + + void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args ) + { + if( args.IsSettingsInvoked() == true ) + { + Navigate( L"ApplicationSettingsPage" ); + } + else if( args.InvokedItemContainer() != nullptr ) + { + auto selectedPageTag = unbox_value_or( args.InvokedItemContainer().Tag(), L"" ); + Navigate( selectedPageTag ); + } + } + + void MainPage::TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args ) + { + + } + + void MainPage::Navigate( winrt::hstring pageName ) noexcept + { + ApplicationContentFrame().Navigate( Windows::UI::Xaml::Interop::TypeName + { + to_hstring( L"ReactNativeNotes." + pageName ), + Windows::UI::Xaml::Interop::TypeKind::Custom + } ); + } +} + + + diff --git a/windows/ReactNativeNotes/MainPage.h b/windows/ReactNativeNotes/MainPage.h index 7e7eed2..e8ea421 100644 --- a/windows/ReactNativeNotes/MainPage.h +++ b/windows/ReactNativeNotes/MainPage.h @@ -1,18 +1,26 @@ #pragma once #include "MainPage.g.h" #include +#include + namespace winrt::ReactNativeNotes::implementation { - struct MainPage : MainPageT + class MainPage : public MainPageT { + public: MainPage(); + void TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args ); + void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args ); + + private: + void Navigate( winrt::hstring pageName ) noexcept; }; } namespace winrt::ReactNativeNotes::factory_implementation { - struct MainPage : MainPageT + class MainPage : public MainPageT { }; } diff --git a/windows/ReactNativeNotes/MainPage.xaml b/windows/ReactNativeNotes/MainPage.xaml index 56e80e8..78cde15 100644 --- a/windows/ReactNativeNotes/MainPage.xaml +++ b/windows/ReactNativeNotes/MainPage.xaml @@ -7,10 +7,13 @@ xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" - Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> - + Background="Transparent"> + + + + + + + + From 0893715073bfa818238ae408e65208bf4335366e Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Tue, 23 Mar 2021 17:19:29 +0100 Subject: [PATCH 8/9] Move all components imports to the index --- App.js | 3 --- index.js | 4 ++++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/App.js b/App.js index ab679d2..c9c8034 100644 --- a/App.js +++ b/App.js @@ -9,9 +9,6 @@ import { View, } from 'react-native'; -import NotesMainPanel from './src/NotesMainPanel'; -import UserAccountPanel from './src/UserAccountPanel'; - class App extends React.Component { diff --git a/index.js b/index.js index a850d03..7eb0ad0 100644 --- a/index.js +++ b/index.js @@ -6,4 +6,8 @@ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; +import NotesMainPanel from './src/NotesMainPanel'; +import UserAccountPanel from './src/UserAccountPanel'; +import ApplicationSettingsPanel from './src/ApplicationSettingsPanel'; + AppRegistry.registerComponent(appName, () => App); From 6a07d18abd8014ebfd0a4048e7c99a5ef7685814 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Wed, 24 Mar 2021 09:48:30 +0100 Subject: [PATCH 9/9] Add Slide animation when switching between pages --- src/UserAccountPanel.js | 2 ++ windows/ReactNativeNotes/MainPage.cpp | 14 ++++++++------ windows/ReactNativeNotes/pch.h | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/UserAccountPanel.js b/src/UserAccountPanel.js index 8fad890..64706c2 100644 --- a/src/UserAccountPanel.js +++ b/src/UserAccountPanel.js @@ -19,6 +19,8 @@ class UserAccountPanel extends React.Component { UserAccountPanel + This panel will have all the features of User's account. +
Further implementation will yet be done! ); diff --git a/windows/ReactNativeNotes/MainPage.cpp b/windows/ReactNativeNotes/MainPage.cpp index db5bae9..5499247 100644 --- a/windows/ReactNativeNotes/MainPage.cpp +++ b/windows/ReactNativeNotes/MainPage.cpp @@ -32,16 +32,18 @@ namespace winrt::ReactNativeNotes::implementation void MainPage::TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args ) { - } void MainPage::Navigate( winrt::hstring pageName ) noexcept { - ApplicationContentFrame().Navigate( Windows::UI::Xaml::Interop::TypeName - { - to_hstring( L"ReactNativeNotes." + pageName ), - Windows::UI::Xaml::Interop::TypeKind::Custom - } ); + auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName + { + to_hstring( L"ReactNativeNotes." + pageName ), + Windows::UI::Xaml::Interop::TypeKind::Custom + }; + auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo(); + navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft ); + ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation ); } } diff --git a/windows/ReactNativeNotes/pch.h b/windows/ReactNativeNotes/pch.h index 13f3eec..4c800f1 100644 --- a/windows/ReactNativeNotes/pch.h +++ b/windows/ReactNativeNotes/pch.h @@ -16,6 +16,7 @@ #include #include #include +#include #include