Merge pull request #584 from ente-io/main_gallery_refactor

Refactor SectionTitle & added brand textStyle instead of widget

ios/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
-  - background_fetch (1.1.1):
+  - background_fetch (1.1.0):
     - Flutter
   - connectivity (0.0.1):
     - Flutter
@@ -309,7 +309,7 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/wakelock/ios"
 
 SPEC CHECKSUMS:
-  background_fetch: ef7bc433c96131e4f284d8616d2e0d4e18fa6af4
+  background_fetch: 3795af8a49054dc526477cc2f60d2ed41de60587
   connectivity: c4130b2985d4ef6fd26f9702e886bd5260681467
   device_info: d7d233b645a32c40dfdc212de5cf646ca482f175
   Firebase: 800f16f07af493d98d017446a315c27af0552f41
@@ -321,7 +321,7 @@ SPEC CHECKSUMS:
   FirebaseInstallations: 0a115432c4e223c5ab20b0dbbe4cbefa793a0e8e
   FirebaseMessaging: 732623518591384f61c287e3d8f65294beb7ffb3
   fk_user_agent: 1f47ec39291e8372b1d692b50084b0d54103c545
-  Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
+  Flutter: 50d75fe2f02b26cc09d224853bb45737f8b3214a
   flutter_email_sender: 02d7443217d8c41483223627972bfdc09f74276b
   flutter_image_compress: 5a5e9aee05b6553048b8df1c3bc456d0afaac433
   flutter_inappwebview: bfd58618f49dc62f2676de690fc6dcda1d6c3721

lib/theme/text_style.dart

@@ -5,6 +5,22 @@ const FontWeight _regularWeight = FontWeight.w500;
 const FontWeight _boldWeight = FontWeight.w600;
 const String _fontFamily = 'Inter';
 
