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

core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart

@@ -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;
                 });

lib/features/manage_account/presentation/profiles/identities/widgets/identities_radio_list_builder_web.dart

@@ -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,
+            );
+          }),
+        ),
+      ))
+    );
+  }
+}

lib/features/manage_account/presentation/profiles/profiles_view.dart

@@ -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(
+      body: ResponsiveWidget(
-        margin: _responsiveUtils.isWebDesktop(context)
+        responsiveUtils: _responsiveUtils, 
-          ? const EdgeInsets.all(16)
+        mobile: IdentitiesView(),
-          : EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
+        desktop: _buildProfilesWeb(context))
-        color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
+    );
-        decoration: _responsiveUtils.isWebDesktop(context)
+  }
-            ? BoxDecoration(
+
-                borderRadius: BorderRadius.circular(16),
+  Widget _buildProfilesWeb(BuildContext context) {
-                border: Border.all(color: AppColor.colorBorderSettingContentWeb, width: 1),
+    return Container(
-                color: Colors.white)
+      decoration: BoxDecoration(
-            : null,
+        borderRadius: const BorderRadius.all(Radius.circular(16.0)),
-        child: ClipRRect(
+        border: Border.all(color: AppColor.colorBorderIdentityInfo),
-          borderRadius: BorderRadius.circular(
+        color: Colors.white,
-              _responsiveUtils.isWebDesktop(context) ? 16 : 0),
+      ),
-          child: Padding(
+      margin: const EdgeInsets.all(16.0),
-            padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
+      padding: const EdgeInsets.all(16.0),
-            child: DefaultTabController(
+      child: Column(
-                initialIndex: 0,
+        crossAxisAlignment: CrossAxisAlignment.start,
-                length: 1,
+        children: [
-                child: Scaffold(
+          for(var widget in _buildProfilesTitle(context))
-                  appBar: TabBar(
+            widget,
-                      unselectedLabelColor: AppColor.colorTextButtonHeaderThread,
+          const Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2),
-                      unselectedLabelStyle: const TextStyle(
+          Expanded(child: IdentitiesView()),
-                          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(),
-                      ],
-                    ))
-                  ]),
-                )
-            ),
-          ),
-        ),
       ),
     );
   }
+
+  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),
+    ];
+  }
 }