viewer: bottom overlay layout

This commit is contained in:
Thibault Deckers 2022-03-01 10:50:30 +09:00
parent b03e997dba
commit 064f20bb3a
2 changed files with 83 additions and 92 deletions

View file

@ -74,67 +74,47 @@ class _ViewerBottomOverlayState extends State<ViewerBottomOverlay> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final showOverlayInfo = settings.showOverlayInfo; final hasEdgeContent = settings.showOverlayThumbnailPreview || settings.showOverlayInfo || multiPageController != null;
final hasEdgeContent = showOverlayInfo || multiPageController != null;
final blurred = settings.enableOverlayBlurEffect; final blurred = settings.enableOverlayBlurEffect;
return BlurredRect( return BlurredRect(
enabled: hasEdgeContent && blurred, enabled: hasEdgeContent && blurred,
child: Selector<MediaQueryData, Tuple3<double, EdgeInsets, EdgeInsets>>( child: Selector<MediaQueryData, double>(
selector: (context, mq) => Tuple3(mq.size.width, mq.viewInsets, mq.viewPadding), selector: (context, mq) => max(mq.effectiveBottomPadding, mq.systemGestureInsets.bottom),
builder: (context, mq, child) { builder: (context, mqPaddingBottom, child) {
final mqWidth = mq.item1; return Container(
final mqViewInsets = mq.item2; color: hasEdgeContent ? overlayBackgroundColor(blurred: blurred) : Colors.transparent,
final mqViewPadding = mq.item3; padding: EdgeInsets.only(bottom: mqPaddingBottom),
child: child,
final viewInsets = widget.viewInsets ?? mqViewInsets;
final viewPadding = widget.viewPadding ?? mqViewPadding;
final availableWidth = mqWidth - viewPadding.horizontal;
return Selector<MediaQueryData, double>(
selector: (context, mq) => max(mq.effectiveBottomPadding, showOverlayInfo ? 0 : mq.systemGestureInsets.bottom),
builder: (context, mqPaddingBottom, child) {
return Container(
color: hasEdgeContent ? overlayBackgroundColor(blurred: blurred) : Colors.transparent,
padding: EdgeInsets.only(
left: max(viewInsets.left, viewPadding.left),
top: 0,
right: max(viewInsets.right, viewPadding.right),
bottom: mqPaddingBottom,
),
child: child,
);
},
child: FutureBuilder<OverlayMetadata?>(
future: _detailLoader,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) {
_lastDetails = snapshot.data;
_lastEntry = entry;
}
if (_lastEntry == null) return const SizedBox();
final mainEntry = _lastEntry!;
Widget _buildContent({AvesEntry? pageEntry}) => _BottomOverlayContent(
entries: entries,
index: widget.index,
mainEntry: mainEntry,
pageEntry: pageEntry ?? mainEntry,
details: _lastDetails,
showPosition: widget.showPosition,
safeWidth: availableWidth,
multiPageController: multiPageController,
);
return multiPageController != null
? PageEntryBuilder(
multiPageController: multiPageController!,
builder: (pageEntry) => _buildContent(pageEntry: pageEntry),
)
: _buildContent();
},
),
); );
}, },
child: FutureBuilder<OverlayMetadata?>(
future: _detailLoader,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) {
_lastDetails = snapshot.data;
_lastEntry = entry;
}
if (_lastEntry == null) return const SizedBox();
final mainEntry = _lastEntry!;
Widget _buildContent({AvesEntry? pageEntry}) => _BottomOverlayContent(
entries: entries,
index: widget.index,
mainEntry: mainEntry,
pageEntry: pageEntry ?? mainEntry,
details: _lastDetails,
showPosition: widget.showPosition,
multiPageController: multiPageController,
);
return multiPageController != null
? PageEntryBuilder(
multiPageController: multiPageController!,
builder: (pageEntry) => _buildContent(pageEntry: pageEntry),
)
: _buildContent();
},
),
), ),
); );
} }
@ -146,7 +126,6 @@ class _BottomOverlayContent extends AnimatedWidget {
final AvesEntry mainEntry, pageEntry; final AvesEntry mainEntry, pageEntry;
final OverlayMetadata? details; final OverlayMetadata? details;
final bool showPosition; final bool showPosition;
final double safeWidth;
final MultiPageController? multiPageController; final MultiPageController? multiPageController;
_BottomOverlayContent({ _BottomOverlayContent({
@ -157,7 +136,6 @@ class _BottomOverlayContent extends AnimatedWidget {
required this.pageEntry, required this.pageEntry,
required this.details, required this.details,
required this.showPosition, required this.showPosition,
required this.safeWidth,
required this.multiPageController, required this.multiPageController,
}) : super( }) : super(
key: key, key: key,
@ -176,33 +154,46 @@ class _BottomOverlayContent extends AnimatedWidget {
softWrap: false, softWrap: false,
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
maxLines: 1, maxLines: 1,
child: SizedBox( child: Selector<MediaQueryData, double>(
width: safeWidth, selector: (context, mq) => mq.size.width,
child: Column( builder: (context, mqWidth, child) {
mainAxisSize: MainAxisSize.min, return SizedBox(
crossAxisAlignment: CrossAxisAlignment.start, width: mqWidth,
children: [ child: Column(
if (mainEntry.isMultiPage && multiPageController != null) mainAxisSize: MainAxisSize.min,
MultiPageOverlay( crossAxisAlignment: CrossAxisAlignment.start,
controller: multiPageController!, children: [
availableWidth: safeWidth, if (mainEntry.isMultiPage && multiPageController != null)
), MultiPageOverlay(
if (settings.showOverlayInfo) controller: multiPageController!,
ViewerDetailOverlay( availableWidth: mqWidth,
pageEntry: pageEntry, ),
details: details, if (settings.showOverlayInfo)
position: showPosition ? '${index + 1}/${entries.length}' : null, SafeArea(
availableWidth: safeWidth, top: false,
multiPageController: multiPageController, bottom: false,
), child: LayoutBuilder(
if (settings.showOverlayThumbnailPreview) builder: (context, constraints) {
ViewerThumbnailPreview( return ViewerDetailOverlay(
availableWidth: safeWidth, pageEntry: pageEntry,
displayedIndex: index, details: details,
entries: entries, position: showPosition ? '${index + 1}/${entries.length}' : null,
), availableWidth: constraints.maxWidth,
], multiPageController: multiPageController,
), );
},
),
),
if (settings.showOverlayThumbnailPreview)
ViewerThumbnailPreview(
availableWidth: mqWidth,
displayedIndex: index,
entries: entries,
),
],
),
);
},
), ),
); );
} }

View file

@ -1,31 +1,31 @@
{ {
"de": [ "de": [
"entryActionConvert", "entryActionConvert",
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"es": [ "es": [
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"fr": [ "fr": [
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"id": [ "id": [
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"ko": [ "ko": [
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"pt": [ "pt": [
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
], ],
"ru": [ "ru": [
"entryActionConvert", "entryActionConvert",
"settingsViewerShowOverlayThumbnailPreview" "settingsViewerShowOverlayThumbnails"
] ]
} }