Add nav button in viewer on web

This commit is contained in:
Ming Ming 2021-04-21 03:43:18 +08:00
parent 6f058f2d92
commit 9c475b417d
2 changed files with 83 additions and 0 deletions

View file

@ -348,6 +348,14 @@
"@downloadFailureNoPermissionNotification": {
"description": "Inform user that the file cannot be downloaded due to missing storage permission"
},
"nextTooltip": "Next",
"@nextTooltip": {
"description": "Tooltip of the next button"
},
"previousTooltip": "Previous",
"@previousTooltip": {
"description": "Tooltip of the previous button"
},
"changelogTitle": "Changelog",
"@changelogTitle": {
"description": "Title of the changelog dialog"

View file

@ -126,6 +126,7 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
? null
: const NeverScrollableScrollPhysics(),
),
if (kIsWeb) ..._buildNavigationButtons(context),
_buildBottomAppBar(context),
_buildAppBar(context),
],
@ -154,6 +155,77 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
return content;
}
List<Widget> _buildNavigationButtons(BuildContext context) {
return [
Align(
alignment: Alignment.centerRight,
child: Material(
type: MaterialType.transparency,
child: Visibility(
visible: _canSwitchPage(),
child: AnimatedOpacity(
opacity: _isShowNext ? 1.0 : 0.0,
duration: k.animationDurationShort,
child: MouseRegion(
onEnter: (details) {
setState(() {
_isShowNext = true;
});
},
onExit: (details) {
setState(() {
_isShowNext = false;
});
},
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
child: IconButton(
icon: Icon(Icons.arrow_forward_ios_outlined),
onPressed: _switchToRightImage,
),
),
),
),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Material(
type: MaterialType.transparency,
child: Visibility(
visible: _canSwitchPage(),
child: AnimatedOpacity(
opacity: _isShowPrevious ? 1.0 : 0.0,
duration: k.animationDurationShort,
child: MouseRegion(
onEnter: (details) {
setState(() {
_isShowPrevious = true;
});
},
onExit: (details) {
setState(() {
_isShowPrevious = false;
});
},
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
child: IconButton(
icon: Icon(Icons.arrow_back_ios_outlined),
onPressed: _switchToLeftImage,
),
),
),
),
),
),
),
];
}
Widget _buildAppBar(BuildContext context) {
return Wrap(
children: [
@ -722,6 +794,9 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
var _isDetailPaneActive = false;
var _isClosingDetailPane = false;
var _isShowNext = false;
var _isShowPrevious = false;
var _isZooming = false;
var _wasZoomed = false;
final _transformationController = TransformationController();