[Pull Request] Crequency/KitX#278

.gitignore

@@ -1,4 +1,8 @@
-## Ignore Visual Studio temporary files, build results, and
+## Ignore Platform Files
+*.DS_Store
+
+
+## Ignore Visual Studio temporary files, build results, and
 ## files generated by popular Visual Studio add-ons.
 ##
 ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore

KitX Website Flutter/kitx_website/lib/main.dart

@@ -1,9 +1,8 @@
-import 'dart:ui' as ui;
-
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
-import 'package:kitx_website/pages/home_page.dart';
+import 'package:kitx_website/pages/navigation_page.dart';
 
 import 'package:kitx_website/themes/light_theme.dart';
 import 'package:kitx_website/themes/dark_theme.dart';
@@ -31,9 +30,9 @@ class MainApp extends StatelessWidget {
         darkTheme: darkThemeData,
         debugShowCheckedModeBanner: false,
         translations: Translation(),
-        locale: ui.window.locale,
+        locale: PlatformDispatcher.instance.locale,
         fallbackLocale: Locale('en', 'US'),
-        home: const HomePage(),
+        home: const NavigationPage(),
       ),
     );
   }

KitX Website Flutter/kitx_website/lib/pages/controls/drawer.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:community_material_icon/community_material_icon.dart';
+import 'package:kitx_website/utils/global.dart';
 import 'package:kitx_website/utils/open_link.dart';
 
 class AppDrawer extends StatelessWidget {
@@ -14,43 +15,38 @@ class AppDrawer extends StatelessWidget {
         children: <Widget>[
           ListTile(title: const Text(' ')),
           ListTile(
-            leading: Icon(Icons.home),
+            leading: const Icon(Icons.home),
             title: Text('Home_Page'.tr),
-            onTap: () => openLink('Home_Page'),
+            onTap: () => Global.navPageTo(0),
           ),
           ListTile(
-            leading: Icon(Icons.account_balance_rounded),
+            leading: const Icon(Icons.account_balance_rounded),
             title: Text('Plugins_Page'.tr),
-            onTap: () {},
+            onTap: () => Global.navPageTo(1),
           ),
           ListTile(
-            leading: Icon(CommunityMaterialIcons.file_document),
+            leading: const Icon(CommunityMaterialIcons.file_document),
             title: Text('Public_Docs'.tr),
-            onTap: () => openLink('Docs_KitX'),
+            onTap: () => Global.navPageTo(2),
+          ),
+          ListTile(
+            leading: const Icon(Icons.settings),
+            title: Text('Settings_Page'.tr),
+            onTap: () => Global.navPageTo(3),
           ),
+          Divider(),
           ListTile(
-            leading: Icon(CommunityMaterialIcons.github),
+            leading: const Icon(CommunityMaterialIcons.github),
             title: const Text('GitHub'),
+            trailing: const Icon(Icons.open_in_new),
             onTap: () => openLink('GitHubRepo_KitX'),
           ),
-          // DrawerHeader(
-          //   decoration: BoxDecoration(
-          //     // color: Colors.blue,
-          //     image: const DecorationImage(
-          //       alignment: Alignment.topCenter,
-          //       image: AssetImage('assets/KitX-Background.png'),
-          //       fit: BoxFit.cover,
-          //     ),
-          //   ),
-          //   child: Text(
-          //     '',
-          //     // 'Drawer_Title'.tr,
-          //     style: TextStyle(
-          //       color: Colors.white,
-          //       fontSize: 24,
-          //     ),
-          //   ),
-          // ),
+          ListTile(
+            leading: const Icon(CommunityMaterialIcons.file_document),
+            title: Text('Public_Docs'.tr),
+            trailing: const Icon(Icons.open_in_new),
+            onTap: () => openLink('Docs_KitX'),
+          ),
         ],
       ),
     );

KitX Website Flutter/kitx_website/lib/pages/controls/home_page_actions.dart

