Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: adjust toolbar count based on the screen size (#5243)

Browse Source
This commit is contained in:
Lucas.Xu 2024-05-02 12:08:35 +08:00 committed by GitHub
parent 7831d8d4ab
commit 016e131bd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
View File

@ -461,8 +461,13 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
@override
Widget build(BuildContext context) {
const left = 8.0;
const right = 4.0;
// 68.0 is the width of the close keyboard/menu button
final padding = _calculatePadding(left + right + 68.0);
final children = [
const HSpace(8),
const HSpace(left),
...widget.toolbarItems
.mapIndexed(
(index, element) => element.itemBuilder.call(
@ -481,9 +486,9 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
: null,
),
)
.map((e) => [e, const HSpace(10)])
.map((e) => [e, HSpace(padding)])
.flattened,
const HSpace(4),
const HSpace(right),
];
return PageStorage(
@ -499,6 +504,23 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
);
}
double _calculatePadding(double extent) {
final screenWidth = MediaQuery.of(context).size.width;
final width = screenWidth - extent;
final int count;
if (screenWidth <= 340) {
count = 5;
} else if (screenWidth <= 384) {
count = 6;
} else if (screenWidth <= 430) {
count = 7;
} else {
count = 8;
}
// left + item count * width + item count * padding + right + close button width = screenWidth
return (width - count * 40.0) / count;
}
void _debounceUpdatePilotPosition() {
Debounce.debounce(
'updatePilotPosition',
@ -539,17 +561,3 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
previousSelection = selection;
}
}
// class _MyClipper extends CustomClipper<Rect> {
// const _MyClipper({
// this.offset = 0,
// });
// final double offset;
// @override
// Rect getClip(Size size) => Rect.fromLTWH(offset, 0, 64.0, 46.0);
// @override
// bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
// }