fix: yaru chips

ubuntu-flutter-community · Nov 1, 2024 · 6c7f71a · 6c7f71a
1 parent b9cb02d
commit 6c7f71a
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 87 deletions.
diff --git a/lib/common/view/theme.dart b/lib/common/view/theme.dart
@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
 import '../../constants.dart';
-import '../../extensions/theme_data_x.dart';
 import 'icons.dart';
 
 ThemeData? yaruDarkWithTweaks(YaruThemeData yaru) {
@@ -202,21 +201,21 @@ InputDecoration createYaruDecoration({
   );
 }
 
-Color? chipColor(ThemeData theme) {
+Color? chipColor(ColorScheme colorScheme) {
   return yaruStyled
-      ? theme.colorScheme.outline.withOpacity(theme.isLight ? 1 : 0.4)
+      ? colorScheme.surface.scale(lightness: colorScheme.isDark ? 0.03 : -0.1)
       : null;
 }
 
-Color? chipBorder(ThemeData theme, bool loading) {
+Color? chipBorder(bool loading) {
   return yaruStyled ? (loading ? null : Colors.transparent) : null;
 }
 
-TextStyle chipTextStyle(ThemeData theme) =>
-    TextStyle(color: theme.colorScheme.onSurface);
+TextStyle chipTextStyle(ColorScheme colorScheme) =>
+    TextStyle(color: colorScheme.onSurface);
 
-Color? chipSelectionColor(ThemeData theme, bool loading) {
-  return yaruStyled ? (loading ? theme.colorScheme.outline : null) : null;
+Color? chipSelectionColor(ColorScheme colorScheme, bool loading) {
+  return yaruStyled ? (loading ? colorScheme.outline : null) : null;
 }
 
 double get iconSize => yaruStyled

diff --git a/lib/local_audio/view/local_audio_control_panel.dart b/lib/local_audio/view/local_audio_control_panel.dart
@@ -13,36 +13,32 @@ class LocalAudioControlPanel extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.theme;
+    final colorScheme = context.colorScheme;
     final index = watchPropertyValue((LocalAudioModel m) => m.localAudioindex);
 
     return Align(
       alignment: Alignment.center,
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          child: YaruChoiceChipBar(
-            chipBackgroundColor: chipColor(theme),
-            selectedChipBackgroundColor: chipSelectionColor(theme, false),
-            borderColor: chipBorder(theme, false),
-            yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.wrap,
-            selectedFirst: false,
-            clearOnSelect: false,
-            labels: LocalAudioView.values
-                .map(
-                  (e) => Text(
-                    e.localize(context.l10n),
-                    style: chipTextStyle(theme),
-                  ),
-                )
-                .toList(),
-            isSelected: LocalAudioView.values
-                .map((e) => e == LocalAudioView.values[index])
-                .toList(),
-            onSelected: (index) =>
-                di<LocalAudioModel>().localAudioindex = index,
-          ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20),
+        child: YaruChoiceChipBar(
+          yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.stack,
+          chipBackgroundColor: chipColor(colorScheme),
+          selectedChipBackgroundColor: chipSelectionColor(colorScheme, false),
+          borderColor: chipBorder(false),
+          selectedFirst: false,
+          clearOnSelect: false,
+          labels: LocalAudioView.values
+              .map(
+                (e) => Text(
+                  e.localize(context.l10n),
+                  style: chipTextStyle(colorScheme),
+                ),
+              )
+              .toList(),
+          isSelected: LocalAudioView.values
+              .map((e) => e == LocalAudioView.values[index])
+              .toList(),
+          onSelected: (index) => di<LocalAudioModel>().localAudioindex = index,
         ),
       ),
     );

diff --git a/lib/podcasts/view/podcast_collection_control_panel.dart b/lib/podcasts/view/podcast_collection_control_panel.dart
@@ -14,7 +14,7 @@ class PodcastCollectionControlPanel extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.theme;
+    final colorScheme = context.colorScheme;
     final model = di<PodcastModel>();
 
     final isOnline = watchPropertyValue((ConnectivityModel m) => m.isOnline);
@@ -27,20 +27,20 @@ class PodcastCollectionControlPanel extends StatelessWidget with WatchItMixin {
         watchPropertyValue((PodcastModel m) => m.downloadsOnly);
 
     return YaruChoiceChipBar(
-      chipBackgroundColor: chipColor(theme),
-      selectedChipBackgroundColor: chipSelectionColor(theme, loading),
-      borderColor: chipBorder(theme, loading),
+      chipBackgroundColor: chipColor(colorScheme),
+      selectedChipBackgroundColor: chipSelectionColor(colorScheme, loading),
+      borderColor: chipBorder(loading),
       yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.wrap,
       clearOnSelect: false,
       selectedFirst: false,
       labels: [
         Text(
           context.l10n.newEpisodes,
-          style: chipTextStyle(theme),
+          style: chipTextStyle(colorScheme),
         ),
         Text(
           context.l10n.downloadsOnly,
-          style: chipTextStyle(theme),
+          style: chipTextStyle(colorScheme),
         ),
       ],
       isSelected: [

diff --git a/lib/radio/view/radio_lib_page.dart b/lib/radio/view/radio_lib_page.dart
@@ -29,7 +29,7 @@ class RadioLibPage extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.theme;
+    final colorScheme = context.colorScheme;
     final radioCollectionView =
         watchPropertyValue((RadioModel m) => m.radioCollectionView);
     final radioModel = di<RadioModel>();
@@ -44,9 +44,10 @@ class RadioLibPage extends StatelessWidget with WatchItMixin {
             margin: filterPanelPadding,
             height: context.theme.appBarTheme.toolbarHeight,
             child: YaruChoiceChipBar(
-              chipBackgroundColor: chipColor(theme),
-              selectedChipBackgroundColor: chipSelectionColor(theme, false),
-              borderColor: chipBorder(theme, false),
+              chipBackgroundColor: chipColor(colorScheme),
+              selectedChipBackgroundColor:
+                  chipSelectionColor(colorScheme, false),
+              borderColor: chipBorder(false),
               selectedFirst: false,
               clearOnSelect: false,
               onSelected: (index) => radioModel
@@ -55,15 +56,15 @@ class RadioLibPage extends StatelessWidget with WatchItMixin {
               labels: [
                 Text(
                   context.l10n.station,
-                  style: chipTextStyle(theme),
+                  style: chipTextStyle(colorScheme),
                 ),
                 Text(
                   context.l10n.tags,
-                  style: chipTextStyle(theme),
+                  style: chipTextStyle(colorScheme),
                 ),
                 Text(
                   context.l10n.hearingHistory,
-                  style: chipTextStyle(theme),
+                  style: chipTextStyle(colorScheme),
                 ),
               ],
               isSelected: RadioCollectionView.values

diff --git a/lib/search/view/podcast_search_input_prefix.dart b/lib/search/view/podcast_search_input_prefix.dart
@@ -6,7 +6,6 @@ import '../../common/view/country_auto_complete.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/language_autocomplete.dart';
 import '../../common/view/theme.dart';
-import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
 import '../../settings/settings_model.dart';
@@ -57,7 +56,6 @@ class LocationFilter extends StatelessWidget with WatchItMixin {
   @override
   Widget build(BuildContext context) {
     final libraryModel = di<LibraryModel>();
-    final theme = context.theme;
     final searchModel = di<SearchModel>();
     watchPropertyValue((LibraryModel m) => m.favLanguagesLength);
     watchPropertyValue((LibraryModel m) => m.favCountriesLength);
@@ -79,36 +77,14 @@ class LocationFilter extends StatelessWidget with WatchItMixin {
 
     final language = watchPropertyValue((SearchModel m) => m.language);
 
-    final fillColor = theme.chipTheme.selectedColor;
-
-    const width = 150.0;
+    const width = 250.0;
     final height = chipHeight;
-    var outlineInputBorder = OutlineInputBorder(
-      borderRadius: BorderRadius.circular(100),
-      borderSide: yaruStyled
-          ? BorderSide.none
-          : BorderSide(
-              color: theme.colorScheme.outline,
-              width: 1.3,
-              strokeAlign: 1,
-            ),
-    );
-    final style = theme.textTheme.bodyMedium?.copyWith(
-      fontWeight: FontWeight.w500,
-    );
 
     return usePodcastIndex
         ? LanguageAutoComplete(
             autofocus: true,
             contentPadding: countryPillPadding,
-            fillColor: language != null
-                ? fillColor
-                : yaruStyled
-                    ? theme.dividerColor
-                    : null,
             filled: language != null,
-            border: outlineInputBorder,
-            style: style,
             isDense: true,
             width: width,
             height: height,
@@ -134,10 +110,7 @@ class LocationFilter extends StatelessWidget with WatchItMixin {
         : CountryAutoComplete(
             autofocus: true,
             contentPadding: countryPillPadding,
-            fillColor: fillColor,
             filled: true,
-            border: outlineInputBorder,
-            style: style,
             isDense: true,
             width: width,
             height: height,

diff --git a/lib/search/view/sliver_podcast_filter_bar.dart b/lib/search/view/sliver_podcast_filter_bar.dart
@@ -3,6 +3,8 @@ import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
 
 import '../../common/data/podcast_genre.dart';
+import '../../common/view/theme.dart';
+import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../settings/settings_model.dart';
 import '../search_model.dart';
@@ -12,6 +14,7 @@ class SliverPodcastFilterBar extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
+    final colorScheme = context.colorScheme;
     final searchModel = di<SearchModel>();
 
     final podcastGenre = watchPropertyValue((SearchModel m) => m.podcastGenre);
@@ -26,8 +29,16 @@ class SliverPodcastFilterBar extends StatelessWidget with WatchItMixin {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 5),
       child: YaruChoiceChipBar(
+        chipBackgroundColor: chipColor(colorScheme),
+        selectedChipBackgroundColor: chipSelectionColor(colorScheme, false),
+        borderColor: chipBorder(false),
         yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.stack,
-        labels: genres.map((e) => Text(e.localize(context.l10n))).toList(),
+        labels: genres
+            .map((e) => Text(
+                  e.localize(context.l10n),
+                  style: chipTextStyle(colorScheme),
+                ))
+            .toList(),
         isSelected: genres.map((e) => e == podcastGenre).toList(),
         onSelected: (i) {
           searchModel.setSearchQuery(null);

diff --git a/lib/search/view/sliver_search_type_filter_bar.dart b/lib/search/view/sliver_search_type_filter_bar.dart
@@ -14,7 +14,7 @@ class SearchTypeFilterBar extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.theme;
+    final colorScheme = context.colorScheme;
     final searchModel = di<SearchModel>();
     final searchType = watchPropertyValue((SearchModel m) => m.searchType);
     final searchTypes = watchPropertyValue((SearchModel m) => m.searchTypes);
@@ -26,10 +26,9 @@ class SearchTypeFilterBar extends StatelessWidget with WatchItMixin {
       padding: const EdgeInsets.symmetric(horizontal: 5),
       child: YaruChoiceChipBar(
         yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.stack,
-        chipBackgroundColor: chipColor(theme),
-        selectedChipBackgroundColor: chipSelectionColor(theme, false),
-        borderColor: chipBorder(theme, false),
-        chipHeight: chipHeight,
+        chipBackgroundColor: chipColor(colorScheme),
+        selectedChipBackgroundColor: chipSelectionColor(colorScheme, false),
+        borderColor: chipBorder(false),
         clearOnSelect: false,
         selectedFirst: false,
         onSelected: (i) {
@@ -45,7 +44,7 @@ class SearchTypeFilterBar extends StatelessWidget with WatchItMixin {
                   localSearchResult: localSearchResult,
                   searchQuery: searchQuery,
                 ),
-                style: chipTextStyle(theme),
+                style: chipTextStyle(colorScheme),
               ),
             )
             .toList(),

diff --git a/needs_translation.json b/needs_translation.json
@@ -865,11 +865,6 @@
     "regionZimbabwe"
   ],
 
-  "it": [
-    "useMoreAnimationsTitle",
-    "useMoreAnimationsDescription"
-  ],
-
   "nl": [
     "shuffle",
     "repeat",