From 4dc1ec87840e4a03146b6142cfe5cfe2858151da Mon Sep 17 00:00:00 2001 From: wgh19 Date: Sat, 1 Jun 2024 22:03:31 +0800 Subject: [PATCH] improve ui --- assets/tr.json | 6 +- lib/components/illust_widget.dart | 153 +++++++++++++++++++----------- lib/components/page_route.dart | 14 ++- lib/main.dart | 8 +- lib/pages/image_page.dart | 60 ++++++------ lib/pages/main_page.dart | 1 - lib/pages/novel_reading_page.dart | 5 +- 7 files changed, 148 insertions(+), 99 deletions(-) diff --git a/assets/tr.json b/assets/tr.json index 65729a3..29c6082 100644 --- a/assets/tr.json +++ b/assets/tr.json @@ -161,7 +161,8 @@ "Actions": "操作", "Current quantity": "当前数量", "Display the original image on the details page": "在详情页显示原图", - "Open link": "打开链接" + "Open link": "打开链接", + "Read": "阅读" }, "zh_TW": { "Search": "搜索", @@ -325,6 +326,7 @@ "Actions": "操作", "Current quantity": "當前數量", "Display the original image on the details page": "在詳情頁顯示原圖", - "Open link": "打開鏈接" + "Open link": "打開鏈接", + "Read": "閱讀" } } \ No newline at end of file diff --git a/lib/components/illust_widget.dart b/lib/components/illust_widget.dart index 615253f..56495a7 100644 --- a/lib/components/illust_widget.dart +++ b/lib/components/illust_widget.dart @@ -59,48 +59,58 @@ class _IllustWidgetState extends State { height: height, child: Stack( children: [ - Positioned.fill(child: Container( + Positioned.fill( + child: Container( width: width, height: height, - padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0), + padding: + const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0), child: Card( padding: EdgeInsets.zero, margin: EdgeInsets.zero, child: GestureDetector( - onTap: widget.onTap ?? (){ - context.to(() => IllustPage(widget.illust)); - }, + onTap: widget.onTap ?? + () { + context.to(() => IllustPage(widget.illust)); + }, onSecondaryTapUp: showMenu, child: ClipRRect( borderRadius: BorderRadius.circular(4.0), child: AnimatedImage( - image: CachedImageProvider(widget.illust.images.first.medium), + image: CachedImageProvider( + widget.illust.images.first.medium), fit: BoxFit.cover, - width: width-16.0, - height: height-16.0, + width: width - 16.0, + height: height - 16.0, ), ), ), ), )), - if(widget.illust.images.length > 1) + if (widget.illust.images.length > 1) Positioned( top: 12, left: 12, child: Container( - width: 28, - height: 20, - decoration: BoxDecoration( - color: FluentTheme.of(context).cardColor, - borderRadius: BorderRadius.circular(4), - border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), - ), - child: Center( - child: Text("${widget.illust.images.length}P", - style: const TextStyle(fontSize: 12),), - )), + width: 28, + height: 20, + decoration: BoxDecoration( + color: FluentTheme.of(context) + .micaBackgroundColor + .withOpacity(0.72), + borderRadius: BorderRadius.circular(4), + border: Border.all( + color: ColorScheme.of(context).outlineVariant, + width: 0.6), + ), + child: Center( + child: Text( + "${widget.illust.images.length}P", + style: const TextStyle(fontSize: 12), + ), + )), ), - if(widget.illust.isAi) + if (widget.illust.isAi) Positioned( bottom: 12, left: 12, @@ -108,16 +118,22 @@ class _IllustWidgetState extends State { width: 28, height: 20, decoration: BoxDecoration( - color: ColorScheme.of(context).errorContainer.withOpacity(0.8), + color: ColorScheme.of(context) + .errorContainer + .withOpacity(0.8), borderRadius: BorderRadius.circular(4), - border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), + border: Border.all( + color: ColorScheme.of(context).outlineVariant, + width: 0.6), ), child: const Center( - child: Text("AI", - style: TextStyle(fontSize: 12),), + child: Text( + "AI", + style: TextStyle(fontSize: 12), + ), )), ), - if(widget.illust.isUgoira) + if (widget.illust.isUgoira) Positioned( bottom: 12, left: 12, @@ -125,16 +141,22 @@ class _IllustWidgetState extends State { width: 28, height: 20, decoration: BoxDecoration( - color: ColorScheme.of(context).primaryContainer.withOpacity(0.8), + color: ColorScheme.of(context) + .primaryContainer + .withOpacity(0.8), borderRadius: BorderRadius.circular(4), - border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), + border: Border.all( + color: ColorScheme.of(context).outlineVariant, + width: 0.6), ), child: const Center( - child: Text("GIF", - style: TextStyle(fontSize: 12),), + child: Text( + "GIF", + style: TextStyle(fontSize: 12), + ), )), ), - if(widget.illust.isR18) + if (widget.illust.isR18) Positioned( bottom: 12, right: 12, @@ -144,14 +166,18 @@ class _IllustWidgetState extends State { decoration: BoxDecoration( color: ColorScheme.of(context).errorContainer, borderRadius: BorderRadius.circular(4), - border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), + border: Border.all( + color: ColorScheme.of(context).outlineVariant, + width: 0.6), ), child: const Center( - child: Text("R18", - style: TextStyle(fontSize: 12),), + child: Text( + "R18", + style: TextStyle(fontSize: 12), + ), )), ), - if(widget.illust.isR18G) + if (widget.illust.isR18G) Positioned( bottom: 12, right: 12, @@ -161,11 +187,15 @@ class _IllustWidgetState extends State { decoration: BoxDecoration( color: ColorScheme.of(context).errorContainer, borderRadius: BorderRadius.circular(4), - border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), + border: Border.all( + color: ColorScheme.of(context).outlineVariant, + width: 0.6), ), child: const Center( - child: Text("R18G", - style: TextStyle(fontSize: 12),), + child: Text( + "R18G", + style: TextStyle(fontSize: 12), + ), )), ), Positioned( @@ -196,31 +226,38 @@ class _IllustWidgetState extends State { builder: (context) { return MenuFlyout( items: [ - MenuFlyoutItem(text: Text("View".tl), onPressed: (){ - context.to(() => IllustPage(widget.illust)); - }), - MenuFlyoutItem(text: Text("Private Favorite".tl), onPressed: (){ - favorite("private"); - }), - MenuFlyoutItem(text: Text("Download".tl), onPressed: (){ - context.showToast(message: "Added"); - DownloadManager().addDownloadingTask(widget.illust); - }), + MenuFlyoutItem( + text: Text("View".tl), + onPressed: () { + context.to(() => IllustPage(widget.illust)); + }), + MenuFlyoutItem( + text: Text("Private Favorite".tl), + onPressed: () { + favorite("private"); + }), + MenuFlyoutItem( + text: Text("Download".tl), + onPressed: () { + context.showToast(message: "Added"); + DownloadManager().addDownloadingTask(widget.illust); + }), ], ); }, ); } - void favorite([String type = "public"]) async{ - if(isBookmarking) return; + void favorite([String type = "public"]) async { + if (isBookmarking) return; setState(() { isBookmarking = true; }); var method = widget.illust.isBookmarked ? "delete" : "add"; - var res = await Network().addBookmark(widget.illust.id.toString(), method, type); - if(res.error) { - if(mounted) { + var res = + await Network().addBookmark(widget.illust.id.toString(), method, type); + if (res.error) { + if (mounted) { context.showToast(message: "Network Error"); } } else { @@ -233,16 +270,18 @@ class _IllustWidgetState extends State { Widget buildButton() { Widget child; - if(isBookmarking) { + if (isBookmarking) { child = const SizedBox( width: 14, height: 14, - child: ProgressRing(strokeWidth: 1.6,), + child: ProgressRing( + strokeWidth: 1.6, + ), ); - } else if(widget.illust.isBookmarked) { + } else if (widget.illust.isBookmarked) { child = Icon( MdIcons.favorite, - color: ColorScheme.of(context).error, + color: Colors.red, size: 22, ); } else { diff --git a/lib/components/page_route.dart b/lib/components/page_route.dart index 69bd497..35ecac5 100644 --- a/lib/components/page_route.dart +++ b/lib/components/page_route.dart @@ -328,11 +328,15 @@ class SideBarRoute extends PopupRoute { bottom: 0, child: Container( decoration: BoxDecoration( - color: FluentTheme.of(context).micaBackgroundColor.withOpacity(0.98), - borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4)) - ), - constraints: BoxConstraints(maxWidth: min(_kSideBarWidth, - MediaQuery.of(context).size.width)), + color: FluentTheme.of(context) + .micaBackgroundColor + .withOpacity(0.98), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(4), + bottomLeft: Radius.circular(4))), + constraints: BoxConstraints( + maxWidth: + min(_kSideBarWidth, MediaQuery.of(context).size.width)), width: double.infinity, child: child, ), diff --git a/lib/main.dart b/lib/main.dart index 9e4f96d..7f6f13b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -136,7 +136,8 @@ class MyApp extends StatelessWidget { if (App.windowsVersion == 11) { flutter_acrylic.Window.setEffect( effect: flutter_acrylic.WindowEffect.mica, - dark: false); + dark: FluentTheme.of(context).brightness == + Brightness.dark); widget = NavigationPaneTheme( data: const NavigationPaneThemeData( backgroundColor: Colors.transparent, @@ -146,12 +147,13 @@ class MyApp extends StatelessWidget { } else if (App.windowsVersion == 10) { flutter_acrylic.Window.setEffect( effect: flutter_acrylic.WindowEffect.acrylic, - dark: false); + dark: FluentTheme.of(context).brightness == + Brightness.dark); widget = NavigationPaneTheme( data: NavigationPaneThemeData( backgroundColor: FluentTheme.of(context) .micaBackgroundColor - .withOpacity(0.05), + .withOpacity(0.72), ), child: widget, ); diff --git a/lib/pages/image_page.dart b/lib/pages/image_page.dart index da7c25d..5ace32b 100644 --- a/lib/pages/image_page.dart +++ b/lib/pages/image_page.dart @@ -201,35 +201,37 @@ class _ImagePageState extends State with WindowListener { ), ), ), - Positioned( - left: 0, - top: height / 2 - 9, - child: IconButton( - icon: const Icon( - FluentIcons.chevron_left, - size: 18, - ), - onPressed: () { - controller.previousPage( - duration: const Duration(milliseconds: 300), - curve: Curves.easeInOut, - ); - }, - ).paddingAll(8), - ), - Positioned( - right: 0, - top: height / 2 - 9, - child: IconButton( - icon: const Icon(FluentIcons.chevron_right, size: 18), - onPressed: () { - controller.nextPage( - duration: const Duration(milliseconds: 300), - curve: Curves.easeInOut, - ); - }, - ).paddingAll(8), - ), + if (currentPage != 0) + Positioned( + left: 0, + top: height / 2 - 9, + child: IconButton( + icon: const Icon( + FluentIcons.chevron_left, + size: 18, + ), + onPressed: () { + controller.previousPage( + duration: const Duration(milliseconds: 300), + curve: Curves.easeInOut, + ); + }, + ).paddingAll(8), + ), + if (currentPage != widget.urls.length - 1) + Positioned( + right: 0, + top: height / 2 - 9, + child: IconButton( + icon: const Icon(FluentIcons.chevron_right, size: 18), + onPressed: () { + controller.nextPage( + duration: const Duration(milliseconds: 300), + curve: Curves.easeInOut, + ); + }, + ).paddingAll(8), + ), Positioned( left: 12, bottom: 8, diff --git a/lib/pages/main_page.dart b/lib/pages/main_page.dart index 471e892..dfb6cdc 100644 --- a/lib/pages/main_page.dart +++ b/lib/pages/main_page.dart @@ -3,7 +3,6 @@ import "dart:async"; import "package:fluent_ui/fluent_ui.dart"; import "package:flutter/foundation.dart"; import "package:pixes/appdata.dart"; -import "package:pixes/components/keyboard.dart"; import "package:pixes/components/md.dart"; import "package:pixes/foundation/app.dart"; import "package:pixes/foundation/image_provider.dart"; diff --git a/lib/pages/novel_reading_page.dart b/lib/pages/novel_reading_page.dart index 4c889e8..4b9e38f 100644 --- a/lib/pages/novel_reading_page.dart +++ b/lib/pages/novel_reading_page.dart @@ -29,7 +29,7 @@ class _NovelReadingPageState extends LoadingState { @override void initState() { - action = TitleBarAction(MdIcons.tune, "Settings", () { + action = TitleBarAction(MdIcons.tune, "Settings".tl, () { if (!isShowingSettings) { _NovelReadingSettings.show(context, () { setState(() {}); @@ -138,7 +138,8 @@ class _NovelReadingSettings extends StatefulWidget { final void Function() callback; static Future show(BuildContext context, void Function() callback) { - return Navigator.of(context).push(SideBarRoute(_NovelReadingSettings(callback))); + return Navigator.of(context) + .push(SideBarRoute(_NovelReadingSettings(callback))); } @override