[Presentation] The accent color grid is now a simple dropdown

Wolfteam · Nov 13, 2022 · d49f62b · d49f62b
1 parent 73715bc
commit d49f62b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 61 deletions.
diff --git a/lib/domain/extensions/string_extensions.dart b/lib/domain/extensions/string_extensions.dart
@@ -1,5 +1,6 @@
 extension StringExtensions on String? {
   bool get isNullEmptyOrWhitespace => this == null || this!.isEmpty;
+
   bool get isNotNullEmptyOrWhitespace => !isNullEmptyOrWhitespace;
 
   bool isValidLength({int minLength = 0, int maxLength = 255}) => isNotNullEmptyOrWhitespace || this!.length > maxLength || this!.length < minLength;
@@ -21,4 +22,10 @@ extension StringExtensions on String? {
     final newValue = this!.substring(0, take);
     return '$newValue...';
   }
+
+  String toCapitalized() => this == null
+      ? ''
+      : this!.isNotEmpty
+          ? '${this![0].toUpperCase()}${this!.substring(1).toLowerCase()}'
+          : '';
 }
diff --git a/lib/presentation/settings/widgets/accent_color_settings_card.dart b/lib/presentation/settings/widgets/accent_color_settings_card.dart
@@ -1,22 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:responsive_builder/responsive_builder.dart';
-import 'package:responsive_grid/responsive_grid.dart';
 import 'package:shiori/application/bloc.dart';
 import 'package:shiori/domain/enums/enums.dart';
+import 'package:shiori/domain/extensions/string_extensions.dart';
 import 'package:shiori/generated/l10n.dart';
 import 'package:shiori/presentation/settings/widgets/settings_card.dart';
+import 'package:shiori/presentation/shared/common_dropdown_button.dart';
 import 'package:shiori/presentation/shared/extensions/app_theme_type_extensions.dart';
 import 'package:shiori/presentation/shared/loading.dart';
 import 'package:shiori/presentation/shared/styles.dart';
+import 'package:shiori/presentation/shared/utils/enum_utils.dart';
 
 class AccentColorSettingsCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final s = S.of(context);
-    final mq = MediaQuery.of(context);
-    final deviceType = getDeviceType(mq.size);
-    final isLandscape = mq.orientation == Orientation.landscape;
     return SettingsCard(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -43,12 +41,23 @@ class AccentColorSettingsCard extends StatelessWidget {
           BlocBuilder<SettingsBloc, SettingsState>(
             builder: (context, state) => state.map(
               loading: (_) => const Loading(useScaffold: false),
-              loaded: (s) => ResponsiveGridRow(
-                children: AppAccentColorType.values
-                    .map(
-                      (accentColor) => _buildAccentColorItem(accentColor, s.currentAccentColor, deviceType, isLandscape, context),
-                    )
-                    .toList(),
+              loaded: (state) => Padding(
+                padding: Styles.edgeInsetHorizontal16,
+                child: CommonDropdownButton<AppAccentColorType>(
+                  hint: s.chooseAccentColor,
+                  currentValue: state.currentAccentColor,
+                  values: EnumUtils.getTranslatedAndSortedEnum<AppAccentColorType>(AppAccentColorType.values, (val, _) => _getAccentColorName(val)),
+                  leadingIconBuilder: (val) => Container(
+                    margin: const EdgeInsets.only(right: 10),
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(10),
+                      color: val.getAccentColor(),
+                    ),
+                    width: 20,
+                    height: 20,
+                  ),
+                  onChanged: _accentColorChanged,
+                ),
               ),
             ),
           ),
@@ -61,54 +70,9 @@ class AccentColorSettingsCard extends StatelessWidget {
     context.read<SettingsBloc>().add(SettingsEvent.accentColorChanged(newValue: newValue));
   }
 
-  ResponsiveGridCol _buildAccentColorItem(
-    AppAccentColorType current,
-    AppAccentColorType selected,
-    DeviceScreenType deviceType,
-    bool isLandscape,
-    BuildContext context,
-  ) {
-    var xs = 2;
-    var sm = 2;
-    var md = 2;
-    var lg = 2;
-    var xl = 2;
-    switch (deviceType) {
-      case DeviceScreenType.tablet:
-      case DeviceScreenType.desktop:
-        xs = 3;
-        sm = 3;
-        md = 3;
-        lg = 3;
-        xl = 2;
-        break;
-      default:
-        if (isLandscape) {
-          xs = 4;
-          sm = 3;
-          md = 3;
-          lg = 3;
-          xl = 3;
-        }
-        break;
-    }
-    return ResponsiveGridCol(
-      xs: xs,
-      sm: sm,
-      md: md,
-      lg: lg,
-      xl: xl,
-      child: InkWell(
-        onTap: () => _accentColorChanged(current, context),
-        child: Container(
-          width: 50,
-          height: 50,
-          padding: Styles.edgeInsetAll10,
-          margin: Styles.edgeInsetAll5,
-          color: current.getAccentColor(),
-          child: selected == current ? const Icon(Icons.check, color: Colors.white) : null,
-        ),
-      ),
-    );
+  String _getAccentColorName(AppAccentColorType color) {
+    final name = color.name;
+    final words = name.split(RegExp('(?<=[a-z])(?=[A-Z])'));
+    return words.map((e) => e.toCapitalized()).join(' ');
   }
 }
diff --git a/lib/presentation/shared/common_dropdown_button.dart b/lib/presentation/shared/common_dropdown_button.dart
@@ -8,6 +8,7 @@ class CommonDropdownButton<T> extends StatelessWidget {
   final Function(T, BuildContext)? onChanged;
   final bool isExpanded;
   final bool withoutUnderLine;
+  final Widget Function(T)? leadingIconBuilder;
 
   const CommonDropdownButton({
     super.key,
@@ -17,6 +18,7 @@ class CommonDropdownButton<T> extends StatelessWidget {
     this.onChanged,
     this.isExpanded = true,
     this.withoutUnderLine = true,
+    this.leadingIconBuilder,
   });
 
   @override
@@ -49,8 +51,9 @@ class CommonDropdownButton<T> extends StatelessWidget {
                 children: [
                   Container(
                     margin: const EdgeInsets.symmetric(horizontal: 20),
-                    child: lang.enumValue != currentValue ? const SizedBox(width: 20) : const Center(child: Icon(Icons.check)),
+                    child: lang.enumValue != currentValue ? const SizedBox(width: 20) : const Center(child: Icon(Icons.check, size: 20)),
                   ),
+                  if (leadingIconBuilder != null) leadingIconBuilder!.call(lang.enumValue),
                   Expanded(
                     child: Text(
                       lang.translation,