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

TF-733 Apply change text background color to body composer on web

Browse Source
This commit is contained in:
dab246
2022-07-21 14:50:08 +07:00
committed by Dat H. Pham
parent 50316bfa15
commit a98c646f53
9 changed files with 96 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+2
View File
@@ -121,6 +121,8 @@ extension AppColor on Color {
static const colorButtonCancelDialog = Color(0x0D000000);
static const colorShadowComposerButton = Color(0x99007AFF);
static const colorBackgroundTagFilter = Color(0x6D7885);
static const colorDefaultRichTextButton = Color(0xFF99A2AD);
static const colorFocusRichTextButton = Color(0x146D7885);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
core/lib/presentation/views/dialog/color_picker_dialog_builder.dart
+5 -3
View File
@@ -11,6 +11,7 @@ class ColorPickerDialogBuilder {
final SelectColorActionCallback? setColorActionCallback;
final VoidCallback? cancelActionCallback;
final VoidCallback? resetToDefaultActionCallback;
final BuildContext _context;
final Color defaultColor;
final Color _currentColor;
@@ -31,9 +32,10 @@ class ColorPickerDialogBuilder {
this.textActionResetDefault,
this.defaultColor = Colors.black,
this.setColorActionCallback,
this.cancelActionCallback
this.cancelActionCallback,
this.resetToDefaultActionCallback
}
);
) : _colorSelected = _currentColor;
Future show() async {
await showDialog(context: _context, builder: (BuildContext context) {
@@ -99,7 +101,7 @@ class ColorPickerDialogBuilder {
fontWeight: FontWeight.normal),
bgColor: Colors.white,
borderColor: Colors.black26,
onTap: () => setColorActionCallback?.call(Colors.black)),
onTap: () => resetToDefaultActionCallback?.call()),
buildButtonWrapText(
textActionSetColor ?? '',
radius: 5,
lib/features/composer/presentation/composer_view_web.dart
+12 -2
View File
@@ -735,9 +735,10 @@ class ComposerView extends GetWidget<ComposerController>
}
Widget _buildToolbarRichTextWidget(BuildContext context) {
return Padding(
return Container(
padding: const EdgeInsets.only(left: 20, top: 4, bottom: 8),
child: Row(
alignment: Alignment.centerLeft,
child: Wrap(
children: RichTextStyleType.values.map((textType) => Obx(() {
switch(textType) {
case RichTextStyleType.textColor:
@@ -746,6 +747,15 @@ class ComposerView extends GetWidget<ComposerController>
colorSelected: controller.richTextWebController.selectedTextColor.value,
tooltip: textType.getTooltipButton(context),
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType));
case RichTextStyleType.textBackgroundColor:
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: buildIconColorText(
iconData: textType.getIconData(),
colorSelected: controller.richTextWebController.selectedTextBackgroundColor.value,
tooltip: textType.getTooltipButton(context),
onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
);
default:
return buildIconStyleText(
path: textType.getIcon(imagePaths),
lib/features/composer/presentation/controller/base_rich_text_controller.dart
+8 -1
View File
@@ -10,7 +10,10 @@ abstract class BaseRichTextController extends GetxController {
void openMenuSelectColor(
BuildContext context,
Color currentColor,
{Function(Color?)? onSelectColor}
{
Function(Color?)? onSelectColor,
VoidCallback? onResetToDefault,
}
) async {
await ColorPickerDialogBuilder(
context,
@@ -20,6 +23,10 @@ abstract class BaseRichTextController extends GetxController {
textActionResetDefault: AppLocalizations.of(context).resetToDefault,
textActionCancel: AppLocalizations.of(context).cancel,
cancelActionCallback: () => popBack(),
resetToDefaultActionCallback: () {
onResetToDefault?.call();
popBack();
},
setColorActionCallback: (selectedColor) {
onSelectColor?.call(selectedColor);
popBack();
lib/features/composer/presentation/controller/rich_text_web_controller.dart
+40 -2
View File
@@ -20,6 +20,7 @@ class RichTextWebController extends BaseRichTextController {
final listTextStyleApply = RxList<RichTextStyleType>();
final selectedTextColor = Colors.black.obs;
final selectedTextBackgroundColor = Colors.transparent.obs;
void onEditorSettingsChange(EditorSettings settings) {
log('RichTextWebController::onEditorSettingsChange():');
@@ -47,14 +48,23 @@ class RichTextWebController extends BaseRichTextController {
openMenuSelectColor(
context,
selectedTextColor.value,
onResetToDefault: () {
final colorAsString = (Colors.black.value & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
.toUpperCase();
selectedTextColor.value = Colors.black;
editorController.execCommand(
textStyleType.commandAction,
argument: colorAsString);
},
onSelectColor: (selectedColor) {
final newColor = selectedColor ?? Colors.black;
final colorAsString = (newColor.value & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
.toUpperCase();
log('RichTextWebController::applyRichTextStyle(): color: $newColor');
log('RichTextWebController::applyRichTextStyle(): colorAsString: $colorAsString');
log('RichTextWebController::applyRichTextStyle():selectedTextColor: colorAsString: $colorAsString');
selectedTextColor.value = newColor;
editorController.execCommand(
textStyleType.commandAction,
@@ -62,6 +72,34 @@ class RichTextWebController extends BaseRichTextController {
}
);
break;
case RichTextStyleType.textBackgroundColor:
openMenuSelectColor(
context,
selectedTextBackgroundColor.value,
onResetToDefault: () {
final colorAsString = (Colors.transparent.value & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
.toUpperCase();
selectedTextBackgroundColor.value = Colors.transparent;
editorController.execCommand(
textStyleType.commandAction,
argument: colorAsString);
},
onSelectColor: (selectedColor) {
final newColor = selectedColor ?? Colors.transparent;
final colorAsString = (newColor.value & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
.toUpperCase();
log('RichTextWebController::applyRichTextStyle():textBackgroundColor: colorAsString: $colorAsString');
selectedTextBackgroundColor.value = newColor;
editorController.execCommand(
textStyleType.commandAction,
argument: colorAsString);
}
);
break;
default:
editorController.execCommand(textStyleType.commandAction);
_selectTextStyleType(textStyleType);
lib/features/composer/presentation/mixin/rich_text_button_mixin.dart
+8 -2
View File
@@ -17,7 +17,7 @@ mixin RichTextButtonMixin {
path,
color: isSelected == true
? Colors.black
: AppColor.colorDividerMailbox,
: AppColor.colorDefaultRichTextButton,
fit: BoxFit.fill),
iconPadding: const EdgeInsets.all(4),
colorFocus: Colors.white,
@@ -33,9 +33,15 @@ mixin RichTextButtonMixin {
required VoidCallback onTap,
String? tooltip
}){
final newColor = colorSelected == Colors.transparent
? AppColor.colorDefaultRichTextButton
: colorSelected;
return buildIconWeb(
icon: Icon(iconData, color: colorSelected ?? Colors.black, size: 20),
icon: Icon(iconData, color: newColor ?? Colors.black, size: 20),
iconPadding: const EdgeInsets.all(4),
colorSelected: newColor == Colors.white
? AppColor.colorFocusRichTextButton
: Colors.transparent,
colorFocus: Colors.white,
minSize: 20,
tooltip: tooltip,
lib/features/composer/presentation/model/rich_text_style_type.dart
+8 -1
View File
@@ -8,7 +8,8 @@ enum RichTextStyleType {
italic,
underline,
strikeThrough,
textColor;
textColor,
textBackgroundColor;
String get commandAction {
switch (this) {
@@ -22,6 +23,8 @@ enum RichTextStyleType {
return 'strikeThrough';
case textColor:
return 'foreColor';
case textBackgroundColor:
return 'hiliteColor';
default:
return '';
}
@@ -46,6 +49,8 @@ enum RichTextStyleType {
switch (this) {
case textColor:
return Icons.format_color_text;
case textBackgroundColor:
return Icons.format_color_fill;
default:
return null;
}
@@ -63,6 +68,8 @@ enum RichTextStyleType {
return AppLocalizations.of(context).formatStrikethrough;
case textColor:
return AppLocalizations.of(context).formatTextColor;
case textBackgroundColor:
return AppLocalizations.of(context).formatTextBackgroundColor;
default:
return '';
}
lib/l10n/intl_messages.arb
+7 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2022-07-21T13:16:06.832687",
"@@last_modified": "2022-07-21T14:49:43.482260",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -1663,5 +1663,11 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"formatTextBackgroundColor": "Text Background Color",
"@formatTextBackgroundColor": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
lib/main/localizations/app_localizations.dart
+6
View File
@@ -1707,4 +1707,10 @@ class AppLocalizations {
'Text Color',
name: 'formatTextColor');
}
String get formatTextBackgroundColor {
return Intl.message(
'Text Background Color',
name: 'formatTextBackgroundColor');
}
}