Skip to content

Commit d1d5a10

Browse files
tddang-linagoratddang-linagora
committed
TF-3603 Adapt search bar when inside Cozy
1 parent 0a6da61 commit d1d5a10

File tree

6 files changed

+114
-30
lines changed

6 files changed

+114
-30
lines changed

‎core/lib/presentation/extensions/color_extension.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ extension AppColor on Color {
244244
static const blue100 = Color(0xFFDFEEFF);
245245
static const blue400 = Color(0xFF80BDFF);
246246
static const m3Tertiary = Color(0xFF8C9CAF);
247+
static const m3Tertiary70 = Color(0xFFE5ECF3);
247248
static const m3Neutral70 = Color(0xFFAEAAAE);
248249
static const grayBackgroundColor = Color(0xFFF3F6F9);
249250
static const m3SurfaceBackground = Color(0xFF1C1B1F);

‎core/lib/presentation/views/quick_search/quick_search_input_form.dart

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:core/presentation/extensions/color_extension.dart';
12
import 'package:core/presentation/views/quick_search/quick_search_action_define.dart';
23
import 'package:core/presentation/views/quick_search/quick_search_suggestion_box_controller.dart';
34
import 'package:core/presentation/views/quick_search/quick_search_suggestion_box_decoration.dart';
@@ -69,6 +70,7 @@ class QuickSearchInputForm<T, P, R> extends FormField<String> {
6970
ItemBuilder<P>? contactItemBuilder,
7071
SuggestionsCallback<P>? contactSuggestionsCallback,
7172
SuggestionSelectionCallback<P>? onContactSuggestionSelected,
73+
Color backgroundColor = AppColor.colorBgDesktop,
7274
}) : assert(
7375
initialValue == null || textFieldConfiguration.controller == null),
7476
assert(minCharsForSuggestions >= 0),
@@ -138,6 +140,7 @@ class QuickSearchInputForm<T, P, R> extends FormField<String> {
138140
contactItemBuilder: contactItemBuilder,
139141
contactSuggestionsCallback: contactSuggestionsCallback,
140142
onContactSuggestionSelected: onContactSuggestionSelected,
143+
backgroundColor: backgroundColor,
141144
);
142145
},
143146
);

