TF-1486 Update size, padding for identity creator view

(cherry picked from commit 028bbcbdd8e433ac5221bb4c9bf135d0f53518e3)
This commit is contained in:
dab246
2023-07-12 16:10:49 +07:00
committed by Dat Vu
parent cbf64b32eb
commit 2f4f8beec4
2 changed files with 145 additions and 185 deletions
@@ -79,7 +79,7 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
spreadRadius: 2, spreadRadius: 2,
offset: Offset.zero), offset: Offset.zero),
]), ]),
child: _buildBodyMobile(context), child: _buildBodyView(context),
), ),
), ),
), ),
@@ -91,10 +91,7 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
body: GestureDetector( body: GestureDetector(
onTap: () => controller.clearFocusEditor(context), onTap: () => controller.clearFocusEditor(context),
child: SafeArea( child: SafeArea(
child: ClipRRect( child: _buildBodyView(context),
borderRadius: const BorderRadius.all(Radius.zero),
child: _buildBodyMobile(context)
),
), ),
) )
), ),
@@ -102,43 +99,30 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
backgroundColor: Colors.black38, backgroundColor: Colors.black38,
body: GestureDetector( body: GestureDetector(
onTap: () => controller.clearFocusEditor(context), onTap: () => controller.clearFocusEditor(context),
child: Center(child: Card( child: Center(
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 24),
child: Card(
color: Colors.transparent, color: Colors.transparent,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))), shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16))
),
child: Container( child: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(16))), borderRadius: BorderRadius.all(Radius.circular(16))
width: _responsiveUtils.getSizeScreenWidth(context) * 0.85,
height: _responsiveUtils.getSizeScreenHeight(context) * 0.6,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16)),
child: _buildBodyMobile(context)
)
)
))
), ),
), width: math.max(_responsiveUtils.getSizeScreenWidth(context) * 0.4, 700),
landscapeTablet: Scaffold(
backgroundColor: Colors.black38,
body: GestureDetector(
onTap: () => controller.clearFocusEditor(context),
child: Center(child: Card(
color: Colors.transparent,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(16))),
width: _responsiveUtils.getSizeScreenWidth(context) * 0.65,
height: _responsiveUtils.getSizeScreenHeight(context) * 0.8, height: _responsiveUtils.getSizeScreenHeight(context) * 0.8,
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16)), borderRadius: const BorderRadius.all(Radius.circular(16)),
child: _buildBodyMobile(context) child: _buildBodyView(context)
) )
) )
)) ),
) )
)
),
), ),
desktop: Scaffold( desktop: Scaffold(
backgroundColor: Colors.black38, backgroundColor: Colors.black38,
@@ -146,16 +130,19 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
onTap: () => controller.clearFocusEditor(context), onTap: () => controller.clearFocusEditor(context),
child: Center(child: Card( child: Center(child: Card(
color: Colors.transparent, color: Colors.transparent,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))), shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16))
),
child: Container( child: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(16))), borderRadius: BorderRadius.all(Radius.circular(16))
width: math.max(_responsiveUtils.getSizeScreenWidth(context) * 0.4, 650), ),
height: _responsiveUtils.getSizeScreenHeight(context) * 0.75, width: math.max(_responsiveUtils.getSizeScreenWidth(context) * 0.4, 800),
height: _responsiveUtils.getSizeScreenHeight(context) * 0.8,
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16)), borderRadius: const BorderRadius.all(Radius.circular(16)),
child: _buildBodyMobile(context) child: _buildBodyView(context)
) )
) )
)), )),
@@ -164,12 +151,12 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
); );
} }
Widget _buildBodyMobile(BuildContext context) { Widget _buildBodyView(BuildContext context) {
final bodyCreatorView = SingleChildScrollView( final bodyCreatorView = SingleChildScrollView(
controller: controller.scrollController, controller: controller.scrollController,
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
child: Padding( child: Padding(
padding: const EdgeInsets.all(24.0), padding: const EdgeInsetsDirectional.symmetric(vertical: 12, horizontal: 24),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Obx(() => IdentityInputFieldBuilder( Obx(() => IdentityInputFieldBuilder(
AppLocalizations.of(context).name, AppLocalizations.of(context).name,
@@ -237,8 +224,10 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.colorInputBorderCreateMailbox), border: Border.all(color: AppColor.colorInputBorderCreateMailbox),
), ),
padding: const EdgeInsetsDirectional.all(16),
child: _buildSignatureHtmlTemplate(context), child: _buildSignatureHtmlTemplate(context),
), ),
const SizedBox(height: 12),
if (_isMobile(context)) if (_isMobile(context))
_buildActionButtonMobile(context) _buildActionButtonMobile(context)
else else
@@ -317,7 +306,8 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
if (PlatformInfo.isWeb) if (PlatformInfo.isWeb)
ToolbarRichTextWebBuilder( ToolbarRichTextWebBuilder(
richTextWebController: controller.richTextWebController, richTextWebController: controller.richTextWebController,
padding: const EdgeInsets.only(top: 22, bottom: 8.0, left: 24, right: 12)), padding: const EdgeInsets.only(bottom: 12)
),
htmlEditor, htmlEditor,
], ],
); );
@@ -325,12 +315,11 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
Widget _buildHtmlEditorWeb(BuildContext context, String initContent) { Widget _buildHtmlEditorWeb(BuildContext context, String initContent) {
log('IdentityCreatorView::_buildHtmlEditorWeb(): initContent: $initContent'); log('IdentityCreatorView::_buildHtmlEditorWeb(): initContent: $initContent');
return Padding( return html_editor_browser.HtmlEditor(
padding: const EdgeInsets.only(left: 14.0, right: 2.0),
child: html_editor_browser.HtmlEditor(
key: const Key('identity_create_editor_web'), key: const Key('identity_create_editor_web'),
controller: controller.richTextWebController.editorController, controller: controller.richTextWebController.editorController,
htmlEditorOptions: html_editor_browser.HtmlEditorOptions( htmlEditorOptions: html_editor_browser.HtmlEditorOptions(
shouldEnsureVisible: true,
hint: '', hint: '',
darkMode: false, darkMode: false,
customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)), customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
@@ -338,89 +327,60 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
blockQuotedContent: initContent, blockQuotedContent: initContent,
htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions( htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
toolbarType: html_editor_browser.ToolbarType.hide, toolbarType: html_editor_browser.ToolbarType.hide,
defaultToolbarButtons: []), defaultToolbarButtons: []
otherOptions: const html_editor_browser.OtherOptions(height: 150), ),
callbacks: html_editor_browser.Callbacks(onBeforeCommand: (currentHtml) { otherOptions: const html_editor_browser.OtherOptions(height: 200),
log('IdentityCreatorView::_buildHtmlEditorWeb(): onBeforeCommand : $currentHtml'); callbacks: html_editor_browser.Callbacks(
controller.updateContentHtmlEditor(currentHtml); onBeforeCommand: controller.updateContentHtmlEditor,
}, onChangeContent: (changed) { onChangeContent: controller.updateContentHtmlEditor,
log('IdentityCreatorView::_buildHtmlEditorWeb(): onChangeContent : $changed'); onInit: () {
controller.updateContentHtmlEditor(changed);
}, onInit: () {
log('IdentityCreatorView::_buildHtmlEditorWeb(): onInit');
controller.richTextWebController.editorController.setFullScreen(); controller.richTextWebController.editorController.setFullScreen();
controller.updateContentHtmlEditor(initContent); controller.updateContentHtmlEditor(initContent);
}, onFocus: () { }, onFocus: () {
log('IdentityCreatorView::_buildHtmlEditorWeb(): onFocus');
FocusManager.instance.primaryFocus?.unfocus(); FocusManager.instance.primaryFocus?.unfocus();
Future.delayed(const Duration(milliseconds: 500), () { Future.delayed(const Duration(milliseconds: 500), () {
controller.richTextWebController.editorController.setFocus(); controller.richTextWebController.editorController.setFocus();
}); });
controller.richTextWebController.closeAllMenuPopup(); controller.richTextWebController.closeAllMenuPopup();
}, onChangeSelection: (settings) { },
controller.richTextWebController.onEditorSettingsChange(settings); onChangeSelection: controller.richTextWebController.onEditorSettingsChange,
}, onChangeCodeview: (contentChanged) { onChangeCodeview: controller.updateContentHtmlEditor
log('IdentityCreatorView::_buildHtmlEditorWeb(): onChangeCodeView : $contentChanged');
controller.updateContentHtmlEditor(contentChanged);
}),
), ),
); );
} }
Widget _buildHtmlEditor(BuildContext context, {String? initialContent}) { Widget _buildHtmlEditor(BuildContext context, {String? initialContent}) {
return Padding( return HtmlEditor(
padding: const EdgeInsets.all(16),
child: HtmlEditor(
key: controller.htmlKey, key: controller.htmlKey,
minHeight: controller.htmlEditorMinHeight, minHeight: controller.htmlEditorMinHeight,
addDefaultSelectionMenuItems: false, addDefaultSelectionMenuItems: false,
initialContent: initialContent ?? '', initialContent: initialContent ?? '',
customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)), customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi), onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi),
),
); );
} }
Widget _buildActionButtonDesktop(BuildContext context) { Widget _buildActionButtonDesktop(BuildContext context) {
return Row( return Row(
children: [ children: [
_buildCheckboxIdentityDefault(context), Expanded(child: _buildCheckboxIdentityDefault(context)),
Expanded( const SizedBox(width: 12),
child: Padding(
padding: const EdgeInsetsDirectional.only(
top: 24.0,
bottom: 40.0,
start: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_buildCancelButton(context, width: 156), _buildCancelButton(context, width: 156),
const SizedBox(width: 12), const SizedBox(width: 12),
_buildSaveButton(context, width: 156), _buildSaveButton(context, width: 156)
],
),
),
)
], ],
); );
} }
Widget _buildActionButtonMobile(BuildContext context) { Widget _buildActionButtonMobile(BuildContext context) {
return Column(children: [ return Column(children: [
Padding( _buildCheckboxIdentityDefault(context),
padding: const EdgeInsets.only(top: 24), const SizedBox(height: 24),
child: _buildCheckboxIdentityDefault(context)), Row(children: [
Container(
alignment: Alignment.center,
color: Colors.white,
padding: const EdgeInsets.only(top: 24, bottom: 64),
child: Row(children: [
Expanded(child: _buildCancelButton(context)), Expanded(child: _buildCancelButton(context)),
const SizedBox(width: 12), const SizedBox(width: 12),
Expanded(child: _buildSaveButton(context)) Expanded(child: _buildSaveButton(context))
]), ])
)
]); ]);
} }
@@ -42,8 +42,8 @@ class SetDefaultIdentityCheckboxBuilder extends StatelessWidget {
)), )),
), ),
), ),
Padding( const SizedBox(width: 8),
padding: const EdgeInsetsDirectional.only(start: 8), Flexible(
child: Text( child: Text(
AppLocalizations.of(context).setDefaultIdentity, AppLocalizations.of(context).setDefaultIdentity,
style: const TextStyle( style: const TextStyle(