+const TextStyle brandStyleSmall = TextStyle(
+  fontWeight: FontWeight.bold,
+  fontFamily: 'Montserrat',
+  fontSize: 21,
+);
+
+const TextStyle brandStyleMedium = TextStyle(
+  fontWeight: FontWeight.bold,
+  fontFamily: 'Montserrat',
+  fontSize: 24,
+);
+const TextStyle brandStyleLarge = TextStyle(
+  fontWeight: FontWeight.bold,
+  fontFamily: 'Montserrat',
+  fontSize: 28,
+);
 const TextStyle h1 = TextStyle(
   fontSize: 48,
   height: 48 / 28,

lib/ui/collections/ente_section_title.dart

@@ -1,49 +0,0 @@
-// @dart=2.9
-
-import 'package:flutter/material.dart';
-import 'package:photos/ente_theme_data.dart';
-
-class EnteSectionTitle extends StatelessWidget {
-  final double opacity;
-
-  const EnteSectionTitle({
-    this.opacity = 0.8,
-    Key key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.fromLTRB(16, 12, 0, 0),
-      child: Column(
-        children: [
-          Align(
-            alignment: Alignment.centerLeft,
-            child: RichText(
-              text: TextSpan(
-                children: [
-                  TextSpan(
-                    text: "On ",
-                    style: Theme.of(context)
-                        .textTheme
-                        .headline6
-                        .copyWith(fontSize: 22),
-                  ),
-                  TextSpan(
-                    text: "ente",
-                    style: TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontFamily: 'Montserrat',
-                      fontSize: 22,
-                      color: Theme.of(context).colorScheme.defaultTextColor,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/ui/collections/section_title.dart

@@ -1,35 +1,57 @@
-// @dart=2.9
-
 import 'package:flutter/material.dart';
+import 'package:photos/theme/ente_theme.dart';
+import 'package:photos/theme/text_style.dart';
 
 class SectionTitle extends StatelessWidget {
-  final String title;
-  final Alignment alignment;
-  final double opacity;
+  final String? title;
+  final RichText? titleWithBrand;
 
-  const SectionTitle(
-    this.title, {
-    this.opacity = 0.8,
-    Key key,
-    this.alignment = Alignment.centerLeft,
+  const SectionTitle({
+    this.title,
+    this.titleWithBrand,
+    Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final enteTextTheme = getEnteTextTheme(context);
+    Widget child;
+    if (titleWithBrand != null) {
+      child = titleWithBrand!;
+    } else if (title != null) {
+      child = Text(
+        title!,
+        style: enteTextTheme.largeBold,
+      );
+    } else {
+      child = const SizedBox.shrink();
+    }
     return Container(
       margin: const EdgeInsets.fromLTRB(16, 12, 0, 0),
       child: Column(
         children: [
           Align(
-            alignment: alignment,
-            child: Text(
-              title,
-              style:
-                  Theme.of(context).textTheme.headline6.copyWith(fontSize: 22),
-            ),
+            alignment: Alignment.centerLeft,
+            child: child,
           ),
         ],
       ),
     );
   }
 }
+
+RichText onEnteSection = RichText(
+  text: const TextSpan(
+    children: [
+      TextSpan(
+        text: "On ",
+        style: TextStyle(
+          fontWeight: FontWeight.w600,
+          fontFamily: 'Inter',
+          fontSize: 21,
+        ),
+      ),
+      TextSpan(text: "ente", style: brandStyleSmall),
+    ],
+  ),
+);

lib/ui/collections_gallery_widget.dart

@@ -14,7 +14,6 @@ import 'package:photos/models/collection.dart';
 import 'package:photos/models/collection_items.dart';
 import 'package:photos/services/collections_service.dart';
 import 'package:photos/ui/collections/device_folders_grid_view_widget.dart';
-import 'package:photos/ui/collections/ente_section_title.dart';
 import 'package:photos/ui/collections/hidden_collections_button_widget.dart';
 import 'package:photos/ui/collections/remote_collections_grid_view_widget.dart';
 import 'package:photos/ui/collections/section_title.dart';
@@ -132,7 +131,7 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
         child: Column(
           children: [
             const SizedBox(height: 12),
-            const SectionTitle("On device"),
+            const SectionTitle(title: "On device"),
             const SizedBox(height: 12),
             const DeviceFoldersGridViewWidget(),
             const Padding(padding: EdgeInsets.all(4)),
@@ -141,7 +140,7 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                const EnteSectionTitle(),
+                SectionTitle(titleWithBrand: onEnteSection),
                 _sortMenu(),
               ],
             ),

lib/ui/components/brand_title_widget.dart

@@ -1,34 +0,0 @@
-import 'package:flutter/material.dart';
-
-enum SizeVarient { small, medium, large }
-
-extension ExtraSizeVarient on SizeVarient {
-  double size() {
-    if (this == SizeVarient.small) {
-      return 21;
-    } else if (this == SizeVarient.medium) {
-      return 24;
-    } else if (this == SizeVarient.large) {
-      return 28;
-    }
-    return -1;
-  }
-}
-
-class BrandTitleWidget extends StatelessWidget {
-  final SizeVarient size;
-
-  const BrandTitleWidget({required this.size, Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Text(
-      "ente",
-      style: TextStyle(
-        fontWeight: FontWeight.bold,
-        fontFamily: 'Montserrat',
-        fontSize: size.size(),
-      ),
-    );
-  }
-}

lib/ui/shared_collections_gallery.dart

@@ -126,7 +126,7 @@ class _SharedCollectionGalleryState extends State<SharedCollectionGallery>
         child: Column(
           children: [
             const SizedBox(height: 12),
-            const SectionTitle("Shared with me"),
+            const SectionTitle(title: "Shared with me"),
             const SizedBox(height: 12),
             collections.incoming.isNotEmpty
                 ? Padding(
@@ -150,7 +150,7 @@ class _SharedCollectionGalleryState extends State<SharedCollectionGallery>
                     ),
                   )
                 : _getIncomingCollectionEmptyState(),
-            const SectionTitle("Shared by me"),
+            const SectionTitle(title: "Shared by me"),
             const SizedBox(height: 12),
             collections.outgoing.isNotEmpty
                 ? ListView.builder(

lib/ui/status_bar_widget.dart

@@ -9,8 +9,8 @@ import 'package:photos/events/notification_event.dart';
 import 'package:photos/events/sync_status_update_event.dart';
 import 'package:photos/services/sync_service.dart';
 import 'package:photos/services/user_remote_flag_service.dart';
+import 'package:photos/theme/text_style.dart';
 import 'package:photos/ui/account/verify_recovery_page.dart';
-import 'package:photos/ui/components/brand_title_widget.dart';
 import 'package:photos/ui/components/home_header_widget.dart';
 import 'package:photos/ui/components/notification_warning_widget.dart';
 import 'package:photos/ui/header_error_widget.dart';
@@ -84,9 +84,9 @@ class _StatusBarWidgetState extends State<StatusBarWidget> {
         HomeHeaderWidget(
           centerWidget: _showStatus
               ? _showErrorBanner
-                  ? const BrandTitleWidget(size: SizeVarient.medium)
+                  ? const Text("ente", style: brandStyleMedium)
                   : const SyncStatusWidget()
-              : const BrandTitleWidget(size: SizeVarient.medium),
+              : const Text("ente", style: brandStyleMedium),
         ),
         AnimatedOpacity(
           opacity: _showErrorBanner ? 1 : 0,

pubspec.lock

@@ -42,7 +42,7 @@ packages:
       name: background_fetch
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.1"
+    version: "1.1.0"
   bip39:
     dependency: "direct main"
     description:
@@ -411,7 +411,7 @@ packages:
       name: flutter_inappwebview
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.5.0+2"
+    version: "5.4.3+7"
   flutter_keyboard_visibility:
     dependency: transitive
     description: