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

Merge pull request #613 from ente-io/new-layout-changes

Browse source 
New layout changes
This commit is contained in:
Neeraj Gupta 2022-11-02 13:21:01 +05:30 committed by GitHub
commit ae22430e4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 176 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
lib/theme/colors.dart
View file

@ -16,6 +16,7 @@ class EnteColorScheme {
final Color textBase;
final Color textMuted;
final Color textFaint;
final Color blurTextBase;
// Fill Colors
final Color fillBase;
@ -27,6 +28,9 @@ class EnteColorScheme {
final Color strokeMuted;
final Color strokeFaint;
final Color strokeFainter;
final Color blurStrokeBase;
final Color blurStrokeFaint;
final Color blurStrokePressed;
// Fixed Colors
final Color primary700;
@ -52,6 +56,7 @@ class EnteColorScheme {
this.textBase,
this.textMuted,
this.textFaint,
this.blurTextBase,
this.fillBase,
this.fillMuted,
this.fillFaint,
@ -59,6 +64,9 @@ class EnteColorScheme {
this.strokeMuted,
this.strokeFaint,
this.strokeFainter,
this.blurStrokeBase,
this.blurStrokeFaint,
this.blurStrokePressed,
this.tabIcon, {
this.primary700 = _primary700,
this.primary500 = _primary500,
@ -80,6 +88,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
textBaseLight,
textMutedLight,
textFaintLight,
blurTextBaseLight,
fillBaseLight,
fillMutedLight,
fillFaintLight,
@ -87,6 +96,9 @@ const EnteColorScheme lightScheme = EnteColorScheme(
strokeMutedLight,
strokeFaintLight,
strokeFainterLight,
blurStrokeBaseLight,
blurStrokeFaintLight,
blurStrokePressedLight,
tabIconLight,
);
@ -99,6 +111,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
textBaseDark,
textMutedDark,
textFaintDark,
blurTextBaseDark,
fillBaseDark,
fillMutedDark,
fillFaintDark,
@ -106,6 +119,9 @@ const EnteColorScheme darkScheme = EnteColorScheme(
strokeMutedDark,
strokeFaintDark,
strokeFainterDark,
blurStrokeBaseDark,
blurStrokeFaintDark,
blurStrokePressedDark,
tabIconDark,
);
@ -129,10 +145,12 @@ const Color backdropBaseMuteDark = Color.fromRGBO(0, 0, 0, 0.20);
const Color textBaseLight = Color.fromRGBO(0, 0, 0, 1);
const Color textMutedLight = Color.fromRGBO(0, 0, 0, 0.6);
const Color textFaintLight = Color.fromRGBO(0, 0, 0, 0.5);
const Color blurTextBaseLight = Color.fromRGBO(0, 0, 0, 0.65);
const Color textBaseDark = Color.fromRGBO(255, 255, 255, 1);
const Color textMutedDark = Color.fromRGBO(255, 255, 255, 0.7);
const Color textFaintDark = Color.fromRGBO(255, 255, 255, 0.5);
const Color blurTextBaseDark = Color.fromRGBO(255, 255, 255, 0.95);
// Fill Colors
const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
@ -148,11 +166,17 @@ const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);
const Color strokeMutedLight = Color.fromRGBO(0, 0, 0, 0.24);
const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.12);
const Color strokeFainterLight = Color.fromRGBO(0, 0, 0, 0.06);
const Color blurStrokeBaseLight = Color.fromRGBO(0, 0, 0, 0.65);
const Color blurStrokeFaintLight = Color.fromRGBO(0, 0, 0, 0.08);
const Color blurStrokePressedLight = Color.fromRGBO(0, 0, 0, 0.50);
const Color strokeBaseDark = Color.fromRGBO(255, 255, 255, 1);
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);
const Color blurStrokeBaseDark = Color.fromRGBO(0, 0, 0, 0.90);
const Color blurStrokeFaintDark = Color.fromRGBO(0, 0, 0, 0.08);
const Color blurStrokePressedDark = Color.fromRGBO(0, 0, 0, 0.50);
// Other colors
const Color tabIconLight = Color.fromRGBO(0, 0, 0, 0.85);

6
lib/ui/backup_settings_screen.dart
View file

@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:photos/core/configuration.dart';
import 'package:photos/theme/ente_theme.dart';
import 'package:photos/ui/components/captioned_text_widget.dart';
import 'package:photos/ui/components/divider_widget.dart';
import 'package:photos/ui/components/icon_button_widget.dart';
import 'package:photos/ui/components/menu_item_widget.dart';
import 'package:photos/ui/components/menu_section_description_widget.dart';
@ -71,7 +72,10 @@ class BackupSettingsScreen extends StatelessWidget {
isBottomBorderRadiusRemoved: true,
isGestureDetectorDisabled: true,
),
const SizedBox(height: 1),
DividerWidget(
dividerType: DividerType.menuNoIcon,
bgColor: colorScheme.fillFaint,
),
MenuItemWidget(
captionedTextWidget: const CaptionedTextWidget(
title: "Backup videos",

2
lib/ui/components/captioned_text_widget.dart
View file

@ -23,7 +23,7 @@ class CaptionedTextWidget extends StatelessWidget {
return Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 2),
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 2),
child: Row(
children: [
Flexible(

59
lib/ui/components/divider_widget.dart Normal file
View file

@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
import 'package:photos/theme/ente_theme.dart';
enum DividerType {
solid,
menu,
menuNoIcon,
bottomBar,
}
class DividerWidget extends StatelessWidget {
final DividerType dividerType;
final Color bgColor;
const DividerWidget({
required this.dividerType,
this.bgColor = Colors.transparent,
super.key,
});
@override
Widget build(BuildContext context) {
final dividerColor = getEnteColorScheme(context).blurStrokeFaint;
if (dividerType == DividerType.solid) {
return Container(
color: getEnteColorScheme(context).strokeFaint,
width: double.infinity,
height: 1,
);
}
if (dividerType == DividerType.bottomBar) {
return Container(
color: dividerColor,
width: double.infinity,
height: 1,
);
}
return Row(
children: [
Container(
color: bgColor,
width: dividerType == DividerType.menu
? 48
: dividerType == DividerType.menuNoIcon
? 16
: 0,
height: 1,
),
Expanded(
child: Container(
color: dividerColor,
height: 1,
width: double.infinity,
),
),
],
);
}
}

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

@ -44,32 +44,38 @@ class _ExpandableMenuItemWidgetState extends State<ExpandableMenuItemWidget> {
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 ? backgroundColor : null,
borderRadius: BorderRadius.circular(4),
),
child: ExpandableNotifier(
controller: expandableController,
child: ScrollOnExpand(
child: ExpandablePanel(
header: MenuItemWidget(
captionedTextWidget: CaptionedTextWidget(
title: widget.title,
makeTextBold: true,
return Padding(
padding: EdgeInsets.only(bottom: expandableController.value ? 8 : 0),
child: AnimatedContainer(
curve: Curves.ease,
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(
color: expandableController.value ? backgroundColor : null,
borderRadius: BorderRadius.circular(4),
),
child: ExpandableNotifier(
controller: expandableController,
child: ScrollOnExpand(
child: ExpandablePanel(
header: MenuItemWidget(
captionedTextWidget: CaptionedTextWidget(
title: widget.title,
makeTextBold: true,
),
isExpandable: true,
leadingIcon: widget.leadingIcon,
trailingIcon: Icons.expand_more,
menuItemColor: enteColorScheme.fillFaint,
expandableController: expandableController,
),
isExpandable: true,
leadingIcon: widget.leadingIcon,
trailingIcon: Icons.expand_more,
menuItemColor: enteColorScheme.fillFaint,
expandableController: expandableController,
collapsed: const SizedBox.shrink(),
expanded: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: widget.selectionOptionsWidget,
),
theme: getExpandableTheme(context),
controller: expandableController,
),
collapsed: const SizedBox.shrink(),
expanded: widget.selectionOptionsWidget,
theme: getExpandableTheme(context),
controller: expandableController,
),
),
),

40
lib/ui/components/home_header_widget.dart
View file

@ -1,5 +1,3 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:photos/core/event_bus.dart';
import 'package:photos/events/opened_settings_event.dart';
@ -18,27 +16,23 @@ class HomeHeaderWidget extends StatefulWidget {
class _HomeHeaderWidgetState extends State<HomeHeaderWidget> {
@override
Widget build(BuildContext context) {
final hasNotch = window.viewPadding.top > 65;
return Padding(
padding: EdgeInsets.fromLTRB(4, hasNotch ? 4 : 8, 4, 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButtonWidget(
isPrimary: true,
icon: Icons.menu_outlined,
onTap: () {
Scaffold.of(context).openDrawer();
Bus.instance.fire(OpenedSettingsEvent());
},
),
AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: widget.centerWidget,
),
const SearchIconWidget(),
],
),
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButtonWidget(
isPrimary: true,
icon: Icons.menu_outlined,
onTap: () {
Scaffold.of(context).openDrawer();
Bus.instance.fire(OpenedSettingsEvent());
},
),
AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: widget.centerWidget,
),
const SearchIconWidget(),
],
);
}
}

31
lib/ui/components/icon_button_widget.dart
View file

@ -60,20 +60,23 @@ class _IconButtonWidgetState extends State<IconButtonWidget> {
}
Widget _iconButton(EnteColorScheme colorTheme) {
return AnimatedContainer(
duration: const Duration(milliseconds: 20),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: iconStateColor,
),
child: Icon(
widget.icon,
color: widget.iconColor ??
(widget.isSecondary
? colorTheme.strokeMuted
: colorTheme.strokeBase),
size: 24,
return Padding(
padding: const EdgeInsets.all(4.0),
child: AnimatedContainer(
duration: const Duration(milliseconds: 20),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: iconStateColor,
),
child: Icon(
widget.icon,
color: widget.iconColor ??
(widget.isSecondary
? colorTheme.strokeMuted
: colorTheme.strokeBase),
size: 24,
),
),
);
}

13
lib/ui/components/menu_item_widget.dart
View file

@ -5,10 +5,14 @@ import 'package:photos/ente_theme_data.dart';
class MenuItemWidget extends StatefulWidget {
final Widget captionedTextWidget;
final bool isExpandable;
// leading icon can be passed without specifing size of icon, this component sets size to 20x20 irrespective of passed icon's size
/// leading icon can be passed without specifing size of icon,
/// this component sets size to 20x20 irrespective of passed icon's size
final IconData? leadingIcon;
final Color? leadingIconColor;
// trailing icon can be passed without size as default size set by flutter is what this component expects
/// trailing icon can be passed without size as default size set by
/// flutter is what this component expects
final IconData? trailingIcon;
final Widget? trailingSwitch;
final bool trailingIconIsMuted;
@ -21,7 +25,8 @@ class MenuItemWidget extends StatefulWidget {
final ExpandableController? expandableController;
final bool isBottomBorderRadiusRemoved;
final bool isTopBorderRadiusRemoved;
//disable gesture detector if not used
/// disable gesture detector if not used
final bool isGestureDetectorDisabled;
const MenuItemWidget({
required this.captionedTextWidget,
@ -103,7 +108,7 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
return AnimatedContainer(
duration: const Duration(milliseconds: 20),
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 12),
padding: const EdgeInsets.only(left: 16, right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: topBorderRadius,

2
lib/ui/components/notification_warning_widget.dart
View file

@ -34,7 +34,7 @@ class NotificationWarningWidget extends StatelessWidget {
color: warning500,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [

17
lib/ui/components/title_bar_widget.dart
View file

@ -59,7 +59,7 @@ class TitleBarWidget extends StatelessWidget {
),
actions: [
Padding(
padding: const EdgeInsets.fromLTRB(4, 4, 12, 4),
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Row(
children: _actionsWithPaddingInBetween(),
),
@ -67,15 +67,12 @@ class TitleBarWidget extends StatelessWidget {
],
leading: isTitleH2WithoutLeading
? null
: Padding(
padding: const EdgeInsets.all(4),
child: IconButtonWidget(
icon: Icons.arrow_back_outlined,
isPrimary: true,
onTap: () {
Navigator.pop(context);
},
),
: IconButtonWidget(
icon: Icons.arrow_back_outlined,
isPrimary: true,
onTap: () {
Navigator.pop(context);
},
),
flexibleSpace: isFlexibleSpaceDisabled
? null

2
lib/ui/components/toggle_switch_widget.dart
View file

@ -52,7 +52,7 @@ class _ToggleSwitchWidgetState extends State<ToggleSwitchWidget> {
),
),
SizedBox(
height: 32,
height: 31,
child: FittedBox(
fit: BoxFit.contain,
child: Switch.adaptive(

9
lib/ui/viewer/search/search_widget.dart
View file

@ -8,6 +8,7 @@ import 'package:photos/ente_theme_data.dart';
import 'package:photos/models/search/search_result.dart';
import 'package:photos/services/feature_flag_service.dart';
import 'package:photos/services/search_service.dart';
import 'package:photos/ui/components/icon_button_widget.dart';
import 'package:photos/ui/viewer/search/result/no_result_widget.dart';
import 'package:photos/ui/viewer/search/search_suffix_icon_widget.dart';
import 'package:photos/ui/viewer/search/search_suggestions.dart';
@ -32,9 +33,10 @@ class _SearchIconWidgetState extends State<SearchIconWidget> {
Widget build(BuildContext context) {
return Hero(
tag: "search_icon",
child: IconButton(
visualDensity: const VisualDensity(horizontal: -2, vertical: -2),
onPressed: () {
child: IconButtonWidget(
isPrimary: true,
icon: Icons.search,
onTap: () {
Navigator.push(
context,
TransparentRoute(
@ -42,7 +44,6 @@ class _SearchIconWidgetState extends State<SearchIconWidget> {
),
);
},
icon: const Icon(Icons.search),
),
);
}