improve ui

This commit is contained in:
wgh19
2024-06-01 22:03:31 +08:00
parent 1fad3694cf
commit 4dc1ec8784
7 changed files with 148 additions and 99 deletions

View File

@@ -161,7 +161,8 @@
"Actions": "操作", "Actions": "操作",
"Current quantity": "当前数量", "Current quantity": "当前数量",
"Display the original image on the details page": "在详情页显示原图", "Display the original image on the details page": "在详情页显示原图",
"Open link": "打开链接" "Open link": "打开链接",
"Read": "阅读"
}, },
"zh_TW": { "zh_TW": {
"Search": "搜索", "Search": "搜索",
@@ -325,6 +326,7 @@
"Actions": "操作", "Actions": "操作",
"Current quantity": "當前數量", "Current quantity": "當前數量",
"Display the original image on the details page": "在詳情頁顯示原圖", "Display the original image on the details page": "在詳情頁顯示原圖",
"Open link": "打開鏈接" "Open link": "打開鏈接",
"Read": "閱讀"
} }
} }

View File

@@ -59,48 +59,58 @@ class _IllustWidgetState extends State<IllustWidget> {
height: height, height: height,
child: Stack( child: Stack(
children: [ children: [
Positioned.fill(child: Container( Positioned.fill(
child: Container(
width: width, width: width,
height: height, height: height,
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0), padding:
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
child: Card( child: Card(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
child: GestureDetector( child: GestureDetector(
onTap: widget.onTap ?? (){ onTap: widget.onTap ??
context.to(() => IllustPage(widget.illust)); () {
}, context.to(() => IllustPage(widget.illust));
},
onSecondaryTapUp: showMenu, onSecondaryTapUp: showMenu,
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(4.0), borderRadius: BorderRadius.circular(4.0),
child: AnimatedImage( child: AnimatedImage(
image: CachedImageProvider(widget.illust.images.first.medium), image: CachedImageProvider(
widget.illust.images.first.medium),
fit: BoxFit.cover, fit: BoxFit.cover,
width: width-16.0, width: width - 16.0,
height: height-16.0, height: height - 16.0,
), ),
), ),
), ),
), ),
)), )),
if(widget.illust.images.length > 1) if (widget.illust.images.length > 1)
Positioned( Positioned(
top: 12, top: 12,
left: 12, left: 12,
child: Container( child: Container(
width: 28, width: 28,
height: 20, height: 20,
decoration: BoxDecoration( decoration: BoxDecoration(
color: FluentTheme.of(context).cardColor, color: FluentTheme.of(context)
borderRadius: BorderRadius.circular(4), .micaBackgroundColor
border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6), .withOpacity(0.72),
), borderRadius: BorderRadius.circular(4),
child: Center( border: Border.all(
child: Text("${widget.illust.images.length}P", color: ColorScheme.of(context).outlineVariant,
style: const TextStyle(fontSize: 12),), 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( Positioned(
bottom: 12, bottom: 12,
left: 12, left: 12,
@@ -108,16 +118,22 @@ class _IllustWidgetState extends State<IllustWidget> {
width: 28, width: 28,
height: 20, height: 20,
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorScheme.of(context).errorContainer.withOpacity(0.8), color: ColorScheme.of(context)
.errorContainer
.withOpacity(0.8),
borderRadius: BorderRadius.circular(4), 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: const Center(
child: Text("AI", child: Text(
style: TextStyle(fontSize: 12),), "AI",
style: TextStyle(fontSize: 12),
),
)), )),
), ),
if(widget.illust.isUgoira) if (widget.illust.isUgoira)
Positioned( Positioned(
bottom: 12, bottom: 12,
left: 12, left: 12,
@@ -125,16 +141,22 @@ class _IllustWidgetState extends State<IllustWidget> {
width: 28, width: 28,
height: 20, height: 20,
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorScheme.of(context).primaryContainer.withOpacity(0.8), color: ColorScheme.of(context)
.primaryContainer
.withOpacity(0.8),
borderRadius: BorderRadius.circular(4), 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: const Center(
child: Text("GIF", child: Text(
style: TextStyle(fontSize: 12),), "GIF",
style: TextStyle(fontSize: 12),
),
)), )),
), ),
if(widget.illust.isR18) if (widget.illust.isR18)
Positioned( Positioned(
bottom: 12, bottom: 12,
right: 12, right: 12,
@@ -144,14 +166,18 @@ class _IllustWidgetState extends State<IllustWidget> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorScheme.of(context).errorContainer, color: ColorScheme.of(context).errorContainer,
borderRadius: BorderRadius.circular(4), 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: const Center(
child: Text("R18", child: Text(
style: TextStyle(fontSize: 12),), "R18",
style: TextStyle(fontSize: 12),
),
)), )),
), ),
if(widget.illust.isR18G) if (widget.illust.isR18G)
Positioned( Positioned(
bottom: 12, bottom: 12,
right: 12, right: 12,
@@ -161,11 +187,15 @@ class _IllustWidgetState extends State<IllustWidget> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorScheme.of(context).errorContainer, color: ColorScheme.of(context).errorContainer,
borderRadius: BorderRadius.circular(4), 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: const Center(
child: Text("R18G", child: Text(
style: TextStyle(fontSize: 12),), "R18G",
style: TextStyle(fontSize: 12),
),
)), )),
), ),
Positioned( Positioned(
@@ -196,31 +226,38 @@ class _IllustWidgetState extends State<IllustWidget> {
builder: (context) { builder: (context) {
return MenuFlyout( return MenuFlyout(
items: [ items: [
MenuFlyoutItem(text: Text("View".tl), onPressed: (){ MenuFlyoutItem(
context.to(() => IllustPage(widget.illust)); text: Text("View".tl),
}), onPressed: () {
MenuFlyoutItem(text: Text("Private Favorite".tl), onPressed: (){ context.to(() => IllustPage(widget.illust));
favorite("private"); }),
}), MenuFlyoutItem(
MenuFlyoutItem(text: Text("Download".tl), onPressed: (){ text: Text("Private Favorite".tl),
context.showToast(message: "Added"); onPressed: () {
DownloadManager().addDownloadingTask(widget.illust); favorite("private");
}), }),
MenuFlyoutItem(
text: Text("Download".tl),
onPressed: () {
context.showToast(message: "Added");
DownloadManager().addDownloadingTask(widget.illust);
}),
], ],
); );
}, },
); );
} }
void favorite([String type = "public"]) async{ void favorite([String type = "public"]) async {
if(isBookmarking) return; if (isBookmarking) return;
setState(() { setState(() {
isBookmarking = true; isBookmarking = true;
}); });
var method = widget.illust.isBookmarked ? "delete" : "add"; var method = widget.illust.isBookmarked ? "delete" : "add";
var res = await Network().addBookmark(widget.illust.id.toString(), method, type); var res =
if(res.error) { await Network().addBookmark(widget.illust.id.toString(), method, type);
if(mounted) { if (res.error) {
if (mounted) {
context.showToast(message: "Network Error"); context.showToast(message: "Network Error");
} }
} else { } else {
@@ -233,16 +270,18 @@ class _IllustWidgetState extends State<IllustWidget> {
Widget buildButton() { Widget buildButton() {
Widget child; Widget child;
if(isBookmarking) { if (isBookmarking) {
child = const SizedBox( child = const SizedBox(
width: 14, width: 14,
height: 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( child = Icon(
MdIcons.favorite, MdIcons.favorite,
color: ColorScheme.of(context).error, color: Colors.red,
size: 22, size: 22,
); );
} else { } else {

View File

@@ -328,11 +328,15 @@ class SideBarRoute<T> extends PopupRoute<T> {
bottom: 0, bottom: 0,
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: FluentTheme.of(context).micaBackgroundColor.withOpacity(0.98), color: FluentTheme.of(context)
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4)) .micaBackgroundColor
), .withOpacity(0.98),
constraints: BoxConstraints(maxWidth: min(_kSideBarWidth, borderRadius: const BorderRadius.only(
MediaQuery.of(context).size.width)), topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4))),
constraints: BoxConstraints(
maxWidth:
min(_kSideBarWidth, MediaQuery.of(context).size.width)),
width: double.infinity, width: double.infinity,
child: child, child: child,
), ),

View File

@@ -136,7 +136,8 @@ class MyApp extends StatelessWidget {
if (App.windowsVersion == 11) { if (App.windowsVersion == 11) {
flutter_acrylic.Window.setEffect( flutter_acrylic.Window.setEffect(
effect: flutter_acrylic.WindowEffect.mica, effect: flutter_acrylic.WindowEffect.mica,
dark: false); dark: FluentTheme.of(context).brightness ==
Brightness.dark);
widget = NavigationPaneTheme( widget = NavigationPaneTheme(
data: const NavigationPaneThemeData( data: const NavigationPaneThemeData(
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
@@ -146,12 +147,13 @@ class MyApp extends StatelessWidget {
} else if (App.windowsVersion == 10) { } else if (App.windowsVersion == 10) {
flutter_acrylic.Window.setEffect( flutter_acrylic.Window.setEffect(
effect: flutter_acrylic.WindowEffect.acrylic, effect: flutter_acrylic.WindowEffect.acrylic,
dark: false); dark: FluentTheme.of(context).brightness ==
Brightness.dark);
widget = NavigationPaneTheme( widget = NavigationPaneTheme(
data: NavigationPaneThemeData( data: NavigationPaneThemeData(
backgroundColor: FluentTheme.of(context) backgroundColor: FluentTheme.of(context)
.micaBackgroundColor .micaBackgroundColor
.withOpacity(0.05), .withOpacity(0.72),
), ),
child: widget, child: widget,
); );

View File

@@ -201,35 +201,37 @@ class _ImagePageState extends State<ImagePage> with WindowListener {
), ),
), ),
), ),
Positioned( if (currentPage != 0)
left: 0, Positioned(
top: height / 2 - 9, left: 0,
child: IconButton( top: height / 2 - 9,
icon: const Icon( child: IconButton(
FluentIcons.chevron_left, icon: const Icon(
size: 18, FluentIcons.chevron_left,
), size: 18,
onPressed: () { ),
controller.previousPage( onPressed: () {
duration: const Duration(milliseconds: 300), controller.previousPage(
curve: Curves.easeInOut, duration: const Duration(milliseconds: 300),
); curve: Curves.easeInOut,
}, );
).paddingAll(8), },
), ).paddingAll(8),
Positioned( ),
right: 0, if (currentPage != widget.urls.length - 1)
top: height / 2 - 9, Positioned(
child: IconButton( right: 0,
icon: const Icon(FluentIcons.chevron_right, size: 18), top: height / 2 - 9,
onPressed: () { child: IconButton(
controller.nextPage( icon: const Icon(FluentIcons.chevron_right, size: 18),
duration: const Duration(milliseconds: 300), onPressed: () {
curve: Curves.easeInOut, controller.nextPage(
); duration: const Duration(milliseconds: 300),
}, curve: Curves.easeInOut,
).paddingAll(8), );
), },
).paddingAll(8),
),
Positioned( Positioned(
left: 12, left: 12,
bottom: 8, bottom: 8,

View File

@@ -3,7 +3,6 @@ import "dart:async";
import "package:fluent_ui/fluent_ui.dart"; import "package:fluent_ui/fluent_ui.dart";
import "package:flutter/foundation.dart"; import "package:flutter/foundation.dart";
import "package:pixes/appdata.dart"; import "package:pixes/appdata.dart";
import "package:pixes/components/keyboard.dart";
import "package:pixes/components/md.dart"; import "package:pixes/components/md.dart";
import "package:pixes/foundation/app.dart"; import "package:pixes/foundation/app.dart";
import "package:pixes/foundation/image_provider.dart"; import "package:pixes/foundation/image_provider.dart";

View File

@@ -29,7 +29,7 @@ class _NovelReadingPageState extends LoadingState<NovelReadingPage, String> {
@override @override
void initState() { void initState() {
action = TitleBarAction(MdIcons.tune, "Settings", () { action = TitleBarAction(MdIcons.tune, "Settings".tl, () {
if (!isShowingSettings) { if (!isShowingSettings) {
_NovelReadingSettings.show(context, () { _NovelReadingSettings.show(context, () {
setState(() {}); setState(() {});
@@ -138,7 +138,8 @@ class _NovelReadingSettings extends StatefulWidget {
final void Function() callback; final void Function() callback;
static Future show(BuildContext context, 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 @override