Skip to content

Commit

Permalink
TF-3005 Apply new design search input contact view
Browse files Browse the repository at this point in the history
  • Loading branch information
@dab246
dab246 committed Oct 8, 2024
1 parent db8d8d3 commit 380a270
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 61 deletions.
24 changes: 13 additions & 11 deletions lib/features/contact/presentation/contact_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
Expand Down Expand Up @@ -61,27 +60,30 @@ class ContactView extends GetWidget<ContactController> {
responsiveUtils: controller.responsiveUtils,
onCloseContactView: controller.closeContactView,
)),
SearchAppBarWidget(
Obx(() => SearchAppBarWidget(
imagePaths: controller.imagePaths,
searchQuery: controller.searchQuery.value,
searchFocusNode: controller.textInputSearchFocus,
searchInputController: controller.textInputSearchController,
hasBackButton: false,
hasSearchButton: true,
margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils),
searchIconSize: 20,
searchIconColor: AppColor.colorHintSearchBar,
margin: ContactViewStyle.getSearchInputFormMargin(
context,
controller.responsiveUtils
),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: AppColor.colorBgSearchBar),
iconClearText: SvgPicture.asset(
controller.imagePaths.icClearTextSearch,
width: 18,
height: 18,
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(12)),
color: AppColor.colorBgSearchBar
),
hintText: AppLocalizations.of(context).hintSearchInputContact,
inputHintTextStyle: ContactViewStyle.searchInputHintTextStyle,
inputTextStyle: ContactViewStyle.searchInputTextStyle,
onClearTextSearchAction: controller.clearAllTextInputSearchForm,
onTextChangeSearchAction: controller.onTextSearchChange,
onSearchTextAction: controller.onSearchTextAction,
),
)),
if (PlatformInfo.isWeb)
Obx(() {
final username = controller.session.value?.username.value ?? '';
Expand Down
26 changes: 25 additions & 1 deletion lib/features/contact/presentation/styles/contact_view_style.dart
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@

import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ContactViewStyle {
static const double viewMaxHeight = 624.0;
static const double viewMaxWidth = 558.0;

static TextStyle searchInputHintTextStyle = const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: AppColor.colorHintSearchBar
);

static TextStyle searchInputTextStyle = const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black
);

static double getContactViewHeight(
BuildContext context,
ResponsiveUtils responsiveUtils
Expand Down Expand Up @@ -59,4 +72,15 @@ class ContactViewStyle {
return const BorderRadius.all(Radius.circular(16));
}
}

static EdgeInsetsGeometry getSearchInputFormMargin(
BuildContext context,
ResponsiveUtils responsiveUtils
) {
if (PlatformInfo.isWeb || responsiveUtils.isScreenWithShortestSide(context)) {
return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
} else {
return const EdgeInsets.symmetric(horizontal: 32, vertical: 10);
}
}
}
12 changes: 0 additions & 12 deletions lib/features/contact/presentation/utils/contact_utils.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,6 @@ import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';

