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

New layout changes

lib/theme/colors.dart

@@ -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);

lib/ui/backup_settings_screen.dart

@@ -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",

lib/ui/components/captioned_text_widget.dart

@@ -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(

lib/ui/components/divider_widget.dart

@@ -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,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/ui/components/expandable_menu_item_widget.dart

@@ -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,
+              ),
+              collapsed: const SizedBox.shrink(),
+              expanded: Padding(
+                padding: const EdgeInsets.only(bottom: 4),
+                child: widget.selectionOptionsWidget,
               ),
-              isExpandable: true,
-              leadingIcon: widget.leadingIcon,
-              trailingIcon: Icons.expand_more,
-              menuItemColor: enteColorScheme.fillFaint,
-              expandableController: expandableController,
+              theme: getExpandableTheme(context),
+              controller: expandableController,
             ),
-            collapsed: const SizedBox.shrink(),
-            expanded: widget.selectionOptionsWidget,
-            theme: getExpandableTheme(context),
-            controller: expandableController,
           ),
         ),
       ),

lib/ui/components/home_header_widget.dart

@@ -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(),
+      ],
     );
   }
 }

lib/ui/components/icon_button_widget.dart

@@ -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,
+        ),
       ),
     );
   }

lib/ui/components/menu_item_widget.dart

@@ -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,

lib/ui/components/notification_warning_widget.dart

@@ -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: [

lib/ui/components/title_bar_widget.dart

@@ -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

lib/ui/components/toggle_switch_widget.dart

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

lib/ui/viewer/search/search_widget.dart

@@ -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),
       ),
     );
   }