@@ -16,17 +16,28 @@ var kitx_github_repo_key = 'GitHubRepo_KitX';
 
 List<Widget> getActions(BuildContext context) => [
       IconButton(
-        onPressed: () => openLink(kitx_github_repo_key),
+          onPressed: () => openLink(kitx_github_repo_key),
+          icon: Container(
+            margin: EdgeInsets.fromLTRB(0, 0, 0, 1),
+            child: Icon(CommunityMaterialIcons.github),
+          ),
+          tooltip: 'GitHub'),
+      SizedBox(width: actionsPadding),
+      IconButton(
+        onPressed: () => openLink(kitx_docs_key),
         icon: Container(
-          margin: EdgeInsets.fromLTRB(0, 0, 0, 1),
-          child: Icon(CommunityMaterialIcons.github),
+          child: Icon(CommunityMaterialIcons.file_document),
         ),
+        tooltip: 'Public_Docs'.tr,
       ),
       SizedBox(width: actionsPadding),
       Obx(
         () => IconButton(
-          onPressed: () => Global.themeNotifier.value = context.isDarkMode ? ThemeMode.light : ThemeMode.dark,
-          icon: themeButtonInLightMode.value ? const Icon(Icons.light_mode) : const Icon(Icons.dark_mode),
+          onPressed: () => Global.themeNotifier.value =
+              context.isDarkMode ? ThemeMode.light : ThemeMode.dark,
+          icon: themeButtonInLightMode.value
+              ? const Icon(Icons.light_mode)
+              : const Icon(Icons.dark_mode),
         ),
       ),
       SizedBox(width: actionsPadding),
@@ -37,11 +48,13 @@ List<Widget> getActions(BuildContext context) => [
         itemBuilder: (context) => [
           PopupMenuItem(
             child: const Text('简体中文'),
-            onTap: () => Global.delay(() => Get.updateLocale(Locale('zh', 'CN')), 200),
+            onTap: () =>
+                Global.delay(() => Get.updateLocale(Locale('zh', 'CN')), 200),
           ),
           PopupMenuItem(
             child: const Text('English (US)'),
-            onTap: () => Global.delay(() => Get.updateLocale(Locale('en', 'US')), 200),
+            onTap: () =>
+                Global.delay(() => Get.updateLocale(Locale('en', 'US')), 200),
           ),
         ],
       ),

KitX Website Flutter/kitx_website/lib/pages/docs_page.dart

@@ -0,0 +1,75 @@
+import 'dart:html';
+import 'dart:ui_web';
+
+import 'package:flutter/material.dart';
+import 'package:kitx_website/utils/global.dart';
+import 'package:loading_animation_widget/loading_animation_widget.dart';
+
+class DocsPage extends StatefulWidget {
+  const DocsPage({super.key});
+
+  @override
+  _DocsPageState createState() => _DocsPageState();
+}
+
+class _DocsPageState extends State<DocsPage> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    platformViewRegistry.registerViewFactory('iframe-webview', (_) {
+      return IFrameElement()
+        ..style.height = '100%'
+        ..style.width = '100%'
+        ..src = 'https://kitx.docs.catrol.cn/'
+        ..style.border = 'none';
+    });
+
+    const actionsPadding = SizedBox(width: 8.0);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Docs Inside'),
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.home),
+            onPressed: () => Global.navPageTo(0),
+          ),
+          actionsPadding,
+          IconButton(
+            icon: const Icon(Icons.account_balance_rounded),
+            onPressed: () => Global.navPageTo(1),
+          ),
+          actionsPadding,
+          IconButton(
+            icon: const Icon(Icons.open_in_new),
+            onPressed: () {
+              window.open('https://kitx.docs.catrol.cn/', 'KitX Docs');
+            },
+          ),
+          actionsPadding,
+        ],
+      ),
+      drawerEnableOpenDragGesture: false,
+      body: Stack(children: [
+        Center(
+          child: LoadingAnimationWidget.staggeredDotsWave(
+            color: Colors.white,
+            size: 200,
+          ),
+        ),
+        SizedBox(
+          width: double.infinity,
+          height: double.infinity,
+          child: HtmlElementView(
+            viewType: 'iframe-webview',
+            onPlatformViewCreated: (int id) {},
+          ),
+        ),
+      ]),
+    );
+  }
+}

KitX Website Flutter/kitx_website/lib/pages/home_page.dart

@@ -20,7 +20,8 @@ class _HomePageState extends State<HomePage> {
     if (width != null) {
       if (width <= 500 && showTextOfLinkButton.value)
         showTextOfLinkButton.value = false;
-      else if (width > 500 && !showTextOfLinkButton.value) showTextOfLinkButton.value = true;
+      else if (width > 500 && !showTextOfLinkButton.value)
+        showTextOfLinkButton.value = true;
     }
   }
 