class ContactUtils {
static EdgeInsets getPaddingSearchInputForm(BuildContext context, ResponsiveUtils responsiveUtils) {
if (PlatformInfo.isWeb) {
return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
} else {
if (responsiveUtils.isScreenWithShortestSide(context)) {
return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
} else {
return const EdgeInsets.symmetric(horizontal: 32, vertical: 10);
}
}
}

static EdgeInsets getPaddingSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) {
if (PlatformInfo.isWeb) {
return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
Expand Down
5 changes: 0 additions & 5 deletions lib/features/destination_picker/presentation/destination_picker_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,11 +609,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: AppColor.colorBgSearchBar),
iconClearText: SvgPicture.asset(
controller.imagePaths.icClearTextSearch,
width: 18,
height: 18,
fit: BoxFit.fill),
hintText: AppLocalizations.of(context).hintSearchFolders,
onClearTextSearchAction: controller.clearSearchText,
onTextChangeSearchAction: (query) => controller.searchMailbox(context, query),
Expand Down
71 changes: 39 additions & 32 deletions lib/features/thread/presentation/widgets/search_app_bar_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/presentation/views/text/text_field_builder.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
Expand All @@ -25,9 +26,12 @@ class SearchAppBarWidget extends StatelessWidget {
final double? heightSearchBar;
final Decoration? decoration;
final EdgeInsets? padding;
final EdgeInsets? margin;
final EdgeInsetsGeometry? margin;
final String? hintText;
final Widget? iconClearText;
final Color? searchIconColor;
final double? searchIconSize;
final TextStyle? inputHintTextStyle;
final TextStyle? inputTextStyle;
final OnCancelSearchPressed? onCancelSearchPressed;
final OnTextChangeSearchAction? onTextChangeSearchAction;
final OnClearTextSearchAction? onClearTextSearchAction;
Expand All @@ -47,7 +51,10 @@ class SearchAppBarWidget extends StatelessWidget {
this.padding,
this.margin,
this.hintText,
this.iconClearText,
this.searchIconColor,
this.searchIconSize,
this.inputHintTextStyle,
this.inputTextStyle,
this.onCancelSearchPressed,
this.onTextChangeSearchAction,
this.onClearTextSearchAction,
Expand All @@ -65,10 +72,28 @@ class SearchAppBarWidget extends StatelessWidget {
child: Row(
children: [
if (hasBackButton) _buildBackButton(),
if (hasSearchButton) _buildSearchButton(),
if (hasSearchButton)
TMailButtonWidget.fromIcon(
icon: imagePaths.icSearchBar,
iconColor: searchIconColor,
iconSize: searchIconSize,
backgroundColor: Colors.transparent,
margin: const EdgeInsets.symmetric(horizontal: 8),
onTapActionCallback: () =>
onSearchTextAction?.call(searchInputController?.text ?? ''),
),
Expanded(child: _buildSearchInputForm(context)),
if (suggestionSearch?.isNotEmpty == true || (searchQuery != null && searchQuery!.value.isNotEmpty))
_buildClearTextSearchButton(),
if (suggestionSearch?.isNotEmpty == true ||
(searchQuery != null && searchQuery!.value.isNotEmpty))
TMailButtonWidget.fromIcon(
icon: imagePaths.icClearTextSearch,
backgroundColor: Colors.transparent,
margin: const EdgeInsets.symmetric(horizontal: 8),
onTapActionCallback: () {
searchInputController?.clear();
onClearTextSearchAction?.call();
},
),
]
)
);
Expand All @@ -88,15 +113,6 @@ class SearchAppBarWidget extends StatelessWidget {
});
}

Widget _buildClearTextSearchButton() {
return buildIconWeb(
icon: iconClearText ?? SvgPicture.asset(imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
onTap: () {
searchInputController?.clear();
onClearTextSearchAction?.call();
});
}

Widget _buildSearchInputForm(BuildContext context) {
return TextFieldBuilder(
key: const Key('search_input_form'),
Expand All @@ -108,31 +124,22 @@ class SearchAppBarWidget extends StatelessWidget {
textDirection: DirectionUtils.getDirectionByLanguage(context),
autoFocus: true,
focusNode: searchFocusNode,
textStyle: const TextStyle(color: AppColor.colorNameEmail, fontSize: 17),
textStyle: inputTextStyle ?? const TextStyle(
color: AppColor.colorNameEmail,
fontSize: 17
),
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
hintText: hintText,
hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0),
hintStyle: inputHintTextStyle ?? const TextStyle(
color: AppColor.colorHintSearchBar,
fontSize: 17.0
),
labelStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0)),
controller: searchInputController,
);
}

Widget _buildSearchButton() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(
imagePaths.icSearchBar,
fit: BoxFit.fill
),
onTap: () => onSearchTextAction?.call(searchInputController?.text ?? '')
),
);
}
}

0 comments on commit 380a270

Please sign in to comment.