fix: consistent borderless text input styling
This commit is contained in:
@@ -9,6 +9,7 @@ import '../../providers/companion_remote_provider.dart';
|
||||
import '../../utils/platform_detector.dart';
|
||||
import '../../utils/app_logger.dart';
|
||||
import '../../widgets/overlay_sheet.dart';
|
||||
import '../../widgets/pill_input_decoration.dart';
|
||||
import 'pairing_screen.dart';
|
||||
|
||||
class MobileRemoteScreen extends StatefulWidget {
|
||||
@@ -644,11 +645,11 @@ class _SearchBottomSheetState extends State<_SearchBottomSheet> {
|
||||
TextField(
|
||||
controller: _controller,
|
||||
autofocus: true,
|
||||
decoration: InputDecoration(
|
||||
decoration: pillInputDecoration(
|
||||
context,
|
||||
hintText: t.companionRemote.remote.searchHint,
|
||||
prefixIcon: const Icon(Icons.search),
|
||||
suffixIcon: IconButton(icon: const Icon(Icons.send), onPressed: () => _submit(_controller.text)),
|
||||
border: const OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(100))),
|
||||
),
|
||||
onSubmitted: _submit,
|
||||
),
|
||||
|
||||
@@ -12,6 +12,7 @@ import '../providers/multi_server_provider.dart';
|
||||
import '../utils/app_logger.dart';
|
||||
import '../utils/snackbar_helper.dart';
|
||||
import '../widgets/desktop_app_bar.dart';
|
||||
import '../widgets/pill_input_decoration.dart';
|
||||
import '../widgets/focusable_media_card.dart';
|
||||
import '../utils/focus_utils.dart';
|
||||
import 'libraries/state_messages.dart';
|
||||
@@ -237,7 +238,8 @@ class _SearchScreenState extends State<SearchScreen> with Refreshable, FullRefre
|
||||
child: TextField(
|
||||
controller: _searchController,
|
||||
focusNode: _searchFocusNode,
|
||||
decoration: InputDecoration(
|
||||
decoration: pillInputDecoration(
|
||||
context,
|
||||
hintText: t.search.hint,
|
||||
prefixIcon: const AppIcon(Symbols.search_rounded, fill: 1),
|
||||
suffixIcon: _searchController.text.isNotEmpty
|
||||
@@ -249,21 +251,6 @@ class _SearchScreenState extends State<SearchScreen> with Refreshable, FullRefre
|
||||
},
|
||||
)
|
||||
: null,
|
||||
filled: true,
|
||||
fillColor: Theme.of(context).colorScheme.surfaceContainerHighest,
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(100)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(100)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(100)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
+10
-10
@@ -99,20 +99,20 @@ ThemeData monoTheme({required bool dark, bool oled = false}) {
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: c.surface,
|
||||
fillColor: c.text.withValues(alpha: 0.08),
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide(color: c.outline),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide(color: c.outline),
|
||||
enabledBorder: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide(color: c.text.withValues(alpha: 0.5)),
|
||||
focusedBorder: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
hintStyle: TextStyle(color: c.textMuted),
|
||||
),
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
const pillInputRadius = BorderRadius.all(Radius.circular(100));
|
||||
|
||||
InputDecoration pillInputDecoration(BuildContext context, {String? hintText, Widget? prefixIcon, Widget? suffixIcon}) {
|
||||
final fillColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.08);
|
||||
const border = OutlineInputBorder(borderRadius: pillInputRadius, borderSide: BorderSide.none);
|
||||
return InputDecoration(
|
||||
hintText: hintText,
|
||||
prefixIcon: prefixIcon,
|
||||
suffixIcon: suffixIcon,
|
||||
filled: true,
|
||||
fillColor: fillColor,
|
||||
border: border,
|
||||
enabledBorder: border,
|
||||
focusedBorder: border,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
);
|
||||
}
|
||||
@@ -11,24 +11,9 @@ import '../../../utils/snackbar_helper.dart';
|
||||
import '../../../widgets/app_icon.dart';
|
||||
import '../../../widgets/focusable_list_tile.dart';
|
||||
import '../../../widgets/overlay_sheet.dart';
|
||||
import '../../../widgets/pill_input_decoration.dart';
|
||||
import 'base_video_control_sheet.dart';
|
||||
|
||||
const _kPillRadius = BorderRadius.all(Radius.circular(100));
|
||||
|
||||
InputDecoration _pillInputDecoration(BuildContext context, {String? hintText, Widget? prefixIcon}) {
|
||||
final fillColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.08);
|
||||
return InputDecoration(
|
||||
hintText: hintText,
|
||||
prefixIcon: prefixIcon,
|
||||
filled: true,
|
||||
fillColor: fillColor,
|
||||
border: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
|
||||
enabledBorder: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
|
||||
focusedBorder: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
);
|
||||
}
|
||||
|
||||
class SubtitleSearchSheet extends StatefulWidget {
|
||||
final String ratingKey;
|
||||
final String serverId;
|
||||
@@ -186,9 +171,9 @@ class _SubtitleSearchSheetState extends State<SubtitleSearchSheet> {
|
||||
// Language chip
|
||||
Material(
|
||||
color: fillColor,
|
||||
borderRadius: _kPillRadius,
|
||||
borderRadius: pillInputRadius,
|
||||
child: InkWell(
|
||||
borderRadius: _kPillRadius,
|
||||
borderRadius: pillInputRadius,
|
||||
onTap: () => setState(() => _showLanguagePicker = true),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
@@ -208,7 +193,7 @@ class _SubtitleSearchSheetState extends State<SubtitleSearchSheet> {
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _titleController,
|
||||
decoration: _pillInputDecoration(
|
||||
decoration: pillInputDecoration(
|
||||
context,
|
||||
hintText: widget.mediaTitle ?? 'Title',
|
||||
prefixIcon: const Icon(Symbols.search_rounded, size: 20),
|
||||
@@ -369,7 +354,7 @@ class _LanguagePickerViewState extends State<_LanguagePickerView> {
|
||||
child: TextField(
|
||||
controller: _filterController,
|
||||
autofocus: true,
|
||||
decoration: _pillInputDecoration(
|
||||
decoration: pillInputDecoration(
|
||||
context,
|
||||
hintText: t.videoControls.searchLanguages,
|
||||
prefixIcon: const Icon(Symbols.search_rounded, size: 20),
|
||||
|
||||
Reference in New Issue
Block a user