feat: added profile picture

impaktfull · Oct 13, 2024 · 2501492 · 2501492
1 parent eb232f2
commit 2501492
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 41 deletions.
diff --git a/example/assets/images/profile_picture.png b/example/assets/images/profile_picture.png
diff --git a/example/lib/src/component_library/components/markdown/markdown_library_item.dart b/example/lib/src/component_library/components/markdown/markdown_library_item.dart
@@ -20,4 +20,3 @@ class MarkdownLibraryInputs extends ComponentLibraryInputs {
   @override
   List<ComponentLibraryInputItem> buildInputItems() => [];
 }
-
diff --git a/example/lib/src/component_library/components/markdown/markdown_library_variant.dart b/example/lib/src/component_library/components/markdown/markdown_library_variant.dart
@@ -4,14 +4,16 @@ import 'package:impaktfull_ui_example/src/component_library/components/markdown/
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 import 'package:impaktfull_ui_example/src/util/network_images.dart';
 
-class MarkdownLibraryVariant extends ComponentLibraryVariant<MarkdownLibraryPrimaryInputs> {
+class MarkdownLibraryVariant
+    extends ComponentLibraryVariant<MarkdownLibraryPrimaryInputs> {
   const MarkdownLibraryVariant();
 
   @override
   String get title => 'Default';
 
   @override
-  List<Widget> build(BuildContext context, MarkdownLibraryPrimaryInputs inputs) {
+  List<Widget> build(
+      BuildContext context, MarkdownLibraryPrimaryInputs inputs) {
     return [
       ImpaktfullUiMarkdown(
         data: '''
@@ -69,7 +71,9 @@ Paragraph
 
 ### Network image
 
-![Failed to load image!](${NetworkImages.profilePicture} "We already knew this would fail!")
+![Failed to load image!](${NetworkImages.profilePicture}failt "We already knew this would fail!")
+
+![Koen Van Looveren!](${NetworkImages.profilePicture} "Profile picture of Koen Van Looveren")
 ''',
         onOpenLink: (url) => ImpaktfullUiNotification.show(
           title: 'On url tapped',

diff --git a/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_variant.dart b/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_variant.dart
@@ -3,7 +3,8 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/wysiwyg/wysiwyg_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
-class WysiwygLibraryVariant extends ComponentLibraryVariant<WysiwygLibraryPrimaryInputs> {
+class WysiwygLibraryVariant
+    extends ComponentLibraryVariant<WysiwygLibraryPrimaryInputs> {
   const WysiwygLibraryVariant();
 
   @override

diff --git a/lib/src/components/asset/asset_widget.dart b/lib/src/components/asset/asset_widget.dart
@@ -9,7 +9,8 @@ import 'package:rive/rive.dart' hide Image;
 
 part 'asset_widget.describe.dart';
 
-class ImpaktfullUiAssetWidget extends StatelessWidget with ComponentDescriptorMixin {
+class ImpaktfullUiAssetWidget extends StatelessWidget
+    with ComponentDescriptorMixin {
   final ImpaktfullUiAsset? asset;
   final Color? color;
   final double? width;
@@ -65,7 +66,8 @@ class ImpaktfullUiAssetWidget extends StatelessWidget with ComponentDescriptorMi
     if (svgAsset != null) {
       return SvgPicture.asset(
         svgAsset,
-        colorFilter: color == null ? null : ColorFilter.mode(color, BlendMode.srcIn),
+        colorFilter:
+            color == null ? null : ColorFilter.mode(color, BlendMode.srcIn),
         width: width,
         height: height,
         package: asset.package,

diff --git a/lib/src/components/input_field/input_field.dart b/lib/src/components/input_field/input_field.dart
@@ -14,7 +14,8 @@ export 'action/input_field_action.dart';
 
 part 'input_field.describe.dart';
 
-class ImpaktfullUiInputField extends StatefulWidget with ComponentDescriptorMixin {
+class ImpaktfullUiInputField extends StatefulWidget
+    with ComponentDescriptorMixin {
   final String? label;
   final List<Widget> labelActions;
   final String? placeholder;
@@ -72,7 +73,8 @@ class _ImpaktfullUiInputFieldState extends State<ImpaktfullUiInputField> {
   @override
   void initState() {
     super.initState();
-    _controller = widget.controller ?? TextEditingController(text: widget.value);
+    _controller =
+        widget.controller ?? TextEditingController(text: widget.value);
     _focusNode = widget.focusNode ?? FocusNode();
     _focusNode.addListener(_onFocusChanged);
     if (widget.autofocus) {
@@ -88,7 +90,8 @@ class _ImpaktfullUiInputFieldState extends State<ImpaktfullUiInputField> {
     if (oldWidget.value != widget.value && _controller.text != widget.value) {
       final currentSelection = _controller.selection;
       _controller.text = widget.value ?? '';
-      if (currentSelection.isValid && currentSelection.start <= _controller.text.length) {
+      if (currentSelection.isValid &&
+          currentSelection.start <= _controller.text.length) {
         _controller.selection = currentSelection;
       }
     }
@@ -140,9 +143,14 @@ class _ImpaktfullUiInputFieldState extends State<ImpaktfullUiInputField> {
                     ),
                     borderRadius: BorderRadiusDirectional.only(
                       topStart: componentTheme.dimens.borderRadius.topStart,
-                      bottomStart: componentTheme.dimens.borderRadius.bottomStart,
-                      topEnd: trailingAction == null ? componentTheme.dimens.borderRadius.topEnd : Radius.zero,
-                      bottomEnd: trailingAction == null ? componentTheme.dimens.borderRadius.bottomEnd : Radius.zero,
+                      bottomStart:
+                          componentTheme.dimens.borderRadius.bottomStart,
+                      topEnd: trailingAction == null
+                          ? componentTheme.dimens.borderRadius.topEnd
+                          : Radius.zero,
+                      bottomEnd: trailingAction == null
+                          ? componentTheme.dimens.borderRadius.bottomEnd
+                          : Radius.zero,
                     ),
                     child: ImpaktfullUiAutoLayout.horizontal(
                       crossAxisAlignment: CrossAxisAlignment.center,
@@ -162,7 +170,8 @@ class _ImpaktfullUiInputFieldState extends State<ImpaktfullUiInputField> {
                               textSelectionTheme: TextSelectionThemeData(
                                 cursorColor: componentTheme.colors.cursor,
                                 selectionColor: componentTheme.colors.selection,
-                                selectionHandleColor: componentTheme.colors.selectionHandle,
+                                selectionHandleColor:
+                                    componentTheme.colors.selectionHandle,
                               ),
                             ),
                             child: TextField(
@@ -174,16 +183,20 @@ class _ImpaktfullUiInputFieldState extends State<ImpaktfullUiInputField> {
                               onChanged: widget.onChanged,
                               obscureText: widget.obscureText,
                               textInputAction: widget.textInputAction,
-                              keyboardType: widget.multiline ? TextInputType.multiline : widget.textInputType,
+                              keyboardType: widget.multiline
+                                  ? TextInputType.multiline
+                                  : widget.textInputType,
                               maxLines: widget.multiline ? widget.maxLines : 1,
                               minLines: widget.multiline ? 3 : 1,
                               decoration: InputDecoration(
                                 isDense: true,
                                 hintText: widget.placeholder,
                                 focusColor: Colors.transparent,
-                                hintStyle: componentTheme.textStyles.placeholder,
+                                hintStyle:
+                                    componentTheme.textStyles.placeholder,
                                 border: OutlineInputBorder(
-                                  borderRadius: componentTheme.dimens.borderRadius.value,
+                                  borderRadius:
+                                      componentTheme.dimens.borderRadius.value,
                                 ),
                                 errorBorder: InputBorder.none,
                                 enabledBorder: InputBorder.none,

diff --git a/lib/src/components/markdown/markdown.dart b/lib/src/components/markdown/markdown.dart
@@ -14,7 +14,8 @@ part 'markdown.describe.dart';
 
 typedef ImpaktfullUiMarkdownLinkCallback = FutureOr<void> Function(String url);
 
-class ImpaktfullUiMarkdown extends StatefulWidget with ComponentDescriptorMixin {
+class ImpaktfullUiMarkdown extends StatefulWidget
+    with ComponentDescriptorMixin {
   final String data;
   final ImpaktfullUiMarkdownParsers? parsers;
   final ImpaktfullUiMarkdownLinkCallback? onOpenLink;

diff --git a/lib/src/components/markdown/markdown.describe.dart b/lib/src/components/markdown/markdown.describe.dart
@@ -4,4 +4,4 @@ String _describeInstance(BuildContext context, ImpaktfullUiMarkdown instance) {
   final descriptor = ComponentDescriptor();
   descriptor.add('theme', instance.theme);
   return descriptor.describe();
-}
+}
diff --git a/lib/src/components/markdown/markdown_style.dart b/lib/src/components/markdown/markdown_style.dart
@@ -15,7 +15,8 @@ class ImpaktfullUiMarkdownTheme extends ImpaktfullUiComponentTheme {
     required this.textStyles,
   });
 
-  static ImpaktfullUiMarkdownTheme of(BuildContext context) => ImpaktfullUiTheme.of(context).components.markdown;
+  static ImpaktfullUiMarkdownTheme of(BuildContext context) =>
+      ImpaktfullUiTheme.of(context).components.markdown;
 }
 
 class ImpaktfullUiMarkdownAssetsTheme {
@@ -27,8 +28,10 @@ class ImpaktfullUiMarkdownAssetsTheme {
 
 class ImpaktfullUiMarkdownColorTheme {
   final Color code;
+  final Color error;
   const ImpaktfullUiMarkdownColorTheme({
     required this.code,
+    required this.error,
   });
 }
 
@@ -51,6 +54,8 @@ class ImpaktfullUiMarkdownTextStyleTheme {
   final TextStyle orderedList;
   final TextStyle unorderedList;
   final TextStyle code;
+  final TextStyle alt;
+  final TextStyle error;
 
   const ImpaktfullUiMarkdownTextStyleTheme({
     required this.h1,
@@ -64,5 +69,7 @@ class ImpaktfullUiMarkdownTextStyleTheme {
     required this.orderedList,
     required this.unorderedList,
     required this.code,
+    required this.alt,
+    required this.error,
   });
 }
diff --git a/lib/src/components/markdown/model/header/header_level.dart b/lib/src/components/markdown/model/header/header_level.dart
@@ -16,6 +16,7 @@ enum ImpaktfullUiMarkDownHeaderLevel {
     if (amountOfHashtags == 0 || amountOfHashtags > 6) {
       throw ArgumentError('Invalid amount of hashtags (between 1 and 6)');
     }
-    return values.firstWhere((item) => item.amountOfHashtags == amountOfHashtags);
+    return values
+        .firstWhere((item) => item.amountOfHashtags == amountOfHashtags);
   }
 }
diff --git a/lib/src/components/markdown/widget/markdown_image.dart b/lib/src/components/markdown/widget/markdown_image.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:impaktfull_ui_2/src/components/asset/asset_widget.dart';
+import 'package:impaktfull_ui_2/src/components/auto_layout/auto_layout.dart';
 import 'package:impaktfull_ui_2/src/components/markdown/markdown.dart';
 import 'package:impaktfull_ui_2/src/components/theme/theme_component_builder.dart';
 import 'package:impaktfull_ui_2/src/models/asset.dart';
@@ -25,8 +26,9 @@ class ImpaktfullUiMarkDownImage extends StatelessWidget {
     return ImpaktfullUiComponentThemeBuidler<ImpaktfullUiMarkdownTheme>(
       overrideComponentTheme: theme,
       builder: (context, componentTheme) {
-        final isAsset =
-            imageUrl.startsWith('/assets') || imageUrl.startsWith('assets/') || imageUrl.startsWith('file://assets/');
+        final isAsset = imageUrl.startsWith('/assets') ||
+            imageUrl.startsWith('assets/') ||
+            imageUrl.startsWith('file://assets/');
         if (isAsset) {
           final assetUrl = imageUrl;
           ImpaktfullUiAsset asset;
@@ -41,10 +43,41 @@ class ImpaktfullUiMarkDownImage extends StatelessWidget {
         }
         return Image.network(
           imageUrl,
-          errorBuilder: (context, error, stackTrace) => Text(
-            '${_getText()} (Failed to load image, $error)',
-            style: componentTheme.textStyles.paragraph,
-          ),
+          errorBuilder: (context, error, stackTrace) =>
+              LayoutBuilder(builder: (context, constraints) {
+            return Stack(
+              alignment: Alignment.bottomCenter,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(2),
+                  child: Placeholder(
+                    color: componentTheme.colors.error,
+                  ),
+                ),
+                Padding(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: constraints.maxWidth * 0.2,
+                    vertical: 16,
+                  ),
+                  child: ImpaktfullUiAutoLayout.vertical(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Text(
+                        _getText(),
+                        style: componentTheme.textStyles.alt,
+                        textAlign: TextAlign.center,
+                      ),
+                      Text(
+                        '(Failed to load image, $error)',
+                        style: componentTheme.textStyles.error,
+                        textAlign: TextAlign.center,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            );
+          }),
         );
       },
     );

diff --git a/lib/src/components/markdown/widget/markdown_link.dart b/lib/src/components/markdown/widget/markdown_link.dart
@@ -30,10 +30,14 @@ class ImpaktfullUiMarkDownLink extends StatelessWidget {
           child: ImpaktfullUiTooltip(
             message: altText ?? '',
             child: GestureDetector(
-              onTap: hasLink && onOpenLink != null ? () => onOpenLink!.call(link) : null,
+              onTap: hasLink && onOpenLink != null
+                  ? () => onOpenLink!.call(link)
+                  : null,
               child: Text(
                 _getText(),
-                style: hasLink ? componentTheme.textStyles.link : componentTheme.textStyles.paragraph,
+                style: hasLink
+                    ? componentTheme.textStyles.link
+                    : componentTheme.textStyles.paragraph,
               ),
             ),
           ),

diff --git a/lib/src/components/wysiwyg/formatter/markdown_formatter.dart b/lib/src/components/wysiwyg/formatter/markdown_formatter.dart
@@ -1,5 +1,3 @@
 import 'package:impaktfull_ui_2/src/components/wysiwyg/formatter/wysiwyg_formatter.dart';
 
-class MarkdownFormatter extends ImpaktfullUiWysiwygFormatter {
-
-}
+class MarkdownFormatter extends ImpaktfullUiWysiwygFormatter {}
diff --git a/lib/src/theme/asset_theme.dart b/lib/src/theme/asset_theme.dart
@@ -306,7 +306,8 @@ class ImpaktfullUiIconTheme {
         wysiwygItalic: wysiwygItalic ?? this.wysiwygItalic,
         wysiwygOrderedList: wysiwygOrderedList ?? this.wysiwygOrderedList,
         wysiwygUnorderedList: wysiwygUnorderedList ?? this.wysiwygUnorderedList,
-        wysiwygUnorderedListItem: wysiwygUnorderedListItem ?? this.wysiwygUnorderedListItem,
+        wysiwygUnorderedListItem:
+            wysiwygUnorderedListItem ?? this.wysiwygUnorderedListItem,
         wysiwygLink: wysiwygLink ?? this.wysiwygLink,
         wysiwygPhoto: wysiwygPhoto ?? this.wysiwygPhoto,
       );

diff --git a/lib/src/theme/component_theme.dart b/lib/src/theme/component_theme.dart
@@ -277,7 +277,8 @@ class ImpaktfullUiComponentsTheme {
         sectionTitle: sectionTitle ?? this.sectionTitle,
         selectableListItem: selectableListItem ?? this.selectableListItem,
         sidebarNavigation: sidebarNavigation ?? this.sidebarNavigation,
-        sidebarNavigationItem: sidebarNavigationItem ?? this.sidebarNavigationItem,
+        sidebarNavigationItem:
+            sidebarNavigationItem ?? this.sidebarNavigationItem,
         separatedColumn: separatedColumn ?? this.separatedColumn,
         simpleListItem: simpleListItem ?? this.simpleListItem,
         snackyConfigurator: snackyConfigurator ?? this.snackyConfigurator,

diff --git a/lib/src/theme/theme_default.dart b/lib/src/theme/theme_default.dart
@@ -117,11 +117,13 @@ class DefaultTheme {
       destructive: destructive ?? const Color(0xFFBD0D00),
     );
     final dimens = ImpaktfullUiDimensTheme(
-      borderRadiusExtraSmall: borderRadiusExtraSmall ?? BorderRadius.circular(4),
+      borderRadiusExtraSmall:
+          borderRadiusExtraSmall ?? BorderRadius.circular(4),
       borderRadiusSmall: borderRadiusSmall ?? BorderRadius.circular(6),
       borderRadius: borderRadiusSmall ?? BorderRadius.circular(8),
       borderRadiusLarge: borderRadiusLarge ?? BorderRadius.circular(12),
-      borderRadiusExtraLarge: borderRadiusExtraLarge ?? BorderRadius.circular(16),
+      borderRadiusExtraLarge:
+          borderRadiusExtraLarge ?? BorderRadius.circular(16),
       borderRadiusCircle: BorderRadius.circular(99999999),
     );
     final textStyles = ImpaktfullUiTextStylesTheme(
@@ -309,7 +311,8 @@ class DefaultTheme {
             alternative: textStyles.onCardPrimary.text.small.bold,
             grey: textStyles.onCard.text.small.bold,
             destructivePrimary: textStyles.onDestructive.text.small.bold,
-            destructiveAlternative: textStyles.onCardDestructive.text.small.bold,
+            destructiveAlternative:
+                textStyles.onCardDestructive.text.small.bold,
           ),
         ),
         card: ImpaktfullUiCardTheme(
@@ -550,10 +553,12 @@ class DefaultTheme {
           ),
           textStyles: ImpaktfullUiInputFieldTextStylesTheme(
             text: textStyles.onCard.text.medium,
-            placeholder: textStyles.onCardTertiary.text.medium
-                .copyWith(color: textStyles.onCardTertiary.text.medium.color?.withOpacity(0.5)),
+            placeholder: textStyles.onCardTertiary.text.medium.copyWith(
+                color: textStyles.onCardTertiary.text.medium.color
+                    ?.withOpacity(0.5)),
             hint: textStyles.onCardTertiary.text.small,
-            error: textStyles.onCardDestructive.text.small.medium.copyWith(color: colors.error),
+            error: textStyles.onCardDestructive.text.small.medium
+                .copyWith(color: colors.error),
             label: textStyles.onCard.text.small.medium,
             action: textStyles.onCard.text.small.medium,
           ),
@@ -601,6 +606,7 @@ class DefaultTheme {
           ),
           colors: ImpaktfullUiMarkdownColorTheme(
             code: colors.card2,
+            error: colors.error,
           ),
           dimens: ImpaktfullUiMarkdownDimensTheme(
             code: dimens.borderRadiusSmall,
@@ -619,6 +625,9 @@ class DefaultTheme {
             orderedList: textStyles.onCanvas.text.small.medium,
             unorderedList: textStyles.onCanvas.text.small.medium,
             code: textStyles.onCanvas.text.small,
+            alt: textStyles.onCanvas.text.small.medium,
+            error: textStyles.onCanvas.text.extraSmall
+                .copyWith(color: colors.error),
           ),
         ),
         modal: ImpaktfullUiModalTheme(
@@ -764,7 +773,8 @@ class DefaultTheme {
           textStyles: const ImpaktfullUiRadioButtonListItemTextStyleTheme(),
         ),
         refreshIndicator: ImpaktfullUiRefreshIndicatorTheme(
-          colors: ImpaktfullUiRefreshIndicatorColorTheme(loadingIndicator: colors.accent),
+          colors: ImpaktfullUiRefreshIndicatorColorTheme(
+              loadingIndicator: colors.accent),
         ),
         screen: ImpaktfullUiScreenTheme(
           assets: const ImpaktfullUiScreenAssetsTheme(),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,4 +20,3 @@ class MarkdownLibraryInputs extends ComponentLibraryInputs {
		@override
		List<ComponentLibraryInputItem> buildInputItems() => [];
		}