Apply new style for create identity view on desktop
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
@@ -27,16 +27,16 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
|
||||
final ResponsiveUtils _responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final EdgeInsetsGeometry? padding;
|
||||
final List<Widget>? extendedOption;
|
||||
final AlignmentGeometry? alignment;
|
||||
final Decoration? decoration;
|
||||
final bool isHorizontalArrange;
|
||||
|
||||
ToolbarRichTextWebBuilder({
|
||||
Key? key,
|
||||
required this.richTextWebController,
|
||||
this.padding,
|
||||
this.extendedOption,
|
||||
this.alignment,
|
||||
this.decoration,
|
||||
this.isHorizontalArrange = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
@@ -45,222 +45,255 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
|
||||
final codeViewEnabled = richTextWebController.codeViewEnabled;
|
||||
final opacity = codeViewEnabled ? 0.5 : 1.0;
|
||||
|
||||
final listAction = [
|
||||
if (extendedOption?.isNotEmpty == true) ...extendedOption!,
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropDownMenuHeaderStyleWidget(
|
||||
icon: buildWrapIconStyleText(
|
||||
isSelected: richTextWebController.isMenuHeaderStyleOpen,
|
||||
icon: SvgPicture.asset(
|
||||
RichTextStyleType.headerStyle.getIcon(_imagePaths),
|
||||
colorFilter: AppColor.colorDefaultRichTextButton
|
||||
.withValues(alpha: opacity)
|
||||
.asFilter(),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
tooltip: RichTextStyleType.headerStyle.getTooltipButton(context),
|
||||
),
|
||||
items: HeaderStyleType.values,
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuHeaderStyleStatus.value = newStatus;
|
||||
},
|
||||
onChanged: richTextWebController.applyHeaderStyle,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropdownMenuFontSizeWidget(
|
||||
onChanged: richTextWebController.applyNewFontSize,
|
||||
selectedFontSize: richTextWebController.selectedFontSize.value,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: SizedBox(
|
||||
width: 130,
|
||||
child: DropDownButtonWidget<FontNameType>(
|
||||
items: FontNameType.values,
|
||||
itemSelected: richTextWebController.selectedFontName.value,
|
||||
onChanged: (newFont) =>
|
||||
richTextWebController.applyNewFontStyle(newFont),
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuFontStatus.value = newStatus;
|
||||
},
|
||||
heightItem: 40,
|
||||
sizeIconChecked: 16,
|
||||
radiusButton: 8,
|
||||
opacity: opacity,
|
||||
dropdownWidth: 200,
|
||||
colorButton: richTextWebController.isMenuFontOpen
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: Colors.white,
|
||||
iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
|
||||
tooltip: RichTextStyleType.fontName.getTooltipButton(context),
|
||||
supportSelectionIcon: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
icon: buildIconWithTooltip(
|
||||
path: RichTextStyleType.textColor.getIcon(_imagePaths),
|
||||
color: richTextWebController.selectedTextColor.value,
|
||||
tooltip: RichTextStyleType.textColor.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
|
||||
spacing: 3,
|
||||
icon: buildIconColorBackgroundText(
|
||||
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
|
||||
colorSelected:
|
||||
richTextWebController.selectedTextBackgroundColor.value,
|
||||
tooltip: RichTextStyleType.textBackgroundColor
|
||||
.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textBackgroundColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
buildWrapIconStyleText(
|
||||
hasDropdown: false,
|
||||
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
|
||||
icon: Wrap(
|
||||
children: [
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.bold.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.bold),
|
||||
tooltip: RichTextStyleType.bold.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.italic.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.italic),
|
||||
tooltip: RichTextStyleType.italic.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.italic,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.underline.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.underline),
|
||||
tooltip:
|
||||
RichTextStyleType.underline.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.underline,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.strikeThrough),
|
||||
tooltip:
|
||||
RichTextStyleType.strikeThrough.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.strikeThrough,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuParagraphController,
|
||||
listButtonAction: ParagraphType.values
|
||||
.map((paragraph) => paragraph.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(paragraph) =>
|
||||
richTextWebController.applyParagraphType(paragraph)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuParagraph.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedParagraph.value
|
||||
.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.paragraph.getTooltipButton(context),
|
||||
),
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuOrderListController,
|
||||
listButtonAction: OrderListType.values
|
||||
.map((orderType) => orderType.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(orderType) =>
|
||||
richTextWebController.applyOrderListType(orderType)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuOrderList.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedOrderList.value
|
||||
.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.orderList.getTooltipButton(context),
|
||||
),
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
Widget bodyWidget;
|
||||
|
||||
if (isHorizontalArrange) {
|
||||
bodyWidget = SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
physics: const ClampingScrollPhysics(),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: listAction,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
bodyWidget = Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
|
||||
spacing: ToolbarRichTextBuilderStyle.itemHorizontalSpace,
|
||||
children: listAction,
|
||||
);
|
||||
}
|
||||
|
||||
return PointerInterceptor(
|
||||
child: Container(
|
||||
padding: padding ?? ToolbarRichTextBuilderStyle.padding,
|
||||
decoration: decoration,
|
||||
width: double.infinity,
|
||||
child: Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
|
||||
spacing: ToolbarRichTextBuilderStyle.itemHorizontalSpace,
|
||||
children: [
|
||||
if (extendedOption?.isNotEmpty == true)
|
||||
...extendedOption!,
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropDownMenuHeaderStyleWidget(
|
||||
icon: buildWrapIconStyleText(
|
||||
isSelected: richTextWebController.isMenuHeaderStyleOpen,
|
||||
icon: SvgPicture.asset(
|
||||
RichTextStyleType.headerStyle.getIcon(_imagePaths),
|
||||
colorFilter: AppColor.colorDefaultRichTextButton.withValues(alpha: opacity).asFilter(),
|
||||
fit: BoxFit.fill
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
tooltip: RichTextStyleType.headerStyle.getTooltipButton(context)
|
||||
),
|
||||
items: HeaderStyleType.values,
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuHeaderStyleStatus.value = newStatus;
|
||||
},
|
||||
onChanged: richTextWebController.applyHeaderStyle
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropdownMenuFontSizeWidget(
|
||||
onChanged: richTextWebController.applyNewFontSize,
|
||||
selectedFontSize: richTextWebController.selectedFontSize.value
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: SizedBox(
|
||||
width: 130,
|
||||
child: DropDownButtonWidget<FontNameType>(
|
||||
items: FontNameType.values,
|
||||
itemSelected: richTextWebController.selectedFontName.value,
|
||||
onChanged: (newFont) => richTextWebController.applyNewFontStyle(newFont),
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuFontStatus.value = newStatus;
|
||||
},
|
||||
heightItem: 40,
|
||||
sizeIconChecked: 16,
|
||||
radiusButton: 8,
|
||||
opacity: opacity,
|
||||
dropdownWidth: 200,
|
||||
colorButton: richTextWebController.isMenuFontOpen
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: Colors.white,
|
||||
iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
|
||||
tooltip: RichTextStyleType.fontName.getTooltipButton(context),
|
||||
supportSelectionIcon: true
|
||||
)
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
icon: buildIconWithTooltip(
|
||||
path: RichTextStyleType.textColor.getIcon(_imagePaths),
|
||||
color: richTextWebController.selectedTextColor.value,
|
||||
tooltip: RichTextStyleType.textColor.getTooltipButton(context),
|
||||
opacity: opacity
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textColor
|
||||
)
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
|
||||
spacing: 3,
|
||||
icon: buildIconColorBackgroundText(
|
||||
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
|
||||
colorSelected: richTextWebController.selectedTextBackgroundColor.value,
|
||||
tooltip: RichTextStyleType.textBackgroundColor.getTooltipButton(context),
|
||||
opacity: opacity
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textBackgroundColor
|
||||
)
|
||||
),
|
||||
),
|
||||
buildWrapIconStyleText(
|
||||
hasDropdown: false,
|
||||
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
|
||||
icon: Wrap(children: [
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.bold.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.bold),
|
||||
tooltip: RichTextStyleType.bold.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.bold
|
||||
)
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.italic.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.italic),
|
||||
tooltip: RichTextStyleType.italic.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.italic
|
||||
)
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.underline.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.underline),
|
||||
tooltip: RichTextStyleType.underline.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.underline
|
||||
)
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.strikeThrough),
|
||||
tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.strikeThrough
|
||||
)
|
||||
),
|
||||
)
|
||||
])
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuParagraphController,
|
||||
listButtonAction: ParagraphType.values
|
||||
.map((paragraph) => paragraph.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(paragraph) => richTextWebController.applyParagraphType(paragraph)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuParagraph.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedParagraph.value.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.paragraph.getTooltipButton(context)
|
||||
)
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuOrderListController,
|
||||
listButtonAction: OrderListType.values
|
||||
.map((orderType) => orderType.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(orderType) => richTextWebController.applyOrderListType(orderType)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuOrderList.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedOrderList.value.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.orderList.getTooltipButton(context)
|
||||
)
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
)
|
||||
]
|
||||
),
|
||||
child: bodyWidget,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user