diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 7ee0efdd9..46487fa1d 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -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)], diff --git a/core/lib/presentation/views/dialog/color_picker_dialog_builder.dart b/core/lib/presentation/views/dialog/color_picker_dialog_builder.dart index cf66033cf..2e521e3f1 100644 --- a/core/lib/presentation/views/dialog/color_picker_dialog_builder.dart +++ b/core/lib/presentation/views/dialog/color_picker_dialog_builder.dart @@ -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, diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index be1566f62..331a34df1 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -735,9 +735,10 @@ class ComposerView extends GetWidget } 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 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), diff --git a/lib/features/composer/presentation/controller/base_rich_text_controller.dart b/lib/features/composer/presentation/controller/base_rich_text_controller.dart index 682608393..49801bbda 100644 --- a/lib/features/composer/presentation/controller/base_rich_text_controller.dart +++ b/lib/features/composer/presentation/controller/base_rich_text_controller.dart @@ -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(); diff --git a/lib/features/composer/presentation/controller/rich_text_web_controller.dart b/lib/features/composer/presentation/controller/rich_text_web_controller.dart index 45d468f29..302125c96 100644 --- a/lib/features/composer/presentation/controller/rich_text_web_controller.dart +++ b/lib/features/composer/presentation/controller/rich_text_web_controller.dart @@ -20,6 +20,7 @@ class RichTextWebController extends BaseRichTextController { final listTextStyleApply = RxList(); 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); diff --git a/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart b/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart index a286496a5..d9cfa3f20 100644 --- a/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart +++ b/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart @@ -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, diff --git a/lib/features/composer/presentation/model/rich_text_style_type.dart b/lib/features/composer/presentation/model/rich_text_style_type.dart index ba76c5fe7..5eb001896 100644 --- a/lib/features/composer/presentation/model/rich_text_style_type.dart +++ b/lib/features/composer/presentation/model/rich_text_style_type.dart @@ -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 ''; } diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 7df84a3a8..4479c2ec0 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -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": {} } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 7404868f0..b1882d2cb 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -1707,4 +1707,10 @@ class AppLocalizations { 'Text Color', name: 'formatTextColor'); } + + String get formatTextBackgroundColor { + return Intl.message( + 'Text Background Color', + name: 'formatTextBackgroundColor'); + } } \ No newline at end of file