TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mob][photos] Fix or make UI and layout better of the system navigation bar, home bottom navigation bar and the search widget

Browse Source
This commit is contained in:
ashilkn
2024-08-13 19:49:41 +05:30
parent c10eb97511
commit 8d0e3e972f
3 changed files with 109 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
mobile/lib/main.dart
View File

@@ -8,6 +8,7 @@ import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import "package:flutter/rendering.dart";
import "package:flutter/services.dart";
import "package:flutter_displaymode/flutter_displaymode.dart";
import 'package:logging/logging.dart';
import "package:media_kit/media_kit.dart";
@@ -78,6 +79,17 @@ void main() async {
await _runInForeground(savedThemeMode);
unawaited(BackgroundFetch.registerHeadlessTask(_headlessTaskHandler));
if (Platform.isAndroid) FlutterDisplayMode.setHighRefreshRate().ignore();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
systemNavigationBarColor: Color(0x00010000),
),
);
unawaited(
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.edgeToEdge,
),
);
}
Future<void> _runInForeground(AdaptiveThemeMode? savedThemeMode) async {

187
mobile/lib/ui/home/home_bottom_nav_bar.dart
View File

@@ -31,6 +31,7 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
void initState() {
super.initState();
currentTabIndex = widget.selectedTabIndex;
//Todo: Remove this listener on dispose
widget.selectedFiles.addListener(() {
setState(() {});
});
@@ -72,102 +73,102 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
@override
Widget build(BuildContext context) {
final isBottomInsetPresent = MediaQuery.of(context).viewPadding.bottom != 0;
final bottomPadding = isBottomInsetPresent ? 32.0 : 8.0;
final bool filesAreSelected = widget.selectedFiles.files.isNotEmpty;
final enteColorScheme = getEnteColorScheme(context);
return RepaintBoundary(
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
height: filesAreSelected ? 0 : (56 + bottomPadding),
child: IgnorePointer(
ignoring: filesAreSelected,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GNav(
curve: Curves.easeOutExpo,
backgroundColor:
getEnteColorScheme(context).backgroundElevated2,
mainAxisAlignment: MainAxisAlignment.center,
iconSize: 24,
padding: const EdgeInsets.fromLTRB(16, 6, 16, 6),
duration: const Duration(milliseconds: 200),
gap: 0,
tabBorderRadius: 32,
tabBackgroundColor:
Theme.of(context).brightness == Brightness.light
? strokeFainterLight
: strokeSolidFaintLight,
haptic: false,
tabs: [
GButton(
margin: const EdgeInsets.fromLTRB(8, 6, 10, 6),
icon: Icons.home_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
0,
mode: "OnPressed",
); // To take care of occasional missing events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 10, 6),
icon: Icons.collections_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
1,
mode: "OnPressed",
); // To take care of occasional missing
// events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
icon: Icons.people_outlined,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
2,
mode: "OnPressed",
); // To take care
// of occasional missing events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
icon: Icons.search_outlined,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
3,
mode: "OnPressed",
); // To take care
// of occasional missing events
},
),
],
selectedIndex: currentTabIndex,
onTabChange: _onTabChange,
),
],
),
],
return SafeArea(
child: RepaintBoundary(
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
height: filesAreSelected ? 0 : 56,
child: IgnorePointer(
ignoring: filesAreSelected,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GNav(
curve: Curves.easeOutExpo,
backgroundColor:
getEnteColorScheme(context).backgroundElevated2,
mainAxisAlignment: MainAxisAlignment.center,
iconSize: 24,
padding: const EdgeInsets.fromLTRB(16, 6, 16, 6),
duration: const Duration(milliseconds: 200),
gap: 0,
tabBorderRadius: 32,
tabBackgroundColor:
Theme.of(context).brightness == Brightness.light
? strokeFainterLight
: strokeSolidFaintLight,
haptic: false,
tabs: [
GButton(
margin: const EdgeInsets.fromLTRB(8, 6, 10, 6),
icon: Icons.home_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
0,
mode: "OnPressed",
); // To take care of occasional missing events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 10, 6),
icon: Icons.collections_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
1,
mode: "OnPressed",
); // To take care of occasional missing
// events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
icon: Icons.people_outlined,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
2,
mode: "OnPressed",
); // To take care
// of occasional missing events
},
),
GButton(
margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
icon: Icons.search_outlined,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
3,
mode: "OnPressed",
); // To take care
// of occasional missing events
},
),
],
selectedIndex: currentTabIndex,
onTabChange: _onTabChange,
),
],
),
],
),
),
),
),

3
mobile/lib/ui/viewer/search/search_widget.dart
View File

@@ -87,10 +87,13 @@ class SearchWidgetState extends State<SearchWidget> {
@override
void didChangeDependencies() {
super.didChangeDependencies();
//https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html
_bottomPadding =
(MediaQuery.viewInsetsOf(context).bottom - _distanceOfWidgetFromBottom);
if (_bottomPadding < 0) {
_bottomPadding = 0;
} else if (_bottomPadding != 0) {
_bottomPadding += MediaQuery.viewPaddingOf(context).bottom;
}
}