@@ -42,7 +43,9 @@ class _HomePageState extends State<HomePage> {
         title: Obx(
           () => Text(
             showTextOfLinkButton.value ? 'KitX Website' : 'KitX',
-            overflow: showTextOfLinkButton.value ? TextOverflow.fade : TextOverflow.ellipsis,
+            overflow: showTextOfLinkButton.value
+                ? TextOverflow.fade
+                : TextOverflow.ellipsis,
           ),
         ),
         actions: getActions(context),

KitX Website Flutter/kitx_website/lib/pages/navigation_page.dart

@@ -0,0 +1,98 @@
+import 'package:community_material_icon/community_material_icon.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:kitx_website/pages/docs_page.dart';
+import 'package:kitx_website/pages/home_page.dart';
+import 'package:kitx_website/pages/plugins_page.dart';
+import 'package:kitx_website/pages/settings_page.dart';
+import 'package:kitx_website/utils/global.dart';
+
+class NavigationPage extends StatefulWidget {
+  const NavigationPage({super.key});
+
+  @override
+  State<NavigationPage> createState() => _NavigationPageState();
+}
+
+class _NavigationPageState extends State<NavigationPage> {
+  double _buttonsPadding = 10;
+  var _pageController = PageController(initialPage: 0);
+
+  @override
+  void initState() {
+    super.initState();
+    Global.navPageController = _pageController;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Row(
+        children: <Widget>[
+          MediaQuery.of(context).size.width > MediaQuery.of(context).size.height
+              ? Obx(
+                  () => NavigationRail(
+                    selectedIndex: Global.navigationIndex.value,
+                    groupAlignment: -1.0,
+                    onDestinationSelected: (index) => Global.navPageTo(index),
+                    useIndicator: true,
+                    labelType: NavigationRailLabelType.all,
+                    leading: FloatingActionButton(
+                      elevation: 0,
+                      onPressed: () {},
+                      child: const Icon(Icons.search),
+                    ),
+                    destinations: <NavigationRailDestination>[
+                      NavigationRailDestination(
+                        icon: const Icon(Icons.home),
+                        selectedIcon: const Icon(Icons.home_outlined),
+                        label: Text('Home_Page'.tr),
+                        padding:
+                            EdgeInsets.symmetric(vertical: _buttonsPadding),
+                      ),
+                      NavigationRailDestination(
+                        icon: const Icon(CommunityMaterialIcons.cube),
+                        selectedIcon:
+                            const Icon(CommunityMaterialIcons.cube_outline),
+                        label: Text('Plugins_Page'.tr),
+                        padding:
+                            EdgeInsets.symmetric(vertical: _buttonsPadding),
+                      ),
+                      NavigationRailDestination(
+                        icon: const Icon(Icons.account_balance),
+                        selectedIcon:
+                            const Icon(Icons.account_balance_outlined),
+                        label: Text('Public_Docs'.tr),
+                        padding:
+                            EdgeInsets.symmetric(vertical: _buttonsPadding),
+                      ),
+                      NavigationRailDestination(
+                        icon: const Icon(Icons.settings),
+                        selectedIcon: const Icon(Icons.settings_outlined),
+                        label: Text('Settings_Page'.tr),
+                        padding:
+                            EdgeInsets.symmetric(vertical: _buttonsPadding),
+                      ),
+                    ],
+                  ),
+                )
+              : const SizedBox(),
+          const VerticalDivider(thickness: 1, width: 1),
+          Expanded(
+            child: PageView(
+              children: const [
+                const ClipRect(child: const HomePage()),
+                const ClipRect(child: const PluginsPage()),
+                const ClipRect(child: const DocsPage()),
+                const ClipRect(child: const SettingsPage()),
+              ],
+              controller: _pageController,
+              physics: const NeverScrollableScrollPhysics(),
+              scrollDirection: Axis.vertical,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

KitX Website Flutter/kitx_website/lib/pages/plugins_page.dart

@@ -0,0 +1,31 @@
+import 'dart:html';
+
+import 'package:flutter/material.dart';
+import 'package:kitx_website/pages/controls/drawer.dart';
+
+class PluginsPage extends StatefulWidget {
+  const PluginsPage({super.key});
+
+  @override
+  _PluginsPageState createState() => _PluginsPageState();
+}
+
+class _PluginsPageState extends State<PluginsPage> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('PluginsPage'),
+      ),
+      drawer: AppDrawer(),
+      drawerEnableOpenDragGesture: true,
+      drawerEdgeDragWidth: (window.innerWidth ?? 300) / 2 + 50,
+      body: Center(child: Text('Under developing ...')),
+    );
+  }
+}