eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-735 Display button code view in composer web

Browse Source
This commit is contained in:
dab246
2022-07-22 14:24:43 +07:00
committed by Dat H. Pham
parent b205a7a366
commit 429d882b7d
8 changed files with 121 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/base/widget/drop_down_button_widget.dart
+9 -4
View File
@@ -16,22 +16,26 @@ class DropDownButtonWidget<T> extends StatelessWidget {
final List<T> items;
final T? itemSelected;
final Function(T?)? onChanged;
final Function(bool)? onMenuStateChange;
final bool supportHint;
final bool supportSelectionIcon;
final double heightItem;
final double sizeIconChecked;
final double radiusButton;
final double opacity;
const DropDownButtonWidget({
Key? key,
required this.items,
required this.itemSelected,
this.onChanged,
this.onMenuStateChange,
this.supportHint = false,
this.supportSelectionIcon = false,
this.heightItem = 44,
this.sizeIconChecked = 20,
this.radiusButton = 10,
this.opacity = 1.0,
}) : super(key: key);
@override
@@ -46,9 +50,9 @@ class DropDownButtonWidget<T> extends StatelessWidget {
? Row(children: [
Expanded(child: Text(
_getTextItemDropdown(context, item: itemSelected),
style: const TextStyle(fontSize: 16,
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black),
color: Colors.black.withOpacity(opacity)),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
)),
@@ -95,9 +99,9 @@ class DropDownButtonWidget<T> extends StatelessWidget {
child: Row(children: [
Expanded(child: Text(
_getTextItemDropdown(context, item: itemSelected),
style: const TextStyle(fontSize: 16,
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black),
color: Colors.black.withOpacity(opacity)),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
)),
@@ -131,6 +135,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
dropdownElevation: 4,
scrollbarRadius: const Radius.circular(40),
scrollbarThickness: 6,
onMenuStateChange: onMenuStateChange,
),
),
);
lib/features/composer/presentation/composer_controller.dart
-4
View File
@@ -355,10 +355,6 @@ class ComposerController extends BaseController {
return '';
}
void setFullScreenEditor() {
richTextWebController.editorController.setFullScreen();
}
String? _getHeaderEmailQuoted(BuildContext context, ComposerArguments arguments) {
final presentationEmail = arguments.presentationEmail;
if (presentationEmail != null) {
lib/features/composer/presentation/composer_view_web.dart
+81 -36
View File
@@ -14,6 +14,7 @@ import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_b
import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
@@ -508,16 +509,22 @@ class ComposerView extends GetWidget<ComposerController>
tooltip: AppLocalizations.of(context).attach_file,
onTap: () => controller.openFilePickerByType(context, FileType.any)),
const SizedBox(width: 4),
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icInsertImage,
color: AppColor.colorTextButton,
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).insertImage,
onTap: () => controller.insertImage(
context,
maxWithEditor: constraints.maxWidth - 120)),
Obx(() {
final opacity = controller.richTextWebController.codeViewEnabled ? 0.5 : 1.0;
return AbsorbPointer(
absorbing: controller.richTextWebController.codeViewEnabled,
child: buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icInsertImage,
color: AppColor.colorTextButton.withOpacity(opacity),
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).insertImage,
onTap: () => controller.insertImage(
context,
maxWithEditor: constraints.maxWidth - 120)),
);
}),
])
)
);
@@ -598,27 +605,35 @@ class ComposerView extends GetWidget<ComposerController>
toolbarType: ToolbarType.hide,
defaultToolbarButtons: []),
otherOptions: const OtherOptions(height: 550),
callbacks: Callbacks(onBeforeCommand: (String? currentHtml) {
callbacks: Callbacks(onBeforeCommand: (currentHtml) {
log('ComposerView::_buildHtmlEditor(): onBeforeCommand : $currentHtml');
controller.setTextEditorWeb(currentHtml);
}, onChangeContent: (String? changed) {
}, onChangeContent: (changed) {
log('ComposerView::_buildHtmlEditor(): onChangeContent : $changed');
controller.setTextEditorWeb(changed);
}, onInit: () {
log('ComposerView::_buildHtmlEditor(): onInit');
controller.setTextEditorWeb(initContent);
controller.setFullScreenEditor();
controller.richTextWebController.setFullScreenEditor();
controller.richTextWebController.setEnableCodeView();
}, onFocus: () {
log('ComposerView::_buildHtmlEditor(): onFocus');
FocusManager.instance.primaryFocus?.unfocus();
Future.delayed(const Duration(milliseconds: 500), () {
controller.richTextWebController.editorController.setFocus();
});
if (controller.richTextWebController.isMenuFontOpen) {
controller.richTextWebController.closeDropdownMenuFont();
}
}, onBlur: () {
controller.onEditorFocusChange(false);
}, onMouseDown: () {
controller.onEditorFocusChange(true);
}, onChangeSelection: (settings) {
controller.richTextWebController.onEditorSettingsChange(settings);
}, onChangeCodeview: (contentChanged) {
log('ComposerView::_buildHtmlEditor(): onChangeCodeView : $contentChanged');
controller.setTextEditorWeb(contentChanged);
}),
)
)
@@ -744,40 +759,70 @@ class ComposerView extends GetWidget<ComposerController>
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: RichTextStyleType.values.map((textType) => Obx(() {
final opacity = controller.richTextWebController.codeViewEnabled ? 0.5 : 1.0;
switch(textType) {
case RichTextStyleType.textColor:
return buildIconColorText(
iconData: textType.getIconData(),
colorSelected: controller.richTextWebController.selectedTextColor.value,
tooltip: textType.getTooltipButton(context),
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType));
return AbsorbPointer(
absorbing: controller.richTextWebController.codeViewEnabled,
child: buildIconColorText(
iconData: textType.getIconData(),
colorSelected: controller.richTextWebController.selectedTextColor.value,
tooltip: textType.getTooltipButton(context),
opacity: opacity,
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
);
case RichTextStyleType.textBackgroundColor:
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: buildIconColorBackgroundText(
iconData: textType.getIconData(),
colorSelected: controller.richTextWebController.selectedTextBackgroundColor.value,
tooltip: textType.getTooltipButton(context),
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
child: AbsorbPointer(
absorbing: controller.richTextWebController.codeViewEnabled,
child: buildIconColorBackgroundText(
iconData: textType.getIconData(),
colorSelected: controller.richTextWebController.selectedTextBackgroundColor.value,
tooltip: textType.getTooltipButton(context),
opacity: opacity,
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
),
);
case RichTextStyleType.fontName:
return Container(
width: 200,
padding: const EdgeInsets.only(right: 2),
child: DropDownButtonWidget<FontNameType>(
items: FontNameType.values,
itemSelected: controller.richTextWebController.selectedFontName.value,
onChanged: (newFont) => controller.richTextWebController.applyNewFontStyle(newFont),
heightItem: 35,
sizeIconChecked: 16,
radiusButton: 5,
supportSelectionIcon: true));
default:
return AbsorbPointer(
absorbing: controller.richTextWebController.codeViewEnabled,
child: Container(
width: 200,
padding: const EdgeInsets.only(right: 2),
child: DropDownButtonWidget<FontNameType>(
items: FontNameType.values,
itemSelected: controller.richTextWebController.selectedFontName.value,
onChanged: (newFont) => controller.richTextWebController.applyNewFontStyle(newFont),
onMenuStateChange: (isOpen) {
log('ComposerView::_buildToolbarRichTextWidget(): MenuFontStatus: $isOpen');
final newStatus = isOpen
? DropdownMenuFontStatus.open
: DropdownMenuFontStatus.closed;
controller.richTextWebController.menuFontStatus = newStatus;
},
heightItem: 35,
sizeIconChecked: 16,
radiusButton: 5,
opacity: opacity,
supportSelectionIcon: true)),
);
case RichTextStyleType.codeView:
return buildIconStyleText(
path: textType.getIcon(imagePaths),
isSelected: controller.richTextWebController.isTextStyleTypeSelected(textType),
tooltip: textType.getTooltipButton(context),
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType));
onTap: () => controller.richTextWebController.toggleCodeView());
default:
return AbsorbPointer(
absorbing: controller.richTextWebController.codeViewEnabled,
child: buildIconStyleText(
path: textType.getIcon(imagePaths),
isSelected: controller.richTextWebController.isTextStyleTypeSelected(textType),
tooltip: textType.getTooltipButton(context),
opacity: opacity,
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
);
}
})).toList()
),
lib/features/composer/presentation/mixin/rich_text_button_mixin.dart
+14 -7
View File
@@ -10,14 +10,15 @@ mixin RichTextButtonMixin {
required String path,
required bool? isSelected,
required VoidCallback onTap,
String? tooltip
String? tooltip,
double opacity = 1.0,
}){
return buildIconWeb(
icon: SvgPicture.asset(
path,
color: isSelected == true
? Colors.black
: AppColor.colorDefaultRichTextButton,
? Colors.black.withOpacity(opacity)
: AppColor.colorDefaultRichTextButton.withOpacity(opacity),
fit: BoxFit.fill),
iconPadding: const EdgeInsets.all(4),
colorFocus: Colors.white,
@@ -31,10 +32,13 @@ mixin RichTextButtonMixin {
required IconData? iconData,
required Color? colorSelected,
required VoidCallback onTap,
String? tooltip
String? tooltip,
double opacity = 1.0,
}){
return buildIconWeb(
icon: Icon(iconData, color: colorSelected ?? Colors.black, size: 20),
icon: Icon(iconData,
color: (colorSelected ?? Colors.black).withOpacity(opacity),
size: 20),
iconPadding: const EdgeInsets.all(4),
colorSelected: colorSelected == Colors.white
? AppColor.colorFocusRichTextButton
@@ -50,13 +54,16 @@ mixin RichTextButtonMixin {
required IconData? iconData,
required Color? colorSelected,
required VoidCallback onTap,
String? tooltip
String? tooltip,
double opacity = 1.0,
}){
final newColor = colorSelected == Colors.white
? AppColor.colorDefaultRichTextButton
: colorSelected;
return buildIconWeb(
icon: Icon(iconData, color: newColor ?? AppColor.colorDefaultRichTextButton, size: 20),
icon: Icon(iconData,
color: (newColor ?? AppColor.colorDefaultRichTextButton).withOpacity(opacity),
size: 20),
iconPadding: const EdgeInsets.all(4),
colorSelected: newColor == Colors.white
? AppColor.colorFocusRichTextButton
lib/l10n/intl_messages.arb
+7 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2022-07-21T14:49:43.482260",
"@@last_modified": "2022-07-22T14:15:06.629292",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -1669,5 +1669,11 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"codeView": "Code view",
"@codeView": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
lib/main/localizations/app_localizations.dart
+6
View File
@@ -1713,4 +1713,10 @@ class AppLocalizations {
'Text Background Color',
name: 'formatTextBackgroundColor');
}
String get codeView {
return Intl.message(
'Code view',
name: 'codeView');
}
}