‎core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,8 @@ class TypeAheadFieldQuickSearch<T, P, R> extends StatefulWidget {
318318
/// Min input length to start autocomplete
319319
final int? minInputLengthAutocomplete;
320320

321+
final Color backgroundColor;
322+
321323
/// Creates a [TypeAheadFieldQuickSearch]
322324
const TypeAheadFieldQuickSearch({
323325
Key? key,
@@ -364,6 +366,7 @@ class TypeAheadFieldQuickSearch<T, P, R> extends StatefulWidget {
364366
this.contactItemBuilder,
365367
this.contactSuggestionsCallback,
366368
this.onContactSuggestionSelected,
369+
this.backgroundColor = AppColor.colorBgDesktop,
367370
}) : assert(animationStart >= 0.0 && animationStart <= 1.0),
368371
assert(
369372
direction == AxisDirection.down || direction == AxisDirection.up),
@@ -658,9 +661,9 @@ class _TypeAheadFieldQuickSearchState<T, P, R>
658661
],
659662
color: Colors.white,
660663
)
661-
: const BoxDecoration(
662-
borderRadius: BorderRadius.all(Radius.circular(12)),
663-
color: AppColor.colorBgDesktop,
664+
: BoxDecoration(
665+
borderRadius: const BorderRadius.all(Radius.circular(12)),
666+
color: widget.backgroundColor,
664667
),
665668
height: widget.maxHeight,
666669
child: Row(

‎lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

Lines changed: 78 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:core/core.dart';
2+
import 'package:cozy/cozy_config/cozy_config.dart';
23
import 'package:flutter/gestures.dart';
34
import 'package:flutter/material.dart';
45
import 'package:flutter_portal/flutter_portal.dart';
@@ -60,31 +61,48 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
6061
child: Container(
6162
color: AppColor.colorBgDesktop,
6263
child: Column(children: [
63-
Obx(() {
64-
final accountId = controller.accountId.value;
64+
FutureBuilder(
65+
future: CozyConfig().isInsideCozy,
66+
builder: (context, snapshot) {
67+
if (snapshot.data == true) {
68+
return const SizedBox.shrink();
69+
}
6570

66-
return NavigationBarWidget(
67-
imagePaths: controller.imagePaths,
68-
accountId: accountId,
69-
avatarUserName: controller.getOwnEmailAddress().firstCharacterToUpperCase,
70-
contactSupportCapability: accountId != null
71-
? controller.sessionCurrent?.getContactSupportCapability(accountId)
72-
: null,
73-
searchForm: SearchInputFormWidget(),
74-
appGridController: controller.appGridDashboardController,
75-
onTapApplicationLogoAction: controller.redirectToInboxAction,
76-
onTapAvatarAction: (position) =>
77-
controller.handleClickAvatarAction(context, position),
78-
onTapContactSupportAction: (contactSupport) =>
79-
controller.onGetHelpOrReportBug(contactSupport),
80-
);
81-
}),
71+
return Obx(() {
72+
final accountId = controller.accountId.value;
73+
74+
return NavigationBarWidget(
75+
imagePaths: controller.imagePaths,
76+
accountId: accountId,
77+
avatarUserName: controller.getOwnEmailAddress().firstCharacterToUpperCase,
78+
contactSupportCapability: accountId != null
79+
? controller.sessionCurrent?.getContactSupportCapability(accountId)
80+
: null,
81+
searchForm: SearchInputFormWidget(),
82+
appGridController: controller.appGridDashboardController,
83+
onTapApplicationLogoAction: controller.redirectToInboxAction,
84+
onTapAvatarAction: (position) =>
85+
controller.handleClickAvatarAction(context, position),
86+
onTapContactSupportAction: (contactSupport) =>
87+
controller.onGetHelpOrReportBug(contactSupport),
88+
);
89+
});
90+
}
91+
),
8292
Expanded(child: Row(children: [
8393
Column(children: [
84-
ComposeButtonWidget(
85-
imagePaths: controller.imagePaths,
86-
onTapAction: () =>
87-
controller.openComposer(ComposerArguments()),
94+
FutureBuilder(
95+
future: CozyConfig().isInsideCozy,
96+
builder: (context, snapshot) {
97+
return ComposeButtonWidget(
98+
imagePaths: controller.imagePaths,
99+
onTapAction: () =>
100+
controller.openComposer(ComposerArguments()),
101+
buttonPadding: snapshot.data == true
102+
? const EdgeInsetsDirectional.symmetric(vertical: 10)
103+
: const EdgeInsetsDirectional.symmetric(vertical: 8),
104+
);
105+
}
88106
),
89107
Expanded(child: SizedBox(
90108
width: ResponsiveUtils.defaultSizeMenu,
@@ -101,6 +119,44 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
101119
]),
102120
Expanded(child: Column(children: [
103121
const SizedBox(height: 16),
122+
FutureBuilder(
123+
future: CozyConfig().isInsideCozy,
124+
builder: (context, snapshot) {
125+
if (snapshot.data != true) {
126+
return const SizedBox.shrink();
127+
}
128+
129+
return Padding(
130+
padding: const EdgeInsets.only(bottom: 16),
131+
child: Row(
132+
children: [
133+
SizedBox(
134+
width: MediaQuery.sizeOf(context).width * 0.4,
135+
height: 44,
136+
child: SearchInputFormWidget(
137+
backgroundColor: AppColor.m3Tertiary70,
138+
fontSize: 15,
139+
contentPadding: const EdgeInsets.only(bottom: 4),
140+
),
141+
),
142+
const Spacer(),
143+
TMailButtonWidget.fromIcon(
144+
icon: controller.imagePaths.icSetting,
145+
iconColor: AppColor.steelGrayA540,
146+
backgroundColor: Colors.transparent,
147+
onTapActionAtPositionCallback: (position) {
148+
controller.handleClickAvatarAction(
149+
context,
150+
position,
151+
);
152+
},
153+
margin: const EdgeInsets.only(right: 16),
154+
),
155+
],
156+
),
157+
);
158+
}
159+
),
104160
Obx(() => RecoverDeletedMessageLoadingBannerWidget(
105161
isLoading: controller.isRecoveringDeletedMessage.value,
106162
horizontalLoadingWidget: horizontalLoadingWidget,

‎lib/features/mailbox_dashboard/presentation/widgets/compose_button_widget.dart

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ class ComposeButtonWidget extends StatelessWidget {
1111

1212
final ImagePaths imagePaths;
1313
final VoidCallback onTapAction;
14+
final EdgeInsetsGeometry buttonPadding;
1415

1516
const ComposeButtonWidget({
1617
super.key,
1718
required this.imagePaths,
1819
required this.onTapAction,
20+
this.buttonPadding = const EdgeInsets.symmetric(vertical: 8),
1921
});
2022

2123
@override
@@ -36,7 +38,7 @@ class ComposeButtonWidget extends StatelessWidget {
3638
borderRadius: 10,
3739
iconSize: 24,
3840
iconColor: Colors.white,
39-
padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
41+
padding: buttonPadding,
4042
backgroundColor: AppColor.blue700,
4143
textStyle: ThemeUtils.textStyleBodyBody2(color: Colors.white),
4244
onTapActionCallback: onTapAction,

‎lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,16 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
3838
final _imagePaths = Get.find<ImagePaths>();
3939
final _responsiveUtils = Get.find<ResponsiveUtils>();
4040

41-
SearchInputFormWidget({Key? key}) : super(key: key);
41+
SearchInputFormWidget({
42+
super.key,
43+
this.backgroundColor = AppColor.colorBgDesktop,
44+
this.fontSize = 16,
45+
this.contentPadding = EdgeInsets.zero,
46+
});
47+
48+
final Color backgroundColor;
49+
final double fontSize;
50+
final EdgeInsetsGeometry contentPadding;
4251

4352
@override
4453
Widget build(BuildContext context) {
@@ -130,6 +139,7 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
130139
contactItemBuilder: (context, emailAddress) => ContactQuickSearchItem(emailAddress: emailAddress),
131140
contactSuggestionsCallback: _dashBoardController.getContactSuggestion,
132141
onContactSuggestionSelected: _invokeSelectContactSuggestion,
142+
backgroundColor: backgroundColor,
133143
)
134144
),
135145
);
@@ -203,6 +213,9 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
203213
return QuickSearchTextFieldConfiguration(
204214
controller: _searchController.searchInputController,
205215
focusNode: _searchController.searchFocus,
216+
style: Theme.of(context).textTheme.bodySmall?.copyWith(
217+
fontSize: fontSize,
218+
),
206219
textInputAction: TextInputAction.done,
207220
cursorColor: AppColor.primaryColor,
208221
textDirection: DirectionUtils.getDirectionByLanguage(context),
@@ -211,10 +224,16 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
211224
border: InputBorder.none,
212225
focusedBorder: InputBorder.none,
213226
enabledBorder: InputBorder.none,
214-
contentPadding: EdgeInsets.zero,
227+
contentPadding: contentPadding,
215228
hintText: AppLocalizations.of(context).search_emails,
216-
hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 16.0),
217-
labelStyle: const TextStyle(color: Colors.black, fontSize: 16.0)
229+
hintStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
230+
color: AppColor.colorHintSearchBar,
231+
fontSize: fontSize,
232+
),
233+
labelStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
234+
color: Colors.black,
235+
fontSize: fontSize,
236+
),
218237
),
219238
leftButton: Padding(
220239
padding: const EdgeInsetsDirectional.only(start: 8),

0 commit comments

Comments
 (0)