TF-1194 apply new design identity to manage identity screen in web
This commit is contained in:
@@ -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;
|
||||
});
|
||||
|
||||
+82
@@ -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),
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user