fix: mobile search input padding, pin albums in view (#1043)

ubuntu-flutter-community · Nov 23, 2024 · 699eb9b · 699eb9b
1 parent b050101
commit 699eb9b
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 368 deletions.
diff --git a/lib/common/view/audio_autocomplete.dart b/lib/common/view/audio_autocomplete.dart
@@ -3,7 +3,6 @@ import 'package:flutter/scheduler.dart';
 import 'package:yaru/constants.dart';
 
 import '../../app_config.dart';
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/theme_data_x.dart';
 import '../../l10n/l10n.dart';
@@ -84,7 +83,7 @@ class AudioAutoComplete extends StatelessWidget {
               return Align(
                 alignment: Alignment.topLeft,
                 child: SizedBox(
-                  width: kSearchBarWidth,
+                  width: searchBarWidth,
                   height:
                       (options.length * 50) > 400 ? 400 : options.length * 50,
                   child: ClipRRect(

diff --git a/lib/common/view/country_auto_complete.dart b/lib/common/view/country_auto_complete.dart
@@ -3,7 +3,6 @@ import 'package:flutter/scheduler.dart';
 import 'package:podcast_search/podcast_search.dart';
 
 import '../../app_config.dart';
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/country_x.dart';
 import '../../l10n/l10n.dart';
@@ -117,7 +116,7 @@ class CountryAutoComplete extends StatelessWidget {
               return Align(
                 alignment: Alignment.topLeft,
                 child: SizedBox(
-                  width: width ?? kSearchBarWidth,
+                  width: width ?? searchBarWidth,
                   height:
                       (options.length * 50) > 400 ? 400 : options.length * 50,
                   child: ClipRRect(

diff --git a/lib/common/view/language_autocomplete.dart b/lib/common/view/language_autocomplete.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 
 import '../../app_config.dart';
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/string_x.dart';
 import '../../l10n/l10n.dart';
@@ -115,7 +114,7 @@ class LanguageAutoComplete extends StatelessWidget {
               return Align(
                 alignment: Alignment.topLeft,
                 child: SizedBox(
-                  width: width ?? kSearchBarWidth,
+                  width: width ?? searchBarWidth,
                   height:
                       (options.length * 50) > 400 ? 400 : options.length * 50,
                   child: ClipRRect(

diff --git a/lib/common/view/theme.dart b/lib/common/view/theme.dart
@@ -105,6 +105,9 @@ Color getAlphabetColor(String text, [Color fallBackColor = Colors.black]) {
   return alphabetColors[letter?.toUpperCase()] ?? fallBackColor;
 }
 
+double get searchBarWidth =>
+    isMobile ? kMobileSearchBarWidth : kDesktopSearchBarWidth;
+
 InputDecoration createMaterialDecoration({
   required ColorScheme colorScheme,
   TextStyle? style,
@@ -120,35 +123,39 @@ InputDecoration createMaterialDecoration({
   final outlineInputBorder = border ??
       OutlineInputBorder(
         borderRadius: BorderRadius.circular(100),
-        borderSide: BorderSide(width: 1, color: colorScheme.outline),
+        borderSide: BorderSide(
+          width: isMobile ? 2 : 1,
+          color: colorScheme.outline,
+        ),
       );
   return InputDecoration(
     prefixIcon: prefixIcon,
     suffixIcon: suffixIcon,
-    suffixIconConstraints: const BoxConstraints(
-      maxWidth: 200,
-      maxHeight: kYaruTitleBarItemHeight,
+    suffixIconConstraints: BoxConstraints(
+      maxHeight: isMobile ? kToolbarHeight : kYaruTitleBarItemHeight,
     ),
     hintText: hintText,
     fillColor: fillColor,
     filled: filled,
-    contentPadding: contentPadding ??
-        const EdgeInsets.only(top: 10, bottom: 10, left: 15, right: 15),
+    contentPadding: isMobile
+        ? const EdgeInsets.only(top: 16, bottom: 0, left: 15, right: 15)
+        : contentPadding ??
+            const EdgeInsets.only(top: 10, bottom: 10, left: 15, right: 15),
     border: outlineInputBorder,
     errorBorder: outlineInputBorder,
     enabledBorder: outlineInputBorder,
     focusedBorder: outlineInputBorder.copyWith(
       borderSide: BorderSide(
-        width: 1,
         color: colorScheme.primary,
+        width: isMobile ? 2 : 1,
       ),
     ),
     disabledBorder: outlineInputBorder,
     focusedErrorBorder: outlineInputBorder,
-    helperStyle: style,
-    hintStyle: style,
-    labelStyle: style,
-    isDense: isDense,
+    helperStyle: isMobile ? null : style,
+    hintStyle: isMobile ? null : style,
+    labelStyle: isMobile ? null : style,
+    isDense: isMobile ? false : isDense,
   );
 }
 

diff --git a/lib/constants.dart b/lib/constants.dart
@@ -29,7 +29,9 @@ const kTinyButtonSize = 30.0;
 
 const kTinyButtonIconSize = 13.0;
 
-const kSearchBarWidth = 335.0;
+const kDesktopSearchBarWidth = 335.0;
+
+const kMobileSearchBarWidth = 270.0;
 
 const kSnackBarWidth = 500.0;
 

diff --git a/lib/local_audio/view/album_view.dart b/lib/local_audio/view/album_view.dart
@@ -14,7 +14,7 @@ import '../local_audio_model.dart';
 import 'album_page.dart';
 import 'local_cover.dart';
 
-class AlbumsView extends StatelessWidget {
+class AlbumsView extends StatelessWidget with WatchItMixin {
   const AlbumsView({
     super.key,
     required this.albums,
@@ -38,11 +38,21 @@ class AlbumsView extends StatelessWidget {
       );
     }
 
+    watchPropertyValue((LibraryModel m) => m.pinnedAlbums.hashCode);
+    final pinnedAlbums = di<LibraryModel>()
+        .pinnedAlbums
+        .entries
+        .map((e) => e.value.firstOrNull?.album);
+    final sortedAlbums = [
+      ...albums!.where((e) => pinnedAlbums.contains(e)),
+      ...albums!.where((e) => !pinnedAlbums.contains(e)),
+    ];
+
     return SliverGrid.builder(
-      itemCount: albums!.length,
+      itemCount: sortedAlbums.length,
       gridDelegate: audioCardGridDelegate,
       itemBuilder: (context, index) {
-        final album = albums!.elementAt(index);
+        final album = sortedAlbums.elementAt(index);
         return AlbumCard(
           key: ValueKey(album),
           album: album,

diff --git a/lib/local_audio/view/local_audio_control_panel.dart b/lib/local_audio/view/local_audio_control_panel.dart
@@ -3,7 +3,6 @@ import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
 
 import '../../common/view/icons.dart';
-import '../../common/view/theme.dart';
 import '../../l10n/l10n.dart';
 import '../local_audio_model.dart';
 import 'local_audio_view.dart';
@@ -20,7 +19,6 @@ class LocalAudioControlPanel extends StatelessWidget with WatchItMixin {
       child: YaruChoiceChipBar(
         goNextIcon: Icon(Iconz.goNext),
         goPreviousIcon: Icon(Iconz.goBack),
-        chipHeight: chipHeight,
         style: YaruChoiceChipBarStyle.stack,
         selectedFirst: false,
         clearOnSelect: false,

diff --git a/lib/podcasts/view/podcast_genre_autocomplete.dart b/lib/podcasts/view/podcast_genre_autocomplete.dart
@@ -4,7 +4,6 @@ import 'package:flutter/scheduler.dart';
 import '../../app_config.dart';
 import '../../common/data/podcast_genre.dart';
 import '../../common/view/theme.dart';
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 
@@ -109,7 +108,7 @@ class PodcastGenreAutoComplete extends StatelessWidget {
               return Align(
                 alignment: Alignment.topLeft,
                 child: SizedBox(
-                  width: width ?? kSearchBarWidth,
+                  width: width ?? searchBarWidth,
                   height:
                       (options.length * 50) > 400 ? 400 : options.length * 50,
                   child: ClipRRect(

diff --git a/lib/radio/view/tag_auto_complete.dart b/lib/radio/view/tag_auto_complete.dart
@@ -5,7 +5,6 @@ import 'package:radio_browser_api/radio_browser_api.dart' hide State;
 import '../../app_config.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/theme.dart';
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 
@@ -90,7 +89,7 @@ class TagAutoComplete extends StatelessWidget {
             return Align(
               alignment: Alignment.topLeft,
               child: SizedBox(
-                width: kSearchBarWidth,
+                width: searchBarWidth,
                 height: (options.length * 50) > 400 ? 400 : options.length * 50,
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(6),

diff --git a/lib/search/view/search_page_input.dart b/lib/search/view/search_page_input.dart
@@ -9,7 +9,6 @@ import '../../common/view/language_autocomplete.dart';
 import '../../common/view/modals.dart';
 import '../../common/view/search_input.dart';
 import '../../common/view/theme.dart';
-import '../../constants.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
 import '../../radio/view/tag_auto_complete.dart';
@@ -28,7 +27,7 @@ class SearchPageInput extends StatelessWidget with WatchItMixin {
     final searchType = watchPropertyValue((SearchModel m) => m.searchType);
     final audioType = watchPropertyValue((SearchModel m) => m.audioType);
     return SizedBox(
-      width: kSearchBarWidth,
+      width: searchBarWidth,
       height: inputHeight,
       child: switch (searchType) {
         SearchType.radioCountry => const CountryAutoCompleteWithSuffix(),