TF-1194 apply new design identity to manage identity screen in web

This commit is contained in:
sherlockvn
2022-12-27 14:18:20 +07:00
committed by Dat H. Pham
parent 200e106c19
commit 094752aa9c
3 changed files with 151 additions and 55 deletions
@@ -20,12 +20,16 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
/// Handler for mailto: links
final Function(Uri?)? mailtoDelegate;
// if widthContent is bigger than width of htmlContent, set this to true let widget able to resize to width of htmlContent
final bool allowResizeToDocumentSize;
const HtmlContentViewerOnWeb({
Key? key,
required this.contentHtml,
required this.widthContent,
required this.heightContent,
required this.controller,
this.allowResizeToDocumentSize = true,
this.mailtoDelegate,
}) : super(key: key);
@@ -58,6 +62,24 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
_setUpWeb();
}
@override
void didUpdateWidget(covariant HtmlContentViewerOnWeb oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.contentHtml != oldWidget.contentHtml) {
createdViewId = _getRandString(10);
widget.controller.viewId = createdViewId;
_setUpWeb();
}
if (widget.heightContent != oldWidget.heightContent) {
actualHeight = widget.heightContent;
}
if (widget.widthContent != oldWidget.widthContent) {
actualWidth = widget.widthContent;
}
}
String _getRandString(int len) {
var random = math.Random.secure();
var values = List<int>.generate(len, (i) => random.nextInt(255));
@@ -195,7 +217,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
if (data['type'] != null && data['type'].contains('toDart: htmlWidth') && data['view'] == createdViewId) {
final docWidth = data['width'] ?? actualWidth;
if (docWidth != null && mounted) {
if (docWidth > minWidth) {
if (docWidth > minWidth && widget.allowResizeToDocumentSize) {
setState(() {
actualWidth = docWidth;
});
@@ -0,0 +1,82 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/widgets/signature_of_identity_builder.dart';
import 'identity_list_tile_builder.dart';
class IdentitiesRadioListBuilder extends StatefulWidget {
const IdentitiesRadioListBuilder({
Key? key,
required this.controller,
}) : super(key: key);
final IdentitiesController controller;
@override
State<IdentitiesRadioListBuilder> createState() => _IdentitiesRadioListBuilderState();
}
class _IdentitiesRadioListBuilderState extends State<IdentitiesRadioListBuilder> {
int? selected;
late final allIdentities = widget.controller.listAllIdentities.value;
@override
Widget build(BuildContext context) {
return Container(
height: 256,
foregroundDecoration: BoxDecoration(
border: Border.all(color: AppColor.colorBorderIdentityInfo, width: 1),
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
),
child: Obx(() => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if(widget.controller.isSignatureShow())...[
_buildListViewContainer(),
Expanded(
child: Obx(() => SignatureOfIdentityBuilder(identity: widget.controller.identitySelected.value!)),
)
] else
Expanded(child: _buildListViewContainer())
],
)),
);
}
Widget _buildListViewContainer() {
return Container(
key: const Key('identities_checkbox_list'),
width: 320,
foregroundDecoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [0, 0.5, 0.55, 0.60, 0.65, 0.70, 0.75, 0.80, 0.85, 0.90, 1].map((e)
=> Colors.white.withOpacity(e.toDouble())).toList(),
stops: const [0.8, 0.82, 0.84, 0.86, 0.88, 0.90, 0.92, 0.94, 0.96, 0.98, 1],// Gradient from https://learnui.design/tools/gradient-generator.html
tileMode: TileMode.mirror,
),
border: widget.controller.isSignatureShow() ? const Border(right: BorderSide(color: AppColor.colorBorderIdentityInfo)): null,
),
padding: const EdgeInsets.only(left: 12.0, bottom: 12.0, top: 12.0, right: 4.0),
child: Scrollbar(
controller: ScrollController(),
radius: const Radius.circular(5.0),
thickness: 2.0,
child: Obx(() => ListView.builder(
padding: const EdgeInsets.only(right: 12.0),
itemCount: widget.controller.listAllIdentities.value.length,
itemBuilder: ((context, index) {
return IdentityListTileBuilder(
controller: widget.controller,
index: index,
selected: widget.controller.selectedIndex.value,
);
}),
),
))
);
}
}
@@ -3,9 +3,9 @@ import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/profiles_tab_type.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_view.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_controller.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class ProfilesView extends GetWidget<ProfilesController> {
@@ -17,60 +17,52 @@ class ProfilesView extends GetWidget<ProfilesController> {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: SettingsUtils.getBackgroundColor(context, _responsiveUtils),
body: Container(
margin: _responsiveUtils.isWebDesktop(context)
? const EdgeInsets.all(16)
: EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
decoration: _responsiveUtils.isWebDesktop(context)
? BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColor.colorBorderSettingContentWeb, width: 1),
color: Colors.white)
: null,
child: ClipRRect(
borderRadius: BorderRadius.circular(
_responsiveUtils.isWebDesktop(context) ? 16 : 0),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: DefaultTabController(
initialIndex: 0,
length: 1,
child: Scaffold(
appBar: TabBar(
unselectedLabelColor: AppColor.colorTextButtonHeaderThread,
unselectedLabelStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: AppColor.colorTextButtonHeaderThread),
labelStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: AppColor.primaryColor),
labelColor: AppColor.primaryColor,
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
indicator: const CustomIndicator(
indicatorHeight: 4,
indicatorColor: AppColor.primaryColor,
indicatorSize: CustomIndicatorSize.full),
onTap: (index) {},
tabs: [
Tab(text: ProfilesTabType.identities.getName(context)),
]),
body: Column(children: [
const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
Expanded(child: TabBarView(
children: [
IdentitiesView(),
],
))
]),
)
),
),
),
body: ResponsiveWidget(
responsiveUtils: _responsiveUtils,
mobile: IdentitiesView(),
desktop: _buildProfilesWeb(context))
);
}
Widget _buildProfilesWeb(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
border: Border.all(color: AppColor.colorBorderIdentityInfo),
color: Colors.white,
),
margin: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for(var widget in _buildProfilesTitle(context))
widget,
const Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2),
Expanded(child: IdentitiesView()),
],
),
);
}
List<Widget> _buildProfilesTitle(BuildContext context) {
return [
Text(
AppLocalizations.of(context).profiles.inCaps,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
fontFamily: 'Inter',
color: Colors.black)),
const SizedBox(height: 4.0),
Text(
AppLocalizations.of(context).profiles_description,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: AppColor.colorContentEmail),
),
const SizedBox(height: 16.0),
];
}
}