beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #572 from ente-io/bottom-nav-bar

Browse source 
Bottom nav bar + expandable menuItem tweaks
This commit is contained in:
Vishnu Mohandas 2022-10-15 17:27:17 +05:30 committed by GitHub
parent f58a97153b 97a1f4ec2d
commit 0bcece7e8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
lib/ente_theme_data.dart
View file

@ -297,14 +297,6 @@ extension CustomColorScheme on ColorScheme {
? const Color.fromRGBO(255, 255, 255, 0.6)
: const Color.fromRGBO(255, 255, 255, 0.9);
Color get gNavIconColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 0.8)
: const Color.fromRGBO(255, 255, 255, 0.8);
Color get gNavActiveIconColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 0.8)
: const Color.fromRGBO(0, 0, 0, 0.8);
Color get galleryThumbBackgroundColor => brightness == Brightness.light
? const Color.fromRGBO(240, 240, 240, 1)
: const Color.fromRGBO(20, 20, 20, 1);

14
lib/theme/colors.dart
View file

@ -34,11 +34,15 @@ class EnteColorScheme {
final Color primary400;
final Color primary300;
//warning colors
final Color warning700;
final Color warning500;
final Color warning400;
final Color caution500;
//other colors
final Color tabIcon;
const EnteColorScheme(
this.backgroundBase,
this.backgroundElevated,
@ -54,7 +58,8 @@ class EnteColorScheme {
this.strokeBase,
this.strokeMuted,
this.strokeFaint,
this.strokeFainter, {
this.strokeFainter,
this.tabIcon, {
this.primary700 = _primary700,
this.primary500 = _primary500,
this.primary400 = _primary400,
@ -82,6 +87,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
strokeMutedLight,
strokeFaintLight,
strokeFainterLight,
tabIconLight,
);
const EnteColorScheme darkScheme = EnteColorScheme(
@ -100,6 +106,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
strokeMutedDark,
strokeFaintDark,
strokeFainterDark,
tabIconDark,
);
// Background Colors
@ -147,6 +154,11 @@ const Color strokeMutedDark = Color.fromRGBO(255, 255, 255, 0.24);
const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
const Color strokeFainterDark = Color.fromRGBO(255, 255, 255, 0.08);
// Other colors
const Color tabIconLight = Color.fromRGBO(0, 0, 0, 0.85);
const Color tabIconDark = Color.fromRGBO(255, 255, 255, 0.80);
// Fixed Colors
const Color _primary700 = Color.fromRGBO(0, 179, 60, 1);

6
lib/theme/effects.dart
View file

@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
const blurBase = 96;
const blurMuted = 48;
const blurFaint = 24;
const blurBase = 96.0;
const blurMuted = 48.0;
const blurFaint = 24.0;
List<BoxShadow> shadowFloatLight = const [
BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),

8
lib/ui/components/expandable_menu_item_widget.dart
View file

@ -40,13 +40,15 @@ class _ExpandableMenuItemWidgetState extends State<ExpandableMenuItemWidget> {
@override
Widget build(BuildContext context) {
final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
final backgroundColor =
MediaQuery.of(context).platformBrightness == Brightness.light
? enteColorScheme.backgroundElevated2
: enteColorScheme.backgroundElevated;
return AnimatedContainer(
curve: Curves.ease,
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(
color: expandableController.value
? enteColorScheme.backgroundElevated2
: null,
color: expandableController.value ? backgroundColor : null,
borderRadius: BorderRadius.circular(4),
),
child: ExpandableNotifier(

52
lib/ui/home_widget.dart
View file

@ -34,6 +34,8 @@ import 'package:photos/services/local_sync_service.dart';
import 'package:photos/services/update_service.dart';
import 'package:photos/services/user_service.dart';
import 'package:photos/states/user_details_state.dart';
import 'package:photos/theme/colors.dart';
import 'package:photos/theme/effects.dart';
import 'package:photos/theme/ente_theme.dart';
import 'package:photos/ui/backup_folder_selection_page.dart';
import 'package:photos/ui/collections_gallery_widget.dart';
@ -637,6 +639,12 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
@override
Widget build(BuildContext context) {
final bool filesAreSelected = widget.selectedFiles.files.isNotEmpty;
final enteColorScheme = getEnteColorScheme(context);
final navBarBlur =
MediaQuery.of(context).platformBrightness == Brightness.light
? blurBase
: blurMuted;
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
@ -657,10 +665,13 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
borderRadius: BorderRadius.circular(32),
child: Container(
alignment: Alignment.bottomCenter,
height: 56,
height: 48,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 96, sigmaY: 96),
filter: ImageFilter.blur(
sigmaX: navBarBlur,
sigmaY: navBarBlur,
),
child: GNav(
curve: Curves.easeOutExpo,
backgroundColor:
@ -671,23 +682,20 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
.colorScheme
.gNavBarActiveColor,
iconSize: 24,
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
padding: const EdgeInsets.fromLTRB(16, 6, 16, 6),
duration: const Duration(milliseconds: 200),
gap: 0,
tabBorderRadius: 24,
tabBorderRadius: 32,
tabBackgroundColor: Theme.of(context)
.colorScheme
.gNavBarActiveColor,
haptic: false,
tabs: [
GButton(
margin: const EdgeInsets.fromLTRB(12, 8, 8, 8),
icon: Icons.home,
iconColor:
Theme.of(context).colorScheme.gNavIconColor,
iconActiveColor: Theme.of(context)
.colorScheme
.gNavActiveIconColor,
margin: const EdgeInsets.fromLTRB(8, 6, 10, 6),
icon: Icons.home_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
@ -696,13 +704,10 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
},
),
GButton(
margin: const EdgeInsets.fromLTRB(8, 8, 8, 8),
icon: Icons.photo_library,
iconColor:
Theme.of(context).colorScheme.gNavIconColor,
iconActiveColor: Theme.of(context)
.colorScheme
.gNavActiveIconColor,
margin: const EdgeInsets.fromLTRB(10, 6, 10, 6),
icon: Icons.collections_rounded,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(
@ -711,13 +716,10 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
},
),
GButton(
margin: const EdgeInsets.fromLTRB(8, 8, 12, 8),
icon: Icons.folder_shared,
iconColor:
Theme.of(context).colorScheme.gNavIconColor,
iconActiveColor: Theme.of(context)
.colorScheme
.gNavActiveIconColor,
margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
icon: Icons.people_outlined,
iconColor: enteColorScheme.tabIcon,
iconActiveColor: strokeBaseLight,
text: '',
onPressed: () {
_onTabChange(