refactor(ui-kit): update giphy interaction (#361)

* refactor(ui-kit): update giphy interaction

Signed-off-by: Sahil Kumar <[email protected]>

* fix overflow

Co-authored-by: Salvatore Giordano <[email protected]>
This commit is contained in:
Sahil Kumar
2021-03-30 15:11:20 +02:00
committed by GitHub
co-authored by Salvatore Giordano
parent 420d6384c4
commit 3dcf1f5eb4
@@ -59,138 +59,57 @@ class GiphyAttachment extends AttachmentWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
Stack( Padding(
children: [ padding: const EdgeInsets.all(8.0),
Padding( child: Row(
padding: const EdgeInsets.all(8.0), children: [
child: GestureDetector( StreamSvgIcon.giphyIcon(),
onTap: () => onAttachmentTap ?? _onImageTap(context), SizedBox(width: 8),
child: ClipRRect( Text(
borderRadius: BorderRadius.only( 'Giphy',
topLeft: Radius.circular(8), style: TextStyle(fontWeight: FontWeight.bold),
topRight: Radius.circular(8),
),
child: CachedNetworkImage(
height: size?.height,
width: size?.width,
placeholder: (_, __) {
return Container(
width: size?.width,
height: size?.height,
child: Center(
child: CircularProgressIndicator(),
),
);
},
imageUrl: imageUrl,
errorWidget: (context, url, error) {
return AttachmentError(size: size);
},
fit: BoxFit.cover,
),
),
), ),
), SizedBox(width: 8),
Positioned( if (attachment.title != null)
bottom: 16, Flexible(
left: 16, child: Text(
child: Material( attachment.title,
color: StreamChatTheme.of(context) style: TextStyle(
.colorTheme color: StreamChatTheme.of(context)
.black .colorTheme
.withOpacity(.5), .black
shape: RoundedRectangleBorder( .withOpacity(0.5),
borderRadius: BorderRadius.circular(12), ),
), overflow: TextOverflow.ellipsis,
child: Padding( maxLines: 1,
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: Row(
children: [
StreamSvgIcon.lightning(
color:
StreamChatTheme.of(context).colorTheme.white,
size: 16,
),
Text(
'GIPHY',
style: TextStyle(
color: StreamChatTheme.of(context)
.colorTheme
.white,
fontWeight: FontWeight.bold,
fontSize: 11,
),
),
],
), ),
), ),
), ],
), ),
],
), ),
if (attachment.title != null) Padding(
Container( padding: const EdgeInsets.all(2.0),
alignment: Alignment.bottomCenter, child: GestureDetector(
child: Padding( onTap: () => onAttachmentTap ?? _onImageTap(context),
padding: const EdgeInsets.symmetric(horizontal: 8.0), child: CachedNetworkImage(
child: Row( height: size?.height,
mainAxisAlignment: MainAxisAlignment.spaceBetween, width: size?.width,
children: [ placeholder: (_, __) {
Card( return Container(
color: Colors.white, width: size?.width,
elevation: 2, height: size?.height,
shape: CircleBorder(), child: Center(
child: IconButton( child: CircularProgressIndicator(),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tight(Size(32, 32)),
icon: StreamSvgIcon.left(
size: 24.0,
),
splashRadius: 16,
onPressed: () {
streamChannel.channel.sendAction(message, {
'image_action': 'shuffle',
});
},
),
), ),
Expanded( );
child: Center( },
child: Text( imageUrl: imageUrl,
'"${attachment.title}"', errorWidget: (context, url, error) {
style: TextStyle( return AttachmentError(size: size);
fontStyle: FontStyle.italic, },
), fit: BoxFit.cover,
),
),
),
Card(
color: Colors.white,
elevation: 2,
shape: CircleBorder(),
child: IconButton(
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tight(Size(32, 32)),
icon: StreamSvgIcon.right(
size: 24.0,
),
splashRadius: 16,
onPressed: () {
streamChannel.channel.sendAction(message, {
'image_action': 'shuffle',
});
},
),
),
],
),
), ),
), ),
SizedBox(
height: 4.0,
), ),
Container( Container(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
@@ -236,6 +155,38 @@ class GiphyAttachment extends AttachmentWidget {
.withOpacity(0.2), .withOpacity(0.2),
height: 50.0, height: 50.0,
), ),
Expanded(
child: Container(
height: 50,
child: TextButton(
onPressed: () {
streamChannel.channel.sendAction(message, {
'image_action': 'shuffle',
});
},
child: Text(
'Shuffle',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
),
),
),
),
Container(
width: 0.5,
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.2),
height: 50.0,
),
Expanded( Expanded(
child: Container( child: Container(
height: 50, height: 50,
@@ -261,9 +212,7 @@ class GiphyAttachment extends AttachmentWidget {
], ],
), ),
), ),
SizedBox( SizedBox(height: 4.0),
height: 4.0,
),
Align( Align(
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: Padding( child: Padding(