diff --git a/mobile/lib/ui/sharing/show_images_prevew.dart b/mobile/lib/ui/sharing/show_images_prevew.dart index b95700bd9e..fc68f66843 100644 --- a/mobile/lib/ui/sharing/show_images_prevew.dart +++ b/mobile/lib/ui/sharing/show_images_prevew.dart @@ -1,7 +1,9 @@ +import 'dart:math' as math; import "dart:ui"; import "package:figma_squircle/figma_squircle.dart"; import "package:flutter/material.dart"; +import "package:photos/core/constants.dart"; import "package:photos/models/file/file.dart"; import "package:photos/ui/viewer/file/thumbnail_widget.dart"; @@ -22,181 +24,276 @@ class LinkPlaceholder extends StatelessWidget { ); if (length == 1) { - placeholderWidget = AspectRatio( - aspectRatio: 1, - child: _BackDrop( - backDropImage: files[0], - children: [ - Padding( - padding: const EdgeInsets.all(18.0), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20.0), - boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.5), - spreadRadius: 1, - blurRadius: 1, - offset: const Offset(1, 1), - ), - BoxShadow( - color: Colors.black.withOpacity(0.5), - spreadRadius: 1, - blurRadius: 1, - offset: const Offset(-1, -1), - ), - ], + placeholderWidget = _BackDrop( + backDropImage: files[0], + children: [ + LayoutBuilder( + builder: (context, constraints) { + final imageHeight = constraints.maxHeight * 0.9; + return Center( + child: _CustomImage( + width: imageHeight, + height: imageHeight, + file: files[0], + zIndex: 0, ), - child: ClipSmoothRect( - radius: SmoothBorderRadius( - cornerRadius: 15, - cornerSmoothing: 1, - ), - child: ThumbnailWidget( - files[0], - shouldShowArchiveStatus: false, - shouldShowSyncStatus: false, - ), - ), - ), - ), - ], - ), + ); + }, + ), + ], ); } else if (length == 2) { - placeholderWidget = AspectRatio( - aspectRatio: 1, - child: _BackDrop( - backDropImage: files[0], - children: [ - Positioned( - right: 20, - bottom: 50, - child: _CustomImage( - height: 190, - width: 190, - collages: files[1], - zIndex: 0.2, - ), - ), - Positioned( - top: 50, - left: 20, - child: _CustomImage( - height: 190, - width: 190, - collages: files[0], - zIndex: -0.2, - ), - ), - ], - ), - ); - } else if (length == 3) { - placeholderWidget = AspectRatio( - aspectRatio: 1, - child: _BackDrop( - backDropImage: files[0], - children: [ - Positioned( - top: 55, - left: 10, - child: _CustomImage( - height: 160, - width: 160, - collages: files[1], - zIndex: -0.3, - ), - ), - Positioned( - right: 10, - bottom: 50, - child: _CustomImage( - height: 160, - width: 160, - collages: files[2], - zIndex: 0.3, - ), - ), - Positioned( - top: 100, - left: 100, - child: _CustomImage( - height: 175, - width: 175, - collages: files[0], - zIndex: 0.0, - ), - ), - ], - ), - ); - } else if (length > 3) { - placeholderWidget = Padding( - padding: const EdgeInsets.all(8.0), - child: AspectRatio( - aspectRatio: 1, - child: _BackDrop( - backDropImage: files[0], - children: [ - Positioned( - top: 20, - left: 20, - child: _CustomImage( - height: 160, - width: 160, - collages: files[1], - zIndex: 0, - ), - ), - Positioned( - bottom: 15, - left: 40, - child: _CustomImage( - height: 160, - width: 160, - collages: files[2], - zIndex: 0, - ), - ), - Positioned( - top: 75, - right: 30, - child: _CustomImage( - height: 175, - width: 175, - collages: files[0], - zIndex: 0.0, - ), - ), - Positioned( - bottom: 30, - right: 40, - child: ClipSmoothRect( - radius: SmoothBorderRadius( - cornerRadius: 7.5, - cornerSmoothing: 1, - ), - child: Container( - color: Colors.white, - height: 50, - width: 50, - child: Center( - child: Text( - "+" "$length", - style: const TextStyle( - fontWeight: FontWeight.w600, - fontSize: 24, - color: Colors.black, - ), - ), + placeholderWidget = _BackDrop( + backDropImage: files[0], + children: [ + LayoutBuilder( + builder: ((context, constraints) { + final imageHeight = constraints.maxHeight * 0.52; + return Stack( + children: [ + Positioned( + top: 145, + left: 180, + child: _CustomImage( + height: imageHeight, + width: imageHeight, + file: files[1], + zIndex: 10 * math.pi / 180, ), ), - ), - ), - ], + Positioned( + top: 45, + left: 3.2, + child: _CustomImage( + height: imageHeight, + width: imageHeight, + file: files[0], + zIndex: -(10 * math.pi / 180), + imageShadow: const [ + BoxShadow( + offset: Offset(0, 0), + blurRadius: 0.84, + color: Color.fromRGBO(0, 0, 0, 0.11), + ), + BoxShadow( + offset: Offset(0.84, 0.84), + blurRadius: 1.68, + color: Color.fromRGBO(0, 0, 0, 0.09), + ), + BoxShadow( + offset: Offset(2.53, 2.53), + blurRadius: 2.53, + color: Color.fromRGBO(0, 0, 0, 0.05), + ), + BoxShadow( + offset: Offset(5.05, 4.21), + blurRadius: 2.53, + color: Color.fromRGBO(0, 0, 0, 0.02), + ), + BoxShadow( + offset: Offset(7.58, 6.74), + blurRadius: 2.53, + color: Color.fromRGBO(0, 0, 0, 0.0), + ), + ], + ), + ), + ], + ); + }), ), - ), + ], + ); + } else if (length == 3) { + placeholderWidget = _BackDrop( + backDropImage: files[0], + children: [ + LayoutBuilder( + builder: (context, constraint) { + final imageHeightSmall = constraint.maxHeight * 0.43; + final imageHeightLarge = constraint.maxHeight * 0.50; + return Stack( + children: [ + Positioned( + top: 55, + child: _CustomImage( + height: imageHeightSmall, + width: imageHeightSmall, + file: files[1], + zIndex: -(20 * math.pi / 180), + ), + ), + Positioned( + bottom: 50, + right: -10, + child: _CustomImage( + height: imageHeightSmall, + width: imageHeightSmall, + file: files[2], + zIndex: 20 * math.pi / 180, + ), + ), + Center( + child: _CustomImage( + height: imageHeightLarge, + width: imageHeightLarge, + file: files[0], + zIndex: 0.0, + imageShadow: const [ + BoxShadow( + offset: Offset(0, 1.02), + blurRadius: 2.04, + color: Color.fromRGBO(0, 0, 0, 0.23), + ), + BoxShadow( + offset: Offset(0, 3.06), + blurRadius: 3.06, + color: Color.fromRGBO(0, 0, 0, 0.2), + ), + BoxShadow( + offset: Offset(0, 6.12), + blurRadius: 4.08, + color: Color.fromRGBO(0, 0, 0, 0.12), + ), + BoxShadow( + offset: Offset(0, 11.22), + blurRadius: 5.1, + color: Color.fromRGBO(0, 0, 0, 0.04), + ), + BoxShadow( + offset: Offset(0, 18.36), + blurRadius: 5.1, + color: Color.fromRGBO(0, 0, 0, 0.0), + ), + ], + ), + ), + ], + ); + }, + ), + ], + ); + } else if (length > 3) { + placeholderWidget = _BackDrop( + backDropImage: files[0], + children: [ + LayoutBuilder( + builder: (context, constraint) { + final imageHeightSmall = constraint.maxHeight * 0.43; + final imageHeightLarge = constraint.maxHeight * 0.50; + final boxHeight = constraint.maxHeight * 0.15; + return Stack( + children: [ + Positioned( + top: 30, + left: 25, + child: _CustomImage( + height: imageHeightSmall, + width: imageHeightSmall, + file: files[1], + zIndex: 0.0, + ), + ), + Positioned( + top: 202, + left: 50, + child: _CustomImage( + height: imageHeightSmall, + width: imageHeightSmall, + file: files[2], + zIndex: 0.0, + ), + ), + Positioned( + top: 75, + right: 25, + child: _CustomImage( + height: imageHeightLarge, + width: imageHeightLarge, + file: files[0], + zIndex: 0.0, + imageShadow: const [ + BoxShadow( + offset: Offset(0, 1.02), + blurRadius: 2.04, + color: Color.fromRGBO(0, 0, 0, 0.23), + ), + BoxShadow( + offset: Offset(0, 3.06), + blurRadius: 3.06, + color: Color.fromRGBO(0, 0, 0, 0.2), + ), + BoxShadow( + offset: Offset(0, 6.12), + blurRadius: 4.08, + color: Color.fromRGBO(0, 0, 0, 0.12), + ), + BoxShadow( + offset: Offset(0, 11.22), + blurRadius: 5.1, + color: Color.fromRGBO(0, 0, 0, 0.04), + ), + BoxShadow( + offset: Offset(0, 18.36), + blurRadius: 5.1, + color: Color.fromRGBO(0, 0, 0, 0.0), + ), + ], + ), + ), + Positioned( + top: 290, + left: 270, + child: Stack( + children: [ + Center( + child: Container( + height: boxHeight + 3, + width: boxHeight + 3, + decoration: ShapeDecoration( + color: const Color.fromRGBO(129, 129, 129, 0.1), + shape: SmoothRectangleBorder( + borderRadius: SmoothBorderRadius( + cornerRadius: 15.0, + cornerSmoothing: 1.0, + ), + ), + ), + ), + ), + Center( + child: ClipSmoothRect( + radius: SmoothBorderRadius( + cornerRadius: 12, + cornerSmoothing: 1.0, + ), + child: Container( + height: boxHeight, + width: boxHeight, + color: const Color.fromRGBO(255, 255, 255, 1), + child: Center( + child: Text( + "+" "${length - 3}", + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 24, + color: Color.fromRGBO(0, 0, 0, 1), + fontFamily: 'Inter', + ), + ), + ), + ), + ), + ), + ], + ), + ), + ], + ); + }, + ), + ], ); } @@ -206,7 +303,6 @@ class LinkPlaceholder extends StatelessWidget { class _BackDrop extends StatelessWidget { const _BackDrop({ - super.key, required this.backDropImage, required this.children, }); @@ -216,21 +312,25 @@ class _BackDrop extends StatelessWidget { @override Widget build(BuildContext context) { - return Stack( - children: [ - ThumbnailWidget( - backDropImage, - shouldShowArchiveStatus: false, - shouldShowSyncStatus: false, - ), - BackdropFilter( - filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12), - child: Container( - color: Colors.transparent, + return AspectRatio( + aspectRatio: 1, + child: Stack( + children: [ + ThumbnailWidget( + backDropImage, + shouldShowArchiveStatus: false, + shouldShowSyncStatus: false, + thumbnailSize: thumbnailLargeSize, ), - ), - ...children, - ], + BackdropFilter( + filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12), + child: Container( + color: Colors.transparent, + ), + ), + ...children, + ], + ), ); } } @@ -239,12 +339,12 @@ class _CustomImage extends StatelessWidget { const _CustomImage({ required this.width, required this.height, - super.key, - required this.collages, + required this.file, required this.zIndex, + this.imageShadow, }); - - final EnteFile collages; + final List? imageShadow; + final EnteFile file; final double zIndex; final double height; final double width; @@ -255,35 +355,48 @@ class _CustomImage extends StatelessWidget { transform: Matrix4.rotationZ(zIndex), height: height, width: width, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20.0), - boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.5), - spreadRadius: 1, - blurRadius: 1, - offset: const Offset(1, 1), + child: Stack( + children: [ + Center( + child: Container( + height: height, + width: width, + decoration: ShapeDecoration( + color: const Color.fromRGBO(129, 129, 129, 0.1), + shadows: imageShadow, + shape: SmoothRectangleBorder( + borderRadius: SmoothBorderRadius( + cornerRadius: 21.0, + cornerSmoothing: 1.0, + ), + ), + ), + ), ), - BoxShadow( - color: Colors.black.withOpacity(0.5), - spreadRadius: 1, - blurRadius: 1, - offset: const Offset(-1, -1), + Center( + child: SizedBox( + height: height - 5, + width: width - 5, + child: ClipSmoothRect( + radius: SmoothBorderRadius( + cornerRadius: 16.0, + cornerSmoothing: 1, + ), + clipBehavior: Clip.antiAliasWithSaveLayer, + child: Container( + decoration: BoxDecoration(boxShadow: imageShadow), + child: ThumbnailWidget( + file, + shouldShowArchiveStatus: false, + shouldShowSyncStatus: false, + thumbnailSize: thumbnailLargeSize, + ), + ), + ), + ), ), ], ), - child: ClipSmoothRect( - radius: SmoothBorderRadius( - cornerRadius: 20.0, - cornerSmoothing: 1, - ), - clipBehavior: Clip.antiAliasWithSaveLayer, - child: ThumbnailWidget( - collages, - shouldShowArchiveStatus: false, - shouldShowSyncStatus: false, - ), - ), ); } } diff --git a/mobile/lib/utils/share_util.dart b/mobile/lib/utils/share_util.dart index aeb1e6bdab..57e2a68fa5 100644 --- a/mobile/lib/utils/share_util.dart +++ b/mobile/lib/utils/share_util.dart @@ -223,5 +223,5 @@ Future shareImageAndUrl( String imagePath, String url, ) async { - await Share.shareFiles([imagePath], text: url); + await Share.shareXFiles([XFile(imagePath)], text: url); }